쿠폰 작업 중
This commit is contained in:
@@ -3801,6 +3801,103 @@ pre {
|
||||
content: "∙";
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.myCouponListWrap.couponNew {
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.myCouponListWrap.couponNew {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item {
|
||||
align-items: normal;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemTop .info .benefits .benefitsItem {
|
||||
margin: 0;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemTop .info .benefits .benefitsItem .value {
|
||||
padding: 0;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemTop .target {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemTop .target p {
|
||||
padding-left: 7.8rem;
|
||||
text-indent: -7.8rem;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemTop .target p + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemBottom {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
margin-top: 0;
|
||||
font-stretch: 1.4rem;
|
||||
color: #000;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
margin-right: 1.2rem;
|
||||
background: url(../images/common/icon_coupon.png) no-repeat center/100% auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.myCouponListWrap.couponNew .boardList .list .item .itemBottom .cost::before {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired {
|
||||
background-color: #eee;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after {
|
||||
content: "만료";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 4.3rem;
|
||||
height: 2.5rem;
|
||||
margin-left: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
color: #9ea1a2;
|
||||
font-weight: 600;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .target p {
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom {
|
||||
background-color: #eee;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost {
|
||||
color: #9ea1a2;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost::before {
|
||||
background: url(../images/common/icon_coupon_expired.png) no-repeat center/100% auto;
|
||||
}
|
||||
.myCouponListWrap.couponNew .boardList .couponInfo ul li {
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
.reviewWarp {
|
||||
margin-top: 0rem;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4141,6 +4141,123 @@ pre {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.couponNew {
|
||||
margin-top: 0;
|
||||
@include tablet {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.boardList {
|
||||
.list {
|
||||
.item {
|
||||
align-items: normal;
|
||||
.itemTop {
|
||||
.info {
|
||||
.benefits {
|
||||
.benefitsItem {
|
||||
margin: 0;
|
||||
.value {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.target {
|
||||
margin-top: 2rem;
|
||||
p {
|
||||
padding-left: 7.8rem;
|
||||
text-indent: -7.8rem;
|
||||
font-size: 1.6rem;
|
||||
color: #676767;
|
||||
& + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemBottom {
|
||||
background-color: #f9f9f9;
|
||||
.cost {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
margin-top: 0;
|
||||
font-stretch: 1.4rem;
|
||||
color: #000;
|
||||
@include tablet {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
margin-right: 1.2rem;
|
||||
background: url(../images/common/icon_coupon.png) no-repeat center / 100% auto;
|
||||
@include tablet {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.coupon-expired {
|
||||
background-color: #eee;
|
||||
.itemTop {
|
||||
.info {
|
||||
.benefits {
|
||||
.benefitsItem {
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #9ea1a2;
|
||||
&::after {
|
||||
content: "만료";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 4.3rem;
|
||||
height: 2.5rem;
|
||||
margin-left: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
color: #9ea1a2;
|
||||
font-weight: 600;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.target {
|
||||
p {
|
||||
color: #9ea1a2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemBottom {
|
||||
background-color: #eee;
|
||||
.cost {
|
||||
color: #9ea1a2;
|
||||
&::before {
|
||||
background: url(../images/common/icon_coupon_expired.png) no-repeat center / 100% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.couponInfo {
|
||||
ul {
|
||||
li {
|
||||
color: #676767;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reviewWarp {
|
||||
|
||||
@@ -808,7 +808,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dedede;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@@ -926,7 +925,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 14rem;
|
||||
height: 8rem;
|
||||
margin-top: 2rem;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
@@ -939,6 +938,164 @@
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 2rem;
|
||||
background: url(../images/common/icon-bgo.svg) no-repeat center/100% auto;
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active.active {
|
||||
color: #fff;
|
||||
background-color: #05141f;
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active.active strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active.active strong:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 2.4rem;
|
||||
height: 2rem;
|
||||
margin-right: 1.2rem;
|
||||
background: url(../images/common/icon_coupon_w.png) no-repeat center/100% auto;
|
||||
}
|
||||
.contentWarp .cartView .counponList .coupon-active.active:after {
|
||||
filter: brightness(0) saturate(100%) invert(100%);
|
||||
}
|
||||
|
||||
.couponPopup .coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 59vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.couponPopup .coupon-list li {
|
||||
position: relative;
|
||||
}
|
||||
.couponPopup .coupon-list li + li {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.couponPopup .coupon-list input[type=radio] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.couponPopup .coupon-list input[type=radio]:focus {
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item {
|
||||
border-color: #111;
|
||||
}
|
||||
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
.couponPopup .coupon-list input[type=radio]:checked ~ .coupon-item .icon-check {
|
||||
background-color: #05141f;
|
||||
background-image: url("../images/common/coupun_check_on.png");
|
||||
}
|
||||
.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 {
|
||||
color: #aaa;
|
||||
}
|
||||
.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 {
|
||||
color: #bbb;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1.2rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.8rem;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .coupon-label {
|
||||
flex: 1;
|
||||
padding: 1.6rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .coupon-label strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .coupon-label small {
|
||||
display: block;
|
||||
padding-left: 6.6rem;
|
||||
text-indent: -6.6rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #676767;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .coupon-label span {
|
||||
display: inline-block;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .coupon-label .error-text {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
color: #ea0029;
|
||||
}
|
||||
.couponPopup .coupon-list .coupon-item .icon-check {
|
||||
display: flex;
|
||||
width: 5rem;
|
||||
background: url("../images/common/coupun_check.png") no-repeat center/2.8rem auto;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px dashed #dedede;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.couponPopup .popInner {
|
||||
max-width: 50rem;
|
||||
}
|
||||
}
|
||||
.couponPopup .popInner .towButton {
|
||||
margin-top: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contentWarp.carsw {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -665,7 +665,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dedede;
|
||||
padding: 2.5rem 0;
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
@@ -781,7 +780,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 14rem;
|
||||
height: 8rem;
|
||||
margin-top: 2rem;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
@@ -793,6 +792,179 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 0.6rem;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 2rem;
|
||||
background: url(../images/common/icon-bgo.svg) no-repeat center / 100% auto;
|
||||
}
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #05141f;
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 2.4rem;
|
||||
height: 2rem;
|
||||
margin-right: 1.2rem;
|
||||
background: url(../images/common/icon_coupon_w.png) no-repeat center / 100% auto;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
filter: brightness(0) saturate(100%) invert(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.couponPopup {
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 59vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
li {
|
||||
position: relative;
|
||||
& + li {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
&:checked {
|
||||
& ~ .coupon-item {
|
||||
border-color: #111;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
background-color: #05141f;
|
||||
background-image: url("../images/common/coupun_check_on.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
& ~ .coupon-item {
|
||||
background-color: #f1f1f1;
|
||||
border-color: #e0e0e0;
|
||||
color: #aaa;
|
||||
cursor: not-allowed;
|
||||
|
||||
.coupon-label {
|
||||
color: #aaa;
|
||||
|
||||
strong {
|
||||
color: #9ea1a2;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.coupon-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1.2rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.8rem;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent; //
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.coupon-label {
|
||||
flex: 1;
|
||||
padding: 1.6rem;
|
||||
line-height: 1.4;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
padding-left: 6.6rem;
|
||||
text-indent: -6.6rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #676767;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
color: #ea0029;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
display: flex;
|
||||
width: 5rem;
|
||||
background: url("../images/common/coupun_check.png") no-repeat center / 2.8rem auto;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px dashed #dedede;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popInner {
|
||||
@include tablet {
|
||||
max-width: 50rem;
|
||||
}
|
||||
.towButton {
|
||||
margin-top: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user