feat:#3 Slider produtos
This commit is contained in:
parent
9f7b199cde
commit
62c4042a25
@ -3,46 +3,26 @@
|
||||
"props": {
|
||||
"position": "bottom"
|
||||
},
|
||||
"children": ["flex-layout.row#buy-button"]
|
||||
},
|
||||
"product-assembly-options": {
|
||||
"children": [
|
||||
"flex-layout.row#product-assembly-options",
|
||||
"assembly-option-input-values"
|
||||
]
|
||||
"children": ["html#buy-button"]
|
||||
},
|
||||
|
||||
"assembly-option-input-values": {
|
||||
"props": {
|
||||
"optionsDisplay": "box"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-assembly-options": {
|
||||
"props": {
|
||||
"colGap": 2,
|
||||
"preserveLayoutOnMobile": true,
|
||||
"colSizing": "auto"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.col#product-assembly-image",
|
||||
"flex-layout.col#product-assembly-middle",
|
||||
"flex-layout.col#product-assembly-quantity"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.col#product-assembly-quantity": {
|
||||
"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 +76,7 @@
|
||||
"horizontalAlign": "right",
|
||||
"verticalAlign": "middle"
|
||||
},
|
||||
"children": [
|
||||
"assembly-option-item-quantity-selector"
|
||||
]
|
||||
"children": ["assembly-option-item-quantity-selector"]
|
||||
},
|
||||
"assembly-option-item-customize#sec-level": {
|
||||
"props": {
|
||||
|
||||
@ -1,83 +1,63 @@
|
||||
{
|
||||
"product-specification-group#table": {
|
||||
"children": [
|
||||
"flex-layout.row#spec-group"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#spec-group": {
|
||||
"props": {
|
||||
"blockClass": "productSpecificationGroup"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.col#spec-group"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#spec-group": {
|
||||
"children": [
|
||||
"flex-layout.row#spec-group-name",
|
||||
"product-specification"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#spec-group-name": {
|
||||
"props": {
|
||||
"blockClass": "productSpecificationGroupName"
|
||||
},
|
||||
"children": [
|
||||
"product-specification-text#group"
|
||||
]
|
||||
},
|
||||
"product-specification": {
|
||||
"children": [
|
||||
"flex-layout.row#spec-item"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#spec-item": {
|
||||
"props": {
|
||||
"blockClass": "productSpecification"
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.col#spec-name",
|
||||
"flex-layout.col#spec-value"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#spec-name": {
|
||||
"props": {
|
||||
"blockClass": "productSpecificationName",
|
||||
"width": {
|
||||
"mobile": "50%",
|
||||
"desktop": "25%"
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
"product-specification-text#specification"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#spec-value": {
|
||||
"props": {
|
||||
"blockClass": "productSpecificationValue"
|
||||
},
|
||||
"children": [
|
||||
"product-specification-values"
|
||||
]
|
||||
},
|
||||
"product-specification-values": {
|
||||
"children": [
|
||||
"product-specification-text#value"
|
||||
]
|
||||
},
|
||||
"product-specification-text#group": {
|
||||
"props": {
|
||||
"message": "{groupName}"
|
||||
}
|
||||
},
|
||||
"product-specification-text#specification": {
|
||||
"props": {
|
||||
"message": "{specificationName}"
|
||||
}
|
||||
},
|
||||
"product-specification-text#value": {
|
||||
"props": {
|
||||
"message": "{specificationValue}"
|
||||
}
|
||||
}
|
||||
// "product-specification-group#table": {
|
||||
// "children": ["flex-layout.row#spec-group"]
|
||||
// },
|
||||
// "flex-layout.row#spec-group": {
|
||||
// "props": {
|
||||
// "blockClass": "productSpecificationGroup"
|
||||
// },
|
||||
// "children": ["flex-layout.col#spec-group"]
|
||||
// },
|
||||
// "flex-layout.col#spec-group": {
|
||||
// "children": ["flex-layout.row#spec-group-name", "product-specification"]
|
||||
// },
|
||||
// "flex-layout.row#spec-group-name": {
|
||||
// "props": {
|
||||
// "blockClass": "productSpecificationGroupName"
|
||||
// },
|
||||
// "children": ["product-specification-text#group"]
|
||||
// },
|
||||
// "product-specification": {
|
||||
// "children": ["flex-layout.row#spec-item"]
|
||||
// },
|
||||
// "flex-layout.row#spec-item": {
|
||||
// "props": {
|
||||
// "blockClass": "productSpecification"
|
||||
// },
|
||||
// "children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"]
|
||||
// },
|
||||
// "flex-layout.col#spec-name": {
|
||||
// "props": {
|
||||
// "blockClass": "productSpecificationName",
|
||||
// "width": {
|
||||
// "mobile": "50%",
|
||||
// "desktop": "25%"
|
||||
// }
|
||||
// },
|
||||
// "children": ["product-specification-text#specification"]
|
||||
// },
|
||||
// "flex-layout.col#spec-value": {
|
||||
// "props": {
|
||||
// "blockClass": "productSpecificationValue"
|
||||
// },
|
||||
// "children": ["product-specification-values"]
|
||||
// },
|
||||
// "product-specification-values": {
|
||||
// "children": ["product-specification-text#value"]
|
||||
// },
|
||||
// "product-specification-text#group": {
|
||||
// "props": {
|
||||
// "message": "{groupName}"
|
||||
// }
|
||||
// },
|
||||
// "product-specification-text#specification": {
|
||||
// "props": {
|
||||
// "message": "{specificationName}"
|
||||
// }
|
||||
// },
|
||||
// "product-specification-text#value": {
|
||||
// "props": {
|
||||
// "message": "{specificationValue}"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@ -6,9 +6,7 @@
|
||||
"preventHorizontalStretch": true,
|
||||
"marginBottom": 4
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price"
|
||||
]
|
||||
"children": ["product-selling-price"]
|
||||
},
|
||||
|
||||
"flex-layout.row#list-price-savings": {
|
||||
@ -19,9 +17,6 @@
|
||||
"marginBottom": 2,
|
||||
"marginTop": 5
|
||||
},
|
||||
"children": [
|
||||
"product-list-price",
|
||||
"product-price-savings"
|
||||
]
|
||||
"children": ["product-list-price", "product-price-savings"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"product-summary.shelf#listLayout": {
|
||||
"product-summary.shelf# Layout": {
|
||||
"props": {
|
||||
"blockClass": "listLayout"
|
||||
},
|
||||
@ -9,14 +9,10 @@
|
||||
]
|
||||
},
|
||||
"responsive-layout.desktop#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListDesktop"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListDesktop"]
|
||||
},
|
||||
"responsive-layout.mobile#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListMobile"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListMobile"]
|
||||
},
|
||||
"product-price-savings#summaryPercentage": {
|
||||
"props": {
|
||||
@ -36,7 +32,7 @@
|
||||
]
|
||||
},
|
||||
"flex-layout.row#summaryListDesktop": {
|
||||
"props":{
|
||||
"props": {
|
||||
"fullWidth": true,
|
||||
"colSizing": "auto",
|
||||
"blockClass": "summaryListDesktop"
|
||||
@ -69,9 +65,7 @@
|
||||
]
|
||||
},
|
||||
"flex-layout.row#productSpecifications": {
|
||||
"children": [
|
||||
"product-specification-group#summary"
|
||||
]
|
||||
"children": ["product-specification-group#summary"]
|
||||
},
|
||||
"product-summary-name#summaryListDesktop": {
|
||||
"props": {
|
||||
@ -100,18 +94,13 @@
|
||||
"colSizing": "auto",
|
||||
"colGap": 5
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button",
|
||||
"flex-layout.row#buyNowButton"
|
||||
]
|
||||
"children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
|
||||
},
|
||||
"flex-layout.row#buyNowButton": {
|
||||
"props": {
|
||||
"blockClass": "buyNowButton"
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button#buyNow"
|
||||
]
|
||||
"children": ["add-to-cart-button#buyNow"]
|
||||
},
|
||||
|
||||
"add-to-cart-button#buyNow": {
|
||||
@ -123,16 +112,12 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#priceSummaryListDesktop": {
|
||||
"children": [
|
||||
"product-selling-price#summary",
|
||||
"product-list-price#summary"
|
||||
]
|
||||
"children": ["product-selling-price#summary", "product-list-price#summary"]
|
||||
},
|
||||
"stack-layout#summaryListDesktop": {
|
||||
"children": [
|
||||
"product-summary-image#summaryListDesktop",
|
||||
"vtex.product-highlights@2.x:product-highlights#collection",
|
||||
"modal-trigger#quickview" // Check quickview.jsonc
|
||||
"vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
|
||||
]
|
||||
},
|
||||
"product-summary-image#summaryListDesktop": {
|
||||
@ -144,7 +129,7 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.row#summaryListMobile": {
|
||||
"props":{
|
||||
"props": {
|
||||
"preserveLayoutOnMobile": true,
|
||||
"colSizing": "auto",
|
||||
"blockClass": "summaryListMobile",
|
||||
@ -158,8 +143,7 @@
|
||||
"stack-layout#summaryListMobile": {
|
||||
"children": [
|
||||
"product-summary-image#summaryListMobile",
|
||||
"vtex.product-highlights@2.x:product-highlights#collection",
|
||||
"modal-trigger#quickview" // Check quickview.jsonc
|
||||
"vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
|
||||
]
|
||||
},
|
||||
"product-summary-image#summaryListMobile": {
|
||||
|
||||
@ -6,9 +6,7 @@
|
||||
"flex-layout.col#productRating",
|
||||
"product-summary-space",
|
||||
"product-list-price#summary",
|
||||
"flex-layout.row#selling-price-savings",
|
||||
"product-installments#summary",
|
||||
"add-to-cart-button"
|
||||
"flex-layout.row#selling-price-savings"
|
||||
]
|
||||
},
|
||||
"flex-layout.col#productRating": {
|
||||
@ -21,8 +19,7 @@
|
||||
"stack-layout#prodsum": {
|
||||
"children": [
|
||||
"product-summary-image#shelf",
|
||||
"vtex.product-highlights@2.x:product-highlights#collection",
|
||||
"modal-trigger#quickview" // Check quickview.jsonc
|
||||
"vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
|
||||
]
|
||||
},
|
||||
|
||||
@ -62,7 +59,8 @@
|
||||
"colGap": 2,
|
||||
"preserveLayoutOnMobile": true,
|
||||
"preventHorizontalStretch": true,
|
||||
"marginBottom": 4
|
||||
"marginBottom": 4,
|
||||
"blockClass": "container-price-slider"
|
||||
},
|
||||
"children": [
|
||||
"product-selling-price#summary",
|
||||
@ -81,10 +79,23 @@
|
||||
},
|
||||
"product-price-savings#summary": {
|
||||
"props": {
|
||||
"markers": [
|
||||
"discount"
|
||||
],
|
||||
"markers": ["discount"],
|
||||
"blockClass": "summary"
|
||||
}
|
||||
},
|
||||
|
||||
"list-context.product-list#container-products": {
|
||||
"blocks": ["product-summary.shelf"],
|
||||
"children": ["html#slider-layout#demo-products"]
|
||||
},
|
||||
|
||||
"rich-text#slider-text": {
|
||||
"props": {
|
||||
"text": "#### Você também pode gostar:",
|
||||
"textAlignment": "CENTER",
|
||||
"textPosition": "CENTER",
|
||||
"textColor": "#575757",
|
||||
"blockClass": "slider-text"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,7 +108,10 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.row#searchinfo": {
|
||||
"children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
|
||||
"children": [
|
||||
"flex-layout.col#productCount",
|
||||
"flex-layout.row#orderByAndSwitcher"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#orderByAndSwitcher": {
|
||||
"children": ["order-by.v2", "gallery-layout-switcher"],
|
||||
@ -254,7 +257,7 @@
|
||||
"itemsPerRow": 1
|
||||
}
|
||||
],
|
||||
"ListSummary": "product-summary.shelf#listLayout",
|
||||
// "ListSummary": "product-summary.shelf#listLayout",
|
||||
"GridSummary": "product-summary.shelf"
|
||||
}
|
||||
},
|
||||
@ -272,29 +275,19 @@
|
||||
"props": {
|
||||
"name": "grid"
|
||||
},
|
||||
"children": [
|
||||
"icon-grid",
|
||||
"responsive-layout.desktop#textOptionGrid"
|
||||
]
|
||||
"children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
|
||||
},
|
||||
"gallery-layout-option#list": {
|
||||
"props": {
|
||||
"name": "list"
|
||||
},
|
||||
"children": [
|
||||
"icon-inline-grid",
|
||||
"responsive-layout.desktop#textOptionList"
|
||||
]
|
||||
"children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
|
||||
},
|
||||
"responsive-layout.desktop#textOptionGrid": {
|
||||
"children": [
|
||||
"rich-text#option-grid"
|
||||
]
|
||||
"children": ["rich-text#option-grid"]
|
||||
},
|
||||
"responsive-layout.desktop#textOptionList": {
|
||||
"children": [
|
||||
"rich-text#option-list"
|
||||
]
|
||||
"children": ["rich-text#option-list"]
|
||||
},
|
||||
"rich-text#option-grid": {
|
||||
"props": {
|
||||
|
||||
12
styles/css/vtex.button.css
Normal file
12
styles/css/vtex.button.css
Normal file
@ -0,0 +1,12 @@
|
||||
/*
|
||||
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 */
|
||||
.buttonText {
|
||||
font-size: 0;
|
||||
}
|
||||
@ -1,98 +1,99 @@
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80rem) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--menu-link {
|
||||
background-color: #03044e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.flexRowContent--main-header-mobile {
|
||||
align-items: center;
|
||||
padding: 0.625rem 0.5rem;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 */
|
||||
/* Grid breakpoints */
|
||||
.flexRowContent--container-main {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 1919px) {
|
||||
.flexRowContent--container-main {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--container-main {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) {
|
||||
margin-left: 32px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
|
||||
background-color: #000;
|
||||
border: none;
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
|
||||
font-size: 0;
|
||||
}
|
||||
.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
|
||||
font-family: "Open sans", sans-serif;
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
.flexRow--container-price-slider {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--product-description {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--product-description :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRow--product-description :global(.vtex-store-components-3-x-container) {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRow--container-newsletter {
|
||||
margin-top: 64px;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
.flexRow--container-newsletter .flexRowContent--container-newsletter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flexRow--container-newsletter .flexRowContent--container-newsletter .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
.flexRow--container-newsletter .flexRowContent--container-newsletter .flexRowContent--text-newsletter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
.productHighlightWrapper--collection {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.productHighlightText {
|
||||
background: antiquewhite;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
/*
|
||||
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 */
|
||||
.productHighlightWrapper {
|
||||
display: none;
|
||||
}
|
||||
@ -1,42 +1,18 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
.nameContainer {
|
||||
justify-content: start;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.brandName {
|
||||
font-weight: 600;
|
||||
.nameContainer .productNameContainer .productBrand {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
@ -1,31 +1,26 @@
|
||||
/*
|
||||
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 */
|
||||
.sliderLayoutContainer {
|
||||
justify-content: center;
|
||||
padding: 0 67px 36px 67px;
|
||||
}
|
||||
.sliderLayoutContainer .slide--carousel {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
.sliderRightArrow {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
}
|
||||
.sliderLeftArrow {
|
||||
margin-left: 25px;
|
||||
}
|
||||
@ -1,10 +1,12 @@
|
||||
.stackItem--product {
|
||||
width: 100%;
|
||||
min-height: 257px
|
||||
}
|
||||
|
||||
.stackItem--quickview {
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: auto;
|
||||
}
|
||||
/*
|
||||
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 */
|
||||
.stackItem--first .stackItem {
|
||||
display: none;
|
||||
}
|
||||
42
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
42
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,42 @@
|
||||
.quantitySelectorContainer {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
@include mq(sm, max) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
height: 49px;
|
||||
width: 31px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 1px solid $color-gray4;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
color: $color-gray6;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__plus-button) {
|
||||
height: 49px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
border-right: 1px solid $color-gray4;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
border-top: 1px solid $color-gray4;
|
||||
background: $color-white;
|
||||
color: $color-black;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__minus-button) {
|
||||
height: 49px;
|
||||
width: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
border-left: 1px solid $color-gray4;
|
||||
border-bottom: 1px solid $color-gray4;
|
||||
border-top: 1px solid $color-gray4;
|
||||
background: $color-white;
|
||||
color: $color-black;
|
||||
}
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
76
styles/sass/pages/text/vtex.rich-text.scss
Normal file
76
styles/sass/pages/text/vtex.rich-text.scss
Normal file
@ -0,0 +1,76 @@
|
||||
.heading {
|
||||
margin: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.wrapper--message-newsletter {
|
||||
margin-top: 16px;
|
||||
|
||||
.paragraph--message-newsletter {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
color: $color-white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 18px;
|
||||
color: $color-gray6;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
@include mq(sm, max) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.container--title-newsletter {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin: 32px 0 16px 0;
|
||||
padding: 0 40px;
|
||||
@include mq(md, max) {
|
||||
margin: 64px 0 16px 0;
|
||||
}
|
||||
@include mq(sm, max) {
|
||||
padding: 0;
|
||||
}
|
||||
.wrapper--title-newsletter {
|
||||
align-items: center;
|
||||
.paragraph--title-newsletter {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper--email-phrase-newsletter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 40px;
|
||||
@include mq(sm, max) {
|
||||
padding: 0;
|
||||
}
|
||||
.wrapper--email-phrase-newsletter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.paragraph--email-phrase-newsletter {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-gray6;
|
||||
@include mq(md, max) {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user