File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/vendor/assets/uikit-themes/master/base/thumbnav.less
Back
// // Component: Thumbnav // // ======================================================================== // Variables // ======================================================================== // // New // @thumbnav-item-background: rgba(255,255,255,0.4); @thumbnav-item-opacity: 1; @thumbnav-item-hover-opacity: 0; @thumbnav-item-active-opacity: 0; @thumbnav-siblings-opacity: 1; @thumbnav-siblings-filter: ~''; @internal-thumbnav-item-hover-mode: ~''; // glitch @internal-thumbnav-item-hover-glitch-animation: uk-glitch-skew, uk-glitch-opacity; @internal-thumbnav-item-hover-glitch-duration: 0.2s; // Component // ======================================================================== .hook-thumbnav() {} .hook-thumbnav-item() { position: relative; &::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: @thumbnav-item-background; background-origin: border-box; transition: 0.1s ease-in-out; transition-property: background-color, border-color, box-shadow, opacity; } } .hook-thumbnav-item-hover() {} .hook-thumbnav-item-active() {} // // Opacity // .hook-thumbnav-item() when not (@thumbnav-item-opacity = 1) { &::after { opacity: @thumbnav-item-opacity; } } .hook-thumbnav-item-hover() when not (@thumbnav-item-opacity = @thumbnav-item-hover-opacity) { &::after { opacity: @thumbnav-item-hover-opacity; } } .hook-thumbnav-item-active() when not (@thumbnav-item-opacity = @thumbnav-item-active-opacity) { &::after { opacity: @thumbnav-item-active-opacity; } } // // Glitch // .hook-thumbnav-item-hover() when (@internal-thumbnav-item-hover-mode = glitch) { animation: @internal-thumbnav-item-hover-glitch-duration ease both; animation-name: @internal-thumbnav-item-hover-glitch-animation; } // Miscellaneous // ======================================================================== .hook-thumbnav-misc() {} // Siblings .hook-thumbnav-misc() when not (@thumbnav-siblings-opacity = 1), not (@thumbnav-siblings-filter = ~'') { .hook-thumbnav-item() { transition: 0.1s ease-in-out; transition-property: opacity, filter; } .uk-thumbnav:hover > * > :not(:hover) { .hook-thumbnav-siblings(); } } .hook-thumbnav-siblings() when not (@thumbnav-siblings-opacity = 1) { opacity: @thumbnav-siblings-opacity; } .hook-thumbnav-siblings() when not (@thumbnav-siblings-filter = ~'') { filter: @thumbnav-siblings-filter; } // Inverse // ======================================================================== @inverse-thumbnav-item-background: rgba(0,0,0,0.4); .hook-inverse-thumbnav-item() { &::after { background-color: @inverse-thumbnav-item-background; } } .hook-inverse-thumbnav-item-hover() {} .hook-inverse-thumbnav-item-active() {}
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Generation time: 0.03 |
proxy
|
phpinfo
|
Settings