167 lines
3.5 KiB
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;}
|
|
}
|
|
|
|
}
|