File name
Commit message
Commit date
File name
Commit message
Commit date
04-04
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% - 140px);
// 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);
}
}
}
.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-bar {
@include flex-layout(flex, center, end);
margin-bottom: 3rem;
.form-select {
width: 120px;
}
.form-control {
width: 300px;
margin-left: 1rem;
}
.btn {
margin-left: 1rem;
}
}
.btn-wrap {
@include flex-layout(flex, center, end);
padding: 3rem 0;
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-template-rows: 1fr 1fr;
>div {
@include flex-layout(flex, center, start);
width: 100%;
padding: 1rem;
border-bottom: 1px solid var(--tk-gray-10);
// &:last-child {
// align-items: flex-start;
// }
.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 {
width: calc(100% - 180px);
.form-control {
max-width: 100%;
}
span {
font-size: var(--tk-fz-detail-sm);
}
}
>div,
.input-group{
max-width: calc(100% - 180px);
}
&.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;
}
}
// 자식 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);
&.overflow-y{
overflow-y: auto;
}
.tbl.data thead{
th{
background-color: #c8d0d8;
&:first-child{
border-radius: 1rem 0 0 0;
}
&:last-child{
border-radius: 0 1rem 0 0;
}
}
}
}
.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;
}
.h_100{
height: 100%;
}