radio, check header side nav 수정
This commit is contained in:
parent
61491cd2c8
commit
9fc0a82c6e
@ -1,6 +1,7 @@
|
||||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 1C16.5228 1 21 5.25329 21 10.5C21 15.7467 16.5228 20 11 20C9.7958 20 8.64147 19.7974 7.57227 19.4268L7 20L4 20.5L4.96875 18.0762C2.55822 16.3416 1 13.5943 1 10.5C1 5.25329 5.47715 1 11 1Z" fill="white"/>
|
||||
<path d="M21 10.5667C21 15.8499 16.5222 20.1334 11 20.1334C10.3507 20.1343 9.70324 20.0742 9.06542 19.9545C8.60633 19.8682 8.37678 19.8251 8.21653 19.8496C8.05627 19.8741 7.82918 19.9949 7.37499 20.2364C6.09014 20.9197 4.59195 21.161 3.15111 20.893C3.69874 20.2194 4.07275 19.4112 4.23778 18.5448C4.33778 18.0148 4.09 17.5 3.71889 17.1231C2.03333 15.4115 1 13.1051 1 10.5667C1 5.28357 5.47778 1 11 1C11.6849 1 12.3538 1.0659 13 1.19142" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M22 4.5C22 6.433 20.433 8 18.5 8C16.567 8 15 6.433 15 4.5C15 2.567 16.567 1 18.5 1C20.433 1 22 2.567 22 4.5Z" fill="#F4F9FF" stroke="#7896BA" stroke-width="1.5"/>
|
||||
<path d="M10.9955 11H11.0045M14.991 11H15M7 11H7.00897" stroke="#7896BA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.2435 0.855705C15.4097 0.855705 19.5984 4.76701 19.5984 9.59169C19.5983 14.4163 15.4097 18.3277 10.2435 18.3277C9.21282 18.3276 8.22209 18.1686 7.2948 17.8811L6.93848 18.2343L3.16521 18.8557L4.21196 16.2668C2.1806 14.6643 0.889448 12.2694 0.889404 9.59169C0.889404 4.76712 5.07732 0.85588 10.2435 0.855705Z" fill="white"/>
|
||||
<path d="M0 9.59678C0.000163056 4.27209 4.50324 3.08562e-05 9.99974 0C10.5114 0 11.0145 0.0367594 11.5062 0.108105L11.994 0.190773L12.0635 0.208033C12.4039 0.310445 12.6172 0.654717 12.5476 1.00928C12.478 1.36387 12.15 1.6032 11.7958 1.5707L11.7245 1.5607L11.3034 1.48894C10.8786 1.42731 10.4433 1.39537 9.99974 1.39537C5.22716 1.3954 1.40338 5.09254 1.40322 9.59678C1.40322 11.7648 2.28418 13.7385 3.73095 15.2082L3.89265 15.3881C4.25873 15.8329 4.5322 16.4532 4.40149 17.1468V17.1487C4.30484 17.6562 4.13751 18.1444 3.91092 18.6022C4.74024 18.5824 5.56144 18.369 6.29803 17.9772L6.82058 17.7073C6.95458 17.6437 7.12248 17.5708 7.30476 17.5429L7.43723 17.5302C7.56728 17.5242 7.69099 17.5364 7.79808 17.5511C7.94476 17.5712 8.12535 17.6059 8.33159 17.6447L8.74543 17.7119C9.16053 17.77 9.57922 17.7996 9.99883 17.7991H9.99974L10.4446 17.7882C15.0079 17.5669 18.5963 13.9603 18.5963 9.59678C18.5964 9.21163 18.9105 8.89916 19.2979 8.8991C19.6853 8.8991 19.9993 9.21159 19.9995 9.59678C19.9995 14.9216 15.4964 19.1936 9.99974 19.1936C9.51427 19.1941 9.02994 19.1608 8.54993 19.0936L8.07032 19.0155C7.84995 18.9741 7.71018 18.948 7.60623 18.9337C7.56695 18.9284 7.5409 18.924 7.52493 18.9228C7.5106 18.9282 7.47931 18.9408 7.42535 18.9664L6.96035 19.2072C5.6279 19.9161 4.07257 20.1676 2.57256 19.8885C2.32985 19.8433 2.12903 19.6747 2.04362 19.4443C1.95822 19.2139 2.00084 18.9558 2.15598 18.7648L2.31311 18.5586C2.66358 18.067 2.90718 17.4969 3.02294 16.8888C3.05428 16.7202 2.99503 16.5004 2.81374 16.2793L2.72787 16.1839C1.04031 14.4693 0 12.1512 0 9.59678Z" fill="#7896BA"/>
|
||||
<path d="M19.2978 4.88379C19.2978 6.68195 17.8408 8.13965 16.0434 8.13965C14.2461 8.13965 12.7891 6.68195 12.7891 4.88379C12.7891 3.08563 14.2461 1.62794 16.0434 1.62794C17.8408 1.62794 19.2978 3.08563 19.2978 4.88379Z" fill="#F4F9FF"/>
|
||||
<path d="M18.5967 4.88379C18.5967 3.46695 17.4492 2.32562 16.0433 2.32562C14.6376 2.32578 13.4909 3.46705 13.4909 4.88379C13.4909 6.30053 14.6376 7.4418 16.0433 7.44196C17.4492 7.44196 18.5967 6.30063 18.5967 4.88379ZM19.9999 4.88379C19.9999 7.06327 18.2322 8.83733 16.0433 8.83733C13.8546 8.83717 12.0876 7.06318 12.0876 4.88379C12.0876 2.70441 13.8546 0.930412 16.0433 0.930252C18.2322 0.930252 19.9999 2.70431 19.9999 4.88379Z" fill="#7896BA"/>
|
||||
<path d="M6.28867 9.06989L6.38459 9.07444C6.85625 9.12213 7.22415 9.51853 7.22415 10.0001C7.22415 10.4817 6.85625 10.8781 6.38459 10.9258L6.28867 10.9304H6.28045C5.7638 10.9304 5.34497 10.5139 5.34497 10.0001C5.34497 9.48638 5.7638 9.06989 6.28045 9.06989H6.28867ZM10.0041 9.06989L10.0991 9.07444C10.571 9.12186 10.9396 9.51833 10.9396 10.0001C10.9396 10.4819 10.571 10.8784 10.0991 10.9258L10.0041 10.9304H9.99586C9.47921 10.9304 9.06039 10.5139 9.06039 10.0001C9.06039 9.48638 9.47921 9.06989 9.99586 9.06989H10.0041ZM13.7186 9.06989L13.8145 9.07444C14.2863 9.122 14.6541 9.51843 14.6541 10.0001C14.6541 10.4818 14.2863 10.8783 13.8145 10.9258L13.7186 10.9304H13.7104C13.1939 10.9302 12.7749 10.5138 12.7749 10.0001C12.7749 9.48648 13.1939 9.07005 13.7104 9.06989H13.7186Z" fill="#7896BA"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.4 KiB |
5
public/assets/images/layout/side_swiper_icon03.svg
Normal file
5
public/assets/images/layout/side_swiper_icon03.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 1.5L13 2.5L19 8.5L20 9.5L20.5 10.5V11.5L19.5 12.5L19 13.5L18.5 14.5L18 16.5L17.5 18H16L14.5 18.5L12.5 19.5L11 20.5L9 19.5L8 18.5L5 18L4 17L3.5 15L3 13L1.5 11.5V10L3.5 7.5L4 4.5L5.5 4L9 2.5L11 1.5Z" fill="white"/>
|
||||
<path d="M13.2618 2.59937C12.1956 1.53312 11.6625 1 11 1C10.3375 1 9.8044 1.53312 8.73815 2.59937C8.09832 3.2392 7.46427 3.53626 6.55208 3.53626C5.7556 3.53626 4.62243 3.38178 4 4.00944C3.38249 4.63214 3.53628 5.76065 3.53628 6.55206C3.53628 7.46428 3.2392 8.09832 2.59935 8.73817C1.53312 9.8044 1.00001 10.3375 1 11C1.00002 11.6624 1.53314 12.1956 2.59938 13.2618C3.31616 13.9786 3.53628 14.4414 3.53628 15.4479C3.53628 16.2444 3.38181 17.3776 4.00949 18C4.63218 18.6175 5.76068 18.4637 6.55206 18.4637C7.52349 18.4637 7.99128 18.6537 8.68457 19.347C9.27492 19.9374 10.0663 21 11 21C11.9337 21 12.7251 19.9374 13.3154 19.347C14.0087 18.6537 14.4765 18.4637 15.4479 18.4637C16.2393 18.4637 17.3678 18.6175 17.9905 18M19.4006 8.73817C20.4669 9.8044 21 10.3375 21 11C21 11.6624 20.4669 12.1956 19.4006 13.2618C18.6838 13.9786 18.4637 14.4414 18.4637 15.4479C18.4637 16.2444 18.6182 17.3776 17.9905 18M17.9905 18H18" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.5 8.5L11 12L20.0002 2" stroke="#7896BA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -23,7 +23,8 @@ export default function RoofCompliancePage(){
|
||||
<Footer/>
|
||||
<button className="top-btn"></button>
|
||||
</div>
|
||||
<RoofComplianceDetailPop/>
|
||||
{/* 지붕제 적합성 상세 팝업 */}
|
||||
{/* <RoofComplianceDetailPop/> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -27,7 +27,7 @@ export default function SaleDefaultPage(){
|
||||
<button className="top-btn"></button>
|
||||
</div>
|
||||
{/* 우편번호 팝업 */}
|
||||
<SaleZipCodePop/>
|
||||
{/* <SaleZipCodePop/> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -67,9 +67,9 @@ export default function Header({name, backBtn}: HeaderProps){
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className='side-swiper-card'>
|
||||
<div className="side-swiper-icon icon01"></div>
|
||||
<div className="side-swiper-icon icon03"></div>
|
||||
<div className="side-swiper-infor">
|
||||
私は作成したお問 い合わせ
|
||||
屋根材適合性確認
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
|
||||
@ -2,7 +2,7 @@ export default function RoofComplianceCheckData(){
|
||||
return(
|
||||
<div className={`compliance-check-bx act`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-form-box com-tit">
|
||||
<div className="check-form-box ch-bld">
|
||||
<input type="checkbox" id="ch01"/>
|
||||
<label htmlFor="ch01">アースティ４０</label>
|
||||
</div>
|
||||
@ -13,7 +13,7 @@ export default function RoofComplianceCheckData(){
|
||||
<ul className= "reference-list check">
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<div className="check-form-box light">
|
||||
<input type="checkbox" id="ch02"/>
|
||||
<label htmlFor="ch02">屋根技研 支持瓦</label>
|
||||
</div>
|
||||
@ -25,7 +25,7 @@ export default function RoofComplianceCheckData(){
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<div className="check-form-box light">
|
||||
<input type="checkbox" id="ch03"/>
|
||||
<label htmlFor="ch03">屋根技研 支持金具</label>
|
||||
</div>
|
||||
@ -37,7 +37,7 @@ export default function RoofComplianceCheckData(){
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<div className="check-form-box light">
|
||||
<input type="checkbox" id="ch04"/>
|
||||
<label htmlFor="ch04">屋根技研YGアンカー</label>
|
||||
</div>
|
||||
@ -49,7 +49,7 @@ export default function RoofComplianceCheckData(){
|
||||
</li>
|
||||
<li className="reference-item">
|
||||
<div className="check-item-wrap">
|
||||
<div className="check-form-box com-txt">
|
||||
<div className="check-form-box light">
|
||||
<input type="checkbox" id="ch05"/>
|
||||
<label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
|
||||
</div>
|
||||
|
||||
@ -31,14 +31,14 @@
|
||||
.check-form-box{
|
||||
position: relative;
|
||||
label{
|
||||
padding-left: 30px;
|
||||
padding-left: 28px;
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
margin-left: 0px;
|
||||
border: 1px solid #A8B6C7;
|
||||
@ -51,9 +51,9 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-color: #fff;
|
||||
@ -69,7 +69,7 @@
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0%;
|
||||
left: -1px;
|
||||
width: 7px;
|
||||
height: 9px;
|
||||
border: 2px solid #fff;
|
||||
@ -89,20 +89,30 @@
|
||||
input[type="checkbox"]:disabled + label::after{
|
||||
cursor: default;
|
||||
}
|
||||
&.ch-bld{
|
||||
input[type="checkbox"]:checked + label{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.light{
|
||||
label{
|
||||
color: #8595A7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// radio box
|
||||
.radio-form-box{
|
||||
position: relative;
|
||||
label{
|
||||
padding-left: 30px;
|
||||
padding-left: 28px;
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: -1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border: 1px solid #A8B6C7;
|
||||
@ -119,7 +129,7 @@
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
left: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: transparent;
|
||||
|
||||
@ -567,38 +567,7 @@
|
||||
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;
|
||||
|
||||
@ -161,6 +161,9 @@ header{
|
||||
&.icon02{
|
||||
background-image: url(/assets/images/layout/side_swiper_icon02.svg)
|
||||
}
|
||||
&.icon03{
|
||||
background-image: url(/assets/images/layout/side_swiper_icon03.svg)
|
||||
}
|
||||
}
|
||||
.side-swiper-infor{
|
||||
@include defaultFont($font-s-12, $font-w-500, #7896BA);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user