File name
Commit message
Commit date
05-22
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.admin-wrap {
background-color: #eaeff4;
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%;
// font-size: 1.8rem;
.admin-header {
grid-area: header;
@include flex-layout(flex, center, space-between);
padding: 1rem 3rem;
border-bottom: 1px solid var(--tk-gray-30);
.title-zone{
@include flex-layout(flex, center, flex-start);
.page-title {
font-size: var(--tk-fz-title-xlg);
font-weight: 700;
margin-right: 1rem
}
}
.info-wrap {
.info {
@include flex-layout(flex, center, flex-end);
.info-name{
padding: .8rem
}
ul.info-btn{
@include flex-layout(flex, center);
li{
// @include flex-layout(flex, center, center);
padding: 0 1rem;
border-right: 1px solid var(--tk-gray-30);
&:last-child{
border-right: none;
}
button{
@include flex-layout(flex,center);
padding: .3rem 1rem !important;
background-color: var(--tk-white);
@include radius(20);
font-size:1.4rem;
gap: .5rem;
}
}
}
}
}
}
.side-bar{
grid-area: sidebar;
height: 100%;
background-color: #f7f9fb;
border-right: 1px solid var(--tk-gray-30);
.logo{
padding: 1.35rem 1rem;
font-size: var(--tk-fz-title-lg);
font-weight: 700;
text-align: center;
border-bottom: 1px solid var(--tk-gray-30);
}
nav{
height: calc(100% - 60px);
/* 메뉴 스타일 */
.main-menu {
padding: 2rem;
height: 100%;
overflow-y: auto;
.has-children{
position: relative;
display: block;
padding: 1rem;
cursor: pointer;
&::after {
content: '';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url(#{$url}/component/common/ico_arr_16_right_gray70.svg);
background-repeat: no-repeat;
background-size: contain;
border:1px solid var(--tk-gray-50);
border-radius: 50%;
transition: transform 0.3s ease;
}
&.open::after {
border: 1px solid var(--tk-main-50);
background-image: url(#{$url}/component/common/ico_arr_16_right_green70.svg);
transform: translateY(-50%) rotate(90deg); // 오른쪽 화살표 → 아래 방향
}
&.menu-active{
color: var(--tk-main-50);
font-weight: 700;
}
}
/* 서브메뉴 스타일 */
.sub-menu {
padding: 1rem;
background: var(--tk-white);
border: 1px solid #ccc;
@include radius(10);
display: block;
width: 100%;
>li{
cursor: pointer;
span{
display: block;
padding: 1rem;
}
&.sub-active{
>span{
background-color: var(--tk-main-50);
color: var(--tk-white);
font-weight: 700;
@include radius(10);
}
}
>.sub-menu{
padding: 1rem;
background-color: var(--tk-gray-10);
@include radius(10);
li{
span{
padding: 1rem;
}
&.ss-active{
color: var(--tk-main-50);
font-weight: 700;
}
}
}
}
}
}
}
}
.main-wrap {
grid-area: main;
width: 100%;
height: 100%
}
}