diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
- "agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",
diff --git a/react/Pix.ts b/react/Pix.ts
new file mode 100644
index 0000000..52ecbb2
--- /dev/null
+++ b/react/Pix.ts
@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;
diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..7319e12 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,41 +1,53 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./style.css";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
- children?: ReactNode,
- /**
- * Qual tag Html que deseja que seja usar
- *
- * @default div
- */
- tag?: keyof React.ReactHTML
- /**
- * Classes CSS extras que deseja adicionar.
- * Feito para uso de [classes do tachyons](https://tachyons.io/)
- */
- tachyonsClasses?: string
- /**
- * Se caso quiser usar esse componente
- * para adicinar um texto simples
- */
- text?: string
- /**
- * Tag ID para
- */
- testId?: string
-}
-
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
- const { handles } = useCssHandles(CSS_HANDLES);
-
- const props = {
- className: `${handles.html} ${classes}`,
- "data-testid": testId
- };
- const Children = <>{children}{text}>;
- const Element = React.createElement(tag, props, Children);
-
- return <>{Element}>;
+ children?: ReactNode;
+ /**
+ * Qual tag Html que deseja que seja usar
+ *
+ * @default div
+ */
+ tag?: keyof React.ReactHTML;
+ /**
+ * Classes CSS extras que deseja adicionar.
+ * Feito para uso de [classes do tachyons](https://tachyons.io/)
+ */
+ tachyonsClasses?: string;
+ /**
+ * Se caso quiser usar esse componente
+ * para adicinar um texto simples
+ */
+ text?: string;
+ /**
+ * Tag ID para
+ */
+ testId?: string;
+};
+
+export const Html = ({
+ children = null,
+ tag = "div",
+ text = "",
+ tachyonsClasses: classes = "",
+ testId,
+}: HtmlProps) => {
+ const { handles } = useCssHandles(CSS_HANDLES);
+
+ const props = {
+ className: `${handles.html} ${classes}`,
+ "data-testid": testId,
+ };
+ const Children = (
+ <>
+ {children}
+ {text}
+ >
+ );
+ const Element = React.createElement(tag, props, Children);
+
+ return <>{Element}>;
};
diff --git a/react/components/Html/style.css b/react/components/Html/style.css
new file mode 100644
index 0000000..a00c400
--- /dev/null
+++ b/react/components/Html/style.css
@@ -0,0 +1,150 @@
+.html--pdp-breadcrumb {
+ margin: 0 40px;
+
+}
+
+.html--product-summary-container {
+ margin: 0 40px;
+}
+
+@media screen and (min-width: 1920px) {
+ .html--pdp-breadcrumb {
+ margin: 0 360px;
+
+ }
+
+ .html--product-summary-container {
+ margin: 0 360px;
+ }
+}
+
+
+@media screen and (min-width: 768px) {
+ .html--quantity-and-button {
+ display: flex;
+ }
+
+}
+
+/*buy-button*/
+/* [class*="flexRowContent--btn-product"] button {
+ background-color: black;
+ border-color: black;
+ max-width: 526px;
+ width: 100%;
+ height: 49px;
+ display: flex;
+ border-radius: 0px;
+
+}
+
+[class*="flexRowContent--btn-product"] button:hover {
+ background-color: rgb(41, 41, 41);
+ border-color: black;
+}
+
+[class*="flexRowContent--btn-product"] button span {
+ font-size: 0px;
+}
+
+[class*="flexRowContent--btn-product"] button span::after {
+ content: "ADICIONAR À SACOLA";
+ font-size: 14px;
+ font-family: "Open Sans", sans-serif;
+} */
+
+[class*="pix-container"] {
+ display: flex;
+ align-items: center;
+ margin: 10px 0;
+}
+
+[class*="pix_price-container"] {
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+}
+
+[class*="pix_discount-container"] p {
+ display: inline;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 18px;
+ color: #929292;
+}
+
+/*Cep-link*/
+
+[class*="vtex-address-form__postalCode-forgottenURL"] a {
+ color: black;
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] a:hover {
+ color: black;
+ text-decoration: underline;
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] span {
+ display: none;
+}
+
+/*Description*/
+[class*="vtex-tab-layout-0-x-listItem"] {
+ margin: 0;
+ padding: 0;
+}
+
+[class*="vtex-tab-layout-0-x-listItem"] button {
+ text-transform: capitalize;
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ color: #BFBFBF;
+
+}
+
+[class*="vtex-tab-layout-0-x-listItem"] button:hover {
+ color: black;
+ border-bottom: 2px solid black;
+ background-color: white;
+ border-radius: 0;
+}
+
+[class*="vtex-tab-layout-0-x-listItemActive"] button {
+ color: black;
+ background-color: white;
+ border: none;
+ border-bottom: 2px solid black;
+ border-radius: 0;
+}
+
+[class*="vtex-tab-layout-0-x-listItemActive"] button:hover {
+ background-color: white;
+ border-bottom: 4px solid black;
+ color: black;
+}
+
+@media screen and (max-width: 1024px) {
+
+ [class*="vtex-tab-layout-0-x-listItem"] button {
+ border: none;
+ width: 100%;
+ display: flex;
+ }
+
+ [class*="vtex-tab-layout-0-x-listItemActive"] button {
+ width: 100%;
+ display: flex;
+ border: none;
+ }
+}
\ No newline at end of file
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
new file mode 100644
index 0000000..55dc5de
--- /dev/null
+++ b/react/components/Pix/Pix.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+const Pix = () => {
+ const productContextValue = useProduct()?.product?.priceRange?.sellingPrice
+ ?.highPrice;
+
+ return (
+ <>
+
+
+
+
+
+ {`R$ ${(productContextValue! - productContextValue! * 0.1)
+ .toFixed(2)
+ .replace(".", ",")}`}
+
+
+
+ >
+ );
+};
+
+export default Pix;
diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc
index ab2c0c0..714c053 100644
--- a/store/blocks/header/header.jsonc
+++ b/store/blocks/header/header.jsonc
@@ -6,11 +6,7 @@
"blocks": ["header-layout.desktop", "header-layout.mobile"]
},
"header-layout.desktop": {
- "children": [
- "flex-layout.row#1-desktop",
- "flex-layout.row#3-desktop",
- "sticky-layout#4-desktop"
- ]
+ "children": ["sticky-layout#4-desktop"]
},
"flex-layout.row#1-desktop": {
@@ -19,7 +15,7 @@
"fullWidth": true
}
},
-
+
"flex-layout.row#3-desktop": {
"props": {
"blockClass": "menu-link",
diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc
index a4776bc..b60d514 100644
--- a/store/blocks/home/home.jsonc
+++ b/store/blocks/home/home.jsonc
@@ -2,9 +2,9 @@
"store.home": {
"blocks": [
"list-context.image-list#demo",
- "example-component", /* You can make references to blocks defined in other files.
- * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
- "flex-layout.row#deals",
+ "example-component",
+ /* You can make references to blocks defined in other files.
+ * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
"__fold__",
"rich-text#shelf-title",
"flex-layout.row#shelf",
@@ -100,5 +100,12 @@
"text": "\n**Reach us at**\nwww.vtex.com.br",
"blockClass": "link"
}
+ },
+
+ "newsletter": {
+ "props": {
+ "label": "Assine nossa newsletter",
+ "placeholder": "Digite seu e-mail"
+ }
}
}
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 5c797c2..e0ebe43 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -2,7 +2,9 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
- "customPixelEventId": "add-to-cart-button"
+ "customPixelEventId": "add-to-cart-button",
+ "text": "Adicionar à sacola",
+ "blockClass": "addToCart"
}
},
diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc
index 43ad04e..f9e22eb 100644
--- a/store/blocks/pdp/product-assembly.jsonc
+++ b/store/blocks/pdp/product-assembly.jsonc
@@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
- "children": [
- "assembly-option-item-image"
- ]
+ "children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..b7885b9 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,11 +3,11 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
- "flex-layout.row#description",
- "flex-layout.row#specifications-title",
- "product-specification-group#table",
- "shelf.relatedProducts",
- "product-questions-and-answers"
+ "html#tab-layout",
+ "list-context.product-list#list",
+ //"shelf.relatedProducts",
+ "product-questions-and-answers",
+ "newsletter"
]
},
"html#breadcrumb": {
@@ -50,7 +50,8 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
- "paddingBottom": 7
+ "paddingBottom": 7,
+ "blockClass": "product-main-stack"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@@ -78,49 +79,111 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
- "width": "60%",
- "rowGap": 0
+ "width": "50%",
+ "rowGap": 0,
+ "blockClass": "stack-layout-container"
}
},
"flex-layout.row#product-image": {
+ "children": ["html#product-images"]
+ },
+
+ "html#product-images": {
+ "props": {
+ "testId": "product-images"
+ },
"children": ["product-images"]
},
+
"product-images": {
"props": {
"aspectRatio": {
- "desktop": "auto",
- "phone": "16:9"
+ "desktop": "auto"
},
- "displayThumbnailsArrows": true
+ "thumbnailsOrientation": "horizontal",
+ "showPaginationDots": false,
+ "displayThumbnailsArrows": false,
+ "showNavigationArrows": false
}
},
+
+ "html#right-col": {
+ "props": {}
+ },
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
},
"children": [
- "flex-layout.row#product-name",
+ "html#product-name",
+ "html#product-code",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
- "product-installments",
- "product-separator",
- "product-identifier.product",
- "sku-selector",
- "product-quantity",
+ "html#product-installments",
+ "html#Pix",
+ "html#sku-selector",
+ "html#buy-container",
"product-assembly-options",
- "product-gifts",
- "flex-layout.row#buy-button",
"availability-subscriber",
- "shipping-simulator",
- "share#default"
+ "html#shipping-simulator"
]
},
- "flex-layout.row#product-name": {
+ "html#buy-container": {
"props": {
- "marginBottom": 3
+ "blockClass": "quantity-and-button"
+ },
+ "children": ["html#product-quantity", "flex-layout.row#buy-button"]
+ },
+
+ "html#product-installments": {
+ "props": {
+ "testId": "product-installments"
+ },
+ "children": ["product-installments"]
+ },
+
+ "html#sku-selector": {
+ "props": {
+ "testId": "sku-selector"
+ },
+ "children": ["sku-selector"]
+ },
+
+ "html#Pix": {
+ "props": {
+ "testId": "pix-price"
+ },
+ "children": ["Pix"]
+ },
+
+ "html#product-quantity": {
+ "props": {
+ "testId": "product-quantity"
+ },
+ "children": ["product-quantity"]
+ },
+
+ "html#shipping-simulator": {
+ "props": {
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
+
+ "html#product-code": {
+ "props": {
+ "testId": "product-code"
+ },
+ "children": ["product-identifier.product"]
+ },
+
+ "html#product-name": {
+ "props": {
+ "marginBottom": 3,
+ "testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
@@ -128,14 +191,22 @@
"sku-selector": {
"props": {
"variationsSpacing": 3,
- "showValueNameForImageVariation": true
+ "showValueNameForImageVariation": false
}
},
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
- "marginBottom": 7
+ "marginBottom": 7,
+ "blockClass": "btn-product"
+ },
+ "children": ["html#add-to-cart-button"]
+ },
+
+ "html#add-to-cart-button": {
+ "props": {
+ "testId": "add-to-cart-button"
},
"children": ["add-to-cart-button"]
},
@@ -161,8 +232,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
- "sku-selector",
- "flex-layout.row#availability"
+ "flex-layout.row#availability",
+ "sku-selector"
]
},
"flex-layout.row#availability": {
@@ -181,5 +252,168 @@
"Pinterest": true
}
}
+ },
+
+ "product-images#descricao": {
+ "props": {
+ "displayMode": "first-image",
+ "blockClass": "imagem-descricao"
+ }
+ },
+
+ "rich-text#shelfTitle": {
+ "props": {
+ "textAlignment": "CENTER",
+ "textPosition": "CENTER",
+ "text": "Você também pode gostar:",
+ "blockClass": "shelfTitleText"
+ }
+ },
+
+ "list-context.product-list#list": {
+ "blocks": ["product-summary.shelf#carrosselprodutos"],
+ "children": ["rich-text#shelfTitle", "html#slider"]
+ },
+ "product-summary.shelf#carrosselprodutos": {
+ "children": ["html#product-summary"]
+ },
+
+ "html#product-summary": {
+ "props": {
+ "testId": "vtex-product-summary"
+ },
+ "children": [
+ "product-summary-image",
+ "product-summary-name",
+ "product-list-price#summary",
+ "product-selling-price#summary",
+ "product-summary-buy-button"
+ ]
+ },
+
+ "product-selling-price#summary": {
+ "props": {
+ "blockClass": "summary-selling-price"
+ },
+ "children": ["product-selling-price"]
+ },
+
+ "product-list-price#summary": {
+ "props": {
+ "blockClass": "summary-list-price"
+ },
+ "children": ["product-summary-price"]
+ },
+
+ "html#slider": {
+ "props": {
+ "testId": "product-summary-list",
+ "blockClass": "product-summary-container"
+ },
+ "children": ["slider-layout#carrosselatualizado"]
+ },
+
+ "slider-layout#carrosselatualizado": {
+ "props": {
+ "itemsPerPage": {
+ "desktop": 4,
+ "tablet": 3,
+ "phone": 2
+ },
+ "infinite": true,
+ "showNavigationArrows": "desktopOnly",
+ "blockClass": "carousel"
+ }
+ },
+
+ "html#tab-layout": {
+ "props": {
+ "testId": "product-description"
+ },
+ "children": ["tab-layout#description"]
+ },
+
+ "tab-layout#description": {
+ "children": ["tab-list#description", "tab-content#description"]
+ },
+ "tab-list#description": {
+ "children": [
+ "tab-list.item#description1",
+ "tab-list.item#description2",
+ "tab-list.item#description3",
+ "tab-list.item#description4",
+ "tab-list.item#description5"
+ ]
+ },
+ "tab-list.item#description1": {
+ "props": {
+ "tabId": "descriptionTab1",
+ "label": "Descrição",
+ "defaultActiveTab": true,
+ "blockClass": "descriptionTab1"
+ }
+ },
+ "tab-list.item#description2": {
+ "props": {
+ "tabId": "descriptionTab2",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#description3": {
+ "props": {
+ "tabId": "descriptionTab3",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#description4": {
+ "props": {
+ "tabId": "descriptionTab4",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#description5": {
+ "props": {
+ "tabId": "descriptionTab5",
+ "label": "Descrição"
+ }
+ },
+ "tab-content#description": {
+ "children": [
+ "tab-content.item#description1",
+ "tab-content.item#description2",
+ "tab-content.item#description3",
+ "tab-content.item#description4",
+ "tab-content.item#description5"
+ ]
+ },
+ "tab-content.item#description1": {
+ "children": ["product-images#descricao", "product-description"],
+ "props": {
+ "tabId": "descriptionTab1"
+ }
+ },
+ "tab-content.item#description2": {
+ "children": ["product-images#descricao", "product-description"],
+ "props": {
+ "tabId": "descriptionTab2"
+ }
+ },
+ "tab-content.item#description3": {
+ "children": ["product-images#descricao", "product-description"],
+ "props": {
+ "tabId": "descriptionTab3"
+ }
+ },
+ "tab-content.item#description4": {
+ "children": ["product-images#descricao", "product-description"],
+ "props": {
+ "tabId": "descriptionTab4"
+ }
+ },
+ "tab-content.item#description5": {
+ "children": ["product-images#descricao", "product-description"],
+ "props": {
+ "tabId": "descriptionTab5"
+ }
}
}
diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc
index 3035106..f420180 100644
--- a/store/blocks/product-price.jsonc
+++ b/store/blocks/product-price.jsonc
@@ -6,9 +6,14 @@
"preventHorizontalStretch": true,
"marginBottom": 4
},
- "children": [
- "product-selling-price"
- ]
+ "children": ["html#selling-price"]
+ },
+
+ "html#selling-price": {
+ "props": {
+ "testId": "product-price"
+ },
+ "children": ["product-selling-price"]
},
"flex-layout.row#list-price-savings": {
@@ -19,9 +24,6 @@
"marginBottom": 2,
"marginTop": 5
},
- "children": [
- "product-list-price",
- "product-price-savings"
- ]
+ "children": ["product-list-price", "product-price-savings"]
}
}
diff --git a/store/blocks/product-summary/product-specification-list.jsonc b/store/blocks/product-summary/product-specification-list.jsonc
index 57d44af..14ce810 100644
--- a/store/blocks/product-summary/product-specification-list.jsonc
+++ b/store/blocks/product-summary/product-specification-list.jsonc
@@ -1,13 +1,9 @@
{
"product-specification-group#summary": {
- "children": [
- "product-specification#summary"
- ]
+ "children": ["product-specification#summary"]
},
"product-specification#summary": {
- "children": [
- "flex-layout.row#summarySpecificationValues"
- ]
+ "children": ["flex-layout.row#summarySpecificationValues"]
},
"flex-layout.row#summarySpecificationValues": {
"props": {
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee3..bb93cc8 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
- "markers": [
- "discount"
- ],
+ "markers": ["discount"],
"blockClass": "summary"
}
}
diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json
index 723d4a0..2224337 100644
--- a/store/blocks/product-summary/quickview.json
+++ b/store/blocks/product-summary/quickview.json
@@ -1,9 +1,6 @@
{
"modal-trigger#quickview": {
- "children": [
- "icon-expand",
- "modal-layout#quickview"
- ],
+ "children": ["icon-expand", "modal-layout#quickview"],
"props": {
"blockClass": "quickview"
}
@@ -63,9 +60,7 @@
},
"flex-layout.col#quickview-product-quantity": {
- "children": [
- "product-summary-quantity#quickview"
- ]
+ "children": ["product-summary-quantity#quickview"]
},
"product-summary-quantity#quickview": {
"props": {
@@ -74,18 +69,14 @@
}
},
"flex-layout.col#quickview-add-to-card-button": {
- "children": [
- "add-to-cart-button"
- ],
+ "children": ["add-to-cart-button"],
"props": {
"width": "grow"
}
},
"flex-layout.row#quickview-actions-2": {
- "children": [
- "link.product#button-pdp"
- ]
+ "children": ["link.product#button-pdp"]
},
"link.product#button-pdp": {
"props": {
@@ -107,15 +98,10 @@
}
},
"flex-layout.col#quickview-images": {
- "children": [
- "product-images#quickview"
- ]
+ "children": ["product-images#quickview"]
},
"flex-layout.col#quickview-product-details": {
- "children": [
- "modal-content#quickview",
- "modal-actions#quickview"
- ],
+ "children": ["modal-content#quickview", "modal-actions#quickview"],
"props": {
"preventVerticalStretch": true,
"blockClass": "quickviewDetails"
@@ -134,7 +120,7 @@
"blockClass": "quickview"
}
},
- "product-images#quickview" : {
+ "product-images#quickview": {
"props": {
"blockClass": "quickview",
"showNavigationArrows": true
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..2d07e38 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
+ },
+ "Pix": {
+ "component": "Pix"
}
}
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..8895b65 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.html {
background-color: red;
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..b8da68a
--- /dev/null
+++ b/styles/css/vtex.breadcrumb.css
@@ -0,0 +1,33 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.homeLink .homeIcon {
+ display: none;
+}
+.homeLink::before {
+ content: "Home";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+.link--1,
+.link--2,
+.link--3 {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..0789508 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,98 +1,54 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
- padding: 0 0.5rem;
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.flexRowContent--product-main-stack {
+ padding: 0 30px;
+ margin-bottom: 0;
}
-
-@media screen and (min-width: 40em) {
- .flexRowContent--menu-link,
- .flexRowContent--main-header {
- padding: 0 1rem;
+@media screen and (max-width: 1024px) {
+ .flexRowContent--product-main-stack {
+ display: flex;
+ flex-direction: column;
+ }
+ .flexRowContent--product-main-stack .stretchChildrenWidth {
+ width: 100% !important;
}
}
-@media screen and (min-width: 80rem) {
- .flexRowContent--menu-link,
- .flexRowContent--main-header {
- padding: 0 0.25rem;
+@media screen and (max-width: 1024px) {
+ .flexRowContent--main-header-mobile {
+ display: flex;
+ flex-direction: row;
}
}
-.flexRowContent--menu-link {
- background-color: #03044e;
- color: #fff;
+.flexCol {
+ position: relative;
}
-.flexRowContent--main-header {
- background-color: #f0f0f0;
+@media screen and (min-width: 768px) {
+ .flexRowContent--btn-product {
+ margin: 0 10px;
+ }
}
-.flexRowContent--main-header-mobile {
- align-items: center;
- padding: 0.625rem 0.5rem;
- background-color: #f0f0f0;
+.flexRow--btn-product {
+ width: 100%;
}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
- color: #ffffff;
- font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
- color: #727273;
- font-size: 14px;
-}
-
-.flexRow--deals {
- background-color: #0F3E99;
- padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
- align-items: center;
-}
-
-.flexRow--deals .flexCol {
- align-items: center;
- margin-bottom: 5px;
- padding-top: 5px;
-}
-
-.flexCol--filterCol {
- max-width: 500px;
- min-width: 230px;
-}
-
-.flexCol--productCountCol {
- align-items: flex-start;
-}
-
-.flexCol--orderByCol {
- align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
- width: 42%;
-}
-
-.flexCol--filterMobileCol {
- width: 38%;
-}
-
-.flexRow--quickviewMainRow {
- display: flex;
- max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
- overflow-y: auto;
- height: 66% !important;
- overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
- height: 34% !important;
-}
-
-.flexRow--addToCartRow {
- padding-bottom: 1rem;
+.flexRow--btn-product :global(.vtex-button) {
+ background-color: black;
+ border: 1px solid black;
+ border-radius: 0;
+ font-family: "Open Sans";
+ padding: 12px;
}
+.flexRow--btn-product :global(.vtex-button):hover {
+ background-color: rgb(36, 36, 36);
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..6b75deb 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -1,3 +1,30 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
.product-identifier--productReference {
- margin-bottom: 1rem;
+ display: flex;
+ justify-content: right;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(146, 146, 146, 0.48);
}
+@media screen and (max-width: 1024px) {
+ .product-identifier--productReference {
+ justify-content: left;
+ }
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..b451a2b 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,12 +1,31 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
.listPrice {
- color: #727273;
- margin-bottom: .25rem;
- font-size: 1rem;
+ visibility: hidden;
+}
+
+.listPrice--summary {
+ visibility: visible;
+ display: block;
+}
+
+.savings {
+ display: none;
}
.sellingPrice {
- color: #3f3f40;
+ font-family: "Open Sans";
+ color: #000000;
font-size: 1.25rem;
+ margin-bottom: -12px;
}
.sellingPriceValue {
@@ -15,47 +34,42 @@
}
.installments {
- color: #727273;
- margin-bottom: 1rem;
-}
-
-.savings {
- font-weight: 500;
- color: #79B03A;
+ color: #929292;
+ margin-bottom: 8px;
+ font-size: 0px;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
- color: #2E2E2E;
+ color: #2e2e2e;
}
.savings--summary {
- background: #8BC34A;
+ 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;
+ color: #ffffff;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
- color: #FFFFFF;
+ color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
- font-size: .875rem;
+ font-size: 0.875rem;
}
.installments--summary {
@@ -74,6 +88,38 @@
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
- color: #FFFFFF;
+ color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
+
+.installmentsNumber {
+ font-family: "Open Sans";
+ font-weight: bold;
+ font-size: 16px;
+ margin-right: 6px;
+}
+.installmentsNumber::after {
+ content: "x";
+ font-size: 16px;
+ margin-left: 4px;
+}
+
+.installmentValue {
+ font-family: "Open Sans";
+ font-size: 16px;
+ font-weight: bold;
+ margin-right: 6px;
+}
+.installmentValue::before {
+ content: "de";
+ font-size: 16px;
+ font-weight: normal;
+ margin-right: 6px;
+}
+
+.interestRate::after {
+ font-family: "Open Sans";
+ content: "sem juros";
+ font-size: 16px;
+ font-weight: normal;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..345c24e
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,34 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
+ border-top: 2px solid #cccccc;
+ border-left: none;
+ border-right: none;
+ border-bottom: 2px solid #cccccc;
+ color: black;
+ height: 50px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) {
+ color: black;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 0a6e420..713454e 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -1,42 +1,13 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
- border-radius: 50%;
-}
-
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
- opacity: 0;
- transition: opacity 200ms ease-in-out;
-}
-
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
- opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
- .container :global(.vtex-modal-layout-0-x-triggerContainer) {
- display: none;
- }
-}
-
-.nameContainer {
- justify-content: start;
- padding-top: 1rem;
- padding-bottom: 1rem;
-}
-
-.brandName {
- font-weight: 600;
- font-size: 18px;
- color: #2E2E2E;
-}
-
-.container {
- text-align: start;
-}
-
-.imageContainer {
- text-align: center;
-}
-
-.image {
- border-radius: 0.25rem;
-}
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.buyButton {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..b05cfa2 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,14 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.paragraph--shelfTitleText {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+ margin-bottom: 32px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css
new file mode 100644
index 0000000..7dab7cd
--- /dev/null
+++ b/styles/css/vtex.shelf.css
@@ -0,0 +1,24 @@
+@charset "UTF-8";
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.title {
+ font-size: 0px;
+}
+.title::after {
+ content: "Você também pode gostar:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ text-align: center;
+ color: #575757;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 55f431f..6104f2a 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -1,31 +1,31 @@
-.sliderLayoutContainer {
- justify-content: center;
-}
-
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
.sliderLayoutContainer--carousel {
- background-color: #F0F0F0;
- min-height: 450px;
+ background-color: white;
}
-
-.sliderTrackContainer {
- max-width: 100%;
+@media screen and (min-width: 1025px) {
+ .sliderLayoutContainer--carousel {
+ padding: 0 40px;
+ }
}
.paginationDotsContainer {
- margin-top: .5rem;
- margin-bottom: .5rem;
+ color: black;
}
-.layoutContainer--shelf {
- margin-top: 20px;
- margin-bottom: 20px;
- max-width: 96rem;
- min-height: 550px;
+.paginationDot {
+ background-color: black;
}
-.slide--shelf {
- margin-bottom: 25px;
- padding-left: .5rem;
- padding-right: .5rem;
- min-height: 550px;
-}
+.paginationDot--isActive {
+ background-color: white;
+ border: 1px solid black;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..255ca99 100644
--- 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
@@ -6,7 +7,394 @@
1800px + : Big desktop
*/
/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
+/*Product name*/
+.productNameContainer--quickview {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+}
+@media screen and (max-width: 1024px) {
+ .productNameContainer--quickview {
+ text-align: left;
+ }
+}
+
+/* carouselThumbs*/
+.carouselGaleryThumbs {
+ height: 140px;
+ margin-top: 16px;
+}
+.carouselGaleryThumbs .productImagesThumb {
+ margin: 0px 10px;
+}
+.carouselGaleryThumbs .thumbImg {
+ border-radius: 8px;
+}
+
+/*SKU*/
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+}
+.skuSelectorContainer .frameAround {
+ border-radius: 50%;
+ border-color: #000000;
+ z-index: 2;
+ margin: 2px;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+ border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorItemTextValue {
+ padding: 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .diagonalCross {
+ background-image: linear-gradient(to top left, transparent 44%, rgb(0, 0, 0) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+ z-index: 2;
+ width: 32px;
+ height: 33px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+}
+
+.skuSelectorItem {
+ height: 40px;
+ width: 40px;
+ position: relative;
+}
+
+.skuSelectorSubcontainer--tamanho .skuSelectorName {
+ font-size: 0px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+ content: "OUTROS TAMANHOS:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+.skuSelectorSubcontainer--cor .skuSelectorName {
+ font-size: 0px;
+}
+.skuSelectorSubcontainer--cor .skuSelectorName::after {
+ content: "OUTRAS CORES:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+/*not-Avaliable*/
+.subscriberContainer {
+ margin-top: 30px;
+ height: 180px;
+ position: relative;
+}
+.subscriberContainer .title {
+ font-size: 0px;
+}
+.subscriberContainer .title::after {
+ content: "Produto indisponível";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+ font-size: 0px;
+}
+.subscriberContainer .subscribeLabel::after {
+ content: "Deseja saber quando estiver disponível?";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.subscriberContainer .inputName :global(.vtex-input-prefix__group),
+.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) {
+ border: 1px solid #989898;
+ border-radius: 0;
+}
+.subscriberContainer .submit {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+}
+.subscriberContainer .submit :global(.vtex-button) {
+ background-color: #000000;
+ color: #fff;
+ font-size: 0px;
+ width: 100%;
+ height: 100%;
+ padding: 12px;
+}
+.subscriberContainer .submit :global(.vtex-button)::after {
+ content: "Avise-me";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+}
+
+/*Shipping*/
+.shippingContainer {
+ display: flex;
+ position: relative;
+}
+.shippingContainer :global(.vtex-button) {
+ background-color: #000000;
+ width: 50px;
+ height: 44px;
+ color: #fff;
+ margin-top: 25px;
+ margin-left: -4px;
+}
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0px;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+ content: "calcular frete:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+}
+.shippingContainer :global(.vtex-button__label) {
+ font-size: 0px;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+ content: "OK";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+ border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ width: 280px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ color: #000000;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+}
+@media screen and (min-width: 768px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ left: 348px;
+ top: 25px;
+ }
+}
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ right: -60px;
+ }
+}
+
+.shippingTable {
+ border: none;
+}
+.shippingTable .shippingTableHead {
+ display: contents;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+ text-align: left;
+ text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ font-weight: 400;
+}
+.shippingTable .shippingTableCell {
+ padding: 7px 0;
+ font-family: "Open Sans";
+ color: #afafaf;
+}
+.shippingTable .shippingTableRadioBtn {
+ display: none;
+}
+
+/* Image and Text Description */
+.content--imagem-descricao {
+ margin-right: 16px;
+ width: 50%;
+}
+@media screen and (max-width: 1024px) {
+ .content--imagem-descricao {
+ width: 100%;
+ }
+}
+
+.productDescriptionContainer {
+ width: 50%;
+ margin-left: 16px;
+}
+.productDescriptionContainer .productDescriptionTitle {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 32px;
+ color: #575757;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 32px;
+ line-height: 32px;
+ }
+}
+.productDescriptionContainer .productDescriptionText {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionText {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer {
+ margin-top: 16px;
+ width: 100%;
+ }
+}
+
+/*newsletter*/
.newsletter {
- background: red;
+ background: #000000;
+ color: #fff;
+ margin-top: 50px;
+ border-bottom: 2px solid white;
+}
+.newsletter .container {
+ margin: auto;
+ padding: 32px;
+ padding-bottom: 16px;
+}
+.newsletter .form {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.newsletter .label {
+ display: flex;
+ flex-direction: column;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #fff;
+}
+.newsletter .label::after {
+ content: "Receba ofertas e novidades por e-mail";
+ font-family: "Open Sans";
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 25px;
+ letter-spacing: 0em;
+ text-align: center;
+ color: #929292;
+ margin: 16px;
+}
+.newsletter .inputGroup {
+ display: flex;
+}
+@media screen and (min-width: 768px) {
+ .newsletter .inputGroup {
+ width: 774px;
+ }
+}
+.newsletter .inputGroup :global(.vtex-input-prefix__group) {
+ border: none;
+ border-bottom: 1px solid gray;
+ border-radius: 0;
+}
+.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
+ background-color: #000000;
+}
+.newsletter .inputGroup .buttonContainer {
+ padding: 0;
+}
+.newsletter .inputGroup .buttonContainer :global(.vtex-button) {
+ background-color: #000000;
+ border: none;
+ border-bottom: 2px solid white;
+ border-radius: 0;
+}
+.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
+ background-color: #000000;
+ border-bottom: 4px solid white;
+}
+
+.sellingPriceValue {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ color: #000000;
+}
+
+.discountInsideContainer,
+.installmentsPrice {
+ display: none;
+}
+
+.sellingPriceLabel {
+ display: none;
+}
+
+.sellingPrice {
+ font-weight: bolder;
+}
+
+@media screen and (max-width: 1024px) {
+ .productImageTag--imagem-descricao--main {
+ max-height: 1100px !important;
+ }
+}
+
+.productImageTag--main {
+ max-height: 1000px !important;
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
new file mode 100644
index 0000000..4e02656
--- /dev/null
+++ b/styles/css/vtex.tab-layout.css
@@ -0,0 +1,45 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+/* Grid breakpoints */
+.listContainer {
+ display: flex;
+ justify-content: space-evenly;
+ border-bottom: 1px solid #b9b9b9;
+ margin: auto;
+ width: 95%;
+}
+@media screen and (min-width: 1920px) {
+ .listContainer {
+ width: 75%;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .listContainer {
+ flex-direction: column;
+ border-top: 1px solid #b9b9b9;
+ }
+}
+
+.contentItem {
+ display: flex;
+ padding: 62px 52px 0;
+}
+@media screen and (min-width: 1920px) {
+ .contentItem {
+ padding: 62px 360px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .contentItem {
+ flex-direction: column;
+ padding: 16px 40px;
+ border-bottom: 1px solid #b9b9b9;
+ }
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..b053eac 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -5,4 +5,3 @@
.html--pdp-breadcrumb {
background-color: green;
}
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
new file mode 100644
index 0000000..adb8793
--- /dev/null
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -0,0 +1,28 @@
+.homeLink {
+ .homeIcon {
+ display: none;
+ }
+
+ &::before {
+ content: "Home";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: #929292;
+ }
+}
+
+.link--1,
+.link--2,
+.link--3 {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: #929292;
+}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
new file mode 100644
index 0000000..b71e93f
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,50 @@
+// .flexRowContent {
+// @media screen and (max-width: 1024px) {
+// display: flex;
+// flex-direction: column;
+// }
+// }
+.flexRowContent--product-main-stack {
+ padding: 0 30px;
+ margin-bottom: 0;
+
+ @media screen and (max-width: 1024px) {
+ display: flex;
+ flex-direction: column;
+
+ .stretchChildrenWidth {
+ width: 100% !important;
+ }
+ }
+}
+.flexRowContent--main-header-mobile {
+ @media screen and (max-width: 1024px) {
+ display: flex;
+ flex-direction: row;
+ }
+}
+
+.flexCol {
+ position: relative;
+}
+
+.flexRowContent--btn-product {
+ @media screen and (min-width: 768px) {
+ margin: 0 10px;
+ }
+}
+.flexRow--btn-product {
+ width: 100%;
+
+ :global(.vtex-button) {
+ background-color: black;
+ border: 1px solid black;
+ border-radius: 0;
+ font-family: "Open Sans";
+ padding: 12px;
+
+ &:hover {
+ background-color: rgb(36, 36, 36);
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
new file mode 100644
index 0000000..66ee5a3
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -0,0 +1,20 @@
+.product-identifier--productReference {
+ display: flex;
+ justify-content: right;
+
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray7;
+
+ @media screen and (max-width: 1024px) {
+ justify-content: left;
+ }
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+ display: none;
+}
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
new file mode 100644
index 0000000..acb8bea
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,123 @@
+.listPrice {
+ visibility: hidden;
+}
+
+.listPrice--summary {
+ visibility: visible;
+ display: block;
+}
+
+.savings {
+ display: none;
+}
+
+.sellingPrice {
+ font-family: $font-family;
+ color: $color-black;
+ font-size: 1.25rem;
+ margin-bottom: -12px;
+}
+
+.sellingPriceValue {
+ font-size: 2.25rem;
+ font-weight: 700;
+}
+
+.installments {
+ color: #929292;
+ margin-bottom: 8px;
+ font-size: 0px;
+}
+
+.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: 0.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;
+}
+
+.installmentsNumber {
+ font-family: $font-family;
+
+ font-weight: bold;
+ font-size: 16px;
+
+ margin-right: 6px;
+
+ &::after {
+ content: "x";
+ font-size: 16px;
+ margin-left: 4px;
+ }
+}
+
+.installmentValue {
+ font-family: $font-family;
+ font-size: 16px;
+ font-weight: bold;
+ margin-right: 6px;
+
+ &::before {
+ content: "de";
+ font-size: 16px;
+ font-weight: normal;
+ margin-right: 6px;
+ }
+}
+
+.interestRate {
+ &::after {
+ font-family: $font-family;
+
+ content: "sem juros";
+ font-size: 16px;
+ font-weight: normal;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..f423a93
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,28 @@
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper {
+ :global(.vtex-numeric-stepper__input) {
+ border-top: 2px solid #cccccc;
+ border-left: none;
+ border-right: none;
+ border-bottom: 2px solid #cccccc;
+ color: black;
+ height: 50px;
+ }
+
+ :global(.vtex-numeric-stepper__plus-button) {
+ color: black;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+ }
+
+ :global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
new file mode 100644
index 0000000..8b2a726
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -0,0 +1,3 @@
+.buyButton {
+ display: none;
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..25ee81f 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1,10 @@
+.paragraph--shelfTitleText {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+
+ margin-bottom: 32px;
+}
diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss
new file mode 100644
index 0000000..4c5aaf8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.shelf.scss
@@ -0,0 +1,16 @@
+.title {
+ font-size: 0px;
+
+ &::after {
+ content: "Você também pode gostar:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+
+ text-align: center;
+
+ color: #575757;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
new file mode 100644
index 0000000..6be0ff4
--- /dev/null
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -0,0 +1,20 @@
+.sliderLayoutContainer--carousel {
+ background-color: white;
+
+ @media screen and (min-width: 1025px) {
+ padding: 0 40px;
+ }
+}
+
+.paginationDotsContainer {
+ color: black;
+}
+
+.paginationDot {
+ background-color: black;
+}
+
+.paginationDot--isActive {
+ background-color: white;
+ border: 1px solid black;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..2519843 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,439 @@
-.newsletter{
- background: red;
-}
\ No newline at end of file
+/*Product name*/
+.productNameContainer--quickview {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: $color-gray6;
+
+ @media screen and (max-width: 1024px) {
+ text-align: left;
+ }
+}
+
+/* carouselThumbs*/
+.carouselGaleryThumbs {
+ height: 140px;
+ margin-top: 16px;
+
+ .productImagesThumb {
+ margin: 0px 10px;
+ }
+
+ .thumbImg {
+ border-radius: 8px;
+ }
+}
+
+/*SKU*/
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+
+ .frameAround {
+ border-radius: 50%;
+ border-color: $color-black;
+ z-index: 2;
+ margin: 2px;
+ }
+
+ .skuSelectorInternalBox {
+ border-radius: 50%;
+ }
+
+ .skuSelectorItemTextValue {
+ padding: 0;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: $color-gray10;
+ }
+
+ .diagonalCross {
+ background-image: linear-gradient(
+ to top left,
+ transparent 44%,
+ rgb(0, 0, 0) 48%,
+ currentColor 48%,
+ currentColor 52%,
+ transparent 52%
+ );
+ z-index: 2;
+ width: 32px;
+ height: 33px;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ }
+}
+
+.skuSelectorItem {
+ height: 40px;
+ width: 40px;
+ position: relative;
+}
+
+.skuSelectorSubcontainer--tamanho {
+ .skuSelectorName {
+ font-size: 0px;
+
+ &::after {
+ content: "OUTROS TAMANHOS:";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray8;
+ }
+ }
+}
+
+.skuSelectorSubcontainer--cor {
+ .skuSelectorName {
+ font-size: 0px;
+
+ &::after {
+ content: "OUTRAS CORES:";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray8;
+ }
+ }
+}
+
+/*not-Avaliable*/
+.subscriberContainer {
+ margin-top: 30px;
+ height: 180px;
+ position: relative;
+ .title {
+ font-size: 0px;
+
+ &::after {
+ content: "Produto indisponível";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray11;
+ }
+ }
+
+ .subscribeLabel {
+ font-size: 0px;
+
+ &::after {
+ content: "Deseja saber quando estiver disponível?";
+
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray11;
+ }
+ }
+
+ .inputName,
+ .inputEmail {
+ :global(.vtex-input-prefix__group) {
+ border: 1px solid #989898;
+ border-radius: 0;
+ }
+ }
+
+ .submit {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+
+ :global(.vtex-button) {
+ background-color: $color-black;
+ color: $color-white;
+ font-size: 0px;
+ width: 100%;
+ height: 100%;
+ padding: 12px;
+
+ &::after {
+ content: "Avise-me";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ text-transform: uppercase;
+ }
+ }
+ }
+}
+
+/*Shipping*/
+.shippingContainer {
+ display: flex;
+ position: relative;
+ :global(.vtex-button) {
+ background-color: $color-black;
+ width: 50px;
+ height: 44px;
+ color: $color-white;
+ margin-top: 25px;
+ margin-left: -4px;
+ }
+
+ :global(.vtex-input__label) {
+ font-size: 0px;
+
+ &::after {
+ content: "calcular frete:";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray8;
+ text-transform: uppercase;
+ }
+ }
+
+ :global(.vtex-button__label) {
+ font-size: 0px;
+ }
+
+ :global(.vtex-button__label)::after {
+ content: "OK";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ }
+
+ :global(.vtex-input-prefix__group) {
+ border-radius: 0;
+ }
+
+ :global(.vtex-address-form__postalCode) {
+ width: 280px;
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ color: $color-black;
+
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+
+ @media screen and (min-width: 768px) {
+ position: absolute;
+ left: 348px;
+ top: 25px;
+ }
+
+ @media screen and (max-width: 1024px) and (min-width: 768px) {
+ right: -60px;
+ }
+ }
+}
+
+.shippingTable {
+ border: none;
+
+ .shippingTableHead {
+ display: contents;
+
+ .shippingTableRow {
+ text-align: left;
+ text-transform: uppercase;
+
+ .shippingTableHeadDeliveryName,
+ .shippingTableHeadDeliveryEstimate,
+ .shippingTableHeadDeliveryPrice {
+ font-weight: 400;
+ }
+ }
+ }
+
+ .shippingTableCell {
+ padding: 7px 0;
+ font-family: $font-family;
+ color: $color-gray12;
+ }
+
+ .shippingTableRadioBtn {
+ display: none;
+ }
+}
+
+/* Image and Text Description */
+.content--imagem-descricao {
+ margin-right: 16px;
+ width: 50%;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ }
+}
+
+.productDescriptionContainer {
+ width: 50%;
+ margin-left: 16px;
+
+ .productDescriptionTitle {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 32px;
+
+ color: $color-gray6;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 32px;
+ line-height: 32px;
+ }
+ }
+
+ .productDescriptionText {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+
+ color: $color-gray8;
+
+ @media screen and (min-width: 1920px) {
+ font-size: 18px;
+ line-height: 25px;
+ }
+ }
+
+ @media screen and (max-width: 1024px) {
+ margin-top: 16px;
+ width: 100%;
+ }
+}
+
+/*newsletter*/
+.newsletter {
+ background: $color-black;
+ color: $color-white;
+
+ margin-top: 50px;
+ border-bottom: 2px solid white;
+
+ .container {
+ margin: auto;
+ padding: 32px;
+ padding-bottom: 16px;
+ }
+
+ .form {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .label {
+ display: flex;
+ flex-direction: column;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+
+ color: $color-white;
+ }
+
+ .label::after {
+ content: "Receba ofertas e novidades por e-mail";
+ font-family: $font-family;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 25px;
+ letter-spacing: 0em;
+ text-align: center;
+ color: $color-gray8;
+
+ margin: 16px;
+ }
+
+ .inputGroup {
+ display: flex;
+ @media screen and (min-width: 768px) {
+ width: 774px;
+ }
+ :global(.vtex-input-prefix__group) {
+ border: none;
+ border-bottom: 1px solid gray;
+ border-radius: 0;
+ }
+
+ :global(.vtex-styleguide-9-x-input) {
+ background-color: $color-black;
+ }
+
+ .buttonContainer {
+ padding: 0;
+
+ :global(.vtex-button) {
+ background-color: $color-black;
+ border: none;
+ border-bottom: 2px solid white;
+ border-radius: 0;
+
+ &:hover {
+ background-color: $color-black;
+ border-bottom: 4px solid white;
+ }
+ }
+ }
+ }
+}
+
+.sellingPriceValue {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ color: $color-black;
+}
+
+.discountInsideContainer,
+.installmentsPrice {
+ display: none;
+}
+
+.sellingPriceLabel {
+ display: none;
+}
+
+.sellingPrice {
+ font-weight: bolder;
+}
+
+.productImageTag--imagem-descricao--main {
+ @media screen and (max-width: 1024px) {
+ max-height: 1100px !important;
+ }
+}
+
+.productImageTag--main {
+ max-height: 1000px !important;
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
new file mode 100644
index 0000000..4b90ea6
--- /dev/null
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -0,0 +1,30 @@
+.listContainer {
+ display: flex;
+ justify-content: space-evenly;
+ border-bottom: 1px solid #b9b9b9;
+ margin: auto;
+ width: 95%;
+
+ @media screen and (min-width: 1920px) {
+ width: 75%;
+ }
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ border-top: 1px solid #b9b9b9;
+ }
+}
+
+.contentItem {
+ display: flex;
+ padding: 62px 52px 0;
+
+ @media screen and (min-width: 1920px) {
+ padding: 62px 360px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ padding: 16px 40px;
+ border-bottom: 1px solid #b9b9b9;
+ }
+}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index daf3adb..f83139d 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,4 +1,8 @@
-$color-black: #292929;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
+
+$font-family: "Open Sans";
+
+$color-black: #000000;
$color-white: #fff;
@@ -7,6 +11,14 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
+$color-gray6: #575757;
+$color-gray7: rgba(146, 146, 146, 0.48);
+$color-gray8: #929292;
+$color-gray9: #989898;
+$color-gray10: rgba(185, 185, 185, 0.6);
+$color-gray11: #868686;
+$color-gray12: #afafaf;
+$color-gray13: #b9b9b9;
$color-blue: #4267b2;
@@ -14,18 +26,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;