Merge pull request 'refactor(pdp): troca margin por gap na prateleira e adiciona var de cor' (#5) from feature/product-page into master

Reviewed-on: #5

styles/css/vtex.slider-layout.css

@@ -20,21 +20,36 @@
   }
 }
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-  width: 97.1773%;
+  width: 96.91521%;
 }
 @media screen and (min-width: 1921px) {
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-    width: 97.914%;
+    width: 97.72%;
   }
 }
 @media screen and (max-width: 1024px) {
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-    width: 97.63%;
+    width: 96.12%;
   }
 }
 @media screen and (max-width: 768px) {
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-    width: 89.73%;
+    width: 89.34%;
+  }
+}
+
+.sliderTrack--prateleira {
+  gap: 16px;
+  margin-bottom: 32px;
+}
+@media screen and (max-width: 1024px) {
+  .sliderTrack--prateleira {
+    gap: 12px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderTrack--prateleira {
+    gap: 8px;
   }
 }
 
@@ -53,18 +68,6 @@
   height: 17px !important;
 }
 
-.slide--prateleira {
-  margin-right: 8px;
-  margin-left: 8px;
-  margin-bottom: 32px;
-}
-@media screen and (max-width: 768px) {
-  .slide--prateleira {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-}
-
 .sliderArrows--prateleira {
   margin: 30px;
 }

styles/css/vtex.store-components.css

@@ -75,6 +75,10 @@
 
 .frameAround--skus {
   border: none;
+  bottom: unset;
+  top: unset;
+  left: unset;
+  right: unset;
 }
 
 .skuSelectorOptionsList {
@@ -87,6 +91,7 @@
   margin-bottom: 10px;
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  color: #929292;
   font-size: 0;
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
@@ -95,11 +100,12 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: color-gray6;
+  color: #929292;
 }
 
 .skuSelectorItem {
   margin: 0;
+  height: unset;
 }
 
 .skuSelectorItemTextValue--skus {
@@ -142,6 +148,7 @@
   margin: 0;
 }
 .skuSelectorSubcontainer--cor .skuSelectorName {
+  color: #929292;
   font-size: 0;
 }
 .skuSelectorSubcontainer--cor .skuSelectorName::after {
@@ -150,7 +157,7 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: color-gray6;
+  color: #929292;
 }
 .skuSelectorSubcontainer--cor .skuSelectorItemImage--skus {
   height: 48px;
@@ -273,6 +280,7 @@
   margin-left: -1px;
 }
 .shippingContainer :global(.vtex-button__label) {
+  cursor: pointer;
   font-size: 0;
 }
 .shippingContainer :global(.vtex-button__label)::after {

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

@@ -8,19 +8,31 @@
   }
 
   .sliderTrackContainer--prateleira {
-    width: 97.1773%;
+    width: 96.91521%;
     @media screen and (min-width: 1921px) {
-      width: 97.914%;
+      width: 97.72%;
     }
     @media screen and (max-width: 1024px) {
-      width: 97.63%;
+      width: 96.12%;
     }
     @media screen and (max-width: 768px) {
-      width: 89.73%;
+      width: 89.34%;
     }
   }
 }
 
+.sliderTrack--prateleira {
+  gap: 16px;
+  margin-bottom: 32px;
+  @media screen and (max-width: 1024px) {
+    gap: 12px;
+  }
+
+  @media screen and (max-width: 768px) {
+    gap: 8px;
+  }
+}
+
 //DOTS
 
 .paginationDotsContainer--prateleira {
@@ -40,18 +52,6 @@
   }
 }
 
-//SLIDES
-.slide--prateleira {
-  margin-right: 8px;
-  margin-left: 8px;
-  margin-bottom: 32px;
-
-  @media screen and (max-width: 768px) {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-}
-
 .sliderArrows--prateleira {
   margin: 30px;
   @media screen and (min-width: 1921px) {

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

@@ -66,6 +66,10 @@
 
 .frameAround--skus {
   border: none;
+  bottom: unset;
+  top: unset;
+  left: unset;
+  right: unset;
 }
 
 .skuSelectorOptionsList {
@@ -80,6 +84,7 @@
   .skuSelectorNameContainer {
     .skuSelectorTextContainer {
       .skuSelectorName {
+        color: $color-gray6;
         font-size: 0;
 
         &::after {
@@ -88,7 +93,7 @@
           font-weight: 400;
           font-size: 14px;
           line-height: 19px;
-          color: color-gray6;
+          color: $color-gray6;
         }
       }
     }
@@ -97,6 +102,7 @@
 
 .skuSelectorItem {
   margin: 0;
+  height: unset;
 }
 
 .skuSelectorItemTextValue--skus {
@@ -149,6 +155,7 @@
   margin: 0;
 
   .skuSelectorName {
+    color: $color-gray6;
     font-size: 0;
 
     &::after {
@@ -157,7 +164,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
-      color: color-gray6;
+      color: $color-gray6;
     }
   }
 
@@ -270,7 +277,7 @@
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: #afafaf;
+        color: $color-gray13;
       }
     }
   }
@@ -310,6 +317,7 @@
   }
 
   :global(.vtex-button__label) {
+    cursor: pointer;
     font-size: 0;
 
     &::after {
@@ -390,7 +398,7 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: #afafaf;
+      color: $color-gray13;
     }
 
     .shippingTableCellDeliveryName,

styles/sass/utils/_vars.scss

@@ -18,6 +18,7 @@ $color-gray9: #bfbfbf;
 $color-gray10: #868686;
 $color-gray11: #bababa;
 $color-gray12: #b9b9b9;
+$color-gray13: #afafaf;
 
 $color-blue: #4267b2;