qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨chore: Sync Sass

Browse Source
This commit is contained in:
minsik 2024-10-07 15:18:19 +09:00
parent 8d25b6176f
commit 7ddcc91d1f
4 changed files with 1629 additions and 1990 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
src/styles/_contents.scss
View File

@ -3,24 +3,19 @@
height: calc(100vh - 47px); height: calc(100vh - 47px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.canvas-content{ .canvas-content{
flex: 1 1 auto; flex: 1 1 auto;
.canvas-layout{ .canvas-layout{
height: 100%; height: 100%;
} }
} }
&.sub-wrap{ &.sub-wrap{
overflow: hidden; overflow: hidden;
.canvas-content{ .canvas-content{
height: calc(100% - 47px); height: calc(100% - 47px);
} }
} }
} }
// CanvasMenu // CanvasMenu
.canvas-menu-wrap{ .canvas-menu-wrap{
position: relative; position: relative;
@ -29,7 +24,6 @@
padding-bottom: 0; padding-bottom: 0;
background-color: #383838; background-color: #383838;
transition: padding .17s ease-in-out; transition: padding .17s ease-in-out;
.canvas-menu-inner{ .canvas-menu-inner{
position: relative; position: relative;
display: flex; display: flex;
@ -37,17 +31,14 @@
padding: 0 40px 0 20px; padding: 0 40px 0 20px;
background-color: #2C2C2C; background-color: #2C2C2C;
z-index: 999; z-index: 999;
.canvas-menu-list{ .canvas-menu-list{
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
.canvas-menu-item{ .canvas-menu-item{
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
button{ button{
display: flex; display: flex;
align-items: center; align-items: center;
@ -58,7 +49,6 @@
padding: 15px 20px; padding: 15px 20px;
opacity: 0.55; opacity: 0.55;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
.menu-icon{ .menu-icon{
display: block; display: block;
width: 16px; width: 16px;
@ -67,66 +57,38 @@
background-position: center; background-position: center;
background-size: cover; background-size: cover;
margin-right: 10px; margin-right: 10px;
&.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
&.con00 { &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
background-image: url(/static/images/canvas/menu_icon00.svg); &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
} &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
&.con01 { &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
background-image: url(/static/images/canvas/menu_icon01.svg); &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
}
&.con02 {
background-image: url(/static/images/canvas/menu_icon02.svg);
}
&.con03 {
background-image: url(/static/images/canvas/menu_icon03.svg);
}
&.con04 {
background-image: url(/static/images/canvas/menu_icon04.svg);
}
&.con05 {
background-image: url(/static/images/canvas/menu_icon05.svg);
}
&.con06 {
background-image: url(/static/images/canvas/menu_icon06.svg);
} }
} }
}
&.active{ &.active{
background-color: #383838; background-color: #383838;
button{ button{
opacity: 1; opacity: 1;
} }
} }
} }
} }
.canvas-side-btn-wrap{ .canvas-side-btn-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
.select-box{ .select-box{
width: 124px; width: 124px;
margin-right: 5px; margin-right: 5px;
> div{ > div{
width: 100%; width: 100%;
} }
} }
.btn-from{ .btn-from{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
button{ button{
display: block; display: block;
width: 30px; width: 30px;
@ -137,58 +99,27 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 15px 15px; background-size: 15px 15px;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
&.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
&.btn01 { &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
background-image: url(../../public/static/images/canvas/side_icon03.svg); &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
} &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
&.btn02 { &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
background-image: url(../../public/static/images/canvas/side_icon02.svg); &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
} &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
&.btn03 {
background-image: url(../../public/static/images/canvas/side_icon01.svg);
}
&.btn04 {
background-image: url(../../public/static/images/canvas/side_icon04.svg);
}
&.btn05 {
background-image: url(../../public/static/images/canvas/side_icon05.svg);
}
&.btn06 {
background-image: url(../../public/static/images/canvas/side_icon06.svg);
}
&.btn07 {
background-image: url(../../public/static/images/canvas/side_icon07.svg);
}
&.btn08 {
background-image: url(../../public/static/images/canvas/side_icon08.svg);
}
&.btn09 {
background-image: url(../../public/static/images/canvas/side_icon09.svg);
}
&:hover{ &:hover{
background-color: #1083E3; background-color: #1083E3;
} }
&.active{ &.active{
background-color: #1083E3; background-color: #1083E3;
} }
} }
} }
.ico-btn-from{ .ico-btn-from{
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
button{ button{
.ico{ .ico{
display: block; display: block;
@ -197,37 +128,22 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
&.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
&.ico01 { &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
background-image: url(../../public/static/images/canvas/ico-flx01.svg); &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
&.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
} }
&.ico02 {
background-image: url(../../public/static/images/canvas/ico-flx02.svg);
}
&.ico03 {
background-image: url(../../public/static/images/canvas/ico-flx03.svg);
}
&.ico04 {
background-image: url(../../public/static/images/canvas/ico-flx04.svg);
}
}
.name{ .name{
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
} }
} }
&.form06{ &.form06{
.name{ .name{
font-size: 13px; font-size: 13px;
} }
} }
} }
.vertical-horizontal{ .vertical-horizontal{
display: flex; display: flex;
min-width: 170px; min-width: 170px;
@ -237,13 +153,11 @@
background: #373737; background: #373737;
line-height: 28px; line-height: 28px;
overflow: hidden; overflow: hidden;
span{ span{
padding: 0 10px; padding: 0 10px;
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
} }
button{ button{
margin-left: auto; margin-left: auto;
height: 100%; height: 100%;
@ -254,14 +168,12 @@
padding: 0 7.5px; padding: 0 7.5px;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
} }
&.on{ &.on{
button{ button{
background-color: #1083E3; background-color: #1083E3;
} }
} }
} }
.size-control{ .size-control{
display: flex; display: flex;
align-items: center; align-items: center;
@ -272,12 +184,10 @@
width: 100px; width: 100px;
height: 30px; height: 30px;
margin: 0 5px; margin: 0 5px;
span{ span{
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
} }
.control-btn{ .control-btn{
display: block; display: block;
width: 12px; width: 12px;
@ -285,11 +195,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
&.minus{ &.minus{
background-image: url(../../public/static/images/canvas/minus.svg); background-image: url(../../public/static/images/canvas/minus.svg);
} }
&.plus{ &.plus{
background-image: url(../../public/static/images/canvas/plus.svg); background-image: url(../../public/static/images/canvas/plus.svg);
} }
@ -297,7 +205,6 @@
} }
} }
} }
.canvas-depth2-wrap{ .canvas-depth2-wrap{
position: absolute; position: absolute;
top: -100%; top: -100%;
@ -306,24 +213,20 @@
width: 100%; width: 100%;
height: 50px; height: 50px;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
.canvas-depth2-inner{ .canvas-depth2-inner{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 40px; padding: 0 40px;
height: 100%; height: 100%;
.canvas-depth2-list{ .canvas-depth2-list{
display: flex; display: flex;
align-items: center ; align-items: center ;
height: 100%; height: 100%;
.canvas-depth2-item{ .canvas-depth2-item{
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 26px; margin-right: 26px;
height: 100%; height: 100%;
button{ button{
position: relative; position: relative;
opacity: 0.55; opacity: 0.55;
@ -333,12 +236,10 @@
height: 100%; height: 100%;
padding-right: 12px; padding-right: 12px;
} }
&.active{ &.active{
button{ button{
opacity: 1; opacity: 1;
font-weight: 600; font-weight: 600;
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -353,20 +254,17 @@
} }
} }
} }
.canvas-depth2-btn-list{ .canvas-depth2-btn-list{
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
height: 100%; height: 100%;
.depth2-btn-box{ .depth2-btn-box{
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 34px; margin-right: 34px;
height: 100%; height: 100%;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
button{ button{
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -374,7 +272,6 @@
height: 100%; height: 100%;
color: #fff; color: #fff;
padding-right: 12px; padding-right: 12px;
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -386,23 +283,19 @@
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
} }
} }
&:last-child{ &:last-child{
margin-right: 0; margin-right: 0;
} }
&.mouse{ &.mouse{
opacity: 0.55; opacity: 0.55;
} }
} }
} }
} }
&.active{ &.active{
top: 47px; top: 47px;
} }
} }
&.active{ &.active{
padding-bottom: 50px; padding-bottom: 50px;
} }
@ -415,12 +308,10 @@
background-color: #1C1C1C; background-color: #1C1C1C;
border-top: 1px solid #000; border-top: 1px solid #000;
width: 100%; width: 100%;
.canvas-plane-wrap{ .canvas-plane-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
max-width: calc(100% - 45px); max-width: calc(100% - 45px);
.canvas-page-box{ .canvas-page-box{
display: flex; display: flex;
align-items: center; align-items: center;
@ -429,7 +320,6 @@
border-right:1px solid #000; border-right:1px solid #000;
min-width: 0; min-width: 0;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
display: flex; display: flex;
align-items: center; align-items: center;
@ -441,7 +331,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.close{ .close{
flex: none; flex: none;
display: block; display: block;
@ -451,30 +340,24 @@
background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
background-size: cover; background-size: cover;
} }
&.on{ &.on{
background-color: #fff; background-color: #fff;
span{ span{
font-weight: 600; font-weight: 600;
color: #101010; color: #101010;
} }
.close{ .close{
background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
} }
&:hover{ &:hover{
background-color: #fff; background-color: #fff;
} }
} }
&:hover{ &:hover{
background-color: #000; background-color: #000;
} }
} }
} }
.plane-add{ .plane-add{
display: flex; display: flex;
align-items: center; align-items: center;
@ -484,7 +367,6 @@
background-color: #1C1C1C; background-color: #1C1C1C;
border-right: 1px solid #000; border-right: 1px solid #000;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
display: block; display: block;
width: 9px; width: 9px;
@ -492,7 +374,6 @@
background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
background-size: cover; background-size: cover;
} }
&:hover{ &:hover{
background-color: #000; background-color: #000;
} }
@ -504,7 +385,6 @@
position: relative; position: relative;
height: calc(100% - 36.5px); height: calc(100% - 36.5px);
background-color: #fff; background-color: #fff;
canvas{ canvas{
position: absolute; position: absolute;
top: 0; top: 0;
@ -524,25 +404,20 @@
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
background: #2C2C2C; background: #2C2C2C;
z-index: 999; z-index: 999;
.sub-header-inner{ .sub-header-inner{
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding: 0 100px; padding: 0 100px;
.sub-header-title-wrap{ .sub-header-title-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
.title-item{ .title-item{
position: relative; position: relative;
padding: 0 24px; padding: 0 24px;
a{ a{
display: flex; display: flex;
align-items: center; align-items: center;
.icon{ .icon{
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -550,13 +425,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
&.drawing {
background-image: url(../../public/static/images/main/drawing_icon.svg);
} }
} }
}
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -567,38 +438,31 @@
height: 16px; height: 16px;
background-color: #D9D9D9; background-color: #D9D9D9;
} }
&:first-child{ &:first-child{
padding-left: 0; padding-left: 0;
} }
&:last-child{ &:last-child{
padding-right: 0; padding-right: 0;
&:after{ &:after{
display: none; display: none;
} }
} }
} }
} }
.sub-header-title{ .sub-header-title{
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
} }
.sub-header-location{ .sub-header-location{
margin-left: auto; margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
.location-item{ .location-item{
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
span{ span{
display: flex; display: flex;
font-size: 12px; font-size: 12px;
@ -606,7 +470,6 @@
font-weight: normal; font-weight: normal;
cursor: default; cursor: default;
} }
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -617,18 +480,14 @@
height: 6px; height: 6px;
background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
} }
&:first-child{ &:first-child{
padding-left: 0; padding-left: 0;
} }
&:last-child{ &:last-child{
padding-right: 0; padding-right: 0;
span{ span{
color: #fff; color: #fff;
} }
&:after{ &:after{
display: none; display: none;
} }
@ -641,51 +500,42 @@
// sub content // sub content
.sub-content{ .sub-content{
padding-top: 46px; padding-top: 46px;
.sub-content-inner{ .sub-content-inner{
max-width: 1720px; max-width: 1720px;
margin: 0 auto; margin: 0 auto;
padding-top: 20px; padding-top: 20px;
.sub-content-box{ .sub-content-box{
margin-bottom: 20px; margin-bottom: 20px;
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
&.estimate{ &.estimate{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 36.5px); height: calc(100% - 36.5px);
overflow-y: auto; overflow-y: auto;
padding-top: 0; padding-top: 0;
.sub-content-inner{ .sub-content-inner{
flex: 1; flex: 1;
width: 100%; width: 100%;
} }
} }
} }
.sub-table-box{ .sub-table-box{
padding: 20px; padding: 20px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #E9EAED; border: 1px solid #E9EAED;
background: #FFF; background: #FFF;
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
.table-box-title-wrap{ .table-box-title-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
.title-wrap{ .title-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
h3{ h3{
display: block; display: block;
font-size: 15px; font-size: 15px;
@ -693,26 +543,21 @@
font-weight: 600; font-weight: 600;
margin-right: 14px; margin-right: 14px;
} }
.info-wrap{ .info-wrap{
display: flex; display: flex;
align-items: center; align-items: center;
li{ li{
position: relative; position: relative;
padding: 0 6px; padding: 0 6px;
font-size: 12px; font-size: 12px;
color: #101010; color: #101010;
font-weight: normal; font-weight: normal;
span{ span{
font-weight: 600; font-weight: 600;
&.red{ &.red{
color: #E23D70; color: #E23D70;
} }
} }
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -723,29 +568,17 @@
height: 11px; height: 11px;
background-color: #D9D9D9; background-color: #D9D9D9;
} }
&:first-child{padding-left: 0;}
&:first-child { &:last-child{padding-right: 0;&::after{display: none;}}
padding-left: 0;
}
&:last-child {
padding-right: 0;
&::after {
display: none;
} }
} }
} }
} }
}
}
.left-unit-box{ .left-unit-box{
margin-left: auto; margin-left: auto;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.promise-gudie{ .promise-gudie{
display: block; display: block;
font-size: 13px; font-size: 13px;
@ -753,18 +586,15 @@
color: #101010; color: #101010;
margin-bottom: 20px; margin-bottom: 20px;
} }
.important{ .important{
color: #f00; color: #f00;
} }
.sub-table-footer{ .sub-table-footer{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
} }
.pagination-wrap{ .pagination-wrap{
margin-top: 24px; margin-top: 24px;
} }
@ -774,23 +604,19 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
.sub-table-box{ .sub-table-box{
flex: 1 ; flex: 1 ;
} }
.info-title{ .info-title{
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #344356; color: #344356;
margin-bottom: 10px; margin-bottom: 10px;
} }
.info-inner{ .info-inner{
position: relative; position: relative;
font-size: 13px; font-size: 13px;
color: #344356; color: #344356;
.copy-ico{ .copy-ico{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -808,17 +634,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
.estimate-box{ .estimate-box{
flex: 1 ; flex: 1 ;
display: flex; display: flex;
align-items: center; align-items: center;
&:last-child{ &:last-child{
flex: none; flex: none;
min-width: 220px; min-width: 220px;
} }
.estimate-tit{ .estimate-tit{
width: 105px; width: 105px;
height: 30px; height: 30px;
@ -830,7 +653,6 @@
font-weight: 500; font-weight: 500;
color: #344356; color: #344356;
} }
.estimate-name{ .estimate-name{
font-size: 13px; font-size: 13px;
color: #344356; color: #344356;
@ -838,7 +660,6 @@
font-weight: 400; font-weight: 400;
} }
} }
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
@ -847,16 +668,13 @@
// file drag box // file drag box
.drag-file-box{ .drag-file-box{
padding: 10px; padding: 10px;
.btn-area{ .btn-area{
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #ECF0F4; border-bottom: 1px solid #ECF0F4;
} }
.drag-file-area{ .drag-file-area{
position: relative; position: relative;
margin-top: 15px; margin-top: 15px;
p{ p{
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -868,11 +686,9 @@
cursor: default; cursor: default;
} }
} }
.file-list{ .file-list{
.file-item{ .file-item{
margin-bottom: 15px; margin-bottom: 15px;
span{ span{
position: relative; position: relative;
font-size: 13px; font-size: 13px;
@ -880,7 +696,6 @@
font-weight: 400; font-weight: 400;
white-space: nowrap; white-space: nowrap;
padding-right: 55px; padding-right: 55px;
button{ button{
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -892,7 +707,6 @@
background-size: cover; background-size: cover;
} }
} }
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
@ -905,28 +719,22 @@
display: flex; display: flex;
gap: 20px; gap: 20px;
width: 100%; width: 100%;
.sub-table-box{ .sub-table-box{
height: 100%; height: 100%;
} }
.chart-inner{ .chart-inner{
flex: 1; flex: 1;
.chart-box{ .chart-box{
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.chart-table-wrap{ .chart-table-wrap{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: none; flex: none;
width: 650px; width: 650px;
.sub-table-box{ .sub-table-box{
flex: 1; flex: 1;
&:first-child{ &:first-child{
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -940,7 +748,6 @@
border-collapse:collapse; border-collapse:collapse;
border: 1px solid #ECF0F4; border: 1px solid #ECF0F4;
border-radius: 4px; border-radius: 4px;
thead{ thead{
th{ th{
padding: 4.5px 0; padding: 4.5px 0;
@ -952,7 +759,6 @@
background-color: #F8F9FA; background-color: #F8F9FA;
} }
} }
tbody{ tbody{
td{ td{
font-size: 13px; font-size: 13px;
@ -967,11 +773,9 @@
.simulation-guide-wrap{ .simulation-guide-wrap{
display: flex; display: flex;
padding: 20px; padding: 20px;
.simulation-tit-wrap{ .simulation-tit-wrap{
padding-right: 40px; padding-right: 40px;
border-right: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE;
span{ span{
display: block; display: block;
position: relative; position: relative;
@ -979,7 +783,6 @@
font-size: 15px; font-size: 15px;
color: #14324F; color: #14324F;
font-weight: 600; font-weight: 600;
&::before{ &::before{
content: ''; content: '';
position: absolute; position: absolute;
@ -993,27 +796,22 @@
} }
} }
} }
.simulation-guide-box{ .simulation-guide-box{
padding-left: 40px; padding-left: 40px;
dl{ dl{
margin-bottom: 25px; margin-bottom: 25px;
dt{ dt{
font-size: 13px; font-size: 13px;
color: #101010; color: #101010;
font-weight: 600; font-weight: 600;
margin-bottom: 5px; margin-bottom: 5px;
} }
dd{ dd{
font-size: 12px; font-size: 12px;
color: #45576F; color: #45576F;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
@ -1029,7 +827,6 @@
margin-right: 4px; margin-right: 4px;
border: 1px solid #ECF0F4; border: 1px solid #ECF0F4;
border-top: none; border-top: none;
.total-title{ .total-title{
flex: 1; flex: 1;
text-align: center; text-align: center;
@ -1037,7 +834,6 @@
color: #344356; color: #344356;
font-weight: 500; font-weight: 500;
} }
.total-num{ .total-num{
flex: none; flex: none;
width: 121px; width: 121px;
@ -1064,7 +860,6 @@
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
&::before{ &::before{
content: ''; content: '';
position: absolute; position: absolute;
@ -1076,13 +871,11 @@
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center; background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover; background-size: cover;
} }
h2{ h2{
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #3D3D3D; color: #3D3D3D;
} }
.penal-table-wrap{ .penal-table-wrap{
display: none; display: none;
position: absolute; position: absolute;
@ -1092,11 +885,9 @@
background-color: #3D3D3D; background-color: #3D3D3D;
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
padding: 20px; padding: 20px;
.penal-table{ .penal-table{
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
thead{ thead{
th{ th{
text-align: center; text-align: center;
@ -1107,7 +898,6 @@
border: 1px solid #505050; border: 1px solid #505050;
} }
} }
tbody{ tbody{
td{ td{
font-size: 12px; font-size: 12px;
@ -1120,19 +910,15 @@
} }
} }
} }
&.act{ &.act{
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
background-color: #3D3D3D; background-color: #3D3D3D;
h2{ h2{
color: #fff; color: #fff;
} }
&::before{ &::before{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center; background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
} }
.penal-table-wrap{ .penal-table-wrap{
display: block; display: block;
} }

1
src/styles/_modal.scss
View File

@ -787,7 +787,6 @@ $alert-color: #101010;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-bottom: 14px; padding-bottom: 14px;
text-align: left;
} }
.eaves-keraba-td { .eaves-keraba-td {

172
src/styles/_reset.scss
View File

@ -5,17 +5,14 @@
text-size-adjust: none; text-size-adjust: none;
box-sizing: content-box box-sizing: content-box
} }
*, ::after, ::before { *, ::after, ::before {
box-sizing: border-box; box-sizing: border-box;
} }
html, body{ html, body{
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
} }
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -39,42 +36,33 @@ time, mark, audio, video {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-smooth: never; font-smooth: never;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; display: block;
} }
body { body {
line-height: 1.4; line-height: 1.4;
} }
body:first-of-type caption { display:none;}
body:first-of-type caption {
display: none;
}
ol, ul { ol, ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote, q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: '';
content: none; content: none;
} }
table { table {
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing:0; border-spacing:0;
border:0 none; border:0 none;
} }
caption, th, td { caption, th, td {
text-align:left; text-align:left;
font-weight: normal; font-weight: normal;
@ -85,17 +73,14 @@ a {
cursor:pointer; cursor:pointer;
color:#000; color:#000;
} }
a, a:hover, a:active { a, a:hover, a:active {
text-decoration:none; text-decoration:none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
/*form_style*/ /*form_style*/
input, select, textarea, button, a, label { input, select, textarea, button, a, label {
-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);
} }
button,input[type=text], input[type=button] { button,input[type=text], input[type=button] {
-webkit-appearance: none; -webkit-appearance: none;
-webkit-border-radius: 0; -webkit-border-radius: 0;
@ -103,28 +88,23 @@ button, input[type=text], input[type=button] {
appearance: none; appearance: none;
border-radius: 0 border-radius: 0
} }
input[type=checkbox], input[type=radio] { input[type=checkbox], input[type=radio] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
input, select, button { input, select, button {
border:0 none; border:0 none;
outline:none; outline:none;
margin:0; margin:0;
} }
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
select::-ms-expand { select::-ms-expand {
display: none; display: none;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
line-height:1; line-height:1;
font-weight:300; font-weight:300;
@ -132,11 +112,9 @@ select::-ms-expand {
letter-spacing:-0.6px; letter-spacing:-0.6px;
color:#8b8b8b; color:#8b8b8b;
} }
.log-box ::-webkit-input-placeholder{ .log-box ::-webkit-input-placeholder{
color:#8b8b8b; color:#8b8b8b;
} }
button{ button{
background: transparent; background: transparent;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
@ -148,72 +126,28 @@ button {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }
.pre{ .pre{
font-family: 'Pretendard', sans-serif !important; font-family: 'Pretendard', sans-serif !important;
} }
// margin // margin
.mt5 { .mt5{margin-top: 5px !important;}
margin-top: 5px !important; .mt10{margin-top: 10px !important;}
} .mt15{margin-top: 15px !important;}
.mb5{margin-bottom: 5px !important;}
.mt10 { .mb10{margin-bottom: 10px !important;}
margin-top: 10px !important; .mb15{margin-bottom: 15px !important;}
} .mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mt15 { .mr15{margin-right: 15px !important;}
margin-top: 15px !important; .ml5{margin-left: 5px !important;}
} .ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
// align // align
.l { .al-l{text-align: left !important;}
text-align: left !important; .al-r{text-align: right !important;}
} .al-c{text-align: center !important;}
.r {
text-align: right !important;
}
.c {
text-align: center !important;
}
// button // button
@ -231,11 +165,9 @@ button {
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
cursor: pointer; cursor: pointer;
&.block{ &.block{
width: 100%; width: 100%;
} }
&.small{ &.small{
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
height: 30px; height: 30px;
@ -247,23 +179,19 @@ button {
background-color: #2C2C2C; background-color: #2C2C2C;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.gray{ &.gray{
background-color: #3C3C3C; background-color: #3C3C3C;
border: 1px solid #545454; border: 1px solid #545454;
} }
&.dark{ &.dark{
background-color: #1C1C1C; background-color: #1C1C1C;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.modal{ &.modal{
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: #272727; background-color: #272727;
border: 1px solid #484848; border: 1px solid #484848;
color: #aaa; color: #aaa;
&:hover{ &:hover{
background-color: #1083E3; background-color: #1083E3;
border: 1px solid #1083E3; border: 1px solid #1083E3;
@ -271,7 +199,6 @@ button {
font-weight: 500; font-weight: 500;
} }
} }
&.sub-tab{ &.sub-tab{
height: 30px; height: 30px;
padding: 0 10px; padding: 0 10px;
@ -280,7 +207,6 @@ button {
background-color: #2D2D2D; background-color: #2D2D2D;
border: 1px solid #393939; border: 1px solid #393939;
color: #aaa; color: #aaa;
&.act, &.act,
&:hover{ &:hover{
background-color: #414E6C; background-color: #414E6C;
@ -289,7 +215,6 @@ button {
font-weight: 500; font-weight: 500;
} }
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #1083E3; background-color: #1083E3;
@ -297,20 +222,16 @@ button {
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
&.block{ &.block{
display: block; display: block;
width: 100%; width: 100%;
} }
&.ico-flx{ &.ico-flx{
display: flex; display: flex;
align-items: center; align-items: center;
.ico{ .ico{
margin-right: 10px; margin-right: 10px;
} }
&:hover, &:hover,
&.act{ &.act{
font-weight: 400; font-weight: 400;
@ -328,18 +249,14 @@ button {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: all .15s ease-in-out; transition: all .15s ease-in-out;
&.navy{ &.navy{
background-color: #304961; background-color: #304961;
&:hover{ &:hover{
background-color: #1083E3; background-color: #1083E3;
} }
} }
&.grey{ &.grey{
background-color: #94A0AD; background-color: #94A0AD;
&:hover{ &:hover{
background-color: #607F9A; background-color: #607F9A;
} }
@ -360,13 +277,11 @@ button {
border-top-left-radius: 2px; border-top-left-radius: 2px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
p{ p{
font-size: 13px; font-size: 13px;
color: #fff; color: #fff;
height: 100%; height: 100%;
} }
.select-item-wrap{ .select-item-wrap{
position: absolute; position: absolute;
top: 100%; top: 100%;
@ -382,41 +297,34 @@ button {
transition: all 0.17s ease-in-out; transition: all 0.17s ease-in-out;
visibility: hidden; visibility: hidden;
z-index: 999; z-index: 999;
.select-item{ .select-item{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
line-height: 1.4; line-height: 1.4;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
button{ button{
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
line-height: 1.4; line-height: 1.4;
} }
&:hover{ &:hover{
background-color: #2C2C2C; background-color: #2C2C2C;
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #5a5a5a; background-color: #5a5a5a;
border-radius: 10px; border-radius: 10px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
} }
&::after{ &::after{
content: ''; content: '';
position: absolute; position: absolute;
@ -429,13 +337,11 @@ button {
background-size: cover; background-size: cover;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
} }
&.active{ &.active{
.select-item-wrap{ .select-item-wrap{
clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
visibility: visible; visibility: visible;
} }
&:after{ &:after{
transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg);
} }
@ -455,18 +361,15 @@ button {
color: #45576F; color: #45576F;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
cursor: pointer; cursor: pointer;
&:disabled{ &:disabled{
opacity: 1; opacity: 1;
background-color: #FAFAFA; background-color: #FAFAFA;
color: #999; color: #999;
cursor: default; cursor: default;
} }
&.black{ &.black{
color: #101010; color: #101010;
} }
&.dark{ &.dark{
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
color: #898989; color: #898989;
@ -487,7 +390,6 @@ button {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
input[type=number], input[type=number],
input[type=text]{ input[type=text]{
&.input-origin{ &.input-origin{
@ -503,28 +405,23 @@ input[type=text] {
padding: 0 10px; padding: 0 10px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: right; text-align: right;
&::placeholder{ &::placeholder{
opacity: 1; opacity: 1;
font-size: 12px; font-size: 12px;
letter-spacing: 0px; letter-spacing: 0px;
} }
&.block{ &.block{
width: 100%; width: 100%;
} }
&:read-only{ &:read-only{
color: #AAA; color: #AAA;
} }
&.plane{ &.plane{
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
border: 1px solid #525252; border: 1px solid #525252;
background-color: transparent; background-color: transparent;
} }
} }
&.input-light{ &.input-light{
display: block; display: block;
width: 100%; width: 100%;
@ -539,7 +436,6 @@ input[type=text] {
font-weight: normal; font-weight: normal;
transition: border-color .17s ease-in-out; transition: border-color .17s ease-in-out;
text-align: left; text-align: left;
&:read-only{ &:read-only{
background-color: #FAFAFA; background-color: #FAFAFA;
color: #999999; color: #999999;
@ -548,6 +444,7 @@ input[type=text] {
} }
// check-btn // check-btn
.check-btn{ .check-btn{
display: flex; display: flex;
@ -556,7 +453,6 @@ input[type=text] {
background-color: #3A3A3A; background-color: #3A3A3A;
border-radius: 3px; border-radius: 3px;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
.check-area{ .check-area{
flex: none; flex: none;
width: 30px; width: 30px;
@ -565,27 +461,22 @@ input[type=text] {
background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center; background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
background-size: 11px 9px; background-size: 11px 9px;
} }
.title-area{ .title-area{
padding: 0 10px; padding: 0 10px;
font-size: 12px; font-size: 12px;
color: #898989; color: #898989;
font-weight: 400; font-weight: 400;
} }
&.block{ &.block{
width: 100%; width: 100%;
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #fff; background-color: #fff;
.check-area{ .check-area{
border-right: 1px solid #101010; border-right: 1px solid #101010;
background: url(../../public/static/images/canvas/check-black.svg)no-repeat center; background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
} }
.title-area{ .title-area{
color: #101010; color: #101010;
font-weight: 600; font-weight: 600;
@ -602,14 +493,12 @@ input[type=text] {
padding: 0 11px; padding: 0 11px;
text-align: left; text-align: left;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
position: relative; position: relative;
font-size: 12px; font-size: 12px;
color: #898989; color: #898989;
font-weight: 400; font-weight: 400;
padding-right: 15px; padding-right: 15px;
&:after{ &:after{
content: ''; content: '';
position: absolute; position: absolute;
@ -621,34 +510,27 @@ input[type=text] {
background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center; background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
} }
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #fff; background-color: #fff;
span{ span{
color: #101010; color: #101010;
font-weight: 500; font-weight: 500;
&:after{ &:after{
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center; background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
} }
} }
} }
&.dark{ &.dark{
text-align: center; text-align: center;
background-color: #272727; background-color: #272727;
border: 1px solid #484848; border: 1px solid #484848;
span{ span{
color: #Fff; color: #Fff;
&:after{ &:after{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
} }
} }
&:hover, &:hover,
&.act{ &.act{
background-color: #1083E3; background-color: #1083E3;
@ -662,7 +544,6 @@ input[type=text] {
.d-check-box{ .d-check-box{
line-height: 1.1; line-height: 1.1;
cursor: pointer; cursor: pointer;
input[type=checkbox], input[type=checkbox],
input[type=radio]{ input[type=radio]{
position: static; position: static;
@ -672,7 +553,6 @@ input[type=text] {
z-index: 1; z-index: 1;
flex: 0 0 auto; flex: 0 0 auto;
} }
label{ label{
position: relative; position: relative;
padding-left: 10px; padding-left: 10px;
@ -686,13 +566,11 @@ input[type=text] {
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
} }
&.light{ &.light{
label{ label{
color: #45576F; color: #45576F;
} }
} }
&.no-text{ &.no-text{
label{ label{
padding-left: 0; padding-left: 0;
@ -720,7 +598,6 @@ input[type=text] {
line-height:1.4; line-height:1.4;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
} }
&::after{ &::after{
cursor: pointer; cursor: pointer;
content: ""; content: "";
@ -742,34 +619,28 @@ input[type=text] {
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
} }
} }
&.light{ &.light{
label{ label{
&:before{ &:before{
border-color: #D6D6D7; border-color: #D6D6D7;
} }
&:after{ &:after{
background-color: #697C8F; background-color: #697C8F;
} }
} }
} }
input[type=radio]:checked + label::after{ input[type=radio]:checked + label::after{
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
&.pop{ &.pop{
label{ label{
font-size: 12px; font-size: 12px;
&:before{ &:before{
width: 16px; width: 16px;
height: 16px; height: 16px;
border-color: #fff; border-color: #fff;
} }
&:after{ &:after{
width: 8px; width: 8px;
height: 8px; height: 8px;
@ -796,7 +667,6 @@ input[type=text] {
background-color: transparent; background-color: transparent;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
} }
&:after{ &:after{
cursor: pointer; cursor: pointer;
content: ""; content: "";
@ -810,7 +680,6 @@ input[type=text] {
transition: border 0.05s ease-in-out, color 0.05s ease-in-out; transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
} }
} }
input[type=checkbox]:checked + label::after{ input[type=checkbox]:checked + label::after{
content: ""; content: "";
display: inline-block; display: inline-block;
@ -825,7 +694,6 @@ input[type=text] {
transform: translate(7.75px,4.5px) rotate(45deg); transform: translate(7.75px,4.5px) rotate(45deg);
-ms-transform: translate(7.75px,4.5px) rotate(45deg); -ms-transform: translate(7.75px,4.5px) rotate(45deg);
} }
&.pop{ &.pop{
input[type=checkbox]:checked + label::after{ input[type=checkbox]:checked + label::after{
border-color: #fff; border-color: #fff;
@ -835,14 +703,10 @@ input[type=text] {
// date-picker // date-picker
.date-picker{ .date-picker{
svg { svg{display: none;}
display: none;
}
.react-datepicker-wrapper{ .react-datepicker-wrapper{
width: 100%; width: 100%;
} }
input[type=text]{ input[type=text]{
display: block; display: block;
width: 100%; width: 100%;

58
src/styles/_table.scss
View File

@ -9,7 +9,6 @@ table {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.al-l{ .al-l{
text-align: left !important; text-align: left !important;
} }
@ -21,7 +20,6 @@ table {
border: 1px solid #ECF0F4; border: 1px solid #ECF0F4;
border-radius: 3px; border-radius: 3px;
border-collapse:collapse; border-collapse:collapse;
tbody{ tbody{
th{ th{
font-size: 13px; font-size: 13px;
@ -32,7 +30,6 @@ table {
background-color: #F7F9FA; background-color: #F7F9FA;
vertical-align: middle; vertical-align: middle;
} }
td{ td{
padding: 9px; padding: 9px;
border: 1px solid #ECF0F4 ; border: 1px solid #ECF0F4 ;
@ -40,20 +37,16 @@ table {
font-weight: 400; font-weight: 400;
color: #45576F; color: #45576F;
vertical-align: middle; vertical-align: middle;
.radio-wrap{ .radio-wrap{
flex: none; flex: none;
@include flexbox; @include flexbox;
} }
.form-flex-wrap{ .form-flex-wrap{
@include flexbox; @include flexbox;
} }
.date-picker-wrap{ .date-picker-wrap{
width: 100%; width: 100%;
@include flexbox; @include flexbox;
span{ span{
margin: 0 4px; margin: 0 4px;
} }
@ -61,7 +54,6 @@ table {
} }
} }
} }
&.bt-able{ &.bt-able{
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -72,7 +64,6 @@ table {
border-top: 1px solid #DEE3EA; border-top: 1px solid #DEE3EA;
border-bottom: 1px solid #DEE3EA; border-bottom: 1px solid #DEE3EA;
border-collapse:collapse; border-collapse:collapse;
tbody{ tbody{
tr{ tr{
th{ th{
@ -81,12 +72,10 @@ table {
font-weight: 500; font-weight: 500;
padding: 18px 0; padding: 18px 0;
border-bottom: 1px solid #F4F4F7; border-bottom: 1px solid #F4F4F7;
.title{ .title{
margin-right: 8px; margin-right: 8px;
} }
} }
td{ td{
padding: 0 0 0 15px; padding: 0 0 0 15px;
border-bottom: 1px solid #F4F4F7; border-bottom: 1px solid #F4F4F7;
@ -97,27 +86,21 @@ table {
font-weight: normal; font-weight: normal;
margin-left: 15px; margin-left: 15px;
} }
span{ span{
font-size: 13px; font-size: 13px;
color: #697C8F; color: #697C8F;
font-weight: normal; font-weight: normal;
} }
} }
&:last-child{ &:last-child{
th, td { th,td{border-bottom: none;}
border-bottom: none;
} }
} }
} }
}
.flx-box{ .flx-box{
@include flexbox; @include flexbox;
} }
} }
.tooltips{ .tooltips{
display: block; display: block;
width: 14px; width: 14px;
@ -133,12 +116,10 @@ table {
table{ table{
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
thead{ thead{
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
th{ th{
padding: 13px 0; padding: 13px 0;
font-size: 13px; font-size: 13px;
@ -148,17 +129,14 @@ table {
text-align: center; text-align: center;
} }
} }
tbody{ tbody{
display: block; display: block;
overflow-y: auto; overflow-y: auto;
tr{ tr{
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
border: 1px solid #ECF0F4; border: 1px solid #ECF0F4;
td{ td{
padding: 10px 0px; padding: 10px 0px;
font-size: 13px; font-size: 13px;
@ -167,27 +145,20 @@ table {
text-align: center; text-align: center;
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #C1CCD7; background-color: #C1CCD7;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
} }
&.small{ &.small{
tbody { tbody{height: 120px;}
height: 120px;
} }
}
&.big{ &.big{
td, td,
th{ th{
@ -195,10 +166,8 @@ table {
width: 121px; width: 121px;
} }
} }
tbody{ tbody{
height: 160px; height: 160px;
td{ td{
padding: 10px 20px; padding: 10px 20px;
} }
@ -209,7 +178,28 @@ table {
.roof-module-table{ .roof-module-table{
table{ table{
table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
thead{
th{
height: 40px;
padding: 0 10px;
font-size: 12px;
color: #fff;
font-weight: 500;
border: 1px solid #505050;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.05);
text-align: center;
word-break: keep-all;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
border: 1px solid #505050;
}
}
} }
} }