style: update PDF view and subcomponent styles for consistency and responsiveness
- 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:
parent
404eaa3299
commit
9d89ceadc0
@ -58,11 +58,22 @@
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.pdf-table-wrap{
|
||||
max-width: 1540px;
|
||||
min-width: 1540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.pdf-intro-page{
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1050px;
|
||||
padding: 80px 40px ;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pdf-intro-foot-date{
|
||||
margin-top: auto;
|
||||
text-align: right;
|
||||
}
|
||||
.pdf-intro-tit-wrap{
|
||||
text-align: center;
|
||||
.pdf-intro-tit{
|
||||
@ -81,6 +92,7 @@
|
||||
|
||||
.pdf-table-content{
|
||||
padding: 20px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.pdf-table-grid-wrap{
|
||||
display: grid;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use '../abstracts' as *;
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// input form 공통
|
||||
.data-input-form-bx{
|
||||
@ -10,16 +10,16 @@
|
||||
@include defaultFont($font-s-13, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
.import{
|
||||
color: #f00;
|
||||
color: #F00;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
.data-input-guide{
|
||||
margin-top: 8px;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a8b6c7);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
right: 15px;
|
||||
width: 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-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@ -57,11 +57,11 @@
|
||||
|
||||
.sale-contents{
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #F5F5F5;
|
||||
.sale-frame{
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 24px;
|
||||
@ -96,7 +96,7 @@
|
||||
.sale-list-item{
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
cursor: pointer;
|
||||
&:first-child{
|
||||
padding-top: 0;
|
||||
@ -124,11 +124,11 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
.sale-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
@ -146,7 +146,7 @@
|
||||
align-items: center;
|
||||
.sale-item-name{
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-right: 6px;
|
||||
&::after{
|
||||
content: '';
|
||||
@ -156,11 +156,11 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
.sale-item-update{
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
@ -180,7 +180,7 @@
|
||||
.sale-data-table-wrap{
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-data-table{
|
||||
width: 100%;
|
||||
@ -198,7 +198,7 @@
|
||||
.data-down{
|
||||
@include flex(8px);
|
||||
align-items: center;
|
||||
color: #1259cb;
|
||||
color: #1259CB;
|
||||
i{
|
||||
display: block;
|
||||
width: 8px;
|
||||
@ -209,14 +209,12 @@
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
th,
|
||||
td {
|
||||
th,td{
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
th,
|
||||
td {
|
||||
th,td{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -225,10 +223,10 @@
|
||||
}
|
||||
|
||||
.sale-detail-toggle-wrap{
|
||||
border-top: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-detail-toggle-bx{
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
}
|
||||
.sale-detail-toggle-head{
|
||||
@include flex(5px);
|
||||
@ -245,7 +243,7 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
background-size: cover
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -265,9 +263,9 @@
|
||||
.sale-detail-toggle-bx{
|
||||
&.act{
|
||||
.sale-detail-toggle-head{
|
||||
background-color: #5f738e;
|
||||
background-color: #5F738E;
|
||||
.sale-detail-toggle-name{
|
||||
color: #fff;
|
||||
color: #fff
|
||||
}
|
||||
.sale-detail-toggle-btn-wrap{
|
||||
.sale-detail-toggle-btn{
|
||||
@ -297,7 +295,7 @@
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
}
|
||||
.data-check-wrap{
|
||||
@include flex(10px);
|
||||
@ -322,6 +320,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 1:1 문의 common
|
||||
.inquiry-frame{
|
||||
padding: 0 20px;
|
||||
@ -336,15 +335,16 @@
|
||||
font-size: $font-s-12;
|
||||
font-weight: $font-w-500;
|
||||
&.blue{
|
||||
color: #5497e9;
|
||||
background-color: #ecf5ff;
|
||||
color: #5497E9;
|
||||
background-color: #ECF5FF;
|
||||
}
|
||||
&.orange{
|
||||
color: #f86a56;
|
||||
background-color: #ffefed;
|
||||
color: #F86A56;
|
||||
background-color: #FFEFED;
|
||||
}
|
||||
&.block{
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
// 1:1 문의 목록
|
||||
@ -356,7 +356,7 @@
|
||||
}
|
||||
.inquiry-list-tit{
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
span{
|
||||
font-weight: $font-w-500;
|
||||
@ -366,7 +366,7 @@
|
||||
.inquiry-item{
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
@ -400,7 +400,7 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -408,14 +408,9 @@
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
@include ellipsis(1);
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.inquiry-item-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #a2abb8);
|
||||
@include defaultFont($font-s-13, $font-w-400, #A2ABB8);
|
||||
}
|
||||
.inquiry-badge{
|
||||
position: absolute;
|
||||
@ -435,9 +430,6 @@
|
||||
}
|
||||
|
||||
// 1:1문의 작성
|
||||
.textarea-form {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.inquiry-file-wrap{
|
||||
margin-top: 20px;
|
||||
.file-list-wrap{
|
||||
@ -450,7 +442,7 @@
|
||||
.file-list{
|
||||
margin-top: 14px;
|
||||
.file-item{
|
||||
border-top: 1px solid #ededed;
|
||||
border-top: 1px solid #EDEDED;
|
||||
cursor: default;
|
||||
.file-item-bx{
|
||||
width: 100%;
|
||||
@ -483,11 +475,11 @@
|
||||
// 1:1 문의 상세
|
||||
.inquiry-detail-data-table{
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
}
|
||||
.inquiry-detail-data{
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #2e3a59;
|
||||
border-bottom: 1px solid #2E3A59;
|
||||
margin-bottom: 24px;
|
||||
.inquiry-detail-category{
|
||||
display: flex;
|
||||
@ -515,16 +507,13 @@
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #a2abb8;
|
||||
background-color: #A2ABB8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inquiry-detail-tit{
|
||||
@include defaultFont($font-s-15, $font-w-500, $font-c);
|
||||
margin-bottom: 10px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.inquiry-detail-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
@ -535,17 +524,18 @@
|
||||
// 1:1 문의 답변
|
||||
.inquiry-answer-wrap{
|
||||
margin-top: 24px;
|
||||
|
||||
}
|
||||
.inquiry-answer-header{
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #f86a56;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #F86A56;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
.inquiry-answer-tit{
|
||||
@include defaultFont($font-s-14, $font-w-500, #f86a56);
|
||||
@include defaultFont($font-s-14, $font-w-500, #F86A56);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.inquiry-answer-date{
|
||||
@include defaultFont($font-s-13, $font-w-400, #f86a56);
|
||||
@include defaultFont($font-s-13, $font-w-400, #F86A56);
|
||||
}
|
||||
}
|
||||
.inquiry-answer-tit{
|
||||
@ -556,8 +546,8 @@
|
||||
// 비밀번호 변경
|
||||
.border-frame{
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
border-bottom: 1px solid #ececec;
|
||||
border-top: 1px solid #ECECEC;
|
||||
border-bottom: 1px solid #ECECEC;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
@ -568,10 +558,10 @@
|
||||
}
|
||||
.pw-guide{
|
||||
.pw-guide-tit{
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259cb);
|
||||
@include defaultFont($font-s-16, $font-w-500, #1259CB);
|
||||
}
|
||||
.pw-guide-txt{
|
||||
@include defaultFont($font-s-13, $font-w-400, #417ddc);
|
||||
@include defaultFont($font-s-13, $font-w-400, #417DDC);
|
||||
}
|
||||
}
|
||||
|
||||
@ -585,7 +575,7 @@
|
||||
.compliance-check-bx{
|
||||
position: relative;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #efefef;
|
||||
border: 1px solid #EFEFEF;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child{
|
||||
@ -596,7 +586,7 @@
|
||||
transform: rotate(0) !important;
|
||||
}
|
||||
.reference-list{
|
||||
display: block;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -622,8 +612,8 @@
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #ececec;
|
||||
transition: all 0.15s ease-in-out;
|
||||
border-top: 1px solid #ECECEC;
|
||||
transition: all .15s ease-in-out;
|
||||
.reference-item{
|
||||
margin-bottom: 8px;
|
||||
padding-left: 14px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user