File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.app-wrap{
display: grid;
grid-template-columns: clamp(280px, 10vw, 450px) minmax(1020px, 1fr);
grid-template-rows: 60px minmax(851px, 1226px);
grid-template-areas:
"sidebar header "
"sidebar main ";
height: 100%;
background-color: #f0f3fa;
header{
// background-color: #f8f9fa;
padding: 1rem 3rem;
// border-bottom: 1px solid #e9ecef;
grid-area: header;
@include flex-layout(flex, center, space-between);
.selected-menu-info{
@include flex-layout(flex, center);
span:nth-child(1){
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: #4b40b5;
@include flex-layout(flex, center, center);
margin-right:.8rem;
}
}
.user-info{
display: flex;
justify-content: flex-end;
align-items: center;
.user-name{
font-size: var(--fz-body-md);
font-weight: 600;
padding: 0 1rem;
}
.user-logout{
color: #ffffff;
background-color: #4b40b5;
padding: .5rem 1rem;
border-radius: 3rem;
cursor: pointer;
@include flex-layout(flex, center, center);
}
}
}
nav{
// height: 100%;
grid-area: sidebar;
background-color: #ffffff;
padding: 3rem;
.logo-wrap{
margin-bottom: 3rem;
}
ul{
height: calc(100% - 118px);
li{
padding: 1rem 0;
&.active > a,
.active > .router-link-active {
display: block;
border-radius: 1rem;
font-weight: bold;
background-color: #4b40b5;
color: #ffffff;
}
a{
padding: 1rem;
}
}
}
}
main{
height: 100%;
grid-area: main;
padding: 1rem 3rem 3rem 3rem;
}
&.page{
display: block;
}
}