feat: css do frete

2023-02-06 14:23:31 -03:00 · 2023-02-06 14:23:31 -03:00 · f86ca8b682
commit f86ca8b682
parent 0a0d6f32fd
9 changed files with 584 additions and 64 deletions
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@ -8,7 +8,7 @@
 [class*='html'] > [class*='button'] {
  width: 100%;
  height: 49px;
-  /* margin-right: 40px; */
  background: #000;
  border: #000;
+  border-radius: 0;
 }
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@ -11,7 +11,7 @@
  padding: 0 40px;
 }
 :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
-  max-height: 664px !important;
+  max-height: none;
 }

 .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) {
@ -20,3 +20,8 @@
 .flexColChild :global(.vtex-store-components-3-x-container) {
  padding: 0 32px;
 }
+
+.flexRowContent {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@ -120,14 +120,17 @@
  display: none;
 }
 .sliderLayoutContainer .paginationDotsContainer {
+  align-items: center;
  bottom: 113px;
 }
 .sliderLayoutContainer .paginationDotsContainer .paginationDot {
  width: 10px;
  height: 10px;
  background-color: #000;
-  border: 0.5px solid #000;
 }
 .sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
  background-color: #fff;
+  width: 17px !important;
+  height: 17px !important;
+  border: 0.5px solid #000;
 }
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@ -54,11 +55,6 @@
  color: #929292;
  width: 774px;
 }
-.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before {
-  content: "Digite seu e-mail";
-  font-size: 16px;
-  color: white;
-}
 .newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
  padding: 0;
 }
@ -74,8 +70,22 @@
  line-height: 19px;
 }

-.productImageTag {
-  width: auto !important;
+.productImagesGallerySlide {
+  width: 100%;
+  height: 100%;
+}
+.productImagesGallerySlide .productImage {
+  width: 100%;
+  height: 100%;
+}
+.productImagesGallerySlide .productImage .productImageTag {
+  max-height: none !important;
+}
+@media (min-width: 1025px) {
+  .productImagesGallerySlide .productImage .productImageTag {
+    width: 100% !important;
+    height: fit-content;
+  }
 }

 .carouselGaleryThumbs :first-child {
@ -87,6 +97,7 @@
 .carouselGaleryThumbs :first-child :first-child .productImagesThumb {
  width: 13.605%;
  height: fit-content !important;
+  max-height: 90px;
  margin: 0;
 }

@ -105,30 +116,103 @@
  display: flex;
  flex-direction: column-reverse;
 }
-.skuSelectorContainer .frameAround,
-.skuSelectorContainer .skuSelectorInternalBox {
+.skuSelectorContainer .frameAround {
+  width: 43px;
+  height: 43px;
  border-radius: 1.5rem;
  z-index: 3;
  padding: 0;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem {
-  height: 43px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
-  width: 40px;
-  height: 40px;
-  bottom: -0.25rem;
-  top: 0rem;
-  left: 0rem;
-  right: -0.25rem;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper {
-  padding: 10px 11px;
-  width: 40px;
-  height: 40px;
-}
-.skuSelectorContainer .frameAround {
  border-color: #000;
+  top: -3%;
+  left: -1px;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "OUTROS TAMANHOS: ";
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+  margin-left: 0;
+  column-gap: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
+  border-color: #000000;
+  border-width: 2px;
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #989898;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  width: 30px;
+  height: 30px;
+  transform: rotate(274deg);
+  left: 4px;
+  top: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
+  color: #000000;
 }

 .shippingContainer {
@ -139,6 +223,7 @@
 }
 .shippingContainer :global(.vtex-address-form__postalCode) {
  display: flex;
+  padding-bottom: 16px;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
  display: flex;
@ -165,8 +250,19 @@
  border-radius: 0;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
  padding: 8px 0;
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+  position: absolute;
+  bottom: 0;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
  display: flex;
  position: absolute;
@ -181,7 +277,7 @@
  display: flex;
  width: 49px;
  height: 49px;
-  margin-bottom: 5px;
+  margin-top: 11px;
  background: #000;
  border: 1px solid #000;
  border-radius: 0;
@ -202,3 +298,139 @@
  align-items: center;
  color: #fff;
 }
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.shippingTable .shippingTableHead {
+  display: flex;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: flex;
+  gap: 62px;
+  margin-bottom: 15px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: flex;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  align-items: center;
+  color: #afafaf;
+  margin-bottom: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+  width: 108px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  width: 95px;
+  margin-right: 32px;
+  padding: 0;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
+}
+
+.subscriberContainer .title {
+  font-size: 0;
+  margin-bottom: 0;
+  border: none;
+}
+.subscriberContainer .title::before {
+  content: "Produto indisponível";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  position: relative;
+  display: flex;
+  height: 40px;
+  gap: 8px;
+}
+.subscriberContainer .form .content .input {
+  margin: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 0.6px solid #989898;
+  border-radius: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  border-radius: 0;
+}
+.subscriberContainer .form .content .submit {
+  width: 100%;
+  position: absolute;
+  bottom: calc(-100% - 27px);
+  margin: 0 !important;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  background: #000;
+  border: 0.6px solid #000;
+  border-radius: 0;
+  color: #fff;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 12px;
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before {
+  content: "avise-me";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+  padding: 12px;
+}
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@ -11,7 +11,8 @@
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
-  column-gap: 197.5px;
+  justify-content: space-around;
+  padding: 0 40px;
 }
 .listContainer::after {
  content: "";
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@ -2,7 +2,8 @@
  padding: 0 40px;

  :global(.vtex-store-components-3-x-productImageTag) {
-    max-height: 664px !important;
+    // max-height: 664px !important;
+    max-height: none;
  }
 }

@ -15,3 +16,8 @@
    padding: 0 32px;
  }
 }
+
+.flexRowContent {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@ -130,17 +130,20 @@
    }
  }
  .paginationDotsContainer {
+    align-items: center;
    bottom: 113px;

    .paginationDot {
      width: 10px;
      height: 10px;
      background-color: #000;
-      border: 0.5px solid #000;
    }

    .paginationDot--isActive {
      background-color: #fff;
+      width: 17px !important;
+      height: 17px !important;
+      border: 0.5px solid #000;
    }
  }
 }
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@ -44,11 +44,6 @@
              line-height: 25px;
              color: #929292;
              width: 774px;
