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
.admin-wrap {
background-color: #eaeff4;
display: grid;
grid-template-columns: clamp(240px, 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, flex-end, 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: 1rem;
}
}
}
}
}
.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 0;
height: 100%;
overflow-y: auto;
.menu-item {
position: relative;
cursor: pointer;
padding: 0 2rem;
span{
display: block;
padding: 1rem;
&.main-active{
color: var(--tk-main-50);
font-weight: 700;
}
}
>span.has-children{
position: relative;
&::after {
content: '';
position: absolute;
right: 0;
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); // 오른쪽 화살표 → 아래 방향
}
}
/* 서브메뉴 스타일 */
.sub-menu {
padding: 1rem;
background: var(--tk-white);
border: 1px solid #ccc;
@include radius(10);
display: block;
width: 100%;
>li{
cursor: pointer;
&.sub-active{
>span{
background-color: var(--tk-main-50);
color: var(--tk-white);
font-weight: 700;
@include radius(10);
}
}
&.has-third-depth{
&.sub-active {
>span{
background-color: var(--tk-main-50);
color: var(--tk-white);
font-weight: 700;
@include radius(10);
// border-radius: 1rem 1rem 0 0;
}
}
}
.ssub-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%
}
}