mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
80 lines
2.1 KiB
SCSS
80 lines
2.1 KiB
SCSS
.productCardWarpper {
|
|
max-width: 22.4rem;
|
|
min-height: 31.8rem;
|
|
padding: 1.2rem 1.2rem 0 1.2rem;
|
|
margin: auto;
|
|
margin-bottom: 1px;
|
|
@apply flex flex-col justify-between;
|
|
&.notSell {
|
|
@apply justify-center;
|
|
}
|
|
.cardTop {
|
|
@apply relative;
|
|
height: 13.8rem;
|
|
width: 100%;
|
|
.productImage {
|
|
height: 100%;
|
|
width: 100%;
|
|
@apply flex justify-center items-center;
|
|
img {
|
|
@apply inline;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.productLabel {
|
|
@apply absolute left-0 bottom-0;
|
|
}
|
|
}
|
|
.cardMid {
|
|
min-height: 10.4rem;
|
|
@apply flex flex-col justify-between;
|
|
.cardMidTop {
|
|
.productname {
|
|
font-weight: bold;
|
|
color: var(--text-active);
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.productWeight {
|
|
font-size: 1.2rem;
|
|
line-height: 2rem;
|
|
letter-spacing: 0.01em;
|
|
color: var(--text-base);
|
|
}
|
|
}
|
|
.cardMidBot {
|
|
padding-top: 0.8rem;
|
|
@apply flex justify-between items-center border-t border-solid border-line;
|
|
.productPrice {
|
|
@apply font-bold;
|
|
font-size: 2rem;
|
|
line-height: 2.8rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
}
|
|
}
|
|
.cardBot {
|
|
min-height: 4rem;
|
|
@apply flex justify-between items-center;
|
|
.cardIcon {
|
|
margin-right: 0.8rem;
|
|
}
|
|
.cardButton {
|
|
button {
|
|
> div {
|
|
span {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow-y: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|