mediawiki-skins-MinervaNeue/resources/skins.minerva.options/backtotop.less
Volker E 1f27981ed1 Consistently use .transform() mixin
Make use of mediawiki.mixins' `.transform()` mixin for widest available
browser support.
Follow-up to I720e62a578f0c7a14f4b5a698004471c85e54bc8

Change-Id: I771a5a6e2020e323bf4cefdb944c26bdcce26ee2
2019-09-03 15:33:10 -07:00

43 lines
847 B
Plaintext

@import '../../minerva.less/minerva.variables.less';
@import 'mediawiki.mixins.less';
.backtotop {
/* initially hide the element */
visibility: hidden;
opacity: 0;
/* basic styling */
position: fixed;
width: 2.5em;
height: 2.5em;
border-radius: 100%;
box-shadow: 0.1em 0.2em 0.3em @colorGray12;
bottom: 20px;
right: 0;
cursor: pointer;
z-index: @z-indexOverlay;
background-color: @colorProgressive;
/* define what happens, if the visible class is added/removed, add a nice fade out/in */
.transition( opacity 0.5s 0s );
&.visible {
&:hover {
opacity: 1;
}
opacity: 0.8;
}
> .arrow-up {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #fff;
position: absolute;
top: 50%;
left: 50%;
.transform( translate( -50%, -50% ) );
}
}