File: /home/u756937133/domains/inovaix.studio/public_html/assets/sass/components/_mobile-menu.scss
.nft-mobile-menu {
position: fixed;
width: 260px;
height: 100vh;
overflow-y: scroll;
top: 0;
left: -280px;
background-color: $bg-color1;
padding: 30px 0;
z-index: 110;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-box-shadow: 20px 10px 30px rgba(0, 0, 0, 0.1);
box-shadow: 20px 10px 30px rgba(0, 0, 0, 0.1);
}
.nft-mobile-menu .close-menu {
background-color: $text-color1;
padding: 7px 15px;
border: none;
&:hover {
background-color: $text-color2;
}
}
.nft-mobile-menu-1 .close-menu {
background-color: $text-color4;
&:hover {
background-color: $text-color1;
}
}
.nft-mobile-menu-2 .close-menu {
background-color: $text-color6;
&:hover {
background-color: $text-color1;
}
}
.nft-mobile-menu .mobile-menu-logo {
width: 200px;
display: block;
margin-left: 13px;
margin-top: 20px;
}
.nft-mobile-menu ul {
margin-top: 40px;
}
.nft-mobile-menu ul li {
display: block;
}
.nft-mobile-menu ul li a {
display: block;
padding: 8px 8px 8px 15px;
border-bottom: 1px solid;
border-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 49.59%,
rgba(255, 255, 255, 0.2) 100%
)
1;
font-weight: 500;
color: $text-color1;
text-transform: capitalize;
transition-timing-function: linear;
transition-duration: 0.3s;
&:hover {
color: $text-color2;
}
}
.nft-mobile-menu-1 ul li a {
&:hover {
color: $text-color4;
}
}
.nft-mobile-menu-2 ul li a {
&:hover {
color: $text-color6;
}
}
.nft-mobile-menu ul li.has-submenu {
position: relative;
}
.nft-mobile-menu ul li.has-submenu > a {
position: relative;
}
.nft-mobile-menu ul li.has-submenu > a::after {
content: "+";
position: absolute;
top: 6px;
right: 10px;
background-color: $text-color1;
width: 25px;
height: 25px;
text-align: center;
line-height: 22px;
border-radius: 2px;
cursor: pointer;
color: $bg-color1;
transition-timing-function: linear;
transition-duration: 0.3s;
}
.nft-mobile-menu ul li.has-submenu ul {
margin-top: 0;
display: none;
}
.nft-mobile-menu ul li.has-submenu ul li a {
padding-left: 25px;
}
.nft-mobile-menu ul li.has-submenu ul li.has-submenu ul li a {
padding-left: 35px;
}
.nft-mobile-menu .search-form {
margin-top: 30px;
padding: 0 15px;
}
.nft-mobile-menu .search-form form {
width: 100%;
position: relative;
}
.nft-mobile-menu .search-form form input {
width: 100%;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid;
border-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.2) 49.59%,
rgba(255, 255, 255, 0.2) 100%
)
1;
}
.nft-mobile-menu .search-form form button {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: $text-color1;
color: $text-color5;
padding: 7.5px 14px;
border-radius: 0 1px 2px 0;
font-family: $heading-font;
}
.mobile-menu-active {
left: 0;
}
.nft-mobile-menu .close-menu {
position: absolute;
top: 0;
right: 0;
i {
font-size: 20px;
color: $text-color5;
}
}
.nft-mobile-menu-2 .close-menu {
i {
color: $text-color1;
}
&:hover {
i {
color: $text-color4;
}
}
}
.nft-mobile-menu-2 .close-menu {
i {
color: $text-color1;
}
&:hover {
i {
color: $text-color6;
}
}
}
.phone-number-mobile-menu {
margin-top: 15px;
margin-bottom: 10px;
a {
font-size: 15px;
font-weight: 400;
color: $text-color1;
font-family: $body-font;
display: block;
text-align: center;
}
}
.mobile-menu-copy-right-text {
p {
font-size: 15px;
font-family: $body-font;
color: $text-color1;
text-align: center;
span {
color: $text-color2;
}
}
}