yoosangwook 9d89ceadc0 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.
2025-06-02 15:30:17 +09:00

150 lines
3.0 KiB
SCSS

@use "../abstracts" as *;
// 조사매물
.pdf-contents{
padding: 0 20px;
border-top: 1px solid #ececec;
}
.pdf-cont-head{
align-items: center;
padding: 24px 0 15px;
border-bottom: 2px solid $black-1010;
.pdf-cont-head-tit{
@include defaultFont($font-s-16, $font-w-600, $black-1010);
margin-bottom: 10px;
}
}
.pdf-cont-head-data-wrap{
@include flex(20px);
align-items: center;
.pdf-cont-head-data-tit{
@include defaultFont($font-s-13, $font-w-500, $black-1010);
}
.pdf-cont-head-data{
@include defaultFont($font-s-13, $font-w-400, #FF5656);
}
}
.pdf-cont-body{
padding: 24px 0 0;
}
.pdf-data-tit{
@include defaultFont($font-s-13, $font-w-500, $black-1010);
margin-bottom: 5px;
}
.pdf-table{
margin-bottom: 24px;
table{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
th{
padding: 9.5px;
@include defaultFont($font-s-11, $font-w-500, $black-1010);
border: 1px solid #2E3A59;
background-color: #F5F6FA;
}
td{
padding: 9.5px;
@include defaultFont($font-s-11, $font-w-400, #FF5656);
border: 1px solid #2E3A59;
}
}
}
.pdf-textarea-data{
padding: 10px;
@include defaultFont($font-s-11, $font-w-400, #FF5656);
border: 1px solid $black-1010;
min-height: 150px;
}
// 지붕재 적합성
.pdf-table-wrap{
max-width: 1540px;
min-width: 1540px;
margin: 0 auto;
}
.pdf-intro-page{
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{
@include defaultFont($font-s-24, $font-w-500, #101010);
}
.pdf-intro-date{
@include defaultFont($font-s-22, $font-w-400, #101010);
}
}
.pdf-intro-cont-wrap{
margin-top: 70px;
p{
@include defaultFont($font-s-18, $font-w-400, #101010);
}
}
.pdf-table-content{
padding: 20px;
margin-bottom: 50px;
}
.pdf-table-grid-wrap{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 20px;
}
.pdf-table-card{
.pdf-table-tit-wrap{
margin-bottom: 5px;
span{
position: relative;
@include defaultFont($font-s-13, $font-w-500, #101010);
padding: 0 10px;
&:first-child{
padding-left: 0;
}
&:last-child{
padding-right: 0;
&::before{
display: none;
}
}
&::before{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 14px;
background-color: #101010;
}
}
}
}
.pdf-roof-table{
table{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
th{
padding: 0px 5px;
text-align: center;
@include defaultFont($font-s-11, $font-w-500, #fff);
background-color: #18B490;
border: 1px solid #18B490;
}
td{
padding: 0px 5px;
@include defaultFont($font-s-11, $font-w-300, #101010);
border: 1px solid #CBCBCB;
line-height: 1;
}
}
}