mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
95 lines
2.6 KiB
SCSS
95 lines
2.6 KiB
SCSS
@import '../../../styles/utilities';
|
|
.featuredProductCardWarpper{
|
|
// min-width: 30.2rem;
|
|
height: 14.4rem;
|
|
padding: 2.4rem;
|
|
@apply bg-primary-light inline-flex justify-start items-center shape-common ;
|
|
@screen md {
|
|
// min-width: 598px;
|
|
height: 28.8rem;
|
|
padding: 1.6rem 3.2rem 1.6rem 1.6rem;
|
|
}
|
|
@screen 2xl {
|
|
// min-width: 598px;
|
|
height: 28.8rem;
|
|
padding: 2.4rem 4rem 2.4rem 2.4rem;
|
|
}
|
|
.left{
|
|
width: 10rem;
|
|
height: 10rem;
|
|
@screen md {
|
|
width: 24rem;
|
|
height: 24rem;
|
|
}
|
|
}
|
|
.right{
|
|
margin-left: 1.2rem;
|
|
// min-width: 27rem;
|
|
max-width: 16.6rem;
|
|
max-height: 10rem;
|
|
@apply flex justify-between flex-col;
|
|
@screen md {
|
|
margin-left: 2.4rem;
|
|
max-width: 27.0rem;
|
|
min-height: 16.8rem;
|
|
}
|
|
.rightTop{
|
|
min-height: 6rem;
|
|
@screen md {
|
|
min-height: 9.6rem;
|
|
}
|
|
@apply flex justify-between flex-col;
|
|
.title{
|
|
@apply font-bold;
|
|
font-size: 1.2rem;
|
|
line-height: 1.6rem;
|
|
letter-spacing: -0.01em;
|
|
color: var(--text-active);
|
|
@screen md {
|
|
font-size: 2rem;
|
|
line-height: 2.8rem;
|
|
}
|
|
}
|
|
.subTitle{
|
|
color: var(--text-base);
|
|
font-size: 1.2rem;
|
|
line-height: 1.6rem;
|
|
@screen md {
|
|
font-size: 1.6rem;
|
|
line-height: 2.4rem;
|
|
}
|
|
}
|
|
.priceWrapper{
|
|
@apply flex justify-start sm-headline;
|
|
.price{
|
|
@apply font-bold sm-headline;
|
|
color: var(--text-active);
|
|
}
|
|
.originPrice{
|
|
@apply sm-headline;
|
|
font-weight: normal;
|
|
margin-left: 0.8rem;
|
|
color: var(--text-label);
|
|
text-decoration-line: line-through;
|
|
}
|
|
}
|
|
}
|
|
.buttonWarpper{
|
|
@apply flex;
|
|
.icon{
|
|
button {
|
|
>div {
|
|
@apply bg-primary-light;
|
|
}
|
|
}
|
|
}
|
|
.button{
|
|
margin-left: 0.8rem;
|
|
flex: 1;
|
|
button {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |