feat: adiciona css breadcrumb 1440px

This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-26 16:53:58 -03:00
parent 707fa7ad3f
commit 21ab5ef045
14 changed files with 398 additions and 23 deletions

View File

@ -15,6 +15,7 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",

View File

@ -4,7 +4,7 @@
"blockClass": "addToCart", "blockClass": "addToCart",
"addToCartFeedback": "customEvent", "addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button", "customPixelEventId": "add-to-cart-button",
"width": "73%", "width": "75%",
"text": "ADICIONAR À SACOLA" "text": "ADICIONAR À SACOLA"
} }
}, },

View File

@ -2,7 +2,7 @@
"store.product": { "store.product": {
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "flex-layout.row#product-container",
"flex-layout.row#description", "flex-layout.row#description",
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"product-specification-group#table", "product-specification-group#table",
@ -32,6 +32,13 @@
}, },
"children": ["product-description"] "children": ["product-description"]
}, },
"flex-layout.row#product-container": {
"props": {
"blockClass": "product-container"
},
"children": ["condition-layout.product#availability"]
},
"condition-layout.product#availability": { "condition-layout.product#availability": {
"props": { "props": {
"conditions": [ "conditions": [
@ -109,7 +116,8 @@
"product-identifier.product", "product-identifier.product",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", // "product-installments",
"rich-text#product-installments",
"sku-selector", "sku-selector",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "flex-layout.row#buy-button",
@ -133,10 +141,14 @@
} }
}, },
"product-installments": { // "product-installments": {
// "children": ["rich-text#product-installments"]
// },
"rich-text#product-installments": {
"props": { "props": {
"markers": ["parcelas", "valor"], "text": "**36 x** de **R$ 2,17** sem juros",
"message": "36 x de R$ 2,17 sem juros" "blockClass": "product-installments"
} }
}, },
@ -160,7 +172,7 @@
"blockClass": "addToCartQuantity", "blockClass": "addToCartQuantity",
"showLabel": false, "showLabel": false,
"size": "large", "size": "large",
"width": "24%" "width": "25%"
} }
}, },

View File

@ -7,10 +7,8 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html {
background-color: red;
}
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
background-color: green; display: flex;
justify-content: center;
padding: 0 40px;
} }

View 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 */
.paragraph--product-installments {
margin: 0;
}

View File

@ -1,3 +1,18 @@
@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 */
.container {
width: 100%;
max-width: 1920px;
}
.termArrow, .termArrow,
.term { .term {
display: none; display: none;

View File

@ -7,6 +7,10 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.flexRowContent {
padding: 0;
}
.flexRowContent--menu-link, .flexRowContent--menu-link,
.flexRowContent--main-header { .flexRowContent--main-header {
padding: 0 0.5rem; padding: 0 0.5rem;
@ -113,3 +117,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
.flexRowContent--product-container {
padding: 0 40px;
}

View File

@ -7,3 +7,6 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.paragraph--product-installments {
margin: 0;
}

View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -73,7 +74,7 @@
.skuSelectorSubcontainer--cor .skuSelectorName::after { .skuSelectorSubcontainer--cor .skuSelectorName::after {
display: block; display: block;
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-size: 16px; font-size: 14px;
} }
.skuSelectorSubcontainer--tamanho { .skuSelectorSubcontainer--tamanho {
@ -85,7 +86,7 @@
.skuSelectorSubcontainer--tamanho .skuSelectorName::after { .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
display: block; display: block;
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-size: 16px; font-size: 14px;
} }
.productImagesThumb .figure .thumbImg { .productImagesThumb .figure .thumbImg {
@ -93,3 +94,135 @@
height: 90px; height: 90px;
border-radius: 8px; border-radius: 8px;
} }
.shippingContainer {
display: flex;
position: relative;
max-width: 664px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
font-size: 14px;
display: block;
content: "CALCULAR FRETE:";
}
.shippingContainer :global(.vtex-input-prefix__group) {
border: 1px solid #cccccc;
border-radius: 0;
height: 49px;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
position: absolute;
left: 33.4%;
top: 32%;
background: #292929;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
font-size: 14px;
font-weight: 600;
color: #fff;
display: block;
content: "OK";
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-size: 0;
visibility: hidden;
position: absolute;
left: 43%;
top: 36%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
visibility: visible;
content: "Não sei meu CEP";
font-size: 12px;
color: #292929;
text-decoration-line: underline;
}
.shippingTable {
border: none;
padding: 0;
}
.shippingTableHead {
display: flex;
}
.shippingTableRow {
position: relative;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
font-size: 0;
}
.shippingTableHeadDeliveryName::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Entrega";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableHeadDeliveryEstimate {
font-size: 0;
position: absolute;
top: 5%;
left: 242%;
}
.shippingTableHeadDeliveryEstimate::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Prazo";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
position: absolute;
top: 5%;
left: 138%;
}
.shippingTableHeadDeliveryPrice::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Frete";
text-transform: uppercase;
display: block;
color: #292929;
}
.shippingTableRadioBtn {
display: none;
}

View File

@ -1,8 +1,9 @@
.html { // .html {
background-color: red; // background-color: red;
} // }
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
background-color: green; display: flex;
justify-content: center;
padding: 0 40px;
} }

