qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update PDF view and subcomponent styles for consistency and responsiveness

Browse Source 
- Added a wrapper for PDF tables with fixed width for better layout.
- Adjusted height and flex properties in the PDF intro page for improved structure.
- Enhanced spacing and alignment in various components for better visual consistency.
- Standardized color codes and formatting across styles for uniformity.
- Implemented responsive design adjustments for smaller screens.
This commit is contained in:
yoosangwook 2025-06-02 15:30:17 +09:00
parent 404eaa3299
commit 9d89ceadc0
2 changed files with 229 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/styles/components/_pdfview.scss
View File

@ -58,11 +58,22 @@
} }
// 지붕재 적합성 // 지붕재 적합성
.pdf-table-wrap{
max-width: 1540px;
min-width: 1540px;
margin: 0 auto;
}
.pdf-intro-page{ .pdf-intro-page{
height: 1080px; display: flex;
flex-direction: column;
height: 1050px;
padding: 80px 40px ; padding: 80px 40px ;
background-color: #fff; background-color: #fff;
} }
.pdf-intro-foot-date{
margin-top: auto;
text-align: right;
}
.pdf-intro-tit-wrap{ .pdf-intro-tit-wrap{
text-align: center; text-align: center;
.pdf-intro-tit{ .pdf-intro-tit{
@ -81,6 +92,7 @@
.pdf-table-content{ .pdf-table-content{
padding: 20px; padding: 20px;
margin-bottom: 50px;
} }
.pdf-table-grid-wrap{ .pdf-table-grid-wrap{
display: grid; display: grid;

442
src/styles/components/_sub.scss
View File

@ -1,38 +1,38 @@
@use '../abstracts' as *; @use "../abstracts" as *;
// input form 공통 // input form 공통
.data-input-form-bx { .data-input-form-bx{
margin-bottom: 18px; margin-bottom: 18px;
&:last-child { &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
.data-input-form-tit { .data-input-form-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
margin-bottom: 10px; margin-bottom: 10px;
.import { .import{
color: #f00; color: #F00;
} }
span { span{
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, #a8b6c7); @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
} }
} }
.data-input-guide { .data-input-guide{
margin-top: 8px; margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #a8b6c7); @include defaultFont($font-s-13, $font-w-400, #A8B6C7);
} }
} }
.btn-flex-wrap { .btn-flex-wrap{
@include flex(5px); @include flex(5px);
margin-top: 24px; margin-top: 24px;
.btn-bx { .btn-bx{
flex: 1; flex: 1;
} }
&.com { &.com{
.btn-bx { .btn-bx{
flex: 1 1 auto; flex: 1 1 auto;
button { button{
font-size: 12px; font-size: 12px;
} }
} }
@ -40,13 +40,13 @@
} }
// 매물 common // 매물 common
.top-btn { .top-btn{
position: fixed; position: fixed;
bottom: 96px; bottom: 96px;
right: 15px; right: 15px;
width: 38px; width: 38px;
height: 38px; height: 38px;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.50);
background-image: url(/assets/images/sub/top_btn_icon.svg); background-image: url(/assets/images/sub/top_btn_icon.svg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -55,68 +55,68 @@
z-index: 90000; z-index: 90000;
} }
.sale-contents { .sale-contents{
width: 100%; width: 100%;
background-color: #f5f5f5; background-color: #F5F5F5;
.sale-frame { .sale-frame{
padding: 0 20px; padding: 0 20px;
border-top: 1px solid #ececec; border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 24px; padding-bottom: 24px;
padding-top: 24px; padding-top: 24px;
background-color: $white-fff; background-color: $white-fff;
&:first-child { &:first-child{
padding-top: 0; padding-top: 0;
border-top: none; border-top: none;
} }
&:last-child { &:last-child{
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
.sale-form-btn-wrap { .sale-form-btn-wrap{
padding: 20px 20px 0; padding: 20px 20px 0 ;
background-color: #fff; background-color: #fff;
.btn-flex-wrap { .btn-flex-wrap{
margin-top: 0; margin-top: 0;
} }
} }
// 매물 목록 // 매물 목록
.sale-form-bx { .sale-form-bx{
margin-bottom: 14px; margin-bottom: 14px;
&:last-child { &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
} }
.sale-list-wrap { .sale-list-wrap{
.sale-list-item { .sale-list-item{
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child{
padding-top: 0; padding-top: 0;
} }
&:last-child { &:last-child{
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
.sale-item-bx { .sale-item-bx{
.sale-item-date-bx { .sale-item-date-bx{
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
margin-bottom: 9px; margin-bottom: 9px;
.sale-item-num { .sale-item-num{
position: relative; position: relative;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 6px; padding-right: 6px;
&::after { &::after{
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -124,31 +124,31 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #a2abb8; background-color: #A2ABB8;
} }
} }
.sale-item-date { .sale-item-date{
@include defaultFont($font-s-13, $font-w-400, #a2abb8); @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-left: 6px; padding-left: 6px;
} }
} }
.sale-item-tit { .sale-item-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1); @include ellipsis(1);
margin-bottom: 9px; margin-bottom: 9px;
} }
.sale-item-customer { .sale-item-customer{
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 9px; margin-bottom: 9px;
} }
.sale-item-update-bx { .sale-item-update-bx{
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.sale-item-name { .sale-item-name{
position: relative; position: relative;
@include defaultFont($font-s-13, $font-w-400, #a2abb8); @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-right: 6px; padding-right: 6px;
&::after { &::after{
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -156,177 +156,176 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #a2abb8; background-color: #A2ABB8;
} }
} }
.sale-item-update { .sale-item-update{
@include defaultFont($font-s-13, $font-w-400, #a2abb8); @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
padding-left: 6px; padding-left: 6px;
} }
} }
&.nodata { &.nodata{
.sale-item-nodata { .sale-item-nodata{
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
} }
} }
} }
.sale-edit-btn { .sale-edit-btn{
margin-top: 24px; margin-top: 24px;
} }
// 매물 상세 // 매물 상세
.sale-data-table-wrap { .sale-data-table-wrap{
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;
border-top: 1px solid #ececec; border-top: 1px solid #ECECEC;
} }
.sale-data-table { .sale-data-table{
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
tbody { tbody{
tr { tr{
th { th{
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
vertical-align: top; vertical-align: top;
padding: 5px 0; padding: 5px 0;
} }
td { td{
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 5px 0 8px 14px; padding: 5px 0 8px 14px;
.data-down { .data-down{
@include flex(8px); @include flex(8px);
align-items: center; align-items: center;
color: #1259cb; color: #1259CB;
i { i{
display: block; display: block;
width: 8px; width: 8px;
height: 12px; height: 12px;
background: url(/assets/images/sub/down_icon.svg) no-repeat center; background: url(/assets/images/sub/down_icon.svg)no-repeat center;
background-size: cover; background-size: cover;
} }
} }
} }
&:first-child { &:first-child{
th, th,td{
td {
padding-top: 0; padding-top: 0;
} }
} }
&:last-child { &:last-child{
th, th,td{
td {
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
} }
} }
.sale-detail-toggle-wrap { .sale-detail-toggle-wrap{
border-top: 1px solid #ececec; border-top: 1px solid #ECECEC;
} }
.sale-detail-toggle-bx { .sale-detail-toggle-bx{
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
} }
.sale-detail-toggle-head { .sale-detail-toggle-head{
@include flex(5px); @include flex(5px);
padding: 14px 18px; padding: 14px 18px;
background-color: $white-fff; background-color: $white-fff;
cursor: pointer; cursor: pointer;
.sale-detail-toggle-name { .sale-detail-toggle-name{
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.sale-detail-toggle-btn-wrap { .sale-detail-toggle-btn-wrap{
margin-left: auto; margin-left: auto;
.sale-detail-toggle-btn { .sale-detail-toggle-btn{
display: block; display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url(/assets/images/sub/sale_toggle_btn.svg) no-repeat center; background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
background-size: cover; background-size: cover
} }
} }
} }
.sale-detail-toggle-cont { .sale-detail-toggle-cont{
display: none; display: none;
.sale-frame { .sale-frame{
padding: 24px 20px; padding: 24px 20px;
&:first-child { &:first-child{
padding-top: 24px; padding-top: 24px;
} }
&:last-child { &:last-child{
padding-bottom: 24px; padding-bottom: 24px;
} }
} }
} }
.sale-detail-toggle-bx { .sale-detail-toggle-bx{
&.act { &.act{
.sale-detail-toggle-head { .sale-detail-toggle-head{
background-color: #5f738e; background-color: #5F738E;
.sale-detail-toggle-name { .sale-detail-toggle-name{
color: #fff; color: #fff
} }
.sale-detail-toggle-btn-wrap { .sale-detail-toggle-btn-wrap{
.sale-detail-toggle-btn { .sale-detail-toggle-btn{
background: url(/assets/images/sub/sale_toggle_btn_white.svg) no-repeat center; background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
} }
} }
} }
.sale-detail-toggle-cont { .sale-detail-toggle-cont{
display: block; display: block;
} }
} }
} }
// 매물 기본정보 // 매물 기본정보
.form-flex { .form-flex{
@include flex(5px); @include flex(5px);
.form-bx { .form-bx{
flex: 1; flex: 1;
} }
} }
.form-btn { .form-btn{
margin-top: 12px; margin-top: 12px;
} }
// 매물 전기 지붕정보 // 매물 전기 지붕정보
.sale-roof-title { .sale-roof-title{
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #2e3a59; border-bottom: 1px solid #2E3A59;
} }
.data-check-wrap { .data-check-wrap{
@include flex(10px); @include flex(10px);
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 12px; margin-bottom: 12px;
.radio-form-box, .radio-form-box,
.check-form-box { .check-form-box{
width: calc(50% - 5px); width: calc(50% - 5px);
} }
&.mb0 { &.mb0{
margin-bottom: 0; margin-bottom: 0;
} }
} }
.data-input { .data-input{
&.flex { &.flex{
@include flex(8px); @include flex(8px);
align-items: center; align-items: center;
span { span{
flex: none; flex: none;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
} }
} }
} }
// 1:1 문의 common // 1:1 문의 common
.inquiry-frame { .inquiry-frame{
padding: 0 20px; padding: 0 20px;
} }
.badge { .badge{
min-width: 60px; min-width: 60px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -335,64 +334,65 @@
text-align: center; text-align: center;
font-size: $font-s-12; font-size: $font-s-12;
font-weight: $font-w-500; font-weight: $font-w-500;
&.blue { &.blue{
color: #5497e9; color: #5497E9;
background-color: #ecf5ff; background-color: #ECF5FF;
} }
&.orange { &.orange{
color: #f86a56; color: #F86A56;
background-color: #ffefed; background-color: #FFEFED;
} }
&.block { &.block{
width: 100%; width: 100%;
} }
} }
// 1:1 문의 목록 // 1:1 문의 목록
.inquiry-table-filter { .inquiry-table-filter{
margin-bottom: 24px; margin-bottom: 24px;
.filter-check { .filter-check{
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
.inquiry-list-tit { .inquiry-list-tit{
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #2e3a59; border-bottom: 1px solid #2E3A59;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
span { span{
font-weight: $font-w-500; font-weight: $font-w-500;
} }
} }
.inquiry-list { .inquiry-list{
.inquiry-item { .inquiry-item{
padding: 10px 0; padding: 10px 0;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
&:last-child { &:last-child{
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
.inquiry-item-bx { .inquiry-item-bx{
position: relative; position: relative;
padding-right: 70px; padding-right: 70px;
.inquiry-item-category { .inquiry-item-category{
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
span { span{
position: relative; position: relative;
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 0 6px; padding: 0 6px;
&:first-child { &:first-child{
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child{
padding-right: 0; padding-right: 0;
&::before { &::before{
display: none; display: none;
} }
} }
&::before { &::before{
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -400,31 +400,26 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #a2abb8; background-color: #A2ABB8;
} }
} }
} }
.inquiry-item-tit { .inquiry-item-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@include ellipsis(1); @include ellipsis(1);
margin-bottom: 5px; margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
} }
.inquiry-item-date { .inquiry-item-date{
@include defaultFont($font-s-13, $font-w-400, #a2abb8); @include defaultFont($font-s-13, $font-w-400, #A2ABB8);
} }
.inquiry-badge { .inquiry-badge{
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
} }
&.nodata { &.nodata{
padding-right: 0; padding-right: 0;
.inquiry-item-nodata { .inquiry-item-nodata{
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
@ -435,45 +430,42 @@
} }
// 1:1문의 작성 // 1:1문의 작성
.textarea-form { .inquiry-file-wrap{
white-space: pre-wrap;
}
.inquiry-file-wrap {
margin-top: 20px; margin-top: 20px;
.file-list-wrap { .file-list-wrap{
margin-top: 14px; margin-top: 14px;
} }
} }
.file-list-tit { .file-list-tit{
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.file-list { .file-list{
margin-top: 14px; margin-top: 14px;
.file-item { .file-item{
border-top: 1px solid #ededed; border-top: 1px solid #EDEDED;
cursor: default; cursor: default;
.file-item-bx { .file-item-bx{
width: 100%; width: 100%;
padding: 14px 0; padding: 14px 0;
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.file-item-name { .file-item-name{
@include ellipsis(1); @include ellipsis(1);
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 10px; padding-right: 10px;
} }
.file-del { .file-del{
flex: none; flex: none;
display: block; display: block;
margin-left: auto; margin-left: auto;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url(/assets/images/common/id_delete_icon.svg) no-repeat center; background: url(/assets/images/common/id_delete_icon.svg)no-repeat center;
background-size: cover; background-size: cover;
} }
} }
&:last-child { &:last-child{
.file-item-bx { .file-item-bx{
padding-bottom: 0; padding-bottom: 0;
} }
} }
@ -481,33 +473,33 @@
} }
// 1:1 문의 상세 // 1:1 문의 상세
.inquiry-detail-data-table { .inquiry-detail-data-table{
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
} }
.inquiry-detail-data { .inquiry-detail-data{
padding: 20px 0; padding: 20px 0;
border-bottom: 1px solid #2e3a59; border-bottom: 1px solid #2E3A59;
margin-bottom: 24px; margin-bottom: 24px;
.inquiry-detail-category { .inquiry-detail-category{
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 3px; margin-bottom: 3px;
span { span{
position: relative; position: relative;
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
padding: 0 6px; padding: 0 6px;
&:first-child { &:first-child{
padding-left: 0; padding-left: 0;
} }
&:last-child { &:last-child{
padding-right: 0; padding-right: 0;
&::before { &::before{
display: none; display: none;
} }
} }
&::before { &::before{
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -515,154 +507,152 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 10px; height: 10px;
background-color: #a2abb8; background-color: #A2ABB8;
} }
} }
} }
.inquiry-detail-tit { .inquiry-detail-tit{
@include defaultFont($font-s-15, $font-w-500, $font-c); @include defaultFont($font-s-15, $font-w-500, $font-c);
margin-bottom: 10px; margin-bottom: 10px;
word-wrap: break-word;
white-space: normal;
overflow-wrap: break-word;
} }
.inquiry-detail-txt { .inquiry-detail-txt{
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
white-space: pre-line; white-space: pre-line;
} }
} }
// 1:1 문의 답변 // 1:1 문의 답변
.inquiry-answer-wrap { .inquiry-answer-wrap{
margin-top: 24px; margin-top: 24px;
} }
.inquiry-answer-header { .inquiry-answer-header{
padding: 20px 0; padding: 20px 0;
border-top: 1px solid #f86a56; border-top: 1px solid #F86A56;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
.inquiry-answer-tit { .inquiry-answer-tit{
@include defaultFont($font-s-14, $font-w-500, #f86a56); @include defaultFont($font-s-14, $font-w-500, #F86A56);
margin-bottom: 5px; margin-bottom: 5px;
} }
.inquiry-answer-date { .inquiry-answer-date{
@include defaultFont($font-s-13, $font-w-400, #f86a56); @include defaultFont($font-s-13, $font-w-400, #F86A56);
} }
} }
.inquiry-answer-tit { .inquiry-answer-tit{
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
margin-bottom: 3px; margin-bottom: 3px;
} }
// 비밀번호 변경 // 비밀번호 변경
.border-frame { .border-frame{
padding: 20px; padding: 20px;
border-top: 1px solid #ececec; border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ECECEC;
background-color: #fff; background-color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
&:last-child { &:last-child{
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.pw-guide { .pw-guide{
.pw-guide-tit { .pw-guide-tit{
@include defaultFont($font-s-16, $font-w-500, #1259cb); @include defaultFont($font-s-16, $font-w-500, #1259CB);
} }
.pw-guide-txt { .pw-guide-txt{
@include defaultFont($font-s-13, $font-w-400, #417ddc); @include defaultFont($font-s-13, $font-w-400, #417DDC);
} }
} }
// 지붕재 적합성 // 지붕재 적합성
.compliance-icon { .compliance-icon{
display: flex; display: flex;
} }
.compliance-check-wrap { .compliance-check-wrap{
padding-top: 10px; padding-top: 10px;
} }
.compliance-check-bx { .compliance-check-bx{
position: relative; position: relative;
padding: 14px 18px; padding: 14px 18px;
border: 1px solid #efefef; border: 1px solid #EFEFEF;
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
&:last-child { &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
&.act { &.act{
.bx-btn { .bx-btn{
transform: rotate(0) !important; transform: rotate(0) !important;
} }
.reference-list { .reference-list{
display: block; display: block
} }
} }
} }
.check-name-wrap { .check-name-wrap{
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
.check-name { .check-name{
@include defaultFont($font-s-13, $font-w-500, $font-c); @include defaultFont($font-s-13, $font-w-500, $font-c);
} }
.check-name-btn { .check-name-btn{
padding-left: 5px; padding-left: 5px;
margin-left: auto; margin-left: auto;
.bx-btn { .bx-btn{
display: block; display: block;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: url(/assets/images/sub/compliance_bx_icon.svg) no-repeat center; background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
.reference-list { .reference-list{
display: none; display: none;
margin-top: 10px; margin-top: 10px;
padding-top: 14px; padding-top: 14px;
border-top: 1px solid #ececec; border-top: 1px solid #ECECEC;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
.reference-item { .reference-item{
margin-bottom: 8px; margin-bottom: 8px;
padding-left: 14px; padding-left: 14px;
.reference-item-bx { .reference-item-bx{
@include flex(10px); @include flex(10px);
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
align-items: center; align-items: center;
} }
&:last-child { &:last-child{
margin-bottom: 0; margin-bottom: 0;
} }
} }
&.check { &.check{
.reference-item { .reference-item{
margin-bottom: 14px; margin-bottom: 14px;
} }
} }
} }
.compliace-nosearch { .compliace-nosearch{
padding: 30px 0; padding: 30px 0;
span { span{
display: block; display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c); @include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center; text-align: center;
} }
} }
.check-item-wrap { .check-item-wrap{
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.compliance-icon-wrap { .compliance-icon-wrap{
margin-left: auto; margin-left: auto;
min-width: 44px; min-width: 44px;
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.float-btn-wrap { .float-btn-wrap{
position: sticky; position: sticky;
bottom: 10px; bottom: 10px;
left: 0; left: 0;
@ -670,14 +660,14 @@
background-color: #fff; background-color: #fff;
z-index: 9; z-index: 9;
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px){
.btn-flex-wrap { .btn-flex-wrap{
flex-direction: column; flex-direction: column;
} }
.data-check-wrap { .data-check-wrap{
.radio-form-box, .radio-form-box,
.check-form-box { .check-form-box{
width: 100%; width: 100%;
} }
} }
} }