1497 lines
28 KiB
SCSS
1497 lines
28 KiB
SCSS
// menu.scss
|
|
// Navs
|
|
// --------------------------------------------------
|
|
@import "vars/menu.vars";
|
|
|
|
/*
|
|
* NAVIGATION
|
|
*/
|
|
.#{$app-brand-prefix}-megamenu {
|
|
@include container-layout-variant($megamenu-color, $megamenu-bg);
|
|
|
|
.#{$app-brand-prefix}-colorbox {
|
|
display: none !important;
|
|
}
|
|
|
|
&.navbar {
|
|
padding: 0;
|
|
}
|
|
|
|
/* menu level 1 */
|
|
.navbar-nav {
|
|
@include rtl-text-align-right();
|
|
|
|
>li {
|
|
@include rtl-text-align-left();
|
|
float: none;
|
|
|
|
@media (min-width: 992px) {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
+.nav-item {
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
&.aligned-fullwidth {
|
|
position: static;
|
|
|
|
>.dropdown-menu {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
&.aligned-right {
|
|
.dropdown-menu {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
&.aligned-left {
|
|
.dropdown-menu {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
&.aligned-center {
|
|
.dropdown-menu {
|
|
left: 50%;
|
|
@include translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
&.ic {
|
|
&>a {
|
|
&>.sub-title {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
text-transform: capitalize;
|
|
font-weight: 400;
|
|
padding: 0px 5px;
|
|
position: absolute;
|
|
top: 10px;
|
|
border-radius: 2px;
|
|
@include rtl-right(-3px);
|
|
background-color: #333;
|
|
}
|
|
}
|
|
|
|
&.ic-new {
|
|
&>a {
|
|
&>.sub-title {
|
|
background-color: #16c98d;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ic-sale {
|
|
&>a {
|
|
&>.sub-title {
|
|
background-color: #ff708e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
&.parent {
|
|
&>a span.menu-title {
|
|
position: static;
|
|
|
|
&:after,
|
|
&:before {
|
|
bottom: -1px;
|
|
border: solid transparent;
|
|
content: "";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(20px);
|
|
left: 50%;
|
|
transition: transform .4s;
|
|
z-index: 9999;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
&:before {
|
|
border-width: 12px;
|
|
margin-left: -12px;
|
|
border-bottom-color: #eee;
|
|
}
|
|
|
|
&:after {
|
|
border-bottom-color: #fff;
|
|
border-width: 14px;
|
|
margin-left: -14px;
|
|
z-index: 99999;
|
|
margin-bottom: -3px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
&>a span.menu-title {
|
|
|
|
&:after,
|
|
&:before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*end min 992px*/
|
|
>a {
|
|
padding: 30px 18px;
|
|
|
|
@media (min-width: 992px) and (max-width: 1199px) {
|
|
padding: 30px 14px;
|
|
}
|
|
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
color: #000;
|
|
font-weight: 600;
|
|
@include transition(all 350ms ease-out);
|
|
position: relative;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $megamenu-link-hover-color;
|
|
background-color: $megamenu-link-bg-hover-color;
|
|
}
|
|
|
|
&.dropdown-toggle:after {
|
|
font-size: 13px;
|
|
content: "\f107";
|
|
font-family: $font-icon;
|
|
border: 0;
|
|
width: auto;
|
|
height: auto;
|
|
@include rtl-margin(0, 0, 0, 5px);
|
|
vertical-align: 1px;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
}
|
|
|
|
&:before {
|
|
/* position: absolute;
|
|
top: 50%;
|
|
right: 20px;
|
|
left: 20px;
|
|
height: 2px;
|
|
margin-top: 12px;
|
|
-webkit-transform: scale(0, 1);
|
|
-moz-transform: scale(0, 1);
|
|
-ms-transform: scale(0, 1);
|
|
-o-transform: scale(0, 1);
|
|
-webkit-transition: transform 0.5s ease;
|
|
transition: transform 0.5s ease;
|
|
background: $theme-color-default;
|
|
content: '';
|
|
-webkit-transform-origin: right top;
|
|
-moz-transform-origin: right top;
|
|
-ms-transform-origin: right top;
|
|
transform-origin: right top; */
|
|
}
|
|
|
|
>.menu-title {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
&:focus>a,
|
|
&:hover>a {
|
|
color: #888;
|
|
|
|
&:before {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-webkit-transform-origin: left top;
|
|
-moz-transform-origin: left top;
|
|
-ms-transform-origin: left top;
|
|
transform-origin: left top;
|
|
}
|
|
}
|
|
|
|
&:hover>.caret,
|
|
&:active>.caret {
|
|
color: $megamenu-link-hover-color;
|
|
}
|
|
|
|
&.home {
|
|
a {
|
|
@include rtl-padding(20px, 20px, 20px, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* level 2 */
|
|
.dropdown-menu {
|
|
left: auto;
|
|
@include rtl-right(0px);
|
|
top: 100%;
|
|
height: auto;
|
|
border: 0;
|
|
min-width: $megamenu-sub-min-width;
|
|
padding: $megamenu-sub-padding;
|
|
margin: 0px;
|
|
@include rtl-text-align-left();
|
|
@include transition(all 0.2s);
|
|
border-radius: 0;
|
|
//border: 1px solid #eee;
|
|
display: block;
|
|
|
|
@media (min-width: 992px) {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(5px);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
@include transition(none);
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
padding: 25px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
li {
|
|
line-height: 25px;
|
|
padding: 0;
|
|
float: none;
|
|
|
|
+.nav-item {
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
&:hover>a {
|
|
transform: translateX(5px);
|
|
color: $theme-color-default;
|
|
}
|
|
|
|
a {
|
|
color: #888;
|
|
padding: 5px 0;
|
|
font-weight: 400;
|
|
font-size: $megamenu-sub-font-size;
|
|
line-height: 25px;
|
|
display: block;
|
|
@include transition(all .4s);
|
|
text-transform: capitalize;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
.fa {
|
|
color: $megamenu-sub-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.menu-title {
|
|
margin-bottom: $small-space;
|
|
font-size: 12px;
|
|
text-transform: $megamenu-parent-text-transform;
|
|
font-weight: 600;
|
|
padding-bottom: 10px;
|
|
letter-spacing: 1px;
|
|
line-height: 1.5;
|
|
color: #000;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "";
|
|
width: 14px;
|
|
height: 1px;
|
|
background: #000;
|
|
position: absolute;
|
|
bottom: 0;
|
|
@include rtl-left(0);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
a>.menu-title {
|
|
text-transform: capitalize;
|
|
font-weight: 400;
|
|
font-size: $base-font-size;
|
|
|
|
&:hover {
|
|
//color: $theme-color-default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
@media (min-width: 992px) {
|
|
>.dropdown-menu {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
>.dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0px);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
>a {
|
|
color: $megamenu-link-hover-color;
|
|
|
|
.fa {
|
|
color: $megamenu-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* level > 3 */
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
|
|
.dropdown-menu {
|
|
top: 0;
|
|
position: absolute;
|
|
@include rtl-left(100%);
|
|
}
|
|
|
|
&:hover {
|
|
>.dropdown-menu {
|
|
@include media-breakpoint-up(lg) {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mega-group {
|
|
&>.dropdown-toggle {
|
|
border: 0;
|
|
display: block;
|
|
|
|
text-transform: uppercase;
|
|
font-family: $megamenu-heading-title-font-family;
|
|
color: $megamenu-heading-color;
|
|
|
|
.fa {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.megamenu .cols1 {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.megamenu .cols2 {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.megamenu .cols3 {
|
|
min-width: 740px;
|
|
}
|
|
|
|
// manufacture
|
|
.manu-logo {
|
|
img {
|
|
border: $main-border;
|
|
margin-bottom: $small-space;
|
|
margin-right: $small-space;
|
|
}
|
|
}
|
|
|
|
.widget-subcategories {
|
|
margin-bottom: $large-space/2;
|
|
}
|
|
}
|
|
|
|
/* Product for menu */
|
|
|
|
.#{$app-brand-prefix}-widget {
|
|
.thumbnail-container {
|
|
margin: 0;
|
|
@include rtl-text-align-left();
|
|
@include box-shadow(none);
|
|
|
|
.product-image {
|
|
@include rtl-float-left();
|
|
@include rtl-margin(0, 15px, 15px, 0);
|
|
width: 80px;
|
|
}
|
|
|
|
.product-meta {
|
|
overflow: hidden;
|
|
zoom: 1;
|
|
padding: 10px 0px;
|
|
}
|
|
|
|
.product-title {
|
|
margin-top: 0px;
|
|
margin-bottom: 0;
|
|
line-height: 20px;
|
|
height: 20px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-transform: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.product-price-and-shipping {
|
|
color: #888;
|
|
|
|
.price {
|
|
color: $theme-color-default;
|
|
}
|
|
|
|
.aeuc_from_label {
|
|
color: #888;
|
|
}
|
|
|
|
.aeuc_before_label,
|
|
.discount-percentage {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.widget-html {
|
|
color: #888;
|
|
line-height: 1.5;
|
|
font-size: 13px;
|
|
|
|
@media (max-width: 991px) {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
p {
|
|
line-height: 20px;
|
|
margin: 0 0 15px;
|
|
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.widget-video {
|
|
iframe {
|
|
border-width: 0px;
|
|
|
|
@media (max-width: 991px) {
|
|
// max 991px
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.widget-image {
|
|
@include rtl-margin-left(0px);
|
|
|
|
li {
|
|
@include rtl-margin-right($small-space);
|
|
|
|
&:last-child {
|
|
@include rtl-margin-right(0px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
*
|
|
* Vertical menu
|
|
*/
|
|
.ApMegamenu {
|
|
.#{$app-brand-prefix}-verticalmenu {
|
|
background: $vertical-menu-content-bg;
|
|
position: relative;
|
|
|
|
.title_block {
|
|
margin: 0;
|
|
color: $white;
|
|
width: 100%;
|
|
line-height: 26px;
|
|
letter-spacing: 1px;
|
|
font-size: 20px;
|
|
padding: $medium-space 25px;
|
|
text-transform: none;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
>.block_content {
|
|
background: $vertical-menu-content-bg;
|
|
position: absolute;
|
|
z-index: 30;
|
|
height: auto;
|
|
overflow: visible;
|
|
width: 100%;
|
|
@include transition(height 0.4s ease 0s);
|
|
}
|
|
}
|
|
}
|
|
|
|
div.verticalmenu {
|
|
z-index: 100;
|
|
|
|
.navbar-collapse,
|
|
.navbar-vertical {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-nav {
|
|
position: static;
|
|
@include clearfloat();
|
|
|
|
>li {
|
|
@include size(100%, auto);
|
|
position: relative;
|
|
float: none;
|
|
|
|
+.nav-item {
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
>a {
|
|
display: block;
|
|
color: $vertical-menu-color;
|
|
font-size: $vertical-menu-font-size;
|
|
font-family: $vertical-menu-font-family;
|
|
padding: $vertical-menu-link-padding;
|
|
font-weight: $vertical-menu-font-weight;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.caret {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
|
|
// max 991px
|
|
.caret {
|
|
display: block;
|
|
position: relative;
|
|
top: -40px;
|
|
cursor: pointer;
|
|
border: none;
|
|
width: 25px;
|
|
height: 30px;
|
|
text-align: center;
|
|
border: none;
|
|
@include rtl-float-right();
|
|
@include rtl-right(0);
|
|
|
|
&:before {
|
|
content: "\f105";
|
|
font-family: $font-icon;
|
|
color: $vertical-menu-color;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-submenu .caret {
|
|
top: 0;
|
|
|
|
@media (max-width: 991px) {
|
|
// max 991px
|
|
top: -16px;
|
|
}
|
|
}
|
|
|
|
&.last a,
|
|
&:last-child a {
|
|
border: 0;
|
|
}
|
|
|
|
// Hover Effect
|
|
&:hover {
|
|
>a {
|
|
color: $megamenu-sub-link-hover-color;
|
|
background: $theme-color-default;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $vertical-menu-link-hover-color;
|
|
background: $theme-color-default;
|
|
border-color: $border-color;
|
|
}
|
|
}
|
|
|
|
.caret {
|
|
color: $theme-color-default;
|
|
|
|
&:before {
|
|
color: $theme-color-default;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
>a {
|
|
color: $megamenu-sub-link-hover-color;
|
|
background: $theme-color-default;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $vertical-menu-link-hover-color;
|
|
background: $theme-color-default;
|
|
border-color: $border-color;
|
|
}
|
|
}
|
|
|
|
.caret {
|
|
color: $theme-color-default;
|
|
|
|
&:before {
|
|
color: $theme-color-default;
|
|
top: -23px;
|
|
content: "\f0d7";
|
|
}
|
|
}
|
|
}
|
|
|
|
.parent {
|
|
position: relative;
|
|
|
|
>.dropdown-toggle {
|
|
text-transform: none;
|
|
font-weight: normal;
|
|
color: $vertical-sub-menu-link-color;
|
|
|
|
&:hover {
|
|
color: $theme-color-default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
&.parent {
|
|
>a {
|
|
&:after {
|
|
position: absolute;
|
|
content: "\f105";
|
|
font-family: $font-icon;
|
|
color: $vertical-menu-link;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
right: 12px;
|
|
top: 12px;
|
|
border: none;
|
|
|
|
@media (max-width: 991px) {
|
|
// max 991px
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
>a {
|
|
&:after {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.dropdown-submenu {
|
|
>a {
|
|
&:after {
|
|
color: $body-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
a {
|
|
.menu-icon {
|
|
display: block;
|
|
@include rtl-background-position-left(center);
|
|
|
|
span {
|
|
display: block;
|
|
@include rtl-margin-left(35px);
|
|
}
|
|
|
|
.menu-desc {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.menu-title {
|
|
display: block;
|
|
color: $vertical-menu-link;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: $vertical-menu-font-size;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.menu-title {
|
|
color: $vertical-menu-link-hover-color;
|
|
}
|
|
|
|
color: $vertical-menu-link-hover-color;
|
|
background: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
left: -9999px;
|
|
top: -9999px;
|
|
right: auto;
|
|
border: 2px solid $theme-color-default;
|
|
min-height: 100px;
|
|
height: 100% !important;
|
|
min-width: $vertical-sub-menu-width;
|
|
padding: $vertical-sub-menu-padding;
|
|
background: $vertical-sub-menu-bg;
|
|
margin: 0px;
|
|
@include rtl-text-align-left();
|
|
@include rounded-corners(0);
|
|
@include box-shadow($vertical-sub-shadow);
|
|
|
|
ul {
|
|
li {
|
|
padding: 4px 0;
|
|
line-height: normal;
|
|
list-style: none;
|
|
display: block;
|
|
float: none;
|
|
|
|
+.nav-item {
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
a {
|
|
color: $vertical-sub-menu-link-color;
|
|
font-size: $vertical-sub-menu-link-font-size;
|
|
font-weight: 400;
|
|
padding: 0;
|
|
|
|
.menu-title {
|
|
color: $vertical-sub-menu-link-color;
|
|
text-transform: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: $theme-color-default;
|
|
|
|
.menu-title {
|
|
color: $theme-color-default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
line-height: 18px;
|
|
font-size: $vertical-sub-menu-link-font-size;
|
|
}
|
|
|
|
.#{$app-brand-prefix}-menu-video {
|
|
width: 100%;
|
|
|
|
iframe {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
&:hover {
|
|
color: $vertical-sub-menu-heading-color;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
line-height: normal;
|
|
color: $vertical-sub-menu-heading-color;
|
|
font-family: $vertical-sub-menu-link-font-family;
|
|
font-size: $vertical-sub-menu-link-font-size;
|
|
}
|
|
|
|
.action {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.widget-heading {
|
|
color: $vertical-sub-menu-heading-color;
|
|
text-transform: uppercase;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
div.active-hover {
|
|
ul {
|
|
>li {
|
|
&:hover {
|
|
>.dropdown-menu {
|
|
@include rtl-left(100%);
|
|
top: -1px;
|
|
@include opacity(1);
|
|
display: inline-table;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* CANVAS MENU - SHOW CANVAS = YES */
|
|
.megamenu-overlay {
|
|
cursor: pointer;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
visibility: hidden;
|
|
@include rgba($black, 0.5);
|
|
@include opacity(0);
|
|
@include transition(all 0.4s ease);
|
|
}
|
|
|
|
.off-canvas {
|
|
body {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
|
|
// Menu Canvas
|
|
.off-canvas-active {
|
|
|
|
>#page,
|
|
>.off-canvas-nav-megamenu {
|
|
@include translate(0, 0);
|
|
position: relative !important;
|
|
}
|
|
}
|
|
|
|
.off-canvas-button-megamenu {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
.off-canvas-active {
|
|
.megamenu-overlay {
|
|
@include opacity(1);
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.off-canvas-button-megamenu {
|
|
color: $black;
|
|
margin: 15px 10px;
|
|
@include rtl-text-align-right();
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.off-canvas-inactive {
|
|
>#page {
|
|
@include transition(all 400ms ease 0s);
|
|
}
|
|
}
|
|
|
|
.off-canvas-active {
|
|
background: $white;
|
|
|
|
>#page {
|
|
//@include transform(translateX(234px));
|
|
//@include transition(all 400ms ease 0s);
|
|
}
|
|
|
|
>.off-canvas-nav-megamenu {
|
|
&.active {
|
|
@include rtl-left(0px);
|
|
@include transform(translateX(234px));
|
|
@include transition(all 400ms ease 0s);
|
|
}
|
|
}
|
|
|
|
#page {
|
|
position: fixed;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.off-canvas-nav-megamenu {
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 0px;
|
|
background: $white;
|
|
z-index: 999;
|
|
@include rtl-left(0);
|
|
@include transition(all 400ms ease 0s);
|
|
|
|
.navbar-nav {
|
|
margin: 0px;
|
|
|
|
>li {
|
|
float: none;
|
|
border-bottom: $main-border;
|
|
float: none;
|
|
|
|
+.nav-item {
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
&.ic {
|
|
&>a {
|
|
&>.sub-title {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
text-transform: capitalize;
|
|
font-weight: 400;
|
|
padding: 2px 5px;
|
|
position: absolute;
|
|
top: 5px;
|
|
border-radius: 2px;
|
|
@include rtl-right(-35px);
|
|
background-color: #333;
|
|
}
|
|
}
|
|
|
|
&.ic-new {
|
|
&>a {
|
|
&>.sub-title {
|
|
background-color: #16c98d;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ic-sale {
|
|
&>a {
|
|
&>.sub-title {
|
|
background-color: #ff708e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>a {
|
|
display: inline-block;
|
|
color: #2a363b;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding: 14px 20px;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-sub div.menu-title {
|
|
font-weight: 600;
|
|
color: #444;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
li {
|
|
&.dropdown {
|
|
.caret {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
margin: auto 0;
|
|
@include rtl-right(0);
|
|
@include size(50px, 50px);
|
|
line-height: 50px;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
content: "\f107";
|
|
font-family: $font-icon;
|
|
color: $black;
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
display: block;
|
|
text-align: center;
|
|
transition: all .6s;
|
|
transform-origin: center center;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.open-sub {
|
|
>.caret {
|
|
&:before {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
&.dropdown-submenu {
|
|
.caret {
|
|
top: 0px;
|
|
width: 30px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.offcanvas-mainnav {
|
|
background-color: $white;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 234px;
|
|
overflow: hidden;
|
|
@include rtl-left(-234px);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
font-size: $base-font-size;
|
|
position: relative;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
float: none;
|
|
margin: 0;
|
|
width: 100% !important;
|
|
border: 0;
|
|
padding: 0px 20px 10px;
|
|
@include box-shadow(none);
|
|
@include rounded-corners(0);
|
|
@include rtl-text-align-left();
|
|
|
|
ul {
|
|
li {
|
|
line-height: 30px;
|
|
float: none;
|
|
|
|
+.nav-item {
|
|
position: relative;
|
|
@include rtl-margin-left(0px);
|
|
}
|
|
|
|
>a {
|
|
font-weight: 400;
|
|
color: #888;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-sub {
|
|
div.menu-title {
|
|
margin: 10px 0;
|
|
color: $black;
|
|
font-family: "Lato", sans-serif;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.nav-links {
|
|
@include rtl-padding-left(7px);
|
|
|
|
li {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
.mega-col {
|
|
width: 100%;
|
|
}
|
|
|
|
.#{$app-brand-prefix}-widget {
|
|
.widget-subcategories {
|
|
ul {
|
|
@include rtl-padding(3px, 3px, 3px, 7px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* OFF CANVAS MENU - SHOW CANVAS = NO */
|
|
@media (max-width: 991px) {
|
|
.leo-megamenu {
|
|
&.disable-canvas {
|
|
.dropdown-menu {
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
.navbar-nav>li {
|
|
&.aligned-fullwidth {
|
|
position: relative;
|
|
}
|
|
|
|
>a {
|
|
padding: $medium-space 0;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.caret {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 13px;
|
|
line-height: 30px;
|
|
display: block;
|
|
@include size(30px, 30px);
|
|
@include rtl-right(0);
|
|
|
|
&:before {
|
|
content: "add";
|
|
font-family: $font-icon-2;
|
|
position: absolute;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
color: $white;
|
|
z-index: 1001;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse {
|
|
@include rtl-text-align-left();
|
|
|
|
.navbar-nav {
|
|
@include rtl-text-align-left();
|
|
height: auto;
|
|
}
|
|
|
|
.navbar-nav {
|
|
>li {
|
|
&.aligned-fullwidth {
|
|
position: relative;
|
|
}
|
|
|
|
>.dropdown-menu {
|
|
@include media-breakpoint-down(md) {
|
|
.mega-col {
|
|
max-width: 100%;
|
|
flex: 0 0 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
&.dropdown {
|
|
&.open-sub {
|
|
>.caret {
|
|
&:before {
|
|
content: "remove";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.dropdown-submenu {
|
|
.caret {
|
|
&:before {
|
|
top: -13px;
|
|
}
|
|
}
|
|
|
|
&.open-sub {
|
|
>.caret {
|
|
&:before {
|
|
content: "remove";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-submenu {
|
|
>.dropdown-menu {
|
|
width: 100%;
|
|
position: relative;
|
|
@include rtl-left(0);
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** Responsive part ***/
|
|
@include media-breakpoint-down(md) {
|
|
.ApMegamenu {
|
|
>.navbar {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.leo-megamenu {
|
|
&.disable-canvas {
|
|
.navbar-nav {
|
|
margin: 0;
|
|
|
|
>li {
|
|
>a {
|
|
padding: 15px;
|
|
display: inline-block;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
.caret {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 9px;
|
|
line-height: 30px;
|
|
display: block;
|
|
@include size(30px, 30px);
|
|
@include rtl-right(0);
|
|
|
|
&:before {
|
|
content: "add";
|
|
font-family: $font-icon-2;
|
|
position: absolute;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
color: #F0F0F0;
|
|
z-index: 1001;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.leo-top-menu {
|
|
background: #353535;
|
|
position: absolute;
|
|
top: 100%;
|
|
z-index: 99;
|
|
left: $small-space;
|
|
right: $small-space;
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//Style leo widget general
|
|
.leo-widget {
|
|
.widget-category_image {
|
|
.level0 li {
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 140px;
|
|
|
|
ul {
|
|
background: $white;
|
|
border: 1px solid #c3c3c3;
|
|
position: absolute;
|
|
top: -1px;
|
|
z-index: 99;
|
|
display: none;
|
|
@include rtl-left(100%);
|
|
@include transition(all 0.3s ease);
|
|
|
|
li {
|
|
padding: 5px 10px;
|
|
}
|
|
}
|
|
|
|
&:hover>ul {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.navbar-header {
|
|
.navbar-toggler {
|
|
height: 40px;
|
|
width: 40px;
|
|
padding: 0;
|
|
border: 1px solid #333;
|
|
margin: 20px auto;
|
|
border-radius: 0;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
border-color: $theme-color-default;
|
|
background: $theme-color-default;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.off-canvas-active {
|
|
.navbar-header {
|
|
.navbar-toggler {
|
|
border-color: $theme-color-default;
|
|
background: $theme-color-default;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.off-canvas-button-megamenu {
|
|
font-size: 0px;
|
|
color: transparent;
|
|
margin: 15px 20px 0;
|
|
|
|
.off-canvas-nav {
|
|
display: block;
|
|
outline: 0;
|
|
|
|
&:before {
|
|
content: "\e646";
|
|
font-family: 'themify';
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
&:focus .off-canvas-nav:before {
|
|
color: $theme-color-default;
|
|
}
|
|
}
|
|
|
|
.col-menuinfo {
|
|
.widget-raw-html {
|
|
font-size: 20px;
|
|
padding: 25px 0;
|
|
text-align: center;
|
|
color: #333;
|
|
border-top: 1px solid #e5e5e5;
|
|
margin: 10px -20px -20px;
|
|
font-weight: 300;
|
|
background: #fbfbfb;
|
|
line-height: 1.5;
|
|
|
|
@media (min-width: 1200px) {
|
|
margin: 30px -25px -25px;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
font-size: 16px;
|
|
margin: 10px -20px 0px;
|
|
line-height: 2;
|
|
padding: 20px;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
strong,
|
|
b {
|
|
color: $theme-color-default;
|
|
}
|
|
|
|
.shop-now {
|
|
background: #a3de83;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
@include rtl-margin(0, 0, 0, 15px);
|
|
padding: 6px 20px;
|
|
transition: all 0.4s cubic-bezier(.44, .13, .48, .87);
|
|
display: inline-block;
|
|
|
|
&:hover {
|
|
background: $theme-color-default;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-listdetail .leo-widget .widget-html {
|
|
margin-top: 0;
|
|
} |