crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: list product with info

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-06 12:25:51 +07:00
parent 9b669335ca
commit 9a085570c1
5 changed files with 73 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
View File

@@ -1,11 +1,48 @@
@import '../../../styles/utilities';
@import "../../../styles/utilities";
.listProductWithInfo {
background-color: #F5F4F2;
@screen md {
@apply flex;
background-color: var(--background);
border-top: 1rem solid var(--gray);
border-bottom: 1rem solid var(--gray);
padding-top: 6rem;
padding-bottom: 6rem;
@screen lg {
@apply flex spacing-horizontal-left;
padding-top: 5.6rem;
padding-bottom: 5.6rem;
border: none;
background-color: #f5f4f2;
}
.productsWrap {
@apply custom-border-radius-lg;
@apply spacing-horizontal-left;
@screen lg {
max-width: 75%;
@apply custom-border-radius-lg bg-white;
padding: 4rem .8rem;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 3rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 3rem);
}
}
}
}
@screen xl {
padding: 4rem 2.4rem;
max-width: 80%;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 1rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 1rem);
}
}
}
}
}
}