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-09-30 13:29:22 +09:00
parent 202e91811f
commit 1d8d46eb4a
2 changed files with 777 additions and 569 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/styles/_modal.scss
View File

@ -45,6 +45,10 @@ $alert-color: #101010;
width: 400px; width: 400px;
} }
&.lr {
width: 440px;
}
&.sm { &.sm {
width: 580px; width: 580px;
} }
@ -138,6 +142,13 @@ $alert-color: #101010;
button { button {
flex: 1; flex: 1;
} }
&.sub {
button {
flex: 1 1 auto;
padding: 0;
}
}
} }
.modal-check-btn-wrap { .modal-check-btn-wrap {
@ -491,6 +502,7 @@ $alert-color: #101010;
// 외벽선 그리기 // 외벽선 그리기
.outline-wrap { .outline-wrap {
padding: 24px 0; padding: 24px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242; border-bottom: 1px solid #424242;
.outline-inner { .outline-inner {
@ -501,11 +513,14 @@ $alert-color: #101010;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.outline-form {
width: 50%;
}
} }
} }
.outline-form { .outline-form {
width: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 15px; margin-right: 15px;
@ -517,6 +532,10 @@ $alert-color: #101010;
font-weight: $pop-bold-weight; font-weight: $pop-bold-weight;
color: $pop-color; color: $pop-color;
margin-right: 10px; margin-right: 10px;
&.thin {
font-weight: & $pop-normal-weight;
}
} }
.reset-btn { .reset-btn {
@ -566,6 +585,7 @@ $alert-color: #101010;
} }
} }
// 외벽선 속성 설정
.properties-guide { .properties-guide {
font-size: $pop-normal-size; font-size: $pop-normal-size;
color: #AAA; color: #AAA;
@ -574,6 +594,10 @@ $alert-color: #101010;
} }
.properties-setting-wrap { .properties-setting-wrap {
&.outer {
margin-top: 24px;
}
.setting-tit { .setting-tit {
font-size: 13px; font-size: 13px;
color: $pop-color; color: $pop-color;
@ -618,3 +642,61 @@ $alert-color: #101010;
} }
} }
} }
// 지붕형상 설정
.roof-shape-menu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px 10px;
margin-bottom: 24px;
.shape-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px;
background-color: #3D3D3D;
transition: background .15s ease-in-out;
img {
max-width: 100%;
}
}
.shape-title {
font-size: $pop-normal-size;
font-weight: $pop-bold-weight;
color: $pop-color;
margin-top: 10px;
text-align: center;
transition: color .15s ease-in-out;
}
.shape-menu-box {
&.act,
&:hover {
.shape-box {
background-color: #008BFF;
}
.shape-title {
color: #008BFF;
}
}
}
}
.setting-box {
padding: 14px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
}
.discrimination-box {
padding: 16px 12px;
border: 1px solid #3D3D3D;
border-radius: 2px;
margin-top: 14px;
}

406
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,22 +148,46 @@ 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;
.mb5{margin-bottom: 5px !important;} }
.mb10{margin-bottom: 10px !important;}
.mr5{margin-right: 5px !important;} .mt10 {
.mr10{margin-right: 10px !important;} margin-top: 10px !important;
.ml5{margin-left: 5px !important;} }
.ml10{margin-left: 10px !important;}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
// button // button
.btn-frame{ .btn-frame {
display: inline-block; display: inline-block;
padding: 0 7px; padding: 0 7px;
height: 34px; height: 34px;
@ -155,65 +201,94 @@ 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 {
height: 30px;
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
background-color: #2D2D2D;
border: 1px solid #393939;
color: #aaa;
&.act,
&:hover {
background-color: #414E6C;
border: 1px solid #414E6C;
color: #fff;
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;
@ -223,22 +298,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;
@ -251,16 +330,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;
background-color: #373737; background-color: #373737;
@ -268,23 +349,27 @@ button{
border-radius: 2px; border-radius: 2px;
transition: all 0.17s ease-in-out; transition: all 0.17s ease-in-out;
visibility: hidden; visibility: hidden;
.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;
} }
} }
} }
&::after{
&::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -296,18 +381,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%;
@ -320,16 +407,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;
@ -340,8 +430,8 @@ button{
// input // input
.form-input{ .form-input {
label{ label {
display: block; display: block;
color: #aaa; color: #aaa;
font-size: 12px; font-size: 12px;
@ -349,9 +439,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;
@ -364,16 +455,19 @@ 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%;
} }
} }
&.input-light{
&.input-light {
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
@ -387,7 +481,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;
} }
@ -395,40 +490,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;
} }
@ -436,7 +536,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;
@ -444,13 +544,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%;
@ -458,32 +560,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;
} }
@ -492,11 +601,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;
@ -504,7 +614,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;
@ -517,81 +628,89 @@ 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 {
&:before{ label {
&: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;
@ -601,9 +720,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;
@ -617,20 +736,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;
@ -641,23 +762,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;