tk-ligat.ru/shablon/gsore/assets/sass/layout/_mobile-menu.scss

167 lines
3.5 KiB
SCSS

/*****************************
32 - Layout - Mobile Menu
*****************************/
// mobile header
.offside{
overflow-y: hidden;
&-button{
border: none;
background: transparent;
font-size: 32px;
outline: none !important;
}
}
.offcanvas-mobile-menu{
background: $color-white;
.user-set-role{
font-size: 12px;
li{
display: block;
margin-right: 20px;
&:last-child{margin-right: 0;}
a{
display: block;
color: $color-black-1;
i{
padding-left: 10px;
font-size: 10px;
}
}
}
}
}
.offcanvas{
padding: 40px 20px;
&--open{
border: none;
background: transparent;
font-size: 32px;
outline: none !important;
}
// OffCanvas Menu
&-menu li{
position: relative;
padding: 5px 5px;
}
&-menu > ul > li{
border-bottom: 1px solid transparent;
&:last-child{
border-bottom: none;
}
}
&-menu li a{
display: block;
color: $color-black-1;
text-decoration: none;
&:hover{
color: $color-primary;
}
}
&-menu li .sub-menu{
display: none;
}
&__menu-expand{
&::after{
content: "\f067";
position: absolute;
font-family: 'Font Awesome 5 Free';
right: 0;
transition: all .3s ease;
color: $color-black-1;
}
}
&-menu .active > &__menu-expand,
.sub-menu > .active &__menu-expand{
&:last-child{
border-bottom: none;
}
&::after{
color: $color-primary;
content: "\f068";
}
}
// OffCanvas User Button
&-shop-link{
display: flex;
justify-content: center;
a{
color: $color-black-1;
text-decoration: none;
transition: all .3s ease;
text-align: center;
margin-right: 15px;
&:last-child{
margin-right: 0;
}
&:hover{
color: $color-primary;
}
}
}
// Footer Address
&__address{
text-align: left;
@include breakpoint(large){text-align: center;}
&-item{
margin-bottom: 6px;
color: $color-gray !important;
&:last-child{
margin-bottom: 0px;
}
span{
color: $color-primary;
}
a{
color: $color-gray;
&:hover{
color: $color-primary;
}
}
}
}
.offcanvas__social-nav{
display: flex;
justify-content: center;
margin-top: 15px;
}
.offcanvas__social-list{
margin-right: 15px;
&:last-child{margin-right: 0;}
}
.offcanvas__social-link{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
text-align: center;
transition: $transition3ms;
color: $color-black-1;
background:$color-white-3;
&:hover{color: $color-primary;}
}
}