🎨 styles: change shape component list product with info

:%s
This commit is contained in:
lytrankieio123
2021-09-13 15:18:51 +07:00
parent fc3ade50db
commit 0369e1dd25
3 changed files with 21 additions and 19 deletions

View File

@@ -17,8 +17,11 @@
@apply spacing-horizontal-left;
@screen lg {
max-width: 75%;
@apply custom-border-radius-lg bg-white;
padding: 4rem .8rem;
padding: 0 .8rem;
> div > div {
@apply shape-common-lg bg-white;
padding: 4rem 0;
}
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
@@ -31,18 +34,8 @@
}
}
@screen xl {
padding: 4rem 2.4rem;
padding: 0 2.4rem;
max-width: 80%;
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem + 1rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem + 1rem);
}
}
}
}
}
}

View File

@@ -18,12 +18,18 @@ const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 3,
},
'(min-width: 768px)': {
slidesPerView: 4,
},
'(min-width: 1024px)': {
slidesPerView: 3,
},
'(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1280px)': {
slidesPerView: 3.5,
},
'(min-width: 1440px)': {
slidesPerView: 4.5,
},
},

View File

@@ -24,6 +24,9 @@ const OPTION_DEFAULT: TOptionsEvents = {
'(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1280px)': {
slidesPerView: 4.5,
},
'(min-width: 1440px)': {
slidesPerView: 5.5,
},