🚨chore: Sync Sass
This commit is contained in:
minsik
parent
202e91811f
commit
1d8d46eb4a
@ -45,6 +45,10 @@ $alert-color: #101010;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
&.lr {
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
width: 580px;
|
||||
}
|
||||
@ -138,6 +142,13 @@ $alert-color: #101010;
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.sub {
|
||||
button {
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-check-btn-wrap {
|
||||
@ -491,6 +502,7 @@ $alert-color: #101010;
|
||||
// 외벽선 그리기
|
||||
.outline-wrap {
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid #424242;
|
||||
border-bottom: 1px solid #424242;
|
||||
|
||||
.outline-inner {
|
||||
@ -501,11 +513,14 @@ $alert-color: #101010;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.outline-form {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline-form {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
@ -517,6 +532,10 @@ $alert-color: #101010;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-right: 10px;
|
||||
|
||||
&.thin {
|
||||
font-weight: & $pop-normal-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
@ -566,6 +585,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
// 외벽선 속성 설정
|
||||
.properties-guide {
|
||||
font-size: $pop-normal-size;
|
||||
color: #AAA;
|
||||
@ -574,6 +594,10 @@ $alert-color: #101010;
|
||||
}
|
||||
|
||||
.properties-setting-wrap {
|
||||
&.outer {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.setting-tit {
|
||||
font-size: 13px;
|
||||
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;
|
||||
}
|
||||
@ -1,18 +1,21 @@
|
||||
* {
|
||||
-webkit-text-size-adjust:none;
|
||||
-moz-text-size-adjust:none;
|
||||
-ms-text-size-adjust:none;
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body{
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -36,86 +39,105 @@ time, mark, audio, video {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smooth: never;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.4;
|
||||
}
|
||||
body:first-of-type caption { display:none;}
|
||||
|
||||
body:first-of-type caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing:0;
|
||||
border:0 none;
|
||||
border-spacing: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align:left;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
border:0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor:pointer;
|
||||
color:#000;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
text-decoration:none;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/*form_style*/
|
||||
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-border-radius: 0;
|
||||
-webkit-appearance:none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border:0 none;
|
||||
outline:none;
|
||||
margin:0;
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
line-height:1;
|
||||
font-weight:300;
|
||||
font-size:0.938rem;
|
||||
letter-spacing:-0.6px;
|
||||
color:#8b8b8b;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: -0.6px;
|
||||
color: #8b8b8b;
|
||||
}
|
||||
.log-box ::-webkit-input-placeholder{
|
||||
color:#8b8b8b;
|
||||
|
||||
.log-box ::-webkit-input-placeholder {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
button{
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
border: none;
|
||||
@ -126,22 +148,46 @@ button{
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pre{
|
||||
|
||||
.pre {
|
||||
font-family: 'Pretendard', sans-serif !important;
|
||||
}
|
||||
|
||||
// margin
|
||||
.mt5{margin-top: 5px !important;}
|
||||
.mt10{margin-top: 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;}
|
||||
.mt5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 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
|
||||
.btn-frame{
|
||||
.btn-frame {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
height: 34px;
|
||||
@ -155,65 +201,94 @@ button{
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: all .17s ease-in-out;
|
||||
cursor: pointer;
|
||||
&.block{
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
&.small{
|
||||
|
||||
&.small {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.deepgray{
|
||||
&.deepgray {
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
&.gray{
|
||||
|
||||
&.gray {
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
&.dark{
|
||||
|
||||
&.dark {
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
&.modal{
|
||||
|
||||
&.modal {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
color: #aaa;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
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,
|
||||
&.act{
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
&.block{
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&.ico-flx{
|
||||
|
||||
&.ico-flx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ico{
|
||||
|
||||
.ico {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-origin{
|
||||
.btn-origin {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding: 0 14px;
|
||||
@ -223,22 +298,26 @@ button{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: all .15s ease-in-out;
|
||||
&.navy{
|
||||
|
||||
&.navy {
|
||||
background-color: #304961;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
&.grey{
|
||||
|
||||
&.grey {
|
||||
background-color: #94A0AD;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background-color: #607F9A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// select
|
||||
.sort-select{
|
||||
.sort-select {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
@ -251,16 +330,18 @@ button{
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
p{
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
.select-item-wrap{
|
||||
|
||||
.select-item-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
clip-path:inset(0 0 100% 0);
|
||||
clip-path: inset(0 0 100% 0);
|
||||
width: calc(100% + 2px);
|
||||
padding: 8px 0;
|
||||
background-color: #373737;
|
||||
@ -268,23 +349,27 @@ button{
|
||||
border-radius: 2px;
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
.select-item{
|
||||
|
||||
.select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
button{
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -296,18 +381,20 @@ button{
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
&.active{
|
||||
.select-item-wrap{
|
||||
|
||||
&.active {
|
||||
.select-item-wrap {
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-light{
|
||||
.select-light {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -320,16 +407,19 @@ button{
|
||||
color: #45576F;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
cursor: pointer;
|
||||
&:disabled{
|
||||
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
background-color: #FAFAFA;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
&.black{
|
||||
|
||||
&.black {
|
||||
color: #101010;
|
||||
}
|
||||
&.dark{
|
||||
|
||||
&.dark {
|
||||
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
|
||||
color: #898989;
|
||||
font-size: 12px;
|
||||
@ -340,8 +430,8 @@ button{
|
||||
|
||||
|
||||
// input
|
||||
.form-input{
|
||||
label{
|
||||
.form-input {
|
||||
label {
|
||||
display: block;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
@ -349,9 +439,10 @@ button{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
input[type=text]{
|
||||
&.input-origin{
|
||||
input[type=text] {
|
||||
&.input-origin {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -364,16 +455,19 @@ input[type=text]{
|
||||
padding: 0 10px;
|
||||
letter-spacing: 0px;
|
||||
text-align: right;
|
||||
&::placeholder{
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
&.block{
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.input-light{
|
||||
|
||||
&.input-light {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
@ -387,7 +481,8 @@ input[type=text]{
|
||||
font-weight: normal;
|
||||
transition: border-color .17s ease-in-out;
|
||||
text-align: left;
|
||||
&:read-only{
|
||||
|
||||
&:read-only {
|
||||
background-color: #FAFAFA;
|
||||
color: #999999;
|
||||
}
|
||||
@ -395,40 +490,45 @@ input[type=text]{
|
||||
}
|
||||
|
||||
|
||||
|
||||
// check-btn
|
||||
.check-btn{
|
||||
.check-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
transition: all .17s ease-in-out;
|
||||
.check-area{
|
||||
|
||||
.check-area {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
.title-area{
|
||||
|
||||
.title-area {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
}
|
||||
&.block{
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act{
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
.check-area{
|
||||
|
||||
.check-area {
|
||||
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;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -436,7 +536,7 @@ input[type=text]{
|
||||
}
|
||||
|
||||
// arr-btn
|
||||
.arr-btn{
|
||||
.arr-btn {
|
||||
display: block;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
@ -444,13 +544,15 @@ input[type=text]{
|
||||
padding: 0 11px;
|
||||
text-align: left;
|
||||
transition: all .17s ease-in-out;
|
||||
span{
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -458,32 +560,39 @@ input[type=text]{
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
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,
|
||||
&.act{
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
span{
|
||||
|
||||
span {
|
||||
color: #101010;
|
||||
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;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
span{
|
||||
|
||||
span {
|
||||
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,
|
||||
&.act{
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
}
|
||||
@ -492,11 +601,12 @@ input[type=text]{
|
||||
|
||||
// radio
|
||||
.d-check-radio,
|
||||
.d-check-box{
|
||||
.d-check-box {
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio]{
|
||||
input[type=radio] {
|
||||
position: static;
|
||||
margin-left: 0;
|
||||
cursor: pointer;
|
||||
@ -504,7 +614,8 @@ input[type=text]{
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
label{
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 0;
|
||||
@ -517,81 +628,89 @@ input[type=text]{
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.light{
|
||||
label{
|
||||
|
||||
&.light {
|
||||
label {
|
||||
color: #45576F;
|
||||
}
|
||||
}
|
||||
&.no-text{
|
||||
label{
|
||||
|
||||
&.no-text {
|
||||
label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-check-radio {
|
||||
label{
|
||||
&::before{
|
||||
label {
|
||||
&::before {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
top:2px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 100%;
|
||||
background-color: transparent;
|
||||
text-align:center;
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
top:6px;
|
||||
top: 6px;
|
||||
left: 4px;
|
||||
margin-left: -12px;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
text-align:center;
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.light{
|
||||
label{
|
||||
&:before{
|
||||
|
||||
&.light {
|
||||
label {
|
||||
&:before {
|
||||
border-color: #D6D6D7;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
background-color: #697C8F;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type=radio]:checked + label::after{
|
||||
|
||||
input[type=radio]:checked + label::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
&.pop{
|
||||
label{
|
||||
&:before{
|
||||
|
||||
&.pop {
|
||||
label {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-color: #fff;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
@ -601,9 +720,9 @@ input[type=text]{
|
||||
}
|
||||
|
||||
// check-box
|
||||
.d-check-box{
|
||||
label{
|
||||
&::before{
|
||||
.d-check-box {
|
||||
label {
|
||||
&::before {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -617,20 +736,22 @@ input[type=text]{
|
||||
background-color: transparent;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&:after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top:0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-left: -.8rem;
|
||||
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: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@ -641,23 +762,28 @@ input[type=text]{
|
||||
border: 2px solid #697C8F;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
transform: translate(7.75px,4.5px) rotate(45deg);
|
||||
-ms-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);
|
||||
}
|
||||
&.pop{
|
||||
input[type=checkbox]:checked + label::after{
|
||||
|
||||
&.pop {
|
||||
input[type=checkbox]:checked + label::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// date-picker
|
||||
.date-picker{
|
||||
svg{display: none;}
|
||||
.react-datepicker-wrapper{
|
||||
.date-picker {
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
input[type=text]{
|
||||
|
||||
input[type=text] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user