Merge pull request 'feat: cria estilização e organizacao do breadcrumb' (#15) from feature/breadcrumb into development

Reviewed-on: #15
2023-02-09 02:23:15 +00:00 · 2023-02-09 02:23:15 +00:00 · a0a3c31e4c
commit a0a3c31e4c
parent fc94773cac 330664e216
13 changed files with 470 additions and 248 deletions
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@ -82,10 +82,10 @@
  }
 }

-@media (min-width:374px) and (max-width:376px) {
+/* @media (min-width:374px) and (max-width:376px) {
 [class*="html--m3-html-product-sumary"]  {
  height: 254.8px!important;
-}}
+}} */
@media  (max-width:1920px) {
  [class*="html--m3-html-product-sumary"]  {
    height: unset;
@ -103,3 +103,7 @@ max-width:314.4px;
 [class*="html--quantity"] {
  max-width: 128px!important;
 }
+ [class*="html--m3-html-product-sumary"]{
+  display: flex;
+  flex-direction: column;
+ }
--- a/store/blocks/pdp/product-shelf-related.jsonc
+++ b/store/blocks/pdp/product-shelf-related.jsonc
@ -23,9 +23,16 @@
    "children": [
      "product-summary-image",
      "product-summary-name",
-      "product-summary-price"
+      "product-list-price",
+      "product-selling-price"
    ]
  },
+  "product-list-price": {
+    "props": {
+      "blockClass": "m3-product-list-price",
+      "message": "de {listPriceValue} por"
+    }
+  },
  "slider-layout#m3-carousel-products": {
    "props": {
      "blockClass": "m3-carousel-products",
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@ -181,17 +181,18 @@
      "blockClass": "info-availability"
    },
    "children": [
-      "flex-layout.row#identifieAndName",
+      "flex-layout.row#product-name",
+      "product-identifier.product",
      "flex-layout.row#availability",
      "sku-selector"
    ]
  },
-  "flex-layout.row#identifieAndName": {
-    "props": {
-      "blockClass": "identifieAndName"
-    },
-    "children": ["flex-layout.row#product-name", "product-identifier.product"]
-  },
+  // "flex-layout.row#identifieAndName": {
+  //   "props": {
+  //     "blockClass": "identifieAndName"
+  //   },
+  //   "children": ["flex-layout.row#product-name", "product-identifier.product"]
+  // },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@ -0,0 +1,25 @@
+/*
+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 */
+.container {
+  padding: 16px 40px;
+}
+.container .homeIcon {
+  display: none;
+}
+.container .homeLink {
+  vertical-align: top;
+}
+.container .homeLink::after {
+  content: "Home";
+  visibility: visible;
+}
+.container :global(.vtex-breadcrumb-1-x-term) {
+  color: #929292;
+}
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@ -1,79 +1,29 @@
-.listPrice {
-  color: #727273;
-  margin-bottom: .25rem;
-  font-size: 1rem;
+/*
+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 */
+.listPrice--m3-product-list-price {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #BABABA;
+  padding: 8px 0;
 }

-.sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
+.sellingPrice--hasListPrice {
+  font-family: "Open Sans";
+  font-style: normal;
  font-weight: 700;
-}
-
-.installments {
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@ -121,6 +121,16 @@
  column-gap: 12px;
  bottom: -16px;
 }
+@media (max-width: 1024px) {
+  .paginationDotsContainer--m3-carousel-products {
+    bottom: -24px;
+  }
+}
+@media (max-width: 768px) {
+  .paginationDotsContainer--m3-carousel-products {
+    bottom: -40px;
+  }
+}
 .paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
  background-color: #000000;
 }
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -11,12 +11,7 @@
 .newsletter {
  background: #000000;
  color: #ffffff;
-  margin: 64px 0;
-}
-@media (max-width: 1024px) {
-  .newsletter {
-    margin: 32px 0;
-  }
+  margin-top: 64px;
 }
 .newsletter :global(.vtex-store-components-3-x-container) {
  padding: 0;
@ -510,84 +505,118 @@
 .skuSelectorContainer {
  display: flex;
  flex-direction: column-reverse;
+  margin: 16px 0;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
-  font-size: 0;
-  margin-left: 16px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
-  visibility: visible;
-  display: block;
-  content: "OUTRAS CORES:";
-  font-size: 14px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
-  display: none;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
-  border-radius: 30px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
-  border-radius: 21px;
-  color: #000000;
-}
-.skuSelectorContainer .diagonalCross {
-  top: 0px;
-  right: 10px;
-  bottom: 0px;
-  left: 10px;
-  transform: rotateY(180deg);
-  color: black;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
-  font-size: 0;
-  margin-left: 16px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
-  visibility: visible;
-  display: block;
-  content: "OUTROS TAMANHOS:";
-  font-size: 14px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+.skuSelectorContainer .frameAround {
  width: 40px;
  height: 40px;
  border-radius: 30px;
+  z-index: 3;
+  padding: 0;
+  border-color: #000;
  top: 0;
  left: 0;
-  right: 0;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
-  margin: auto;
-  padding: 0;
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin-left: 0 !important;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorSelectorImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorName::before,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .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;
+  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-radius: 30px;
-  color: #000000;
  border: 1px solid #989898;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+.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;
-  margin: auto;
-  font-family: "Open Sans";
-  font-style: normal;
+  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 .valueWrapper .skuSelectorItemTextValue {
-  margin-right: 5px;
-}
-.skuSelectorContainer .frameAround {
-  border-color: #000;
-  z-index: 9;
-}
-
-.skuSelectorOptionsList {
-  margin: 0;
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
+  color: #000000;
 }

 .productImageTag--imageDescription--main {
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@ -0,0 +1,21 @@
+.container {
+  padding: 16px 40px;
+
+  .homeIcon {
+    display: none;
+  }
+
+  .homeLink {
+    vertical-align: top;
+
+    &::after {
+      content: "Home";
+      visibility: visible;
+    }
+  }
+
+  :global(.vtex-breadcrumb-1-x-term) {
+    color: $color-gray6;
+  }
+
+}
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@ -55,7 +55,7 @@
        }

        :global(.vtex-store-components-3-x-productNameContainer--quickview) {
-          font-family: 'Open Sans';
+          font-family: $font-family;
          font-style: normal;
          font-weight: 300;
          font-size: 20px;
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@ -0,0 +1,25 @@
+.listPrice--m3-product-list-price {
+
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+
+  text-decoration-line: line-through;
+  color: $color-gray9;
+  padding: 8px 0;
+
+}
+
+.sellingPrice--hasListPrice {
+
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+
+  text-align: center;
+  color: $color-black;
+}
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@ -110,6 +110,14 @@
  column-gap: 12px;
  bottom: -16px;

+  @media (max-width:1024px) {
+    bottom: -24px;
+  }
+
+  @media (max-width:768px) {
+    bottom: -40px;
+  }
+
  .paginationDot--m3-carousel-products {
    background-color: $color-black;
  }
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@ -2,11 +2,8 @@
  background: $color-black;
  color: $color-white;

-  margin: 64px 0;
+  margin-top: 64px;

-  @media (max-width:1024px) {
-    margin: 32px 0;
-  }

  :global(.vtex-store-components-3-x-container) {
    padding: 0;
@ -593,110 +590,255 @@
 }

 // SKU E TAMANHOS
+// .skuSelectorContainer {
+//   display: flex;
+//   flex-direction: column-reverse;
+
+//   .skuSelectorSubcontainer--cor {
+//     .skuSelectorName {
+//       font-size: 0;
+
+//       margin-left: 16px;
+
+//       &::after {
+//         visibility: visible;
+//         display: block;
+//         content: "OUTRAS CORES:";
+//         font-size: 14px;
+//       }
+//     }
+
+//     .skuSelectorSelectorImageValue,
+//     .skuSelectorNameSeparator {
+//       display: none;
+//     }
+
+//     .frameAround {
+//       border-radius: 30px;
+//     }
+
+//     .skuSelectorItemImageValue,
+//     .skuSelectorInternalBox {
+//       border-radius: 21px;
+//       color: $color-black;
+//     }
+//   }
+
+//   .diagonalCross {
+//     top: 0px;
+//     right: 10px;
+//     bottom: 0px;
+//     left: 10px;
+//     transform: rotateY(180deg);
+//     color: black;
+//   }
+
+//   .skuSelectorSubcontainer--tamanho {
+
+//     .skuSelectorName {
+//       font-size: 0;
+
+//       margin-left: 16px;
+
+//       &::after {
+//         visibility: visible;
+//         display: block;
+//         content: "OUTROS TAMANHOS:";
+//         font-size: 14px;
+//       }
+//     }
+
+//     .frameAround {
+//       // border: 1px solid #989898;
+//       width: 40px;
+//       height: 40px;
+//       border-radius: 30px;
+//       top: 0;
+//       left: 0;
+//       right: 0;
+//     }
+
+//     .skuSelectorInternalBox {
+//       margin: auto;
+//       padding: 0;
+//       width: 40px;
+//       height: 40px;
+//       border-radius: 30px;
+//       color: $color-black;
+//       border: 1px solid #989898;
+//     }
+
+//     .skuSelectorItemTextValue {
+//       padding: 0;
+//       margin: auto;
+//       font-family: $font-family;
+//       font-style: normal;
+//       font-weight: 400;
+//       font-size: 14px;
+//       line-height: 19px;
+
+
+//       color: rgba(185, 185, 185, 0.6);
+//     }
+//   }
+
+//   .valueWrapper .skuSelectorItemTextValue {
+//     margin-right: 5px;
+//   }
+
+//   .frameAround {
+//     border-color: #000;
+//     z-index: 9;
+//   }
+// }
+
+// .skuSelectorOptionsList {
+//   margin: 0;
+// }
 .skuSelectorContainer {
  display: flex;
  flex-direction: column-reverse;
+  margin: 16px 0;

-  .skuSelectorSubcontainer--cor {
-    .skuSelectorName {
-      font-size: 0;
-
-      margin-left: 16px;
-
-      &::after {
-        visibility: visible;
-        display: block;
-        content: "OUTRAS CORES:";
-        font-size: 14px;
-      }
-    }
-
-    .skuSelectorSelectorImageValue,
-    .skuSelectorNameSeparator {
-      display: none;
-    }
-
-    .frameAround {
-      border-radius: 30px;
-    }
-
-    .skuSelectorItemImageValue,
-    .skuSelectorInternalBox {
-      border-radius: 21px;
-      color: $color-black;
-    }
+  .frameAround {
+    width: 40px;
+    height: 40px;
+    border-radius: 30px;
+    z-index: 3;
+    padding: 0;
+    border-color: #000;
+    top: 0;
+    left: 0;
  }

-  .diagonalCross {
-    top: 0px;
-    right: 10px;
-    bottom: 0px;
-    left: 10px;
-    transform: rotateY(180deg);
-    color: black;
+  .skuSelectorInternalBox {
+    border-radius: 50%;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    margin: 0;
+
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorOptionsList {
+        margin-left: 0 !important;
+
+        .skuSelectorItem {
+          margin: 0;
+        }
+      }
+
+      .skuSelectorTextrName,
+      .skuSelectoContainer {
+        .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;

-    .skuSelectorName {
-      font-size: 0;
+    .skuSelectorNameContainer {
+      margin: 0;

-      margin-left: 16px;
+      .skuSelectorTextContainer {
+        .skuSelectorName {
+          font-size: 0;

-      &::after {
-        visibility: visible;
-        display: block;
-        content: "OUTROS TAMANHOS:";
-        font-size: 14px;
+          &::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;
+        gap: 16px;
+
+        .skuSelectorItem {
+          border-radius: 100%;
+          width: 40px;
+          height: 40px;
+          margin: 0;
+
+          .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: 1px solid #989898;
-      width: 40px;
-      height: 40px;
-      border-radius: 30px;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    .skuSelectorInternalBox {
-      margin: auto;
-      padding: 0;
-      width: 40px;
-      height: 40px;
-      border-radius: 30px;
-      color: $color-black;
-      border: 1px solid #989898;
-    }
-
-    .skuSelectorItemTextValue {
-      padding: 0;
-      margin: auto;
-      font-family: $font-family;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-
-
-      color: rgba(185, 185, 185, 0.6);
-    }
  }
-
-  .valueWrapper .skuSelectorItemTextValue {
-    margin-right: 5px;
-  }
-
-  .frameAround {
-    border-color: #000;
-    z-index: 9;
-  }
-}
-
-.skuSelectorOptionsList {
-  margin: 0;
 }

 .productImageTag--imageDescription--main {
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@ -1,4 +1,4 @@
-$font-family : $font-family;
+$font-family :'Open Sans';
 $color-black: #000000;
 $color-black2: #292929;
 $color-black3: #575757;