| Current Path : /home/jeromecohp/www/templates/yootheme/vendor/assets/uikit-themes/master/base/ |
| Current File : /home/jeromecohp/www/templates/yootheme/vendor/assets/uikit-themes/master/base/tab.less |
//
// Component: Tab
//
// ========================================================================
// Variables
// ========================================================================
//
// New
//
@tab-item-background: transparent;
@tab-item-hover-background: transparent;
@tab-item-active-background: transparent;
@tab-vertical-item-padding-horizontal: @tab-item-padding-horizontal;
@tab-vertical-item-padding-vertical: @tab-item-padding-vertical;
@internal-tab-item-hover-mode: ~''; // glitch
@internal-tab-item-hover-glitch-animation: uk-glitch-skew, uk-glitch-opacity;
@internal-tab-item-hover-glitch-duration: 0.2s;
// Component
// ========================================================================
.hook-tab() {}
// Items
// ========================================================================
.hook-tab-item() {
transition: 0.1s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
}
.hook-tab-item() when not (@base-link-text-decoration = none) {
text-decoration: none;
}
// Background
.hook-tab-item() when not (@tab-item-background = transparent) {
background-color: @tab-item-background;
}
.hook-tab-item-hover() when not (@tab-item-background = @tab-item-hover-background) {
background-color: @tab-item-hover-background;
}
.hook-tab-item-active() when not (@tab-item-background = @tab-item-active-background) {
background-color: @tab-item-active-background;
}
.hook-tab-item-disabled() {}
//
// Glitch
//
.hook-tab-item-hover() when (@internal-tab-item-hover-mode = glitch) {
animation: @internal-tab-item-hover-glitch-duration ease both;
animation-name: @internal-tab-item-hover-glitch-animation;
}
// Position modifiers
// ========================================================================
.hook-tab-bottom() {}
.hook-tab-bottom-item() {}
.hook-tab-left() {}
.hook-tab-left-item() when not (@tab-vertical-item-padding-vertical = @tab-item-padding-vertical), not (@tab-vertical-item-padding-horizontal = @tab-item-padding-horizontal) {
padding: @tab-vertical-item-padding-vertical @tab-vertical-item-padding-horizontal;
}
.hook-tab-right() {}
.hook-tab-right-item() when not (@tab-vertical-item-padding-vertical = @tab-item-padding-vertical), not (@tab-vertical-item-padding-horizontal = @tab-item-padding-horizontal) {
padding: @tab-vertical-item-padding-vertical @tab-vertical-item-padding-horizontal;
}
// Miscellaneous
// ========================================================================
.hook-tab-misc() {
.uk-tab .uk-dropdown { margin-left: (@tab-margin-horizontal + @tab-item-padding-horizontal); }
}
// Inverse
// ========================================================================
@inverse-tab-item-background: transparent;
@inverse-tab-item-hover-background: transparent;
@inverse-tab-item-active-background: transparent;
.hook-inverse-tab() {}
.hook-inverse-tab-item() when not (@inverse-tab-item-background = transparent) {
background-color: @inverse-tab-item-background;
}
.hook-inverse-tab-item-hover() when not (@inverse-tab-item-background = @inverse-tab-item-hover-background) {
background-color: @inverse-tab-item-hover-background;
}
.hook-inverse-tab-item-active() when not (@inverse-tab-item-background = @inverse-tab-item-active-background) {
background-color: @inverse-tab-item-active-background;
}
.hook-inverse-tab-item-disabled() {}