gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Kia CSS and update product styles

Browse Source 
- Introduced a new CSS file for Kia styles, enhancing the overall design and responsiveness.
- Updated product styles to include new discount display and button styles.
- Adjusted layout for better alignment and visual consistency across different screen sizes.
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-04-26 19:31:09 +09:00
parent 4e029aac76
commit 0a4ba52a8e
8 changed files with 1568 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1379
assets/css/kia.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
assets/css/kia.css.map Normal file
View File

File diff suppressed because one or more lines are too long

88
assets/css/kia/kia.css
View File

@@ -1288,4 +1288,92 @@ body#faq .csWarp {
font-size: 2rem;
}
}
.oneButtonLine {
height: 5.6rem;
width: 100%;
min-width: 16rem;
}
.oneButtonLine button,
.oneButtonLine div,
.oneButtonLine a {
width: 100%;
display: flex;
cursor: pointer;
}
.oneButtonLine button::before,
.oneButtonLine div::before,
.oneButtonLine a::before {
content: "";
display: block;
width: 3.2rem;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-size: auto;
background-repeat: no-repeat;
background-position: center left;
}
@media (min-width: 768px) {
.oneButtonLine button::before,
.oneButtonLine div::before,
.oneButtonLine a::before {
width: 3.2rem;
}
}
.oneButtonLine button::after,
.oneButtonLine div::after,
.oneButtonLine a::after {
content: "";
display: block;
width: 3.2rem;
height: 5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wright.svg);
background-size: auto;
background-repeat: no-repeat;
background-position: center right;
}
@media (min-width: 768px) {
.oneButtonLine button::after,
.oneButtonLine div::after,
.oneButtonLine a::after {
width: 3.2rem;
}
}
.oneButtonLine button:hover p,
.oneButtonLine div:hover p,
.oneButtonLine a:hover p {
color: #fff;
border-color: #05141F;
background-color: #05141F;
}
.oneButtonLine button:hover::before,
.oneButtonLine div:hover::before,
.oneButtonLine a:hover::before {
content: "";
background-image: url(../../images/kia/svg/kia-btn-bleft.svg);
}
.oneButtonLine button:hover::after,
.oneButtonLine div:hover::after,
.oneButtonLine a:hover::after {
content: "";
background-image: url(../../images/kia/svg/kia-btn-bright.svg);
}
.oneButtonLine button p,
.oneButtonLine div p,
.oneButtonLine a p {
font-family: "KiaSignature";
display: flex;
font-size: 1.4rem;
font-weight: 600;
align-items: center;
justify-content: center;
height: 5.6rem;
width: calc(100% - 64px);
background-color: #fff;
color: #05141F;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: #9BA1A5;
border-radius: 0;
}
/*# sourceMappingURL=kia.css.map */

76
assets/css/kia/kia.scss
View File

@@ -1322,3 +1322,79 @@ body#faq{
}
}
}
//기아 버튼 [1개 짜리 불랙]
.oneButtonLine{
height:5.6rem;
width:100%;
min-width: 16rem;
button,
div,
a{
width: 100%;
// max-width:calc(100% - 54px);
display:flex;
cursor: pointer;
&::before{
content: "";
display:block;
width:3.2rem;
height:5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wleft.svg);
background-size: auto;
background-repeat: no-repeat;
background-position: center left;
@include tablet{
width:3.2rem;
}
}
&::after{
content: "";
display:block;
width:3.2rem;
height:5.6rem;
background-image: url(../../images/kia/svg/kia-btn-wright.svg);
background-size: auto;
background-repeat: no-repeat;
background-position: center right;
@include tablet{
width:3.2rem;
}
}
&:hover{
p{
color:#fff;
border-color: #05141F;
background-color: #05141F;
}
&::before{
content: "";
background-image: url(../../images/kia/svg/kia-btn-bleft.svg);
}
&::after{
content: "";
background-image: url(../../images/kia/svg/kia-btn-bright.svg);
}
}
p{
font-family: 'KiaSignature';
display:flex;
font-size: 1.4rem;
font-weight: 600;
align-items: center;
justify-content: center;
height: 5.6rem;
width:calc(100% - 64px);
background-color: #fff;
color:#05141F;
border-width:1px 0 1px 0 ;
border-style: solid;
border-color: #9BA1A5;
border-radius: 0 ;
}
}
}

8
assets/css/product.css
View File

@@ -783,6 +783,7 @@
display: block;
font-size: 1.4rem;
color: #9EA1A2;
text-align: right;
}
@media (max-width: 1024px) {
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .discount {
@@ -797,6 +798,10 @@
font-weight: 400;
text-decoration: line-through;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label .dc {
margin-right: 0.4rem;
color: #EA0029;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio] {
visibility: hidden;
position: absolute;
@@ -818,6 +823,9 @@
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label .discount {
color: #9EA1A2;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label .dc {
color: #F3C300;
}
.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label {
border: 1px solid #000;
}

2
assets/css/product.css.map
View File

File diff suppressed because one or more lines are too long

8
assets/css/product.scss
View File

@@ -719,6 +719,7 @@
display: block;
font-size: 1.4rem;
color: #9EA1A2;
text-align: right;
@media(max-width: 1024px){
width: 100%;
margin:.2rem 0 0;
@@ -732,6 +733,10 @@
text-decoration:line-through;
}
}
.dc {
margin-right: .4rem;
color: #EA0029;
}
}
input[type=radio]{
visibility: hidden;
@@ -752,6 +757,9 @@
.discount {
color: #9EA1A2;
}
.dc {
color: #F3C300;
}
}
}
&:hover{