style: update SCSS styles for various components, adding responsive design adjustments and new styles for compliance checks

This commit is contained in:
yoosangwook 2025-05-08 17:55:10 +09:00
parent 0d12239460
commit 4467c04321
6 changed files with 235 additions and 3 deletions

View File

@ -82,13 +82,13 @@ input::-webkit-inner-spin-button {
width: 100%;
padding: 0 10px;
height: 40px;
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
background-color: $white-fff;
border: 1px solid #D5DEE8;
border-radius: 4px;
input{
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
width: 100%;
height: 100%;
background-color: transparent;
@ -194,4 +194,11 @@ input::-webkit-inner-spin-button {
}
}
}
&.change{
height: 40px;
padding-left: 10px;
&::before{
display: none;
}
}
}

View File

@ -17,3 +17,9 @@
}
}
}
@media screen and (max-width: 360px){
.login-contents{
padding: 70px 34px 0;
}
}

View File

@ -89,3 +89,11 @@
}
}
}
@media screen and (max-width: 360px){
.main-grid-wrap{
.main-grid-bx{
padding: 40px 20px 20px;
}
}
}

View File

@ -34,3 +34,10 @@
margin-top: 20px;
}
}
// 지붕재 적합성 상세
.compliance-check-pop-contents{
padding: 14px;
border-top: 1px solid #ECECEC;
margin-top: 10px;
}

View File

@ -17,6 +17,10 @@
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.data-input-guide{
margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.btn-flex-wrap{
@ -25,6 +29,14 @@
.btn-bx{
flex: 1;
}
&.com{
.btn-bx{
flex: 1 1 auto;
button{
font-size: 12px;
}
}
}
}
// 매물 common
@ -177,6 +189,13 @@
padding-left: 6px;
}
}
&.nodata{
.sale-item-nodata{
padding: 5px 0;
text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c);
}
}
}
.sale-edit-btn{
margin-top: 24px;
@ -335,6 +354,14 @@
top: 0;
right: 0;
}
&.nodata{
padding-right: 0;
.inquiry-item-nodata{
padding: 10px 0;
text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c);
}
}
}
}
}
@ -360,9 +387,12 @@
@include flex(0px);
align-items: center;
.file-item-name{
@include ellipsis(1);
@include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 10px;
}
.file-del{
flex: none;
display: block;
margin-left: auto;
width: 16px;
@ -417,3 +447,176 @@
@include defaultFont($font-s-13, $font-w-400, #F86A56);
}
}
// 비밀번호 변경
.border-frame{
padding: 20px;
border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ECECEC;
background-color: #fff;
margin-bottom: 10px;
&:last-child{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
.pw-guide{
.pw-guide-tit{
@include defaultFont($font-s-16, $font-w-500, #1259CB);
}
.pw-guide-txt{
@include defaultFont($font-s-13, $font-w-400, #417DDC);
}
}
// 지붕재 적합성
.compliance-icon{
display: block;
width: 22px;
height: 22px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
&.check{
background-image: url(/assets/images/sub/compliance_check_icon.svg);
}
&.x{
background-image: url(/assets/images/sub/compliance_x_icon.svg);
}
&.quest{
background-image: url(/assets/images/sub/compliance_quest_icon.svg);
}
&.tip{
background-image: url(/assets/images/sub/compliance_tip_icon.svg);
}
}
.compliance-check-wrap{
padding-top: 10px;
}
.compliance-check-bx{
position: relative;
padding: 14px 18px;
border: 1px solid #EFEFEF;
border-radius: 4px;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
&.act{
.bx-btn{
transform: rotate(0) !important;
}
.reference-list{
display: block
}
}
}
.check-name-wrap{
@include flex(0px);
align-items: center;
.check-name{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.check-name-btn{
margin-left: auto;
.bx-btn{
display: block;
width: 22px;
height: 22px;
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
transform: rotate(180deg);
}
}
}
.reference-list{
display: none;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid #ECECEC;
transition: all .15s ease-in-out;
.reference-item{
margin-bottom: 8px;
padding-left: 14px;
.reference-item-bx{
@include flex(10px);
@include defaultFont($font-s-13, $font-w-400, $font-c);
align-items: center;
}
&:last-child{
margin-bottom: 0;
}
}
&.check{
.reference-item{
margin-bottom: 14px;
}
}
}
.compliace-nodata{
margin-top: 24px;
padding: 30px 0;
@include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center;
}
.compliace-nosearch{
padding: 30px 0;
span{
display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center;
}
}
.check-form-box{
&.com-tit{
label{
&:before{
width: 20px;
height: 20px;
top: 0;
}
}
input[type="checkbox"]:checked + label{
font-weight: 500;
&::after{
left: -1px;
}
}
}
&.com-txt{
label{
@include defaultFont($font-s-13, $font-w-400, #8595A7);
&:before{
width: 20px;
height: 20px;
top: 0;
}
}
input[type="checkbox"]:checked + label{
&::after{
left: -1px;
}
}
}
}
.check-item-wrap{
display: flex;
align-items: center;
}
.compliance-icon-wrap{
margin-left: auto;
display: flex;
align-items: center;
}
@media screen and (max-width: 360px){
.btn-flex-wrap{
flex-direction: column;
}
.data-check-wrap{
.radio-form-box,
.check-form-box{
width: 100%;
}
}
}

View File

@ -31,6 +31,7 @@ $default-color: #2C2C2C;
.p-body{
margin-top: 30px;
padding-bottom: 70px;
flex: 1 1 auto;
.p-contents{
max-width: 1480px;