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

620
src/styles/_contents.scss
View File

File diff suppressed because it is too large Load Diff

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 {

438
src/styles/_reset.scss
View File

@ -1,21 +1,18 @@
* { * {
-webkit-text-size-adjust: none; -webkit-text-size-adjust:none;
-moz-text-size-adjust: none; -moz-text-size-adjust:none;
-ms-text-size-adjust: none; -ms-text-size-adjust:none;
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,105 +36,86 @@ 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;
border: 0; border:0;
} }
a { 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;
-webkit-appearance: none; -webkit-appearance:none;
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;
font-size: 0.938rem; font-size:0.938rem;
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;
border: none; border: none;
@ -148,76 +126,32 @@ 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
.btn-frame { .btn-frame{
display: inline-block; display: inline-block;
padding: 0 7px; padding: 0 7px;
height: 34px; height: 34px;
@ -231,48 +165,41 @@ 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;
line-height: 30px; line-height: 30px;
font-size: 13px; font-size: 13px;
} }
&.deepgray { &.deepgray{
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;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
} }
&.sub-tab{
&.sub-tab {
height: 30px; height: 30px;
padding: 0 10px; padding: 0 10px;
line-height: 28px; line-height: 28px;
@ -280,45 +207,39 @@ 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;
border: 1px solid #414E6C; border: 1px solid #414E6C;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
} }
&:hover, &:hover,
&.act { &.act{
background-color: #1083E3; background-color: #1083E3;
border: 1px solid #1083E3; border: 1px solid #1083E3;
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;
} }
} }
} }
.btn-origin { .btn-origin{
display: inline-block; display: inline-block;
height: 30px; height: 30px;
padding: 0 14px; padding: 0 14px;
@ -328,26 +249,22 @@ 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;
} }
} }
} }
// select // select
.sort-select { .sort-select{
position: relative; position: relative;
display: inline-block; display: inline-block;
min-width: 100px; min-width: 100px;
@ -360,18 +277,16 @@ 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%;
left: -1px; left: -1px;
clip-path: inset(0 0 100% 0); clip-path:inset(0 0 100% 0);
width: calc(100% + 2px); width: calc(100% + 2px);
padding: 8px 0; padding: 8px 0;
max-height: 100px; max-height: 100px;
@ -382,42 +297,35 @@ 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;
top: 50%; top: 50%;
@ -429,20 +337,18 @@ 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);
} }
} }
} }
.select-light { .select-light{
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
@ -455,19 +361,16 @@ 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;
font-size: 12px; font-size: 12px;
@ -478,8 +381,8 @@ button {
// input // input
.form-input { .form-input{
label { label{
display: block; display: block;
color: #aaa; color: #aaa;
font-size: 12px; font-size: 12px;
@ -487,10 +390,9 @@ button {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
input[type=number], input[type=number],
input[type=text] { input[type=text]{
&.input-origin { &.input-origin{
display: inline-block; display: inline-block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -503,29 +405,24 @@ 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%;
height: 30px; height: 30px;
@ -539,8 +436,7 @@ 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,45 +444,40 @@ input[type=text] {
} }
// check-btn // check-btn
.check-btn { .check-btn{
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;
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;
height: 100%; height: 100%;
border-right: 1px solid #272727; border-right: 1px solid #272727;
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;
} }
@ -594,7 +485,7 @@ input[type=text] {
} }
// arr-btn // arr-btn
.arr-btn { .arr-btn{
display: block; display: block;
height: 30px; height: 30px;
border-radius: 3px; border-radius: 3px;
@ -602,15 +493,13 @@ 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;
top: 50%; top: 50%;
@ -618,39 +507,32 @@ input[type=text] {
transform: translateY(-50%); transform: translateY(-50%);
width: 5px; width: 5px;
height: 8px; height: 8px;
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;
border: 1px solid #1083E3; border: 1px solid #1083E3;
} }
@ -659,12 +541,11 @@ input[type=text] {
// radio // radio
.d-check-radio, .d-check-radio,
.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;
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
@ -672,8 +553,7 @@ 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;
margin-bottom: 0; margin-bottom: 0;
@ -686,91 +566,82 @@ 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;
} }
} }
} }
.d-check-radio { .d-check-radio {
label { label{
&::before { &::before{
cursor: pointer; cursor: pointer;
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
height: 17px; height: 17px;
top: 2px; top:2px;
left: 0; left: 0;
margin-left: -12px; margin-left: -12px;
border: 1px solid #999999; border: 1px solid #999999;
border-radius: 100%; border-radius: 100%;
background-color: transparent; background-color: transparent;
text-align: center; text-align:center;
font-size: 13px; font-size:13px;
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: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 9px; width: 9px;
height: 9px; height: 9px;
top: 6px; top:6px;
left: 4px; left: 4px;
margin-left: -12px; margin-left: -12px;
border: none; border: none;
border-radius: 100%; border-radius: 100%;
background-color: #fff; background-color: #fff;
text-align: center; text-align:center;
font-size: 13px; font-size:13px;
line-height: 1.4; line-height:1.4;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
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;
background-color: #fff; background-color: #fff;
@ -780,9 +651,9 @@ input[type=text] {
} }
// check-box // check-box
.d-check-box { .d-check-box{
label { label{
&::before { &::before{
cursor: pointer; cursor: pointer;
content: ""; content: "";
display: inline-block; display: inline-block;
@ -796,22 +667,20 @@ 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: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 16px; width: 16px;
height: 16px; height: 16px;
top: 0; top:0;
left: 0; left: 0;
margin-left: -.8rem; margin-left: -.8rem;
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;
position: absolute; position: absolute;
@ -822,28 +691,23 @@ input[type=text] {
border: 2px solid #697C8F; border: 2px solid #697C8F;
border-left: none; border-left: none;
border-top: none; border-top: none;
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;
} }
} }
} }
// 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%;
height: 30px; height: 30px;

150
src/styles/_table.scss
View File

@ -1,145 +1,126 @@
@mixin flexbox() { @mixin flexbox(){
display: flex; display: flex;
align-items: center; align-items: center;
} }
table { table{
.overflow-lab { .overflow-lab{
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.al-l{
.al-l {
text-align: left !important; text-align: left !important;
} }
} }
.common-table { .common-table{
table { table{
table-layout: fixed; table-layout: fixed;
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;
font-weight: 500; font-weight: 500;
color: #344356; color: #344356;
padding: 14px 12px; padding: 14px 12px;
border: 1px solid #ECF0F4; border: 1px solid #ECF0F4 ;
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 ;
font-size: 13px; font-size: 13px;
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;
} }
} }
} }
} }
} }
&.bt-able{
&.bt-able {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.infomation-table { .infomation-table{
table { 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 {
font-size: 13px; font-size: 13px;
color: #344356; color: #344356;
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;
.guide { .guide{
font-size: 13px; font-size: 13px;
color: #697C8F; color: #697C8F;
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{border-bottom: none;}
th, td {
border-bottom: none;
} }
} }
} }
} .flx-box{
.flx-box {
@include flexbox; @include flexbox;
} }
} }
.tooltips{
.tooltips {
display: block; display: block;
width: 14px; width: 14px;
height: 14px; height: 14px;
display: inline-block; display: inline-block;
background: url(../../public/static/images/sub/tooltips.svg) no-repeat center; background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
} }
} }
.module-table { .module-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;
color: #344356; color: #344356;
@ -148,18 +129,15 @@ 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;
color: #45576F; color: #45576F;
@ -167,39 +145,30 @@ 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{height: 120px;}
tbody {
height: 120px;
} }
} &.big{
&.big {
td, td,
th { th{
&:nth-child(2) { &:nth-child(2){
width: 121px; width: 121px;
} }
} }
tbody{
tbody {
height: 160px; height: 160px;
td{
td {
padding: 10px 20px; padding: 10px 20px;
} }
} }
@ -207,9 +176,30 @@ 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;
}
}
} }
} }