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%;
}
&.sch-full{
height: calc(100% - 70px);
}
&.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);
// 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;
}
}
}
tbody{
tr{
&:last-child{
td{
&:first-child{
border-radius: 0 0 0 1rem;
}
&:last-child{
border-radius: 0 0 1rem 0;
}
}
}
}
}
}
&.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;
}
}