1145 lines
33 KiB
Plaintext
1145 lines
33 KiB
Plaintext
@horizontal-padding: @gutter * 0.5px;
|
|
|
|
@import "mixins.less";
|
|
@import "themes/general.less";
|
|
@import "themes/grid.less";
|
|
|
|
// Locations
|
|
// -----------------------------------------------------------------------------
|
|
|
|
.loop(@i: length(@themes)) when (@i > 0) and not (@themes = '') {
|
|
|
|
@theme: e(extract(@themes, @i));
|
|
|
|
@class: ~"quadmenu-@{theme}";
|
|
|
|
@font_font-family: "@{theme}_font_font-family";
|
|
@font_font-weight: "@{theme}_font_font-weight";
|
|
@font_font-size: "@{theme}_font_font-size";
|
|
@font_font-style: "@{theme}_font_font-style";
|
|
@font_letter-spacing: "@{theme}_font_letter-spacing";
|
|
|
|
@navbar_font_font-family: "@{theme}_navbar_font_font-family";
|
|
@navbar_font_font-weight: "@{theme}_navbar_font_font-weight";
|
|
@navbar_font_font-size: "@{theme}_navbar_font_font-size";
|
|
@navbar_font_font-style: "@{theme}_navbar_font_font-style";
|
|
@navbar_font_letter-spacing: "@{theme}_navbar_font_letter-spacing";
|
|
|
|
@dropdown_font_font-family: "@{theme}_dropdown_font_font-family";
|
|
@dropdown_font_font-weight: "@{theme}_dropdown_font_font-weight";
|
|
@dropdown_font_font-size: "@{theme}_dropdown_font_font-size";
|
|
@dropdown_font_font-style: "@{theme}_dropdown_font_font-style";
|
|
@dropdown_font_letter-spacing: "@{theme}_dropdown_font_letter-spacing";
|
|
|
|
@navbar_width: "@{theme}_navbar_width";
|
|
@navbar_height: "@{theme}_navbar_height";
|
|
@sticky_height: "@{theme}_sticky_height";
|
|
|
|
@navbar_background_color: "@{theme}_navbar_background_color";
|
|
@navbar_background_to: "@{theme}_navbar_background_to";
|
|
@navbar_background_deg: "@{theme}_navbar_background_deg";
|
|
|
|
@sticky_background_color: "@{theme}_sticky_background";
|
|
|
|
@navbar_mobile_border_color: "@{theme}_navbar_mobile_border";
|
|
|
|
@navbar_logo_bg: "@{theme}_navbar_logo_bg";
|
|
@navbar_logo_height: "@{theme}_navbar_logo_height";
|
|
@sticky_logo_height: "@{theme}_sticky_logo_height";
|
|
|
|
@navbar_link_bg: "@{theme}_navbar_link_bg";
|
|
|
|
@navbar_link_bg_hover: "@{theme}_navbar_link_bg_hover";
|
|
|
|
@navbar_divider: "@{theme}_navbar_divider";
|
|
|
|
@navbar_link_hover_effect: "@{theme}_navbar_link_hover_effect";
|
|
|
|
@navbar_link_margin_top: "@{theme}_navbar_link_margin_border-top";
|
|
@navbar_link_margin_bottom: "@{theme}_navbar_link_margin_border-bottom";
|
|
@navbar_link_margin_left: "@{theme}_navbar_link_margin_border-left";
|
|
@navbar_link_margin_right: "@{theme}_navbar_link_margin_border-right";
|
|
|
|
@navbar_link_radius_top: "@{theme}_navbar_link_radius_border-top";
|
|
@navbar_link_radius_bottom: "@{theme}_navbar_link_radius_border-bottom";
|
|
@navbar_link_radius_left: "@{theme}_navbar_link_radius_border-left";
|
|
@navbar_link_radius_right: "@{theme}_navbar_link_radius_border-right";
|
|
|
|
@navbar_button_radius_top: "@{theme}_navbar_button_radius_border-top";
|
|
@navbar_button_radius_bottom: "@{theme}_navbar_button_radius_border-bottom";
|
|
@navbar_button_radius_left: "@{theme}_navbar_button_radius_border-left";
|
|
@navbar_button_radius_right: "@{theme}_navbar_button_radius_border-right";
|
|
|
|
@dropdown_margin: "@{theme}_dropdown_margin";
|
|
@dropdown_radius_top: "@{theme}_dropdown_radius_border-top";
|
|
@dropdown_radius_right: "@{theme}_dropdown_radius_border-right";
|
|
@dropdown_radius_bottom: "@{theme}_dropdown_radius_border-bottom";
|
|
@dropdown_radius_left: "@{theme}_dropdown_radius_border-left";
|
|
@dropdown_border_color: "@{theme}_dropdown_border_border-color";
|
|
@dropdown_border_top: "@{theme}_dropdown_border_border-top";
|
|
@dropdown_border_right: "@{theme}_dropdown_border_border-right";
|
|
@dropdown_border_bottom: "@{theme}_dropdown_border_border-bottom";
|
|
@dropdown_border_left: "@{theme}_dropdown_border_border-left";
|
|
|
|
@dropdown_background: "@{theme}_dropdown_background";
|
|
|
|
@dropdown_title_border_width: "@{theme}_dropdown_title_border_border-top";
|
|
@dropdown_title_border_style: "@{theme}_dropdown_title_border_border-style";
|
|
@dropdown_title_border_color: "@{theme}_dropdown_title_border_border-color";
|
|
|
|
@dropdown_link: "@{theme}_dropdown_link";
|
|
|
|
@dropdown_link_hover: "@{theme}_dropdown_link_hover";
|
|
@dropdown_link_bg_hover: "@{theme}_dropdown_link_bg_hover";
|
|
|
|
@dropdown_link_border_width: "@{theme}_dropdown_link_border_border-top";
|
|
@dropdown_link_border_style: "@{theme}_dropdown_link_border_border-style";
|
|
@dropdown_link_border_color: "@{theme}_dropdown_link_border_border-color";
|
|
|
|
//@dropdown_link_padding_top: "@{theme}_dropdown_link_padding_border-top";
|
|
//@dropdown_link_padding_bottom: "@{theme}_dropdown_link_padding_border-bottom";
|
|
//@dropdown_link_padding_left: "@{theme}_dropdown_link_padding_border-left";
|
|
//@dropdown_link_padding_right: "@{theme}_dropdown_link_padding_border-right";
|
|
|
|
@mobile_link_padding_top: "@{theme}_mobile_link_padding_border-top";
|
|
@mobile_link_padding_bottom: "@{theme}_mobile_link_padding_border-bottom";
|
|
@mobile_link_padding_left: "@{theme}_mobile_link_padding_border-left";
|
|
@mobile_link_padding_right: "@{theme}_mobile_link_padding_border-right";
|
|
|
|
@mobile_link_border_width: "@{theme}_mobile_link_border_border-top";
|
|
@mobile_link_border_style: "@{theme}_mobile_link_border_border-style";
|
|
@mobile_link_border_color: "@{theme}_mobile_link_border_border-color";
|
|
|
|
// Button
|
|
// -------------------------------------------------------------------------
|
|
|
|
@dropdown_button_radius_top: "@{theme}_dropdown_button_radius_border-top";
|
|
@dropdown_button_radius_right: "@{theme}_dropdown_button_radius_border-right";
|
|
@dropdown_button_radius_bottom: "@{theme}_dropdown_button_radius_border-bottom";
|
|
@dropdown_button_radius_left: "@{theme}_dropdown_button_radius_border-left";
|
|
|
|
// Tab
|
|
// -------------------------------------------------------------------------
|
|
|
|
@dropdown_tab_bg: "@{theme}_dropdown_tab_bg";
|
|
@dropdown_tab_bg_hover: "@{theme}_dropdown_tab_bg_hover";
|
|
|
|
.quadmenu-sticky-wrapper {
|
|
&.@{class} {
|
|
background-color: @@navbar_background_color;
|
|
}
|
|
}
|
|
|
|
#quadmenu {
|
|
&.@{class} {
|
|
background-color: @@navbar_background_color;
|
|
color: ~"@{@{theme}_navbar_text}";
|
|
|
|
&.quadmenu-background-gradient {
|
|
.navbar-gradient(@@navbar_background_color, @@navbar_background_to, @@navbar_background_deg);
|
|
}
|
|
|
|
// Fonts
|
|
// -----------------------------------------------------------------
|
|
|
|
font-family: @@font_font-family;
|
|
font-weight: @@font_font-weight;
|
|
font-size: @@font_font-size * 1px;
|
|
font-style: @@font_font-style;
|
|
.letter-spacing(@@font_letter-spacing);
|
|
|
|
.quadmenu-navbar-nav {
|
|
|
|
> li {
|
|
|
|
&.quadmenu-item {
|
|
|
|
> a,
|
|
> form {
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
font-weight: @@navbar_font_font-weight;
|
|
font-style: @@navbar_font_font-style;
|
|
.letter-spacing(@@navbar_font_letter-spacing);
|
|
}
|
|
|
|
> form {
|
|
&.quadmenu-has-icon:not(.quadmenu-item-type-icon) {
|
|
> a > .quadmenu-item-content {
|
|
padding-left: @horizontal-padding*2px + @@navbar_font_font-size *1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.quadmenu-dropdown-menu {
|
|
|
|
.quadmenu-title {
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
}
|
|
|
|
li {
|
|
&.quadmenu-item {
|
|
> a {
|
|
font-family: @@dropdown_font_font-family;
|
|
font-size: @@dropdown_font_font-size * 1px;
|
|
font-weight: @@dropdown_font_font-weight;
|
|
font-style: @@dropdown_font_font-style;
|
|
.letter-spacing(@@dropdown_font_letter-spacing);
|
|
|
|
> .quadmenu-item-content {
|
|
|
|
.quadmenu-product-price,
|
|
.quadmenu-product-rating {
|
|
&,
|
|
ins,
|
|
.woocommerce-Price-currencySymbol,
|
|
.woocommerce-Price-amount amount {
|
|
font-family: @@dropdown_font_font-family;
|
|
font-size: @@dropdown_font_font-size * 1px;
|
|
font-weight: @@dropdown_font_font-weight;
|
|
font-style: @@dropdown_font_font-style;
|
|
.letter-spacing(@@dropdown_font_letter-spacing);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Horizontal
|
|
// -----------------------------------------------------------------
|
|
|
|
.quadmenu-navbar-header {
|
|
|
|
.quadmenu-navbar-brand {
|
|
margin-top: @@navbar_link_margin_top*1px;
|
|
margin-bottom: @@navbar_link_margin_bottom*1px;
|
|
}
|
|
|
|
}
|
|
|
|
&.quadmenu-is-horizontal {
|
|
|
|
&.js {
|
|
.height(@@navbar_height);
|
|
}
|
|
|
|
&.quadmenu-divider-show {
|
|
.quadmenu-navbar-nav {
|
|
> li > a:after,
|
|
> li.quadmenu-item-type-search > form:after {
|
|
margin-left: -@@navbar_link_margin_left*1px;
|
|
background-color: @@navbar_divider;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quadmenu-navbar-nav {
|
|
|
|
// Tabs
|
|
// ---------------------------------------------------------
|
|
|
|
> li {
|
|
&.quadmenu-item-type-tabs {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
> ul {
|
|
> li {
|
|
> ul.quadmenu-tabs {
|
|
|
|
> li.quadmenu-item-type-tab {
|
|
background-color: @@dropdown_tab_bg;
|
|
|
|
&:hover,
|
|
&.open {
|
|
background-color: @@dropdown_tab_bg_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> li {
|
|
> .quadmenu-dropdown-menu {
|
|
margin-top: @@dropdown_margin * 1px;
|
|
}
|
|
}
|
|
|
|
// Button
|
|
// ---------------------------------------------------------
|
|
|
|
li.quadmenu-item-type-button {
|
|
> a {
|
|
> .quadmenu-item-content {
|
|
border-radius: @@navbar_button_radius_top*1px @@navbar_button_radius_right*1px @@navbar_button_radius_bottom*1px @@navbar_button_radius_left*1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quadmenu-dropdown-menu {
|
|
border-top-left-radius: @@dropdown_radius_top*1px;
|
|
border-top-right-radius: @@dropdown_radius_right*1px;
|
|
border-bottom-right-radius: @@dropdown_radius_bottom*1px;
|
|
border-bottom-left-radius: @@dropdown_radius_left*1px;
|
|
border-top-width: @@dropdown_border_top*1px;
|
|
border-right-width: @@dropdown_border_right*1px;
|
|
border-bottom-width: @@dropdown_border_bottom*1px;
|
|
border-left-width: @@dropdown_border_left*1px;
|
|
border-color: @@dropdown_border_color;
|
|
border-style: solid;
|
|
background-color: @@dropdown_background;
|
|
|
|
.dropdown-inner-radius(ceil(@@dropdown_radius_top - @@dropdown_border_top), ceil(@@dropdown_radius_right - @@dropdown_border_right), ceil(@@dropdown_radius_bottom - @@dropdown_border_bottom), ceil(@@dropdown_radius_left - @@dropdown_border_left));
|
|
|
|
// Border
|
|
// -----------------------------------------------------
|
|
|
|
li {
|
|
&.quadmenu-item {
|
|
|
|
&:not(.quadmenu-item-type-tab) {
|
|
|
|
&:not(:last-child):not(:only-child) {
|
|
> a {
|
|
border-color: @@dropdown_link_border_color;
|
|
border-style: @@dropdown_link_border_style;
|
|
border-width: 0 0 @@dropdown_link_border_width*1px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.quadmenu-dropdown-submenu {
|
|
&:not(.quadmenu-item-type-tab) > .quadmenu-dropdown-menu {
|
|
margin: @@dropdown_border_top * -1px @@dropdown_margin*1px+@@dropdown_border_right*1px 0 @@dropdown_margin*1px+@@dropdown_border_left*1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sicky
|
|
// -----------------------------------------------------------------
|
|
|
|
&.quadmenu-sticky-top {
|
|
|
|
&.js {
|
|
.height(@@sticky_height);
|
|
}
|
|
|
|
background-color: @@sticky_background_color;
|
|
|
|
.quadmenu-navbar-brand {
|
|
> img {
|
|
height: @@sticky_logo_height * 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Brand
|
|
// -----------------------------------------------------------------
|
|
|
|
.quadmenu-navbar-brand {
|
|
color: ~"@{@{theme}_navbar_link}";
|
|
&:hover,
|
|
&:focus {
|
|
color: ~"@{@{theme}_navbar_link_hover}";
|
|
}
|
|
|
|
&.img {
|
|
background-color: @@navbar_logo_bg;
|
|
}
|
|
|
|
> img {
|
|
height: @@navbar_logo_height * 1px;
|
|
}
|
|
}
|
|
|
|
.quadmenu-navbar-toggle {
|
|
&.collapsed {
|
|
.icon-bar {
|
|
background-color: ~"@{@{theme}_navbar_toggle_open}";
|
|
}
|
|
}
|
|
.icon-bar {
|
|
background-color: ~"@{@{theme}_navbar_toggle_close}";
|
|
}
|
|
}
|
|
|
|
// Perfect Scrollbar
|
|
// -----------------------------------------------------------------
|
|
|
|
.ps-container {
|
|
|
|
>.ps-scrollbar-y-rail {
|
|
background-color: ~"@{@{theme}_navbar_scrollbar_rail}";
|
|
|
|
>.ps-scrollbar-y {
|
|
background-color: ~"@{@{theme}_navbar_scrollbar}";
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
>.ps-scrollbar-y {
|
|
background-color: ~"@{@{theme}_navbar_scrollbar}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.quadmenu-dropdown-menu {
|
|
|
|
.ps-container {
|
|
>.ps-scrollbar-y-rail {
|
|
|
|
>.ps-scrollbar-y {
|
|
background-color: ~"@{@{theme}_dropdown_scrollbar}";
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
>.ps-scrollbar-y {
|
|
background-color: ~"@{@{theme}_dropdown_scrollbar}";
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Effect
|
|
// -----------------------------------------------------------------
|
|
|
|
&.quadmenu-hover-ripple,
|
|
&.quadmenu-hover-slidebar {
|
|
|
|
.quadmenu-navbar-nav {
|
|
|
|
> li {
|
|
|
|
&.quadmenu-item {
|
|
&.quadmenu-has-link {
|
|
> a:before {
|
|
background-color: @@navbar_link_hover_effect;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.quadmenu-slidebar {
|
|
> .bar {
|
|
background-color: @@navbar_link_hover_effect;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// UL
|
|
// -----------------------------------------------------------------
|
|
.quadmenu-navbar-nav {
|
|
|
|
> li {
|
|
|
|
&.quadmenu-item {
|
|
&.quadmenu-has-link {
|
|
> a:before,
|
|
> span.bar {
|
|
background-color: @@navbar_link_hover_effect;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
> li {
|
|
&:not(.quadmenu-item-type-button) {
|
|
margin: @@navbar_link_margin_top*1px @@navbar_link_margin_right*1px @@navbar_link_margin_bottom*1px @@navbar_link_margin_left*1px;
|
|
border-radius: @@navbar_link_radius_top*1px @@navbar_link_radius_right*1px @@navbar_link_radius_bottom*1px @@navbar_link_radius_left*1px;
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_navbar_link}";
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon}";
|
|
}
|
|
|
|
> .quadmenu-subtitle {
|
|
color: ~"@{@{theme}_navbar_link_subtitle}";
|
|
}
|
|
|
|
> .quadmenu-badge {
|
|
|
|
> .quadmenu-badge-bubble {
|
|
background-color: ~"@{@{theme}_navbar_badge}";
|
|
color: ~"@{@{theme}_navbar_badge_color}";
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.quadmenu-has-link {
|
|
|
|
background-color: @@navbar_link_bg;
|
|
|
|
&:hover,
|
|
&.open {
|
|
|
|
background-color: @@navbar_link_bg_hover;
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_navbar_link_hover}";
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon_hover}";
|
|
}
|
|
> .quadmenu-subtitle {
|
|
color: ~"@{@{theme}_navbar_link_subtitle_hover}";//!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-button {
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_navbar_button}";
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
background-color: ~"@{@{theme}_navbar_button_background}";
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_button}";
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover,
|
|
&.open {
|
|
> a {
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_navbar_button_hover}";
|
|
background-color: ~"@{@{theme}_navbar_button_hover_background}";
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_button_hover}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-search {
|
|
|
|
> form {
|
|
::placeholder {
|
|
color: ~"@{@{theme}_navbar_link}";
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
font-weight: @@navbar_font_font-weight;
|
|
font-style: @@navbar_font_font-style;
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
.letter-spacing(@@navbar_font_letter-spacing);
|
|
}
|
|
|
|
input {
|
|
color: ~"@{@{theme}_navbar_link}";
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
font-weight: @@navbar_font_font-weight;
|
|
font-style: @@navbar_font_font-style;
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
.letter-spacing(@@navbar_font_letter-spacing);
|
|
}
|
|
|
|
i {
|
|
color: ~"@{@{theme}_navbar_link_icon}";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cart & Login
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-login,
|
|
> li.quadmenu-item-type-cart {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
|
|
.quadmenu-bottom-text {
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
font-weight: @@navbar_font_font-weight;
|
|
font-style: @@navbar_font_font-style;
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
.letter-spacing(@@navbar_font_letter-spacing);
|
|
|
|
.background-color-diff(@@dropdown_background, 4);
|
|
}
|
|
|
|
li.woocommerce-mini-cart-item {
|
|
.blockUI.blockOverlay {
|
|
background-color: @@dropdown_background!important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Cart
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-cart {
|
|
|
|
> a > .quadmenu-item-content {
|
|
|
|
> .quadmenu-cart-magic {
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon}";
|
|
}
|
|
|
|
> .quadmenu-cart-qty {
|
|
background-color: ~"@{@{theme}_navbar_badge}";
|
|
color: ~"@{@{theme}_navbar_badge_color}";
|
|
}
|
|
}
|
|
|
|
}
|
|
&:hover,
|
|
&.open {
|
|
> a > .quadmenu-item-content {
|
|
|
|
> .quadmenu-cart-magic {
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon_hover}";
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&.quadmenu-cart-empty {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
|
|
.widget_shopping_cart {
|
|
&,
|
|
li {
|
|
font-family: @@navbar_font_font-family;
|
|
font-size: @@navbar_font_font-size * 1px;
|
|
font-weight: @@navbar_font_font-weight;
|
|
font-style: @@navbar_font_font-style;
|
|
text-transform: ~"@{@{theme}_navbar_link_transform}";
|
|
.letter-spacing(@@navbar_font_letter-spacing);
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Social
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-social {
|
|
|
|
> .quadmenu-toggle-container > a {
|
|
|
|
color: ~"@{@{theme}_navbar_link}";
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon}";
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_navbar_link_icon_hover}";
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Carousel
|
|
// -------------------------------------------------------------
|
|
|
|
.owl-carousel {
|
|
|
|
.owl-dots {
|
|
.owl-dot span {
|
|
background-color: ~"@{@{theme}_dropdown_button_bg}";
|
|
}
|
|
}
|
|
|
|
.owl-nav {
|
|
|
|
.owl-prev,
|
|
.owl-next {
|
|
color: ~"@{@{theme}_dropdown_button}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg}";
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
color: ~"@{@{theme}_dropdown_button_hover}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg_hover}";
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Login
|
|
// -------------------------------------------------------------
|
|
|
|
> li.quadmenu-item-type-login {
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
|
|
> .quadmenu-avatar {
|
|
|
|
> img {
|
|
height: @@navbar_logo_height*1px;
|
|
width: @@navbar_logo_height*1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
color: @@dropdown_link;
|
|
&:hover {
|
|
color: @@dropdown_link_hover;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Dropdown Menu
|
|
// -------------------------------------------------------------
|
|
|
|
.quadmenu-dropdown-menu {
|
|
background-color: @@dropdown_background;
|
|
|
|
.quadmenu-title {
|
|
color: ~"@{@{theme}_dropdown_title}";
|
|
.link-border(@@dropdown_title_border_width,@@dropdown_title_border_style,@@dropdown_title_border_color, @vertical-padding);
|
|
}
|
|
|
|
form {
|
|
::placeholder {
|
|
color: @@dropdown_link;
|
|
}
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select,
|
|
.button {
|
|
font-family: @@dropdown_font_font-family;
|
|
font-size: @@dropdown_font_font-size * 1px;
|
|
font-weight: @@dropdown_font_font-weight;
|
|
font-style: @@dropdown_font_font-style;
|
|
text-transform: ~"@{@{theme}_dropdown_link_transform}";
|
|
.letter-spacing(@@dropdown_font_letter-spacing);
|
|
}
|
|
|
|
.button {
|
|
color: ~"@{@{theme}_dropdown_button}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg}";
|
|
border-top-left-radius: @@navbar_button_radius_top*1px;
|
|
border-top-right-radius: @@navbar_button_radius_right*1px;
|
|
border-bottom-right-radius: @@navbar_button_radius_bottom*1px;
|
|
border-bottom-left-radius: @@navbar_button_radius_left*1px;
|
|
|
|
&:hover,
|
|
&.active {
|
|
color: ~"@{@{theme}_dropdown_button_hover}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg_hover}";
|
|
}
|
|
}
|
|
|
|
li {
|
|
&.quadmenu-item {
|
|
|
|
> a {
|
|
border-color: @@dropdown_link_border_color;
|
|
|
|
> .quadmenu-item-content {
|
|
color: @@dropdown_link;
|
|
text-transform: ~"@{@{theme}_dropdown_link_transform}";
|
|
//padding: @@dropdown_link_padding_top*1px @@dropdown_link_padding_right*1px @@dropdown_link_padding_bottom*1px @@dropdown_link_padding_left*1px;
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_dropdown_link_icon}";
|
|
}
|
|
> .quadmenu-subtitle,
|
|
> .quadmenu-description {
|
|
color: ~"@{@{theme}_dropdown_link_subtitle}";
|
|
}
|
|
|
|
> .quadmenu-badge {
|
|
|
|
> .quadmenu-badge-bubble {
|
|
background-color: ~"@{@{theme}_navbar_badge}";
|
|
color: ~"@{@{theme}_navbar_badge_color}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&.open {
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
|
|
color: @@dropdown_link_hover;//!important;
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_dropdown_link_icon_hover}";
|
|
}
|
|
|
|
> .quadmenu-description,
|
|
> .quadmenu-subtitle {
|
|
color: ~"@{@{theme}_dropdown_link_subtitle_hover}";
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.quadmenu-has-link {
|
|
&:hover,
|
|
&.open {
|
|
background-color: @@dropdown_link_bg_hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button
|
|
// ---------------------------------------------------------
|
|
|
|
li.quadmenu-item-type-button {
|
|
> a {
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_dropdown_button}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg}";
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_dropdown_button}";
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover,
|
|
&.open {
|
|
> a {
|
|
> .quadmenu-item-content {
|
|
color: ~"@{@{theme}_dropdown_button_hover}";
|
|
background-color: ~"@{@{theme}_dropdown_button_bg_hover}";
|
|
|
|
> .quadmenu-icon {
|
|
color: ~"@{@{theme}_dropdown_button_hover}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile
|
|
// -----------------------------------------------------------------
|
|
|
|
&:not(.quadmenu-is-horizontal) {
|
|
|
|
.quadmenu-navbar-collapse {
|
|
|
|
&.collapsing,
|
|
&.in {
|
|
box-shadow: inset 0 1px 0 @@navbar_mobile_border_color;
|
|
}
|
|
}
|
|
|
|
.quadmenu-navbar-nav {
|
|
|
|
> li.quadmenu-item-type-login,
|
|
> li.quadmenu-item-type-cart {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
|
|
padding-top: @@mobile_link_padding_top*2px;
|
|
padding-bottom: @@mobile_link_padding_bottom*2px;
|
|
padding-left: @@mobile_link_padding_left*1px;
|
|
padding-right: @@mobile_link_padding_right*1px;
|
|
|
|
.quadmenu-bottom-text {
|
|
margin-top: @@mobile_link_padding_top*2px;
|
|
margin-bottom: -@@mobile_link_padding_bottom*2px;
|
|
margin-left: -@@mobile_link_padding_left*1px;
|
|
margin-right: -@@mobile_link_padding_right*1px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
> li.quadmenu-item-type-login {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
> ul {
|
|
width: auto;
|
|
margin: 0 -@@mobile_link_padding_right 0 -@@mobile_link_padding_left;
|
|
}
|
|
}
|
|
}
|
|
|
|
> li.quadmenu-item-type-cart {
|
|
|
|
&.quadmenu-cart-empty {
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
.widget_shopping_cart {
|
|
padding-bottom: @@mobile_link_padding_bottom*2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .quadmenu-dropdown-menu {
|
|
|
|
.quadmenu-empty-icon {
|
|
padding-top: @@mobile_link_padding_top*2px;
|
|
padding-bottom: @@mobile_link_padding_bottom*2px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
> li.quadmenu-item-type-social {
|
|
|
|
> .quadmenu-toggle-container {
|
|
|
|
> a {
|
|
padding-left: @@mobile_link_padding_left;
|
|
padding-right: @@mobile_link_padding_right;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
> li {
|
|
&.quadmenu-item {
|
|
|
|
&:not(.open) {
|
|
&:not(:last-child):not(:only-child) {
|
|
> a {
|
|
border-color: @@mobile_link_border_color;
|
|
border-style: @@mobile_link_border_style;
|
|
border-width: 0 0 @@mobile_link_border_width*1px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.owl-carousel {
|
|
|
|
&:not(:last-child):not(:only-child) {
|
|
border-color: @@mobile_link_border_color;
|
|
border-style: @@mobile_link_border_style;
|
|
border-width: 0 0 @@mobile_link_border_width*1px 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
> li {
|
|
&.quadmenu-item-type-search {
|
|
|
|
> form {
|
|
|
|
> .quadmenu-item-content {
|
|
margin: @@mobile_link_padding_top*1px @@mobile_link_padding_right*1px @@mobile_link_padding_bottom*1px @@mobile_link_padding_left*1px;
|
|
padding: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
|
|
|
|
&.quadmenu-dropdown {
|
|
|
|
form {
|
|
|
|
.quadmenu-item-content + .quadmenu-item-content {
|
|
margin-top: @@mobile_link_padding_top*1px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.quadmenu-item {
|
|
|
|
.quadmenu-item-content {
|
|
&,
|
|
> .quadmenu-caret {
|
|
padding: @@mobile_link_padding_top*1px @@mobile_link_padding_right*1px @@mobile_link_padding_bottom*1px @@mobile_link_padding_left*1px;
|
|
}
|
|
|
|
}
|
|
|
|
.quadmenu-item-widget {
|
|
padding: @@mobile_link_padding_top*1px @@mobile_link_padding_right*1px @@mobile_link_padding_bottom*1px @@mobile_link_padding_left*1px;
|
|
}
|
|
|
|
&.open {
|
|
|
|
> a {
|
|
|
|
> .quadmenu-item-content {
|
|
|
|
> .quadmenu-caret {
|
|
color: @@dropdown_link;
|
|
background-color: @@dropdown_background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Button
|
|
// ---------------------------------------------------------
|
|
|
|
li {
|
|
&.quadmenu-item-type-button {
|
|
padding-left: @@mobile_link_padding_right*1px;
|
|
padding-right: @@mobile_link_padding_left*1px;
|
|
}
|
|
}
|
|
|
|
// Dropdown
|
|
// ---------------------------------------------------------
|
|
|
|
.quadmenu-dropdown-menu {
|
|
|
|
border-color: @@mobile_link_border_color;
|
|
border-style: @@mobile_link_border_style;
|
|
border-width: 0 0 @@mobile_link_border_width*1px 0;
|
|
|
|
li {
|
|
&.quadmenu-item {
|
|
|
|
&:not(:last-child):not(:only-child) {
|
|
> a {
|
|
border-style: @@dropdown_link_border_style;
|
|
border-width: 0 0 @@dropdown_link_border_width*1px 0;
|
|
}
|
|
}
|
|
|
|
.owl-carousel {
|
|
|
|
&:not(:last-child):not(:only-child) {
|
|
|
|
border-style: @@dropdown_link_border_style;
|
|
border-width: 0 0 @@dropdown_link_border_width*1px 0;
|
|
border-color: @@dropdown_link_border_color;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Offcanvas
|
|
// -----------------------------------------------------------------
|
|
|
|
&:not(.quadmenu-is-horizontal) {
|
|
|
|
&.quadmenu-background-gradient {
|
|
|
|
.navbar-offcanvas {
|
|
.navbar-gradient(@@navbar_background_color, @@navbar_background_to, @@navbar_background_deg);
|
|
}
|
|
|
|
}
|
|
|
|
.navbar-offcanvas {
|
|
background-color: @@navbar_background_color;
|
|
width: @@navbar_width * 1px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.loop((@i - 1));
|
|
} .loop; |