File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/vendor/assets/uikit-themes/master/base/subnav.less
Back
// // Component: Subnav // // ======================================================================== // Variables // ======================================================================== @subnav-item-transition-duration: 0.1s; @subnav-item-text-decoration: inherit; @subnav-item-active-text-decoration: none; @subnav-pill-item-hover-backdrop-filter: ~''; @subnav-pill-item-active-backdrop-filter: ~''; @internal-subnav-pill-item-mode: ~''; // glow @internal-subnav-pill-item-glow-gradient: ~''; @internal-subnav-pill-item-glow-filter: ~''; @internal-subnav-pill-item-hover-glow-filter: ~''; @internal-subnav-pill-item-glow-opacity: 1; @internal-subnav-pill-item-hover-glow-opacity: 1; @internal-subnav-pill-item-active-glow-opacity: 1; @subnav-siblings-opacity: 1; @subnav-siblings-filter: ~''; @internal-subnav-item-hover-mode: ~''; // glitch @internal-subnav-item-hover-glitch-animation: uk-glitch-skew, uk-glitch-opacity; @internal-subnav-item-hover-glitch-duration: 0.2s; @internal-subnav-pill-item-hover-mode: ~''; // glitch @internal-subnav-pill-item-hover-glitch-animation: uk-glitch-skew, uk-glitch-opacity; @internal-subnav-pill-item-hover-glitch-duration: 0.2s; // Component // ======================================================================== .hook-subnav() {} .hook-subnav-item() { transition: @subnav-item-transition-duration ease-in-out; transition-property: color, background-color, border-color, box-shadow, opacity, filter; } .hook-subnav-item() when not (@subnav-item-text-decoration = inherit) { text-decoration: @subnav-item-text-decoration; } .hook-subnav-item-hover() {} .hook-subnav-item-active() when not (@subnav-item-active-text-decoration = none) { text-decoration: @subnav-item-active-text-decoration; } // Divider modifier // ======================================================================== .hook-subnav-divider() {} // Pill modifier // ======================================================================== .hook-subnav-pill-item() {} .hook-subnav-pill-item() when not (@base-link-text-decoration = none) { text-decoration: none; } .hook-subnav-pill-item-hover() when not (@subnav-item-hover-text-decoration = none) { text-decoration: none; } .hook-subnav-pill-item-onclick() {} .hook-subnav-pill-item-active() when not (@subnav-item-active-text-decoration = none) { text-decoration: none; } .hook-subnav-pill-item-hover() when not (@subnav-pill-item-hover-backdrop-filter = ~'') { backdrop-filter: @subnav-pill-item-hover-backdrop-filter; -webkit-backdrop-filter: @subnav-pill-item-hover-backdrop-filter; } .hook-subnav-pill-item-active() when not (@subnav-pill-item-active-backdrop-filter = ~'') { backdrop-filter: @subnav-pill-item-active-backdrop-filter; -webkit-backdrop-filter: @subnav-pill-item-active-backdrop-filter; } // // Glow // .hook-subnav-pill-item() when (@internal-subnav-pill-item-mode = glow) { &:not(.uk-hack) { position: relative; z-index: 0; background: none !important; box-shadow: none !important; border: none !important; } &::before, &::after { content: ""; position: absolute; inset: 0; z-index: -1; // Fix Safari flickering will-change: filter; } &::before { background-image: @internal-subnav-pill-item-glow-gradient; filter: @internal-subnav-pill-item-glow-filter; transition: @subnav-item-transition-duration ease-in-out; transition-property: opacity, filter; } } .hook-subnav-pill-item() when (@internal-subnav-pill-item-mode = glow) and not (@subnav-pill-item-border-radius = 0) { &::before, &::after { border-radius: @subnav-pill-item-border-radius; } } .hook-subnav-pill-item() when (@internal-subnav-pill-item-mode = glow) and not (@internal-subnav-pill-item-glow-opacity = 1) { &::before { opacity: @internal-subnav-pill-item-glow-opacity; } } .hook-subnav-pill-item-hover() when (@internal-subnav-pill-item-mode = glow) and not (@internal-subnav-pill-item-hover-glow-filter = ~'') { &::before { filter: @internal-subnav-pill-item-hover-glow-filter; } } .hook-subnav-pill-item-hover() when (@internal-subnav-pill-item-mode = glow) and not (@internal-subnav-pill-item-hover-glow-opacity = @internal-subnav-pill-item-glow-opacity) { &::before { opacity: @internal-subnav-pill-item-hover-glow-opacity; } } .hook-subnav-pill-item-active() when (@internal-subnav-pill-item-mode = glow) and not (@internal-subnav-pill-item-active-glow-opacity = @internal-subnav-pill-item-glow-opacity) { &::before { opacity: @internal-subnav-pill-item-active-glow-opacity; } } .uk-subnav-pill > * > :first-child::after:extend(.uk-subnav-pill > * > :first-child) when (@internal-subnav-pill-item-mode = glow) {} .uk-subnav-pill > * > a:hover::after:extend(.uk-subnav-pill > * > a:hover) when (@internal-subnav-pill-item-mode = glow) {} .uk-subnav-pill > .uk-active > a::after:extend(.uk-subnav-pill > .uk-active > a) when (@internal-subnav-pill-item-mode = glow) {} // // Glitch // .hook-subnav-pill-item-hover() when (@internal-subnav-pill-item-hover-mode = glitch) { animation: @internal-subnav-pill-item-hover-glitch-duration ease both; animation-name: @internal-subnav-pill-item-hover-glitch-animation; } // Disabled // ======================================================================== .hook-subnav-item-disabled() {} // Miscellaneous // ======================================================================== .hook-subnav-misc() {} // Siblings .hook-subnav-misc() when not (@subnav-siblings-opacity = 1), not (@subnav-siblings-filter = ~'') { .uk-subnav:not(.uk-subnav-pill):hover > * > :first-child:not(:hover) { .hook-subnav-siblings(); } } .hook-subnav-siblings() when not (@subnav-siblings-opacity = 1) { opacity: @subnav-siblings-opacity; } .hook-subnav-siblings() when not (@subnav-siblings-filter = ~'') { filter: @subnav-siblings-filter; } // // Glitch // .hook-subnav-misc() when (@internal-subnav-item-hover-mode = glitch) { .uk-subnav:not(.uk-subnav-pill) > * > a:hover { animation: @internal-subnav-item-hover-glitch-duration ease both; animation-name: @internal-subnav-item-hover-glitch-animation; } } // Inverse // ======================================================================== @internal-inverse-subnav-pill-item-glow-gradient: ~''; .hook-inverse-subnav-item() {} .hook-inverse-subnav-item-hover() {} .hook-inverse-subnav-item-active() {} .hook-inverse-subnav-divider() {} .hook-inverse-subnav-pill-item() {} .hook-inverse-subnav-pill-item-hover() {} .hook-inverse-subnav-pill-item-onclick() {} .hook-inverse-subnav-pill-item-active() {} .hook-inverse() when (@internal-subnav-pill-item-mode = glow) and not (@internal-inverse-subnav-pill-item-glow-gradient = ~'') { .uk-subnav-pill > * > :first-child::before { background-image: @internal-inverse-subnav-pill-item-glow-gradient; } } .hook-inverse() when (@internal-subnav-pill-item-mode = glow) { .uk-subnav-pill > * > :first-child::after { background-color: @inverse-subnav-pill-item-background; .hook-inverse-subnav-pill-item(); } .uk-subnav-pill > * > a:hover::after { background-color: @inverse-subnav-pill-item-hover-background; color: @inverse-subnav-pill-item-hover-color; .hook-inverse-subnav-pill-item-hover(); } .uk-subnav-pill > .uk-active > a::after { background-color: @inverse-subnav-pill-item-active-background; .hook-inverse-subnav-pill-item-active(); } } .hook-inverse-subnav-item-disabled() {}
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Generation time: 0.04 |
proxy
|
phpinfo
|
Settings