core/skin/virtual-nt.ru/sass/theme/_mainmenu.scss

80 lines
2.7 KiB
SCSS

/*******************************************************************
****** SO Framework: Sass Menu ******
********************************************************************/
div.horizontal{
ul.megamenu > li{float: $left;}
ul.megamenu .sub-menu .title-submenu,
ul.megamenu li .sub-menu .content .static-menu a.main-menu{
text-transform: uppercase;
color:$gray-darker;
border-bottom: 1px solid #ddd;
font-size: 13px;
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 5px;
}
ul.megamenu .sub-menu .image-link{margin-bottom: 10px; @include linkGrayDark();}
.image-link{
.thumbnail{position: relative; overflow: hidden; border-radius: 0;background: #fff;padding: 3px; margin: 0 0 10px;}
.btn {position: absolute; top:-100px;left: calc(50% - 50px); @include buttonColor(); @include transition(all 0.3s ease-in-out 0s);border-radius: 2px;}
&:hover {
.thumbnail{border: 1px solid #bcbcbc; background: #ddd;
img{opacity: 0.8;}
}
}
.figcaption{font-size: 12px; text-align: center; text-transform: uppercase;margin-top:0; }
}
ul.megamenu .label-hot {position: absolute;z-index: 999;top: -10px; #{$right}: 0px;}
// ul.megamenu .sub-menu .content {border-top: 8px solid $linkColor;}
ul.megamenu .sub-menu a{@include linkGray; line-height: 24px;display: block; padding: 3px 0; font-size: 13px;}
@include breakpoint(lg){ul.megamenu .megamenu--container {min-width: 1170px;}}
}
header .so-megamenu .navbar-header{color: white;}
@media (min-width: 992px) {
div.so-vertical-menu { position: relative;
.vertical-wrapper{border-top: 3px solid $linkColor;}
ul.megamenu > li{border: none;
a{@include linkGray; line-height: 24px;
font-size: 14px;
@include if-rtl {
img{margin:0 0 0 5px;}
}
}
> a:hover, &.loadmore:hover{background: $background; color: white;
.caret{background-position: center 0;}
}
.caret{
background: url("#{$base-url-theme}icons/ico-menu-parent.png") no-repeat;
width: 15px;
height: 15px;
background-position: center -25px;
border:none;
margin: 5px 0;
position: absolute;
#{$right}: 10px;
@include if-rtl {transform: rotate(180deg);}
}
&.loadmore{ border-top: 1px solid #ddd;}
.sub-menu{
@include if-rtl { #{$right}: 100% !important;left: auto;}
}
}
ul.megamenu > li.active > a{background: $background; color: white;}
}
}
.list-product{padding: 0;height: 100%;
.image{margin-#{$right}:15px;}
.caption{
h4{margin: 0; @include rem(font-size, 14px);}
}
}
.megamenuToogle-wrapper .container > div{float: $left; margin: side-values(0px 10px 0px 0px);}