605 lines
23 KiB
Plaintext
Executable File
605 lines
23 KiB
Plaintext
Executable File
// /**
|
|
// * Copyright © Magento, Inc. All rights reserved.
|
|
// * See COPYING.txt for license details.
|
|
// */
|
|
|
|
//
|
|
// Navigation
|
|
// _____________________________________________
|
|
|
|
.lib-main-navigation(
|
|
@_nav__indent-side: 15px,
|
|
@_nav-background-color: @navigation__background,
|
|
@_nav-border: @navigation__border,
|
|
@_nav-level0-font-size: @navigation-level0-item__font-size,
|
|
@_nav-level0-font-weight: @navigation-level0-item__font-weight,
|
|
@_nav-level0-item-line-height: @navigation-level0-item__line-height,
|
|
@_nav-level0-item-margin: @navigation-level0-item__margin,
|
|
@_nav-level0-item-padding: @navigation-level0-item__padding,
|
|
@_nav-level0-text-transform: @navigation-level0-item__text-transform,
|
|
|
|
@_nav-level0-item-background-color: @navigation-level0-item__background,
|
|
@_nav-level0-item-border: @navigation-level0-item__border,
|
|
@_nav-level0-item-color: @navigation-level0-item__color,
|
|
@_nav-level0-item-text-decoration: @navigation-level0-item__text-decoration,
|
|
|
|
@_nav-level0-item-background-color-active: @navigation-level0-item__active__background,
|
|
@_nav-level0-item__active__border-color: @navigation-level0-item__active__border-color,
|
|
@_nav-level0-item__active__border-style: @navigation-level0-item__active__border-style,
|
|
@_nav-level0-item__active__border-width: @navigation-level0-item__active__border-width,
|
|
@_nav-level0-item-color-active: @navigation-level0-item__active__color,
|
|
@_nav-level0-item-text-decoration-active: @navigation-level0-item__active__text-decoration,
|
|
|
|
@_submenu-background-color: @submenu__background,
|
|
@_submenu-border: @submenu__border,
|
|
@_submenu-font-size: @submenu__font-size,
|
|
@_submenu-font-weight: @submenu__font-weight,
|
|
@_submenu-line-height: @submenu-item__line-height,
|
|
@_submenu-item__padding-top: @submenu__padding-top,
|
|
@_submenu-item__padding-right: @submenu__padding-right,
|
|
@_submenu-item__padding-bottom: @submenu__padding-bottom,
|
|
@_submenu-item__padding-left: @submenu__padding-left,
|
|
|
|
@_submenu-item-background-color: @submenu-item__background,
|
|
@_submenu-item-border: @submenu-item__border,
|
|
@_submenu-item-color: @submenu-item__color,
|
|
@_submenu-item-text-decoration: @submenu-item__text-decoration,
|
|
|
|
@_submenu-item-background-color-active: @submenu-item__active__background,
|
|
@_submenu-item__active__border: @submenu-item__active__border,
|
|
@_submenu-item__active__border-color: @submenu-item__active__border-color,
|
|
@_submenu-item__active__border-style: @submenu-item__active__border-style,
|
|
@_submenu-item__active__border-width: @submenu-item__active__border-width,
|
|
@_submenu-item-color-active: @submenu-item__active__color,
|
|
@_submenu-item-text-decoration-active: @submenu-item__active__text-decoration
|
|
) {
|
|
.navigation {
|
|
.lib-css(background, @_nav-background-color);
|
|
.lib-css(border, @_nav-border);
|
|
box-sizing: border-box;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
.lib-css(padding-top, @_submenu-item__padding-top);
|
|
.lib-css(padding-right, @_submenu-item__padding-right);
|
|
.lib-css(padding-bottom, @_submenu-item__padding-bottom);
|
|
.lib-css(padding-left, @_submenu-item__padding-left);
|
|
}
|
|
|
|
a,
|
|
a:hover {
|
|
.lib-css(color, @_nav-level0-item-color);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration);
|
|
}
|
|
|
|
.level0 {
|
|
.lib-css(border-top, @_nav-level0-item-border);
|
|
.lib-font-size(@_nav-level0-font-size);
|
|
|
|
> .level-top {
|
|
.lib-css(background, @_nav-level0-item-background-color);
|
|
.lib-css(font-weight, @_nav-level0-font-weight);
|
|
.lib-css(line-height, @_nav-level0-item-line-height);
|
|
.lib-css(padding, @_nav-level0-item-padding);
|
|
.lib-css(text-transform, @_nav-level0-text-transform);
|
|
word-wrap: break-word;
|
|
&:hover {
|
|
.lib-css(color, @navigation-level0-item__hover__color);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.all-category {
|
|
.ui-state-focus {
|
|
.lib-css(background, @_nav-level0-item-background-color-active);
|
|
.lib-css(border-color, @_nav-level0-item__active__border-color);
|
|
.lib-css(border-style, @_nav-level0-item__active__border-style);
|
|
.lib-css(border-width, @_nav-level0-item__active__border-width);
|
|
.lib-css(color, @_nav-level0-item-color-active);
|
|
.lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration-active);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .level1 {
|
|
.lib-css(font-weight, @font-weight__semibold);
|
|
}
|
|
|
|
&.active,
|
|
&.has-active { // ToDo UI: remove "has_active" here, when mobile navigation default open state is implemented
|
|
> a:not(.ui-state-active) {
|
|
.lib-css(background, @_nav-level0-item-background-color-active);
|
|
.lib-css(border-color, @_nav-level0-item__active__border-color);
|
|
.lib-css(border-style, @_nav-level0-item__active__border-style);
|
|
.lib-css(border-width, @_nav-level0-item__active__border-width);
|
|
.lib-css(color, @_nav-level0-item-color-active);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration-active);
|
|
|
|
span:not(.ui-menu-icon) {
|
|
.lib-css(margin-left, -@_submenu-item__active__border);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li.level0 {
|
|
&:last-child {
|
|
.lib-css(border-bottom, @_nav-level0-item-border);
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
> li {
|
|
word-wrap: break-word;
|
|
> a {
|
|
&:hover {
|
|
.lib-css(color, @navigation-level0-item__hover__color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
.lib-css(background, @_submenu-background-color);
|
|
.lib-css(border, @_submenu-border);
|
|
.lib-css(font-size, @_submenu-font-size);
|
|
.lib-css(font-weight, @_submenu-font-weight);
|
|
.lib-css(line-height, @_submenu-line-height);
|
|
left: auto !important;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
position: relative;
|
|
top: auto !important;
|
|
transition: left .3s ease-out;
|
|
|
|
> li {
|
|
> a {
|
|
.lib-css(padding-left, @_nav__indent-side);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: block;
|
|
.lib-css(padding-left, @_submenu-item__padding-left);
|
|
|
|
> li {
|
|
margin: 0;
|
|
|
|
a {
|
|
.lib-css(background, @_submenu-item-background-color);
|
|
.lib-css(border, @_submenu-item-border);
|
|
.lib-css(color, @_submenu-item-color);
|
|
.lib-css(text-decoration, @_submenu-item-text-decoration);
|
|
display: block;
|
|
line-height: normal;
|
|
&:hover {
|
|
.lib-css(color, @navigation-level0-item__hover__color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.expanded {
|
|
display: block !important;
|
|
padding-right: 0;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.active {
|
|
> a {
|
|
.lib-css(background, @_submenu-item-background-color-active);
|
|
.lib-css(border-color, @_submenu-item__active__border-color);
|
|
.lib-css(border-style, @_submenu-item__active__border-style);
|
|
.lib-css(border-width, @_submenu-item__active__border-width);
|
|
.lib-css(color, @_submenu-item-color-active);
|
|
.lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
|
|
.lib-css(text-decoration, @_submenu-item-text-decoration-active);
|
|
}
|
|
}
|
|
|
|
.level1 {
|
|
&.active {
|
|
> a {
|
|
.lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Desktop
|
|
// _____________________________________________
|
|
|
|
.lib-main-navigation-desktop(
|
|
@_nav-background-color: @navigation-desktop__background,
|
|
@_nav-border: @navigation-desktop__border,
|
|
@_nav-font-size: @navigation-desktop__font-size,
|
|
@_nav-font-weight: @navigation-desktop__font-weight,
|
|
|
|
@_nav-level0-item-line-height: @navigation-desktop-level0-item__line-height,
|
|
@_nav-level0-item-margin: @navigation-desktop-level0-item__margin,
|
|
@_nav-level0-item-padding: @navigation-desktop-level0-item__padding,
|
|
|
|
@_nav-level0-item-background-color: @navigation-desktop-level0-item__background,
|
|
@_nav-level0-item-border: @navigation-desktop-level0-item__border,
|
|
@_nav-level0-item-color: @navigation-desktop-level0-item__color,
|
|
@_nav-level0-item-text-decoration: @navigation-desktop-level0-item__text-decoration,
|
|
|
|
@_nav-level0-item-background-color-hover: @navigation-desktop-level0-item__hover__background,
|
|
@_nav-level0-item-border-hover: @navigation-desktop-level0-item__hover__border,
|
|
@_nav-level0-item-color-hover: @navigation-desktop-level0-item__hover__color,
|
|
@_nav-level0-item-text-decoration-hover: @navigation-desktop-level0-item__hover__text-decoration,
|
|
|
|
@_nav-level0-item-background-color-active: @navigation-desktop-level0-item__active__background,
|
|
@_nav-level0-item__active__border-color: @navigation-desktop-level0-item__active__border-color,
|
|
@_nav-level0-item__active__border-style: @navigation-desktop-level0-item__active__border-style,
|
|
@_nav-level0-item__active__border-width: @navigation-desktop-level0-item__active__border-width,
|
|
@_nav-level0-item-color-active: @navigation-desktop-level0-item__active__color,
|
|
@_nav-level0-item-text-decoration-active: @navigation-desktop-level0-item__active__text-decoration,
|
|
|
|
@_submenu-background-color: @submenu-desktop__background,
|
|
@_submenu-border-width: @submenu-desktop__border-width,
|
|
@_submenu-border-style: @submenu-desktop__border-style,
|
|
@_submenu-border-color: @submenu-desktop__border-color,
|
|
@_submenu-box-shadow: @submenu-desktop__box-shadow,
|
|
@_submenu-font-size: @submenu-desktop__font-size,
|
|
@_submenu-font-weight: @submenu-desktop__font-weight,
|
|
@_submenu-min-width: @submenu-desktop__min-width,
|
|
@_submenu-padding: @submenu-desktop__padding,
|
|
|
|
@_submenu-arrow: @submenu-desktop-arrow,
|
|
@_submenu-arrow-size: @submenu-desktop-arrow__size,
|
|
@_submenu-arrow-left: @submenu-desktop-arrow__left,
|
|
|
|
@_submenu-item-padding: @submenu-desktop-item__padding,
|
|
@_submenu-item-background-color: @submenu-desktop-item__background,
|
|
@_submenu-item-border: @submenu-desktop-item__border,
|
|
@_submenu-item-color: @submenu-desktop-item__color,
|
|
@_submenu-item-text-decoration: @submenu-desktop-item__text-decoration,
|
|
|
|
@_submenu-item__hover__background-color: @submenu-desktop-item__hover__background,
|
|
@_submenu-item-border-hover: @submenu-desktop-item__hover__border,
|
|
@_submenu-item-color-hover: @submenu-desktop-item__hover__color,
|
|
@_submenu-item-text-decoration-hover: @submenu-desktop-item__hover__text-decoration,
|
|
|
|
@_submenu-item-background-color-active: @submenu-desktop-item__active__background,
|
|
@_submenu-item__active__border-color: @submenu-desktop-item__active__border-color,
|
|
@_submenu-item__active__border-style: @submenu-desktop-item__active__border-style,
|
|
@_submenu-item__active__border-width: @submenu-desktop-item__active__border-width,
|
|
@_submenu-item-color-active: @submenu-desktop-item__active__color,
|
|
@_submenu-item-text-decoration-active: @submenu-desktop-item__active__text-decoration
|
|
) {
|
|
|
|
.navigation {
|
|
.lib-css(background, @_nav-background-color);
|
|
.lib-css(border, @_nav-border);
|
|
.lib-css(font-size, @_nav-font-size);
|
|
.lib-css(font-weight, @_nav-font-weight);
|
|
height: inherit;
|
|
left: auto;
|
|
overflow: inherit;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
li.level0 {
|
|
.lib-css(border-top, none);
|
|
}
|
|
|
|
li.level1 {
|
|
position: relative;
|
|
}
|
|
|
|
.level0 {
|
|
.lib-css(margin, @_nav-level0-item-margin);
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
&:hover {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
width: 10px;
|
|
height: calc(~'100% + 3px');
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
> .level-top {
|
|
.lib-css(background, @_nav-level0-item-background-color);
|
|
.lib-css(border, @_nav-level0-item-border);
|
|
.lib-css(color, @_nav-level0-item-color);
|
|
.lib-css(line-height, @_nav-level0-item-line-height);
|
|
.lib-css(padding, @_nav-level0-item-padding);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&:hover, &.ui-state-focus {
|
|
.lib-css(background, @_nav-level0-item-background-color-hover);
|
|
.lib-css(border, @_nav-level0-item-border-hover);
|
|
.lib-css(color, @_nav-level0-item-color-hover);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration-hover);
|
|
}
|
|
}
|
|
|
|
&.active,
|
|
&.has-active {
|
|
> .level-top {
|
|
.lib-css(background, @_nav-level0-item-background-color-active);
|
|
.lib-css(border-color, @_nav-level0-item__active__border-color);
|
|
.lib-css(border-style, @_nav-level0-item__active__border-style);
|
|
.lib-css(border-width, @_nav-level0-item__active__border-width);
|
|
.lib-css(color, @_nav-level0-item-color-active);
|
|
.lib-css(text-decoration, @_nav-level0-item-text-decoration-active);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&.parent:hover > .submenu {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
&.parent {
|
|
> .level-top {
|
|
padding-right: 20px;
|
|
|
|
> .ui-menu-icon {
|
|
position: absolute;
|
|
right: 0;
|
|
|
|
.lib-icon-font(
|
|
@icon-down,
|
|
@_icon-font-size: 12px,
|
|
@_icon-font-line-height: 20px,
|
|
@_icon-font-text-hide: true,
|
|
@_icon-font-position: after
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
.lib-css(background, @_submenu-background-color);
|
|
.lib-css(border, @_submenu-border-width @_submenu-border-style @_submenu-border-color);
|
|
.lib-css(box-shadow, @_submenu-box-shadow);
|
|
.lib-css(font-size, @_submenu-font-size);
|
|
.lib-css(font-weight, @_submenu-font-weight);
|
|
.lib-css(min-width, @_submenu-min-width);
|
|
.lib-css(padding, @_submenu-padding);
|
|
display: none;
|
|
left: 0;
|
|
margin: 0 !important;
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
._lib-submenu-arrow(
|
|
@_submenu-arrow,
|
|
@_bg: @_submenu-background-color,
|
|
@_border: @_submenu-border-color,
|
|
@_size: @_submenu-arrow-size,
|
|
@_left: @_submenu-arrow-left
|
|
);
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
left: 0;
|
|
top: -4px;
|
|
z-index: 1;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
line-height: inherit;
|
|
.lib-css(background, @_submenu-item-background-color);
|
|
.lib-css(border, @_submenu-item-border);
|
|
.lib-css(color, @_submenu-item-color);
|
|
.lib-css(padding, @_submenu-item-padding);
|
|
.lib-css(text-decoration, @_submenu-item-text-decoration);
|
|
|
|
&:hover,
|
|
&.ui-state-focus {
|
|
.lib-css(background, @_submenu-item__hover__background-color);
|
|
.lib-css(border, @_submenu-item-border-hover);
|
|
.lib-css(color, @_submenu-item-color-hover);
|
|
.lib-css(text-decoration, @_submenu-item-text-decoration-hover);
|
|
}
|
|
}
|
|
|
|
.active > a {
|
|
.lib-css(background, @_submenu-item-background-color-active);
|
|
.lib-css(border-color, @_submenu-item__active__border-color);
|
|
.lib-css(border-style, @_submenu-item__active__border-style);
|
|
.lib-css(border-width, @_submenu-item__active__border-width);
|
|
.lib-css(color, @_submenu-item-color-active);
|
|
.lib-css(text-decoration, @_submenu-item-text-decoration-active);
|
|
}
|
|
|
|
.submenu {
|
|
top: -1px !important;
|
|
left: 100% !important;
|
|
}
|
|
|
|
.submenu-reverse{
|
|
left: auto !important;
|
|
right: 100%;
|
|
}
|
|
|
|
li {
|
|
margin: 0;
|
|
position: relative;
|
|
|
|
&.parent {
|
|
> a {
|
|
> .ui-menu-icon {
|
|
position: absolute;
|
|
right: 3px;
|
|
|
|
.lib-icon-font(
|
|
@icon-next,
|
|
@_icon-font-size: 12px,
|
|
@_icon-font-line-height: 20px,
|
|
@_icon-font-text-hide: true,
|
|
@_icon-font-position: after
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.more {
|
|
position: relative;
|
|
.lib-icon-font(
|
|
@icon-pointer-down,
|
|
@_icon-font-size: 26px,
|
|
@_icon-font-position: after
|
|
);
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
&:after {
|
|
cursor: pointer;
|
|
padding: 8px 12px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:hover > .submenu {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Submenu arrow
|
|
._lib-submenu-arrow(
|
|
@_submenu-arrow,
|
|
@_bg,
|
|
@_border,
|
|
@_size,
|
|
@_left
|
|
) when (@_submenu-arrow = true) {
|
|
& when (iscolor(@_bg)) and (iscolor(@_border)) {
|
|
@_outer-size: @_size + 1;
|
|
@_outer-left: @_left - 1;
|
|
.lib-css(margin-top, @_outer-size);
|
|
|
|
> ul {
|
|
.lib-css(margin-top, @_outer-size);
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
&:before {
|
|
.lib-css(color, @_bg);
|
|
.lib-css(left, @_left);
|
|
.lib-css(top, -@_size*2);
|
|
.lib-arrow(up, @_size, @_bg);
|
|
z-index: 4;
|
|
}
|
|
|
|
&:after {
|
|
.lib-arrow(up, @_outer-size, @_border);
|
|
.lib-css(color, @_border);
|
|
.lib-css(left, @_outer-left);
|
|
.lib-css(top, -@_outer-size*2);
|
|
z-index: 3;
|
|
}
|
|
}
|
|
}
|
|
& when (iscolor(@_bg)) and not (iscolor(@_border)) {
|
|
.lib-css(margin-top, -@_size);
|
|
|
|
> ul {
|
|
.lib-css(margin-top, @_size);
|
|
|
|
&:before {
|
|
.lib-arrow(up, @_size, @_bg);
|
|
.lib-css(color, @_bg);
|
|
.lib-css(left, @_left);
|
|
.lib-css(top, -@_size*2);
|
|
content: '';
|
|
display: block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 4;
|
|
}
|
|
}
|
|
}
|
|
& when (iscolor(@_border)) and not (iscolor(@_bg)) {
|
|
.lib-css(margin-top, -@_size);
|
|
|
|
> ul {
|
|
.lib-css(margin-top, @_size);
|
|
|
|
&:before {
|
|
.lib-arrow(up, @_size, @_border);
|
|
.lib-css(color, @_border);
|
|
.lib-css(left, @_left);
|
|
.lib-css(top, -@_size*2);
|
|
content: '';
|
|
display: block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 4;
|
|
}
|
|
}
|
|
}
|
|
}
|