File name
Commit message
Commit date
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;
}
}