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 14:58:17 +09:00
parent 36077b601f
commit 8d25b6176f
4 changed files with 2153 additions and 1556 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

669
src/styles/_contents.scss
View File

File diff suppressed because it is too large Load Diff

117
src/styles/_modal.scss
View File

@ -77,6 +77,10 @@ $alert-color: #101010;
width: 640px; width: 640px;
} }
&.lx-2 {
width: 740px;
}
&.lx { &.lx {
width: 770px; width: 770px;
} }
@ -783,6 +787,7 @@ $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 {
@ -1543,3 +1548,115 @@ $alert-color: #101010;
} }
} }
} }
// 지붕모듈선택
.roof-module-tab {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.module-tab-bx {
flex: 1;
height: 34px;
line-height: 31px;
border: 1px solid #484848;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #AAA;
text-align: center;
cursor: default;
transition: all .15s ease-in-out;
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
}
.tab-arr {
display: block;
width: 9px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all .15s ease-in-out;
&.act {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
}
}
.roof-module-compas {
margin-bottom: 24px;
.compas-box-inner {
width: 280px;
height: 253px;
.circle {
top: 86%;
&:nth-child(1),
&:nth-child(7),
&:nth-child(13),
&:nth-child(19) {
&::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 6px;
background-color: #8B8B8B;
}
}
i {
top: 32px;
}
&.act {
i {
color: #8B8B8B;
}
}
}
}
}
.center-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.module-table-flex-wrap {
display: flex;
gap: 10px;
}
.module-table-box {
flex: 1;
background-color: #3D3D3D;
border-radius: 2px;
.module-table-inneer {
padding: 10px;
.outline-form {
span {
width: auto;
}
}
}
}

441
src/styles/_reset.scss
View File

@ -1,18 +1,21 @@
* { * {
-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,
@ -36,86 +39,105 @@ 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{
color:#8b8b8b; .log-box ::-webkit-input-placeholder {
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;
@ -126,26 +148,76 @@ 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{margin-top: 5px !important;} .mt5 {
.mt10{margin-top: 10px !important;} margin-top: 5px !important;
.mt15{margin-top: 15px !important;} }
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;} .mt10 {
.mb15{margin-bottom: 15px !important;} margin-top: 10px !important;
.mr5{margin-right: 5px !important;} }
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;} .mt15 {
.ml5{margin-left: 5px !important;} margin-top: 15px !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
.l {
text-align: left !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;
@ -159,41 +231,48 @@ 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;
@ -201,39 +280,45 @@ 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;
@ -243,22 +328,26 @@ 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;
@ -271,16 +360,18 @@ 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;
@ -291,35 +382,42 @@ 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%;
@ -331,18 +429,20 @@ button{
background-size: cover; background-size: cover;
transition: all .17s ease-in-out; transition: all .17s ease-in-out;
} }
&.active{
.select-item-wrap{ &.active {
.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%;
@ -355,16 +455,19 @@ 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;
@ -375,8 +478,8 @@ button{
// input // input
.form-input{ .form-input {
label{ label {
display: block; display: block;
color: #aaa; color: #aaa;
font-size: 12px; font-size: 12px;
@ -384,9 +487,10 @@ 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;
@ -399,19 +503,29 @@ 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 {
font-family: 'Noto Sans JP', sans-serif;
border: 1px solid #525252;
background-color: transparent;
} }
&.input-light{ }
&.input-light {
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
@ -425,7 +539,8 @@ 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;
} }
@ -433,40 +548,45 @@ 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;
} }
@ -474,7 +594,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;
@ -482,13 +602,15 @@ 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%;
@ -496,32 +618,39 @@ 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{
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center; &:after {
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{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; &:after {
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;
} }
@ -530,11 +659,12 @@ 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;
@ -542,7 +672,8 @@ 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;
@ -555,82 +686,91 @@ input[type=text]{
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
} }
&.light{
label{ &.light {
label {
color: #45576F; color: #45576F;
} }
} }
&.no-text{
label{ &.no-text {
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{
label{ &.light {
&:before{ label {
&: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{
label{ &.pop {
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;
@ -640,9 +780,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;
@ -656,20 +796,22 @@ 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;
@ -680,23 +822,28 @@ 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{
input[type=checkbox]:checked + label::after{ &.pop {
input[type=checkbox]:checked + label::after {
border-color: #fff; border-color: #fff;
} }
} }
} }
// date-picker // date-picker
.date-picker{ .date-picker {
svg{display: none;} svg {
.react-datepicker-wrapper{ display: none;
}
.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;

130
src/styles/_table.scss
View File

@ -1,126 +1,145 @@
@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{
th{ tbody {
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{
tr{ tbody {
th{ tr {
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{
th,td{border-bottom: none;} &:last-child {
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;
@ -129,15 +148,18 @@ 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;
@ -145,33 +167,49 @@ 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{
tbody{height: 120px;} &.small {
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;
} }
} }
} }
} }
} }
.roof-module-table {
table {
table-layout: fixed;
border-collapse: collapse;
}
}