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% - 70px);
background-color: var(--tk-white);
padding: 3rem;
@include radius(30);
>.content {
height: 100%;
.scroll {
height: 100%;
overflow-y: auto;
}
}
&.full-page {
height: 100%;
}
}
}
.content-wrap.main {
.content-zone {
height: 100%;
}
}
.page-title {
font-size: var(--tk-fz-title-xlg);
font-weight: 700;
margin-bottom: 1rem;
}
.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: 1rem;
.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
}
&.list {
@include flex-layout(flex, center, space-between);
padding: 3rem 0;
}
}
.form-content {
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
// 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 {
width: 200px;
}
.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;
}
}
}
}
.check-area {
@include flex-layout(flex, center);
gap: 3rem;
}
}
.title-zone {
@include flex-layout(flex, center, space-between);
margin-bottom: 3rem;
.section-title {
margin-bottom: 0;
}
}
.form-box {
border: 1px solid var(--tk-gray-10);
@include radius(30);
.form-box-title {
padding: 1rem 3rem;
background-color: #fbfbfb;
@include flex-layout(flex, center, start);
font-size: var(--tk-fz-title-sm);
border-radius: 3rem 3rem 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: 5rem;
background-color: #fbfbfb;
border-radius: var(--tk-rd-12);
.tree {
padding: 3rem;
width: 100%;
height: calc(100% - 149px);
overflow-y: auto;
}
}
.setting-zone {
width: calc(100% - 325px - 5rem);
height: 100%;
// .form-content {
// // padding: 0;
// >div {
// padding: 1rem;
//
// }
// }
.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(30);
}
.area{
font-size: var(--tk-input-fz-sm);
}
.form-check{
display: flex;
align-items: center;
}
.tbl-wrap{
height: 100%;
&.overflow-y{
overflow-y: auto;
}
}
.mixing thead th{
border-right: 1px solid var(--tk-secondary-30);
&[rowspan="2"]:last-child{
border-right:0;
}
}