You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
4.6 KiB
SCSS
220 lines
4.6 KiB
SCSS
.k-sidebar{
|
|
position: fixed;
|
|
height: 100vh;
|
|
background:black;
|
|
color:white;
|
|
width: 80px;
|
|
// transition: width 1s ease-in-out;/
|
|
padding:100px 18px;
|
|
z-index: 100;
|
|
top:0;
|
|
left:0;
|
|
|
|
.menu-btn{
|
|
cursor:pointer;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.back-button{
|
|
cursor:pointer;
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.sub-page-title{
|
|
font-size:22px;
|
|
text-align: center;
|
|
color:#212121 !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar-controll{
|
|
width:100%;
|
|
}
|
|
.sidebar-menus{
|
|
position: relative;
|
|
left:-300px;
|
|
display: none;
|
|
opacity: 0;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
|
|
|
|
.mobile-complete-logo{
|
|
width:106px
|
|
}
|
|
|
|
&.open{
|
|
width:300px;
|
|
padding:80px 40px 0px;
|
|
overflow: auto;
|
|
|
|
.sidebar-controll{
|
|
display: none;
|
|
}
|
|
.sidebar-menus{
|
|
left:0px;
|
|
opacity: 1;
|
|
display: block;
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.sidebar-logos{
|
|
padding-bottom:60px;
|
|
.open-logo{
|
|
width:70px;
|
|
}
|
|
.menu-close{
|
|
cursor:pointer;
|
|
width:26px;
|
|
position:absolute;
|
|
right:0;
|
|
top:0;
|
|
}
|
|
}
|
|
.sidebar-nav{
|
|
.menu-box{
|
|
padding:20px 0px 10px;
|
|
border-bottom:1px solid rgba(255, 255, 255, 0.1);
|
|
.menu-title, .menu-item{
|
|
a{
|
|
color:white !important;
|
|
}
|
|
|
|
&.active, &:hover{
|
|
a{
|
|
color:#C29C58 !important;
|
|
}
|
|
}
|
|
}
|
|
.menu-title{
|
|
font-size:20px;
|
|
line-height: 20px;
|
|
letter-spacing: -0.01em;
|
|
font-weight: 300;
|
|
padding-bottom:10px;
|
|
}
|
|
.menu-item{
|
|
font-size:16px;
|
|
line-height: 16px;
|
|
letter-spacing: -0.01em;
|
|
font-weight: 300;
|
|
padding-bottom:10px;
|
|
}
|
|
}
|
|
}
|
|
.sidebar-footer{
|
|
padding-top:60px;
|
|
color:rgba(255, 255, 255, 0.2);
|
|
.menu-company{
|
|
font-size:20px;
|
|
font-weight: 700;
|
|
line-height: 28.9px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.menu-copyright{
|
|
margin-top:10px;
|
|
font-size:12px;
|
|
font-weight: 300;
|
|
line-height: 15.6px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/************ BreakPoints ************/
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: 576px) {
|
|
|
|
}
|
|
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: 768px) {
|
|
|
|
}
|
|
|
|
// Large devices (desktops, 992px and up)
|
|
@media (max-width: 992px) {
|
|
|
|
}
|
|
|
|
// X-Large devices (large desktops, 1200px and up)
|
|
@media (max-width: 1200px) {
|
|
|
|
}
|
|
|
|
// XX-Large devices (larger desktops, 1400px and up)
|
|
@media (max-width: 1400px) {
|
|
.k-sidebar{
|
|
position:relative;
|
|
height:auto;
|
|
background:rgba(7, 7, 7, 0.8);
|
|
width: 100%;
|
|
padding:20px;
|
|
|
|
.sidebar-controll{
|
|
position:relative;
|
|
}
|
|
|
|
.menu-btn{
|
|
left:auto;
|
|
right:20px;
|
|
}
|
|
|
|
&.open{
|
|
width:100%;
|
|
padding:30px;
|
|
height: 100vh;
|
|
background:#070707;
|
|
|
|
.mobile-complete-logo{
|
|
width:128px;
|
|
}
|
|
}
|
|
|
|
.sidebar-logos{
|
|
padding-bottom:0px;
|
|
.open-logo{
|
|
width:128px;
|
|
}
|
|
}
|
|
|
|
.sidebar-nav{
|
|
padding-top:16px;
|
|
|
|
.menu-box{
|
|
padding:24px 0px;
|
|
display:flex;
|
|
|
|
.menu-title{
|
|
flex:1;
|
|
padding:0;
|
|
}
|
|
.menu-item-group{
|
|
flex:1;
|
|
}
|
|
.menu-item{
|
|
font-size:18px;
|
|
line-height: 18px;
|
|
padding-bottom:20px;
|
|
&:last-child{
|
|
padding-bottom:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sidebar-footer{
|
|
padding-top:30px;
|
|
}
|
|
}
|
|
.sub-page-background{
|
|
background:white;
|
|
}
|
|
} |