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

오더 CSS 씽크 맞춤

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-08-10 11:51:45 +09:00
parent 1206ee4261
commit 914d0454d0
3 changed files with 217 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
kr/assets/css/order.css
View File

@@ -184,7 +184,7 @@
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-fit: cover;
aspect-ratio: 1/1;
}
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl {
@@ -244,7 +244,7 @@
}
@media (min-width: 1025px) {
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dt,
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd {
.contentWarp .cartView .productListWarp .productLis ul li .cartItemWrap .cartItem .cartItemInfo > div dl dd {
-webkit-line-clamp: 2;
}
}
@@ -561,6 +561,85 @@
color: #000;
font-weight: 600;
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents {
background-color: #f3f3f3;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents {
flex-direction: row;
align-items: center;
}
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle {
font-size: 1.6rem;
font-weight: 600;
color: #000000;
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle {
flex-basis: 30%;
margin-left: 2rem;
display: flex;
align-items: center;
}
}
@media (max-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsTitle {
font-size: 1.4rem;
}
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList {
display: flex;
flex-direction: column;
margin-top: 0.2rem;
width: 100%;
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList {
flex-basis: 70%;
}
}
@media (max-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList {
margin-top: 0.8rem;
}
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item {
padding: 0.4rem 0;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
@media (max-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item {
text-align: left;
}
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemTitle {
font-size: 1.4rem;
line-height: 1.8rem;
flex-basis: 55%;
word-wrap: break-word;
}
@media (max-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemTitle {
margin-top: 0;
}
}
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemPrice {
flex-basis: 45%;
text-align: right;
}
@media (max-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul li .streamingPremiumComponents .componentsList .item .itemPrice {
align-self: flex-end;
}
}
.contentWarp .cartView .productListWarp .productLis ul li + li {
margin-top: 1rem;
}
@@ -654,16 +733,18 @@
}
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after {
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after {
width: 3.2rem;
}
}
@media (min-width: 1025px) {
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before, .contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after {
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton button::after,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::before,
.contentWarp .cartView .productListWarp .productLis ul .noPrice .PriceGoList .oneButton a::after {
width: 3.2rem;
}
}
@@ -787,16 +868,18 @@
}
}
@media (min-width: 768px) {
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after {
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after {
width: 3.2rem;
}
}
@media (min-width: 1025px) {
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before, .contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after {
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack button::after,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::before,
.contentWarp .cartView .productListWarp .totalWarp .totalPrice .oneButtonBlack a::after {
width: 3.2rem;
}
}
@@ -833,20 +916,20 @@
.contentWarp .cartView .counponList li .infoWrap .info .radioItem {
margin-top: 0.5rem;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio] {
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type="radio"] {
position: relative;
top: -0.1rem;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
border: max(1px, 0.1em) solid #05141f;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
transition: border 0.3s ease-in-out;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:checked::after {
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type="radio"]:checked::after {
content: "";
position: absolute;
top: 0.3rem;
@@ -856,13 +939,13 @@
background: #000000;
border-radius: 100%;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:disabled {
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type="radio"]:disabled {
background-color: #dedede;
box-shadow: none;
opacity: 0.7;
cursor: not-allowed;
}
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type=radio]:disabled + span {
.contentWarp .cartView .counponList li .infoWrap .info .radioItem [type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -999,44 +1082,44 @@
.couponPopup .coupon-list li + li {
margin-top: 2rem;
}
.couponPopup .coupon-list input[type=radio] {
.couponPopup .coupon-list input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
}
.couponPopup .coupon-list input[type=radio]:focus {
.couponPopup .coupon-list input[type="radio"]:focus {
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item {
.couponPopup .coupon-list input[type="radio"]:checked ~ .coupon-item {
border-color: #111;
}
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item:focus {
.couponPopup .coupon-list input[type="radio"]:checked ~ .coupon-item:focus {
outline: none;
}
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item .icon-check {
.couponPopup .coupon-list input[type="radio"]:checked ~ .coupon-item .icon-check {
background-color: #05141f;
background-image: url("../images/common/coupon_check_on.png");
}
.couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item {
.couponPopup .coupon-list input[type="radio"]:disabled ~ .coupon-item {
background-color: #f1f1f1;
border-color: #e0e0e0;
color: #aaa;
cursor: not-allowed;
}
.couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label {
.couponPopup .coupon-list input[type="radio"]:disabled ~ .coupon-item .coupon-label {
color: #aaa;
}
.couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label strong {
.couponPopup .coupon-list input[type="radio"]:disabled ~ .coupon-item .coupon-label strong {
color: #9ea1a2;
}
.couponPopup .coupon-list input[type=radio]:disabled ~ .coupon-item .coupon-label small {
.couponPopup .coupon-list input[type="radio"]:disabled ~ .coupon-item .coupon-label small {
color: #bbb;
}
.couponPopup .coupon-list .coupon-item {
@@ -1049,8 +1132,8 @@
background-color: #fff;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.couponPopup .coupon-list .coupon-item:focus {
@@ -1572,7 +1655,8 @@
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack {
margin-top: 4rem;
}
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::before, .contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::after {
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::before,
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .oneButtonBlack button::after {
width: 3.2rem;
}
.contentWarp.carsw .carswRight .carswRightInner .carswInfo .safariCaution {
@@ -1740,11 +1824,13 @@
width: 16rem;
}
}
.contentWarp.carsw .carsFull .installGuide div:last-child div a::before, .contentWarp.carsw .carsFull .installGuide div:last-child div a::after {
.contentWarp.carsw .carsFull .installGuide div:last-child div a::before,
.contentWarp.carsw .carsFull .installGuide div:last-child div a::after {
width: 3.2rem;
}
@media (min-width: 768px) {
.contentWarp.carsw .carsFull .installGuide div:last-child div a::before, .contentWarp.carsw .carsFull .installGuide div:last-child div a::after {
.contentWarp.carsw .carsFull .installGuide div:last-child div a::before,
.contentWarp.carsw .carsFull .installGuide div:last-child div a::after {
width: 3.2rem;
}
}
@@ -1996,11 +2082,13 @@
margin-top: 0;
}
}
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before, .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after {
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before,
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after {
width: 3.2rem;
}
@media (min-width: 768px) {
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before, .contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after {
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::before,
.contentWarp.carsw .carsFull .completeForm > div > dl .completeItemList ul li .cachItem > div a::after {
width: 3.2rem;
}
}
@@ -2117,4 +2205,4 @@
font-size: 1.4rem;
color: #676767;
}
/*# sourceMappingURL=order.css.map */
/*# sourceMappingURL=order.css.map */

12
kr/assets/css/order.css.map
View File

File diff suppressed because one or more lines are too long

78
kr/assets/css/order.scss
View File

@@ -1,7 +1,6 @@
@charset "UTF-8";
@import "utils.scss";
/*변수파일 import*/
//장바구니 레이아웃 및 요소
.contentWarp {
.cartView {
@@ -560,6 +559,83 @@
}
}
}
.streamingPremiumComponents {
background-color: #f3f3f3;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
@include tablet {
flex-direction: row;
align-items: center;
}
.componentsTitle {
font-size: 1.6rem;
font-weight: 600;
color: #000000;
@include tablet {
flex-basis: 30%;
margin-left: 2rem;
display: flex;
align-items: center;
}
@include maxtablet {
font-size: 1.4rem;
}
}
.componentsList {
display: flex;
flex-direction: column;
margin-top: 0.2rem;
width: 100%;
@include tablet {
flex-basis: 70%;
}
@include maxtablet {
margin-top: 0.8rem;
}
.item {
padding: 0.4rem 0;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
@include maxtablet {
text-align: left;
}
.itemTitle {
font-size: 1.4rem;
line-height: 1.8rem;
flex-basis: 55%;
word-wrap: break-word;
@include maxtablet {
margin-top: 0;
}
}
.itemPrice {
flex-basis: 45%;
text-align: right;
@include maxtablet {
align-self: flex-end;
}
}
}
}
}
}
li + li {