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
.content-wrap {
width: 100%;
height: 100%;
padding: 3rem;
>.content-zone {
height: calc(100% - 142px);
// background-color: #ffffff;
// padding: 3rem;
// @include radius(20);
// box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
>.content {
height: 100%;
.scroll {
height: 100%;
overflow-y: auto;
}
}
&.full-page {
height: 100%;
}
&.detail{
height: calc(100% - 228px);
}
}
}
.content-wrap.main {
.content-zone {
height: 100%;
}
}
.box-title,
.section-title {
font-size: var(--tk-fz-title-md);
font-weight: 700;
margin-bottom: 1rem;
}
.search-wrap{
@include flex-layout(flex, center, end);
.search-bar {
position: relative;
@include flex-layout(flex, center, end);
margin-bottom: 3rem;
.form-select {
width: 120px;
&.border-none{
border: none;
margin-left: 0;
}
}
.form-control {
width: 300px;
margin-left: 1rem;
&.border-none{
border: none;
margin-left: 0;
}
}
button{
&.btn {
margin-left: 1rem;
}
&.btn-ico{
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
&.main{
&.ico-sch {
&::before,
&::after {
background-image: url(#{$url}/component/common/ico_sch_20_gn.svg);
}
}
}
}
}
&.border{
width: fit-content;
border: 1px solid var(--tk-gray-60);
background-color: var(--tk-white);
border-radius: var(--tk-input-rd-sm);
}
}
}
.btn-wrap {
@include flex-layout(flex, center, end);
// padding: 2rem 0;
padding-top: 2rem;
button {
margin-left: 1rem;
&.main{
background-color: var(--tk-main-50);
border: 1px solid var(--tk-main-50);
&:hover{
background-color: var(--tk-main-70);
border: 1px solid var(--tk-main-70);
}
&[disabled] {
background-color: var(--#{$prefix}gray-30);
border-color: var(--#{$prefix}gray-30);
color: var(--#{$prefix}gray-60);
}
}
}
&.list {
@include flex-layout(flex, center, space-between);
padding: 3rem 0;
}
}
.form-content {
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--tk-white);
border-radius: 0 0 2rem 2rem;
height: calc(100% - 45px);
grid-auto-rows: min-content;
// max-height: fit-content;
.layout {
width: 100%;
padding: 1rem;
border-bottom: 1px solid var(--tk-gray-10);
.form-title {
width: 180px;
font-weight: 700;
span {
color: var(--tk-point-40);
margin-right: .5rem;
}
}
.form-select {
min-width: 135px;
max-width: 300px;
&.fixed{
width: 135px;
}
}
.form-control {
max-width: calc(100% - 180px);
}
>div,
.form-group {
max-width: calc(100% - 180px);
.form-control {
max-width: 100%;
}
span {
font-size: var(--tk-fz-detail-sm);
}
&.w_100{
width: 100%;
}
}
>div,
.input-group{
max-width: calc(100% - 180px);
&.w_100{
width: 100%;
}
}
&.grid-column {
grid-column: 1/3;
}
&:nth-child(1),:nth-child(2){
padding-top: 0;
}
&:last-child{
grid-column: 1/3;
padding-bottom: 0;
border-bottom: 0;
}
&.pb10{
padding-bottom: 1rem;
}
}
&.grid-none {
display: block;
}
// 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
&:has(> div:nth-child(even)) {
>div{
&:nth-last-child(-n + 2){
border-bottom: 0;
&.border-bottom{
border-bottom: 1px solid var(--tk-gray-10);
}
}
&:last-child {
grid-column: unset;
&.grid-column {
grid-column: 1/3;
}
}
}
}
}
.form-box {
border: 1px solid var(--tk-gray-10);
@include radius(20);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
.form-box-title {
padding: 1rem 3rem;
background-color: #c8d0d8;
@include flex-layout(flex, center, start);
font-size: var(--tk-fz-title-sm);
border-radius: 2rem 2rem 0 0;
>p {
margin-right: 1rem;
font-weight: 700;
}
>p:nth-of-type(2) {
font-size: var(--tk-fz-detail-sm);
background-color: var(--tk-point-5);
border: 1px solid var(--tk-point-40);
padding: .2rem 1rem;
// border-radius: var(--tk-rd-12);
@include radius(30);
font-weight: 400;
span {
color: var(--tk-point-40);
margin-right: .5rem;
}
}
}
&.mb30{
margin-bottom: 3rem
}
}
.setting-box {
@include flex-layout(flex, start, start);
width: 100%;
// height: calc(100% - 77.5px);
.node-zone {
width: 325px;
height: 100%;
margin-right: 3rem;
background-color: #ffffff;
border-radius: var(--tk-rd-12);
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
.tree {
padding: 3rem;
width: 100%;
height: calc(100% - 149px);
overflow-y: auto;
}
}
.setting-zone {
width: calc(100% - 325px - 3rem);
height: 100%;
// .btn-wrap {
// // justify-content: flex-end;
// padding: 1rem 0;
// }
}
.btn-zone {
padding: 3rem;
button {
min-width: 126px;
margin-left: 1rem;
margin-bottom: 1rem;
}
button:nth-child(1) {
margin-left: 0;
}
button:last-child {
min-width: 100%;
margin-left: 0;
margin-bottom: 0;
}
}
}
.top-zone {
>div {
margin-bottom: 5rem;
.tbl {
.table-title {
@include ellipsis(1);
}
}
}
}
.middle-zone {
@include flex-layout(flex, flex-start, space-between);
gap: 3rem;
margin-bottom: 5rem;
.first-box,
.two-box,
.three-box {
flex: 0 0 calc(33.333% - 2rem);
max-width: calc(33.333% - 2rem);
padding: 2rem;
border-radius: var(--tk-rd-12);
text-align: center;
border: 1px solid var(--tk-gray-10);
}
}
.chart-wrap {
padding: 3rem;
border: 1px solid var(--tk-gray-10);
@include radius(20);
background-color: var(--tk-white);
height:350px
}
.area{
font-size: var(--tk-input-fz-sm);
}
.form-check{
display: flex;
align-items: center;
}
.tbl-wrap{
// height: 100%;
// box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
.tbl{
max-width: 100%;
width: 100%;
&.data{
thead{
th{
background-color: #c8d0d8;
&:first-child{
border-radius: 1rem 0 0 0;
}
&:last-child{
border-radius: 0 1rem 0 0;
}
&.sticky{
position: sticky;
top: 0;
z-index: 10;
background-color: #c8d0d8;
}
}
}
tbody{
tr{
&:last-child{
td{
&:first-child{
border-radius: 0 0 0 1rem;
}
&:last-child{
border-radius: 0 0 1rem 0;
}
}
}
td{
.form-check{
justify-content: center;
input[type=checkbox] ~ label{
padding-left: calc(var(--tk-rdo-size-md));
}
}
}
}
}
}
}
&.overflow-y{
overflow-y: auto;
}
}
.mixing thead th{
border-right: 1px solid var(--tk-secondary-30);
&[rowspan="2"]:last-child{
border-right:0;
}
}
.mb30{
margin-bottom: 3rem;
}
.dp__main{
height: 100%;
>div:first-child{
height: 100%;
*{
height: 100%;
}
.dp__input{
width: 100%;
border: none;
background-color: transparent;
transition: none;
line-height: 100%;
padding: 0;
font-size: 1.5rem;
}
.dp__icon{
display: none;
}
}
.dp__menu,
.dp__selection_preview,
.dp__action_button{
font-size: 1.5rem;
}
}
.check-area {
@include flex-layout(flex, center);
gap: 3rem;
}
.w_100{
width: 100%;
}
.h_100{
height: 100%;
}
.layout{
@include flex-layout(flex, center, flex-start);
.ml10{
margin-left: 1rem;
}
&.between{
@include flex-layout(flex, center, space-between);
}
}
.border-top{
border-top: 1px solid var(--tk-gray-10);
}
.gallery-wrap{
margin-bottom: 3rem;
.mySwiper{
max-width: 600px;
height: auto;
aspect-ratio: 4/3;
background-color: #c8d0d8;
}
.mySwiper2{
max-width: 600px;
.swiper-slide{
width: 25%;
height: auto;
aspect-ratio: 4/3;
background-color: #c8d0d8;
}
}
}
.video-zone{
margin-bottom: 3rem;
iframe{
display: block;
width: 600px;
height: auto;
aspect-ratio: 16/9;
margin: 0 auto;
}
}
.comment-box{
padding: 3rem;
background-color: var(--tk-gray-10);
@include radius(20);
margin-top: 3rem;
.comment-head{
width: auto;
margin-right: 3rem;
padding-left: 3rem;
background-image: url(#{$url}/component/common/ico_comment.svg);
background-repeat: no-repeat;
background-position: left center;
}
.form-control{
max-width: calc(100% - 230px);
}
.btn{
margin-left: 1rem;
}
}
.navigate-wrap{
padding: 2rem;
background-color: var(--tk-white);
@include radius(20);
margin-top: 2rem;
.content-navigate{
border-top: 1px solid var(--tk-gray-50);
border-bottom: 1px solid var(--tk-gray-50);
tbody{
tr{
border-bottom: 1px solid var(--tk-gray-30);
td{
padding: 1rem;
}
&:last-child{
border-bottom: 0;
}
}
}
}
}
.icon-btn-zone{
button{
border: 1px solid var(--tk-gray-30);
background-color: var(--tk-white);
border-radius: 50%;
margin-left: 1rem;
&.btn-ico[class*='ico-'] {
background-size: 1.8rem;
}
&:first-child{
margin-left: 0;
}
}
}
.state{
display: inline-block;
padding: .5rem 1rem;
@include radius(10);
font-weight: 700;
&.red{
background-color: var(--tk-point-10);
color: var(--tk-point-40);
}
&.blue{
background-color: var(--tk-primary-10);
color: var(--tk-primary-40);
}
&.answer{
border: 1px solid var(--tk-gray-90);
margin-right: 1rem;
font-size: 1.5rem;
}
&.question{
background-color: var(--tk-gray-90);
color: var(--tk-white);
margin-right: 1rem;
font-size: 1.5rem;
}
}
.sch-full{
height: calc(100% - 60px);
}