File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@charset "utf-8";
.dashboard-wrap {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 270px minmax(auto, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"header header "
"nav main "
"nav main "
}
.layout-wrap{
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
background-color: #fff;
padding: 15px 30px;
grid-area: header;
position: relative;
}
.logo {
width: 200px;
}
.logo>a {
display: block;
width: 100%;
}
.logo>a>img {
display: block;
width: 100%;
}
.user-name {
font-size: 1.4rem;
margin-left: 5px;
}
.sms,
.user {
margin-left: 10px;
}
/* 메뉴 공통 */
nav {
background-color: #213f99;
position: relative;
}
nav ul li a,
nav ul li p {
padding: 5px;
display: block;
color: #fff;
}
nav.side-menu ul.sub-menu,
nav.top-menu ul.sub-menu {
font-size: 1.4rem;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
ul.sub-menu>li {
padding: 10px 20px;
}
p.active {
background-color: #fff;
color: #213f99;
border-radius: 50px
}
/* 사이드 메뉴 */
nav.side-menu {
width: 100%;
height: 100%;
border-radius: 0 70px 70px 0;
grid-area: nav;
overflow-y: auto;
}
nav.side-menu::-webkit-scrollbar {
display: none;
}
nav.side-menu::-ms-scrollbar {
display: none;
}
nav.side-menu>ul.main-menu {
padding: 50px 30px;
}
nav.side-menu>ul.main-menu>li>div>a,
nav>ul>li {
padding: 10px 0;
font-size: 1.4rem;
font-weight: bold;
}
/* 상단 메뉴 */
.top-menu>ul.main-menu {
display: flex;
justify-content: center;
}
.depth1{
cursor: default;
}
.top-menu>ul>li {
min-width: 161px;
text-align: center;
position: relative;
}
.top-menu ul.sub-menu {
position: absolute;
width: 100%;
background-color: #fff;
z-index: 10000;
bottom: 0;
left: 0;
transform: translateY(100%);
}
.top-menu ul.sub-menu li a {
text-align: center;
color: #213f99;
}
.navbg {
overflow: hidden;
background-color: #fff;
border-bottom: 2px solid #213f99;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
width: 100%;
z-index: 9999;
}
.top-menu ul.sub-menu.hide,
.navbg.hide {
animation: slideUp 0.5s forwards;
}
.top-menu ul.sub-menu.show {
animation: slideDown 0.8s forwards;
}
.navbg.show {
animation: bgSlideDown 0.5s forwards;
}
/* 메인 */
.main {
padding: 20px;
height: 100%;
grid-area: main;
}
.layout-wrap .main {
display: flex;
padding: 20px;
flex-grow: 1;
/* overflow: auto; */
grid-area: main;
}
@keyframes slideDown {
0% {
height: 0;
}
100% {
height: auto;
}
}
@keyframes slideUp {
0% {
height: auto;
}
100% {
height: 0;
}
}
@keyframes bgSlideDown {
0% {
height: 0;
}
100% {
height: 240px;
}
}