-              &::before {
-                content: 'Digite seu e-mail';
-                font-size: 16px;
-                color: white;
-              }
            }
          }
        }
@ -71,8 +66,22 @@
  }
 }

+.productImagesGallerySlide {
+  width: 100%;
+  height: 100%;
+
+  .productImage {
+    width: 100%;
+    height: 100%;
+
    .productImageTag {
-  width: auto !important;
+      @media (min-width: 1025px) {
+        width: 100% !important;
+        height: fit-content;
+      }
+      max-height: none !important;
+    }
+  }
 }

 .carouselGaleryThumbs {
@ -85,6 +94,7 @@
      .productImagesThumb {
        width: 13.605%;
        height: fit-content !important;
+        max-height: 90px;
        margin: 0;
      }
    }
@ -108,36 +118,121 @@
  display: flex;
  flex-direction: column-reverse;

-  .frameAround,
-  .skuSelectorInternalBox {
+  .frameAround {
+    width: 43px;
+    height: 43px;
    border-radius: 1.5rem;
    z-index: 3;
    padding: 0;
+    border-color: #000;
+    top: -3%;
+    left: -1px;
+  }
+
+  .skuSelectorInternalBox {
+    border-radius: 50%;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorNameContainer {
+      .skuSelectorTextContainer {
+        .skuSelectorName,
+        .skuSelectorSelectorImageValue {
+          font-size: 0;
+        }
+        .skuSelectorName::before {
+          content: 'OUTRAS CORES';
+          font-family: 'Open Sans', sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: #929292;
+        }
+      }
+    }
  }

  .skuSelectorSubcontainer--tamanho {
+    margin-bottom: 10px;
+
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorTextContainer {
+        .skuSelectorName {
+          font-size: 0;
+          &::after {
+            font-family: 'Open Sans', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            content: 'OUTROS TAMANHOS: ';
+            color: #929292;
+          }
+        }
+      }
+      .skuSelectorOptionsList {
+        margin: 0;
+        margin-left: 0;
+        column-gap: 16px;
        .skuSelectorItem {
-      height: 43px;
-    }
-
-    .frameAround {
+          border-radius: 100%;
          width: 40px;
          height: 40px;
+          margin: 0;

-      bottom: -0.25rem;
-      top: 0rem;
-      left: 0rem;
-      right: -0.25rem;
-    }
-    .valueWrapper {
-      padding: 10px 11px;
+          .frameAround--sku-selector {
+            border-color: #000000;
+            border-width: 2px;
            width: 40px;
            height: 40px;
+            border-radius: 24px;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            z-index: 5;
+            margin: 0 auto;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+          }
+          .skuSelectorInternalBox {
+            border-radius: 100%;
+            width: 40px;
+            height: 40px;
+            border: 1px solid #989898;
+            .diagonalCross {
+              width: 30px;
+              height: 30px;
+              transform: rotate(274deg);
+              left: 4px;
+              top: 5px;
+            }
+            .skuSelectorItemTextValue {
+              padding: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin: 0 auto;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 19px;
+              color: rgba(185, 185, 185, 0.6);
+            }
+          }
+        }
+        .skuSelectorItem--selected {
+          .skuSelectorInternalBox {
+            .skuSelectorItemTextValue {
+              color: #000000;
+            }
+          }
+        }
      }
    }
-
-  .frameAround {
-    border-color: #000;
  }
 }