View File

@ -0,0 +1,44 @@
.container {
width: 100%;
max-width: 1920px;
}
.termArrow,
.term {
display: none;
}
.homeLink {
visibility: hidden;
position: relative;
margin-right: 15px;
}
.homeLink::after {
visibility: visible;
display: block;
content: "Home";
font-size: 16px;
position: absolute;
top: 20%;
}
.link--1 {
font-size: 0;
}
.link--1::after {
display: block;
content: "Sapatos";
font-size: 16px;
}
.link--2 {
font-size: 0;
}
.link--2::after {
display: block;
content: "Sandálias";
font-size: 16px;
}

View File

@ -1,3 +1,7 @@
.flexRowContent {
padding: 0;
}
.flexRowContent--menu-link, .flexRowContent--menu-link,
.flexRowContent--main-header { .flexRowContent--main-header {
padding: 0 0.5rem; padding: 0 0.5rem;
@ -106,3 +110,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
.flexRowContent--product-container {
padding: 0 40px;
}

View File

@ -0,0 +1,3 @@
.paragraph--product-installments {
margin: 0;
}

View File

@ -2,6 +2,11 @@
background: red; background: red;
} }
// .container {
// display: flex;
// justify-content: center;
// }
.productBrand--quickview { .productBrand--quickview {
display: flex; display: flex;
justify-content: end; justify-content: end;
@ -64,7 +69,7 @@
&::after { &::after {
display: block; display: block;
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-size: 16px; font-size: 14px;
} }
} }
} }
@ -78,7 +83,7 @@
&::after { &::after {
display: block; display: block;
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-size: 16px; font-size: 14px;
} }
} }
} }
@ -92,3 +97,135 @@
} }
} }
} }
.shippingContainer {
display: flex;
position: relative;
max-width: 664px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding: 0;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
font-size: 14px;
display: block;
content: "CALCULAR FRETE:";
}
.shippingContainer :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray6;
border-radius: 0;
height: 49px;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
position: absolute;
left: 33.4%;
top: 32%;
background: $color-black;
border: none;
border-radius: 0;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
font-size: 14px;
font-weight: 600;
color: $color-white;
display: block;
content: "OK";
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-size: 0;
visibility: hidden;
position: absolute;
left: 43%;
top: 36%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
visibility: visible;
content: "Não sei meu CEP";
font-size: 12px;
color: $color-black;
text-decoration-line: underline;
}
.shippingTable {
border: none;
padding: 0;
}
.shippingTableHead {
display: flex;
}
.shippingTableRow {
position: relative;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
font-size: 0;
}
.shippingTableHeadDeliveryName::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Entrega";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableHeadDeliveryEstimate {
font-size: 0;
position: absolute;
top: 5%;
left: 242%;
}
.shippingTableHeadDeliveryEstimate::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Prazo";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
position: absolute;
top: 5%;
left: 138%;
}
.shippingTableHeadDeliveryPrice::after {
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "Frete";
text-transform: uppercase;
display: block;
color: $color-black;
}
.shippingTableRadioBtn {
display: none;
}