🚨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;
|
||||
}
|
||||
@ -5,14 +5,17 @@
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
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,33 +39,42 @@ 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;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
@ -73,14 +85,17 @@ a {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
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);
|
||||
}
|
||||
|
||||
button, input[type=text], input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
@ -88,23 +103,28 @@ button,input[type=text], input[type=button] {
|
||||
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;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
@ -112,9 +132,11 @@ select::-ms-expand {
|
||||
letter-spacing: -0.6px;
|
||||
color: #8b8b8b;
|
||||
}
|
||||
|
||||
.log-box ::-webkit-input-placeholder {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
@ -126,19 +148,43 @@ button{
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -155,9 +201,11 @@ button{
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: all .17s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
@ -169,19 +217,23 @@ button{
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.modal {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
color: #aaa;
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
@ -189,6 +241,25 @@ button{
|
||||
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 {
|
||||
background-color: #1083E3;
|
||||
@ -196,16 +267,20 @@ button{
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.ico-flx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ico {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
@ -223,14 +298,18 @@ button{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.navy {
|
||||
background-color: #304961;
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
|
||||
&.grey {
|
||||
background-color: #94A0AD;
|
||||
|
||||
&:hover {
|
||||
background-color: #607F9A;
|
||||
}
|
||||
@ -251,11 +330,13 @@ button{
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-item-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -268,22 +349,26 @@ button{
|
||||
border-radius: 2px;
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
|
||||
.select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -296,11 +381,13 @@ button{
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.select-item-wrap {
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
@ -320,15 +407,18 @@ button{
|
||||
color: #45576F;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
background-color: #FAFAFA;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
|
||||
color: #898989;
|
||||
@ -349,6 +439,7 @@ button{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
input[type=text] {
|
||||
&.input-origin {
|
||||
@ -364,15 +455,18 @@ input[type=text]{
|
||||
padding: 0 10px;
|
||||
letter-spacing: 0px;
|
||||
text-align: right;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-light {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -387,6 +481,7 @@ input[type=text]{
|
||||
font-weight: normal;
|
||||
transition: border-color .17s ease-in-out;
|
||||
text-align: left;
|
||||
|
||||
&:read-only {
|
||||
background-color: #FAFAFA;
|
||||
color: #999999;
|
||||
@ -395,7 +490,6 @@ input[type=text]{
|
||||
}
|
||||
|
||||
|
||||
|
||||
// check-btn
|
||||
.check-btn {
|
||||
display: flex;
|
||||
@ -404,6 +498,7 @@ input[type=text]{
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.check-area {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
@ -412,22 +507,27 @@ input[type=text]{
|
||||
background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
|
||||
background-size: 11px 9px;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
.check-area {
|
||||
border-right: 1px solid #101010;
|
||||
background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
@ -444,12 +544,14 @@ input[type=text]{
|
||||
padding: 0 11px;
|
||||
text-align: left;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -461,27 +563,34 @@ input[type=text]{
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
|
||||
&:after {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
text-align: center;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
|
||||
span {
|
||||
color: #Fff;
|
||||
|
||||
&:after {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
@ -495,6 +604,7 @@ input[type=text]{
|
||||
.d-check-box {
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
position: static;
|
||||
@ -504,6 +614,7 @@ input[type=text]{
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
@ -517,11 +628,13 @@ input[type=text]{
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.light {
|
||||
label {
|
||||
color: #45576F;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-text {
|
||||
label {
|
||||
padding-left: 0;
|
||||
@ -549,6 +662,7 @@ input[type=text]{
|
||||
line-height: 1.4;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -570,20 +684,24 @@ input[type=text]{
|
||||
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
label {
|
||||
&:before {
|
||||
border-color: #D6D6D7;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: #697C8F;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.pop {
|
||||
label {
|
||||
&:before {
|
||||
@ -591,6 +709,7 @@ input[type=text]{
|
||||
height: 16px;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@ -617,6 +736,7 @@ input[type=text]{
|
||||
background-color: transparent;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -630,6 +750,7 @@ input[type=text]{
|
||||
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -644,6 +765,7 @@ input[type=text]{
|
||||
transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
-ms-transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
}
|
||||
|
||||
&.pop {
|
||||
input[type=checkbox]:checked + label::after {
|
||||
border-color: #fff;
|
||||
@ -653,10 +775,14 @@ input[type=text]{
|
||||
|
||||
// date-picker
|
||||
.date-picker {
|
||||
svg{display: none;}
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user