forked from M3-Academy/challenge-vtex-io
feat: adiciona estilos quantity botao add carrinho 1440px #6
@ -135,6 +135,7 @@
|
||||
|
||||
"product-installments": {
|
||||
"props": {
|
||||
"markers": ["parcelas", "valor"],
|
||||
"message": "36 x de R$ 2,17 sem juros"
|
||||
}
|
||||
},
|
||||
|
@ -106,4 +106,10 @@
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flexRowContent--buy-button :global(.vtex-button) {
|
||||
background: black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
|
@ -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
22
styles/sass/pages/product/vtex.product-quantity.scss
Normal 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;
|
||||
}
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user