| Current Path : /home/e/o/l/eolienneia/www/templates/yootheme/vendor/assets/uikit-themes/master/base/ |
| Current File : /home/e/o/l/eolienneia/www/templates/yootheme/vendor/assets/uikit-themes/master/base/totop.less |
//
// Component: Totop
//
// ========================================================================
// Variables
// ========================================================================
//
// New
//
@totop-background: transparent;
@totop-hover-background: transparent;
@totop-active-background: transparent;
@internal-totop-mode: ~''; // animate
// Component
// ========================================================================
.hook-totop() {
background: @totop-background;
transition: 0.1s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
}
.hook-totop-hover() { background-color: @totop-hover-background; }
.hook-totop-active() { background-color: @totop-active-background; }
//
// Animate
//
.hook-totop-hover() when (@internal-totop-mode = animate) {
overflow: hidden;
vertical-align: middle;
svg { animation: uk-slide-top 0.3s reverse, uk-slide-bottom 0.2s 0.3s; }
}
// Miscellaneous
// ========================================================================
.hook-icon-misc() {}
// Inverse
// ========================================================================
@inverse-totop-background: transparent;
@inverse-totop-hover-background: transparent;
@inverse-totop-active-background: transparent;
.hook-inverse-totop() { background-color: @inverse-totop-background; }
.hook-inverse-totop-hover() { background-color: @inverse-totop-hover-background; }
.hook-inverse-totop-active() { background-color: @inverse-totop-active-background; }