@ -149,6 +244,7 @@

  :global(.vtex-address-form__postalCode) {
    display: flex;
+    padding-bottom: 16px;

    :global(.vtex-input) {
      display: flex;
@ -179,9 +275,20 @@
        border-radius: 0;

        :global(.vtex-address-form-4-x-input) {
+          font-family: 'Open Sans', sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          display: flex;
+          align-items: center;
          padding: 8px 0;
        }
      }
+      :global(.vtex-input__error) {
+        position: absolute;
+        bottom: 0;
+      }
    }

    :global(.vtex-address-form__postalCode-forgottenURL) {
@ -201,7 +308,7 @@
    display: flex;
    width: 49px;
    height: 49px;
-    margin-bottom: 5px;
+    margin-top: 11px;

    background: #000;
    border: 1px solid #000;
@ -229,3 +336,163 @@
    }
  }
 }
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  .shippingTableHead {
+    display: flex;
+    .shippingTableRow {
+      display: flex;
+      gap: 62px;
+      margin-bottom: 15px;
+
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #202020;
+      text-transform: uppercase;
+
+      .shippingTableHeadDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableHeadDeliveryPrice {
+        font-size: 0;
+      }
+      .shippingTableHeadDeliveryPrice::before {
+        content: 'FRETE';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 19px;
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      display: flex;
+
+      .shippingTableCell {
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        align-items: center;
+        color: #afafaf;
+        margin-bottom: 15px;
+      }
+
+      .shippingTableCellDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableCellDeliveryPrice {
+        width: 108px;
+      }
+      .shippingTableCellDeliveryName {
+        width: 95px;
+        margin-right: 32px;
+        padding: 0;
+
+        .shippingTableLabel {
+          .shippingTableRadioBtn {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.subscriberContainer {
+  .title {
+    font-size: 0;
+    margin-bottom: 0;
+    border: none;
+  }
+  .title::before {
+    content: 'Produto indisponível';
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #868686;
+  }
+  .subscribeLabel {
+    font-size: 0;
+  }
+  .subscribeLabel::before {
+    content: 'Deseja saber quando estiver disponível?';
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #868686;
+  }
+  .form {
+    .content {
+      position: relative;
+      display: flex;
+      height: 40px;
+      gap: 8px;
+
+      .input {
+        margin: 0;
+
+        :global(.vtex-input) {
+          :global(.vtex-input-prefix__group) {
+            border: 0.6px solid #989898;
+            border-radius: 0;
+
+            :global(.vtex-styleguide-9-x-input) {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+      .submit {
+        width: 100%;
+        position: absolute;
+        bottom: calc(-100% - 27px);
+        margin: 0 !important;
+
+        :global(.vtex-button) {
+          width: 100%;
+          background: #000;
+          border: 0.6px solid #000;
+          border-radius: 0;
+          color: #fff;
+
+          :global(.vtex-button__label) {
+            padding: 12px;
+            font-size: 0;
+          }
+          :global(.vtex-button__label)::before {
+            content: 'avise-me';
+            font-family: 'Open Sans', sans-serif;
+            font-style: normal;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+            padding: 12px;
+          }
+        }
+      }
+    }
+  }
+}
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@ -2,7 +2,10 @@
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
-  column-gap: 197.5px;
+  justify-content: space-around;
+  padding: 0 40px;
+  // column-gap: 197.5px;
+
  &::after {
    content: '';
    background-color: #bfbfbf;