Rafael_Sampaio_de_Oliveira/challenge-vtex-io-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilos quantity botao add carrinho 1440px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-25 21:57:57 -03:00
parent 1103ae6526
commit 16b2a368e2
8 changed files with 127 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
store/blocks/pdp/product.jsonc
View File

@ -135,6 +135,7 @@
"product-installments": {
"props": {
"markers": ["parcelas", "valor"],
"message": "36 x de R$ 2,17 sem juros"
}
},

6
styles/css/vtex.flex-layout.css
View File

@ -106,4 +106,10 @@
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
.flexRowContent--buy-button :global(.vtex-button) {
background: black;
border: none;
border-radius: 0;
}

29
styles/css/vtex.product-quantity.css
View File

@ -1,3 +1,28 @@
/* .quantitySelectorSteper--addToCart {
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__plus-button) {
border-radius: 0;
} */
border: 1px solid #cccccc;
border-left: none;
}
.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__minus-button) {
border-radius: 0;
border: 1px solid #cccccc;
border-right: none;
background: transparent;
}
.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) {
border-radius: 0;
border: 1px solid #cccccc;
border-left: 0;
border-right: 0;
}

24
styles/css/vtex.store-components.css
View File

@ -18,6 +18,7 @@
.carouselGaleryThumbs {
max-height: 90px;
width: 80%;
}
.productImageTag--main {
@ -44,10 +45,17 @@
.frameAround {
border-radius: 50%;
border-color: black;
}
.diagonalCross {
transform: rotate(90deg);
top: 4px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 28px;
height: 28px;
}
.skuSelectorInternalBox {
@ -59,10 +67,26 @@
.skuSelectorSubcontainer--cor {
order: 2;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
display: block;
content: "OUTRAS CORES:";
font-size: 16px;
}
.skuSelectorSubcontainer--tamanho {
order: 1;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 16px;
}
.productImagesThumb .figure .thumbImg {
width: 90px;

6
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -100,3 +100,9 @@
.flexRow--addToCartRow {
padding-bottom: 1rem;
}
.flexRowContent--buy-button :global(.vtex-button) {
background: black;
border: none;
border-radius: 0;
}

22
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,22 @@
.quantitySelectorStepper--addToCartQuantity
:global(.vtex-numeric-stepper__plus-button) {
border-radius: 0;
border: 1px solid $color-gray6;
border-left: none;
}
.quantitySelectorStepper--addToCartQuantity
:global(.vtex-numeric-stepper__minus-button) {
border-radius: 0;
border: 1px solid $color-gray6;
border-right: none;
background: transparent;
}
.quantitySelectorStepper--addToCartQuantity
:global(.vtex-numeric-stepper__input) {
border-radius: 0;
border: 1px solid $color-gray6;
border-left: 0;
border-right: 0;
}

29
styles/sass/pages/product/vtex.store-components.scss
View File

@ -9,6 +9,7 @@
.carouselGaleryThumbs {
max-height: 90px;
width: 80%;
}
.productImageTag--main {
@ -35,10 +36,17 @@
.frameAround {
border-radius: 50%;
border-color: black;
}
.diagonalCross {
transform: rotate(90deg);
top: 4px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 28px;
height: 28px;
}
.skuSelectorInternalBox {
@ -49,9 +57,30 @@
.skuSelectorSubcontainer--cor {
order: 2;
.skuSelectorName {
font-size: 0;
&::after {
display: block;
content: "OUTRAS CORES:";
font-size: 16px;
}
}
}
.skuSelectorSubcontainer--tamanho {
order: 1;
.skuSelectorName {
font-size: 0;
&::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 16px;
}
}
}
.productImagesThumb {

23
styles/sass/utils/_vars.scss
View File

@ -7,6 +7,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #cccccc;
$color-blue: #4267b2;
@ -14,18 +15,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;