Merge pull request 'feat: adiciona estilos quantity botao add carrinho 1440px' (#6) from feature/adiciona-estilos-quantity-botao-add-carrinho-1440px into development

Reviewed-on: #6

store/blocks/pdp/product.jsonc

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

styles/css/vtex.flex-layout.css

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

styles/css/vtex.product-quantity.css

@@ -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;
+}

styles/css/vtex.store-components.css

@@ -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;

styles/sass/pages/product/vtex.flex-layout.scss

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

styles/sass/pages/product/vtex.product-quantity.scss

@@ -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;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -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 {

styles/sass/utils/_vars.scss

@@ -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,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 576px,
-	md: 768px,
+  md: 768px,
-	lg: 992px,
+  lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;