diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 5278ee3..7d0117b 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,7 +1,6 @@
/*
CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
*/
-
[class*="html--buy-button"] :global(.vtex-button) {
min-height: 49px;
padding: 12px 64px;
@@ -33,11 +32,6 @@
}
}
-[class*="html--product-quantity"] {
- width: 128px;
- margin-right: 10px;
-}
-
/*
DESCRIÇÃO DO PRODUTO SELECIONADO
*/
diff --git a/react/components/PixDiscount/styles.module.css b/react/components/PixDiscount/styles.module.css
index 48a71c8..75d8e17 100644
--- a/react/components/PixDiscount/styles.module.css
+++ b/react/components/PixDiscount/styles.module.css
@@ -1,12 +1,13 @@
.wrapper {
display: flex;
+ align-items: center;
margin: 8px 0 16px 0;
height: 39px;
}
.container-img{
- margin-right: 26px;
- display: flex;
- align-items: center;
+ width: 66px;
+ margin-right: 26px;
+ height: 24px;
}
.figure-pix{
margin: 0;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 66ef4be..d21bd09 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -412,7 +412,7 @@
"flex-layout.row#product-name": {
"props": {
- "marginBottom": 3
+ "blockClass": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
diff --git a/styles/configs/font-faces.scss b/styles/configs/font-faces.scss
index 6db8519..6b6e852 100644
--- a/styles/configs/font-faces.scss
+++ b/styles/configs/font-faces.scss
@@ -1,4 +1,4 @@
@font-face {
font-family: "Open Sans", "sans-serif";
- src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
+ src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");
}
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 610bc6f..9ef9ca1 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -9,7 +9,16 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
- padding: 16px 40px;
+ padding: 0;
+ margin: 0 40px 16px 40px;
+ height: 20.12px;
+ display: flex;
+ align-items: center;
+}
+@media only screen and (min-width: 1921px) {
+ .container {
+ margin: 0 360px 16px 360px;
+ }
}
.container .homeLink {
display: none;
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index ab160a8..80be301 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -14,42 +14,63 @@
}
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
+.flexRow--main {
+ padding: 0 40px;
+}
+@media only screen and (min-width: 1921px) {
+ .flexRow--main {
+ padding: 0 360px;
+ }
+}
@media only screen and (max-width: 1024px) {
- .flexRowContent--main {
+ .flexRow--main .flexRowContent--main {
display: block;
}
}
@media only screen and (max-width: 1024px) {
- .flexRowContent--main .stretchChildrenWidth {
+ .flexRow--main .flexRowContent--main .stretchChildrenWidth {
width: 100% !important;
}
}
-.flexRowContent--main .stretchChildrenWidth .flexCol--stack {
- padding-left: 40px;
-}
@media only screen and (max-width: 1024px) {
- .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
- padding: 0 40px;
+ .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
width: 100%;
}
}
-.flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
- padding-right: 40px;
+.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack {
+ margin-right: 16px;
+}
+@media only screen and (max-width: 1024px) {
+ .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack {
+ margin: 0;
+ }
+}
+.flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
margin-left: 16px;
}
@media only screen and (max-width: 1024px) {
- .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
- padding: 0 40px;
- margin-left: 0;
+ .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
+ margin: 0;
}
}
+.flexRow--product-name {
+ width: 100%;
+ min-height: 34px;
+ margin-bottom: 8px;
+}
+
/* ASSINANTE DE PRODUTO INDISPONIVEL */
.flexRowContent--product-availability {
padding: 0;
margin: 0;
padding: 0 40px;
}
+@media only screen and (min-width: 1921px) {
+ .flexRowContent--product-availability {
+ padding: 0 360px;
+ }
+}
@media only screen and (max-width: 1024px) {
.flexRowContent--product-availability {
display: block;
@@ -103,7 +124,12 @@
}
@media only screen and (max-width: 1024px) {
.flexRow--newsletter-container {
- margin-top: 34px;
+ margin-top: 64px;
+ }
+}
+@media only screen and (max-width: 768px) {
+ .flexRow--newsletter-container {
+ margin-top: 32px;
}
}
.flexRow--newsletter-container .flexRowContent--newsletter-container {
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 8fa6cf2..bdd40fc 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -10,7 +10,7 @@
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer {
height: 49px;
- width: 100%;
+ width: 128px;
margin: 0 10px 0 0;
}
@media only screen and (max-width: 768px) {
@@ -21,9 +21,6 @@
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
-.quantitySelectorContainer .quantitySelectorStepper {
- height: 49px;
-}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
width: 31.6px;
height: 49px;
@@ -39,20 +36,33 @@
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: #fff;
- font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
+ font-weight: 400;
+ width: 10px;
+ height: 12px;
+ align-items: center;
+ display: flex;
+ justify-content: space-evenly;
+}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
height: 49px;
- width: 10px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: #fff;
- font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
+ font-weight: 400;
+ width: 10px;
+ height: 12px;
+ align-items: center;
+ display: flex;
+ justify-content: space-evenly;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 05173a4..36fcad9 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -32,7 +32,7 @@
}
@media only screen and (max-width: 768px) {
.containerNormal .element .imageContainer--image-prateleira {
- height: 124.81px;
+ height: 124.82px;
}
}
.containerNormal .element .imageContainer--image-prateleira .imageNormal {
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index a9810ba..e12ff5d 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -11,6 +11,12 @@
padding-left: 40px !important;
padding-right: 40px !important;
}
+@media only screen and (min-width: 1921px) {
+ .sliderLayoutContainer--prateleira {
+ padding-left: 360px !important;
+ padding-right: 360px !important;
+ }
+}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
padding: 0 19.2px 49px 19.2px;
}
@@ -21,7 +27,7 @@
}
@media only screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
- padding: 0 14.7px 33px 14.7px;
+ padding: 0 14.7px 32px 14.7px;
}
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
@@ -35,6 +41,7 @@
@media only screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
margin: 0 4px;
+ width: 7.1111% !important;
}
}
@media only screen and (max-width: 768px) {
@@ -60,10 +67,17 @@
visibility: hidden;
margin: 0 0 0 40px;
padding: 0;
- height: 29.6px;
+ height: 29.61px;
width: 11.21px;
}
+@media only screen and (min-width: 1921px) {
+ .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
+ margin: 0 0 0 360px;
+ }
+}
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before {
+ width: 11.21px;
+ height: 29.61px;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
}
@@ -74,6 +88,11 @@
height: 29.6px;
width: 11.21px;
}
+@media only screen and (min-width: 1921px) {
+ .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
+ margin: 0 360px 0 0;
+ }
+}
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");
diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css
index 7149eb7..6e41b0e 100644
--- a/styles/css/vtex.stack-layout.css
+++ b/styles/css/vtex.stack-layout.css
@@ -1,6 +1,6 @@
.stackItem--product {
width: 100%;
- min-height: 257px
+ min-height: 100%
}
.stackItem--quickview {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f0cf8df..b9dc8d2 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -21,25 +21,18 @@
margin: 0;
}
}
-.productImagesGallerySlide .productImage {
- margin-right: 16px;
-}
-@media only screen and (max-width: 1024px) {
- .productImagesGallerySlide .productImage {
- margin: 0;
- }
-}
-.productImagesGallerySlide .productImage .productImageTag--main {
+.productImagesGallerySlide .productImageTag--main {
max-height: 100% !important;
}
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs {
- margin: 16px 0;
+ margin: 16px 16px 0 0;
}
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
.carouselGaleryThumbs {
display: block;
+ margin: 16px 0 32px 0;
}
}
.carouselGaleryThumbs .thumbImg {
@@ -58,7 +51,7 @@
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
.productNameContainer--quickview {
- text-align: end;
+ text-align: right;
font-weight: 300;
font-size: 20px;
line-height: 34px;
@@ -117,26 +110,30 @@
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
border: 2px solid #000000;
}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross {
+ margin: 6px;
+ width: 36px;
+ background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%);
+}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
- font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
- margin: 8px 0 0 0;
- height: 40px;
+ min-height: 40px;
+ margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
- margin: 0 16px 0 0;
+ margin: 8px 16px 0 0;
width: 40px;
height: 40px;
}
@@ -173,6 +170,11 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
color: #000000 !important;
}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .diagonalCross {
+ margin: 6px;
+ width: 30px;
+ background-image: linear-gradient(to top right, transparent 44%, #000000 48%, currentColor 48%, currentColor 0, transparent 0%);
+}
.skuSelectorContainer .skuSelectorTextContainer {
display: none;
}
@@ -316,6 +318,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
.shippingContainer {
display: block;
max-width: 296px;
+ width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
@@ -455,14 +458,18 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
flex-direction: row;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
- margin-right: 39px;
+ min-width: 80px;
+ height: 19px;
+ margin-right: 32px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
+ text-align: start;
}
@media only screen and (max-width: 768px) {
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+ min-width: 69px;
margin-right: 32px;
}
}
@@ -476,7 +483,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0;
- margin-right: 30px;
+ min-width: 50px;
+ margin-right: 32px;
}
@media only screen and (max-width: 768px) {
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
@@ -495,8 +503,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
flex-direction: row;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
- width: 82px;
- margin-right: 28px;
+ min-width: 82px;
+ text-transform: capitalize;
+ margin-right: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@@ -516,8 +525,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
color: #afafaf;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
- width: 50px;
- margin-right: 28px;
+ min-width: 50px;
+ margin-right: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 8269c67..79944ab 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -11,6 +11,11 @@
padding: 0 40px;
margin: 16px 0;
}
+@media only screen and (min-width: 1921px) {
+ .container--description {
+ padding: 0 360px;
+ }
+}
.container--description .listContainer {
display: flex;
padding: 0 64px;
@@ -64,6 +69,11 @@
text-transform: capitalize;
border-bottom: 2px solid transparent;
}
+@media only screen and (max-width: 1024px) {
+ .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+ border-bottom: none;
+ }
+}
@media only screen and (min-width: 1921px) {
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px;
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index c54eb2c..217def0 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,5 +1,12 @@
.container {
- padding: 16px 40px;
+ padding: 0;
+ margin: 0 40px 16px 40px;
+ height: 20.12px;
+ display: flex;
+ align-items: center;
+ @include mq(xl, min) {
+ margin: 0 360px 16px 360px;
+ }
.homeLink {
display: none;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 7b31771..a4e5a10 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -4,37 +4,54 @@
}
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
-.flexRowContent--main {
- @include mq(md, max) {
- display: block;
+.flexRow--main {
+ padding: 0 40px;
+ @include mq(xl, min) {
+ padding: 0 360px;
}
- .stretchChildrenWidth {
+ .flexRowContent--main {
@include mq(md, max) {
- width: 100% !important;
+ display: block;
}
- .flexCol--stack {
- padding-left: 40px;
+ .stretchChildrenWidth {
@include mq(md, max) {
- padding: 0 40px;
- width: 100%;
+ width: 100% !important;
}
- }
- .flexCol--right-col {
- padding-right: 40px;
- margin-left: 16px;
- @include mq(md, max) {
- padding: 0 40px;
- margin-left: 0;
+ .flexCol--stack {
+ @include mq(md, max) {
+ width: 100%;
+ }
+ .flexColChild--stack {
+ margin-right: 16px;
+ @include mq(md, max) {
+ margin: 0;
+ }
+ }
+ }
+ .flexCol--right-col {
+ margin-left: 16px;
+ @include mq(md, max) {
+ margin: 0;
+ }
}
}
}
}
+.flexRow--product-name {
+ width: 100%;
+ min-height: 34px;
+ margin-bottom: 8px;
+}
+
/* ASSINANTE DE PRODUTO INDISPONIVEL */
.flexRowContent--product-availability {
padding: 0;
margin: 0;
padding: 0 40px;
+ @include mq(xl, min) {
+ padding: 0 360px;
+ }
@include mq(md, max) {
display: block;
}
@@ -80,7 +97,10 @@
background-color: $color-black-padrao;
margin-top: 64px;
@include mq(md, max) {
- margin-top: 34px;
+ margin-top: 64px;
+ }
+ @include mq(sm, max) {
+ margin-top: 32px;
}
.flexRowContent--newsletter-container {
display: flex;
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 82e050a..c37437c 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -1,7 +1,7 @@
/* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer {
height: 49px;
- width: 100%;
+ width: 128px;
margin: 0 10px 0 0;
@include mq(sm, max) {
margin: 0 0 10px 0;
@@ -10,7 +10,6 @@
display: none;
}
.quantitySelectorStepper {
- height: 49px;
:global(.vtex-numeric-stepper__input) {
width: 31.6px;
height: 49px;
@@ -26,22 +25,35 @@
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: $color-white;
- font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-black-padrao;
+ :global(.vtex-numeric-stepper__plus-button__text) {
+ font-weight: 400;
+ width: 10px;
+ height: 12px;
+ align-items: center;
+ display: flex;
+ justify-content: space-evenly;
+ }
}
:global(.vtex-numeric-stepper__minus-button) {
height: 49px;
- width: 10px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background: $color-white;
- font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-black-padrao;
+ :global(.vtex-numeric-stepper__minus-button__text) {
+ font-weight: 400;
+ width: 10px;
+ height: 12px;
+ align-items: center;
+ display: flex;
+ justify-content: space-evenly;
+ }
}
}
}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 70d1bd0..e30b603 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -16,7 +16,7 @@
height: 291.21px;
}
@include mq(sm, max) {
- height: 124.81px;
+ height: 124.82px;
}
.imageNormal {
height: 100%;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 572cc4e..6a939f5 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,13 +1,17 @@
.sliderLayoutContainer--prateleira {
padding-left: 40px !important;
padding-right: 40px !important;
+ @include mq(xl, min) {
+ padding-left: 360px !important;
+ padding-right: 360px !important;
+ }
.sliderTrackContainer--prateleira {
padding: 0 19.2px 49px 19.2px;
@include mq(md, max) {
padding: 0 17.2px 41px 17.2px;
}
@include mq(sm, max) {
- padding: 0 14.7px 33px 14.7px;
+ padding: 0 14.7px 32px 14.7px;
}
.slide--prateleira {
margin: 0 8px;
@@ -16,6 +20,7 @@
}
@include mq(sm, max) {
margin: 0 4px;
+ width: 7.1111% !important;
}
}
@@ -44,9 +49,14 @@
visibility: hidden;
margin: 0 0 0 40px;
padding: 0;
- height: 29.6px;
+ height: 29.61px;
width: 11.21px;
+ @include mq(xl, min) {
+ margin: 0 0 0 360px;
+ }
&::before {
+ width: 11.21px;
+ height: 29.61px;
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
}
@@ -58,6 +68,9 @@
padding: 0;
height: 29.6px;
width: 11.21px;
+ @include mq(xl, min) {
+ margin: 0 360px 0 0;
+ }
&::after {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 881ac14..ad2fdbe 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -10,22 +10,18 @@
@include mq(md, max) {
margin: 0;
}
- .productImage {
- margin-right: 16px;
- @include mq(md, max) {
- margin: 0;
- }
- .productImageTag--main {
- max-height: 100% !important;
- }
+ .productImageTag--main {
+ max-height: 100% !important;
}
}
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs {
- margin: 16px 0;
- @include mq(sm, max) {
+ margin: 16px 16px 0 0;
+
+ @include mq(md, max) {
display: block;
+ margin: 16px 0 32px 0;
}
.thumbImg {
@@ -46,7 +42,7 @@
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/
.productNameContainer--quickview {
- text-align: end;
+ text-align: right;
font-weight: 300;
font-size: 20px;
line-height: 34px;
@@ -101,6 +97,18 @@
.frameAround--sku-selector {
border: 2px solid $color-black-padrao;
}
+ .diagonalCross {
+ margin: 6px;
+ width: 36px;
+ background-image: linear-gradient(
+ to top right,
+ transparent 44%,
+ $color-black-padrao 48%,
+ currentColor 48%,
+ currentColor 0,
+ transparent 0%
+ );
+ }
}
}
}
@@ -111,20 +119,19 @@
margin-bottom: 10px;
&::before {
content: "OUTROS TAMANHOS:";
- font-family: "Open Sans", sans-serif;
font-weight: 400;
line-height: 19px;
font-size: 14px;
color: $color-gray-6;
}
.skuSelectorNameContainer {
- margin: 8px 0 0 0;
- height: 40px;
+ min-height: 40px;
+ margin: 0;
.skuSelectorOptionsList {
margin: 0;
.skuSelectorItem--sku-selector {
- margin: 0 16px 0 0;
+ margin: 8px 16px 0 0;
width: 40px;
height: 40px;
.frameAround--sku-selector {
@@ -164,6 +171,18 @@
.skuSelectorItemTextValue {
color: $color-black-padrao !important;
}
+ .diagonalCross {
+ margin: 6px;
+ width: 30px;
+ background-image: linear-gradient(
+ to top right,
+ transparent 44%,
+ $color-black-padrao 48%,
+ currentColor 48%,
+ currentColor 0,
+ transparent 0%
+ );
+ }
}
}
}
@@ -317,6 +336,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
@include mq(sm, max) {
display: block;
max-width: 296px;
+ width: 100%;
}
:global(.vtex-address-form__postalCode) {
display: flex;
@@ -445,12 +465,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex;
flex-direction: row;
.shippingTableHeadDeliveryName {
- margin-right: 39px;
+ min-width: 80px;
+ height: 19px;
+ margin-right: 32px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
+ text-align: start;
@include mq(sm, max) {
+ min-width: 69px;
margin-right: 32px;
}
}
@@ -465,7 +489,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
.shippingTableHeadDeliveryPrice {
font-size: 0;
- margin-right: 30px;
+ min-width: 50px;
+ margin-right: 32px;
@include mq(sm, max) {
margin-right: 32px;
}
@@ -485,8 +510,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex;
flex-direction: row;
.shippingTableCellDeliveryName {
- width: 82px;
- margin-right: 28px;
+ min-width: 82px;
+ text-transform: capitalize;
+ margin-right: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@@ -506,8 +532,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
}
.shippingTableCellDeliveryPrice {
- width: 50px;
- margin-right: 28px;
+ min-width: 50px;
+ margin-right: 32px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index fd46af1..b24ce29 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,6 +1,9 @@
.container--description {
padding: 0 40px;
margin: 16px 0;
+ @include mq(xl, min) {
+ padding: 0 360px;
+ }
.listContainer {
display: flex;
padding: 0 64px;
@@ -44,6 +47,9 @@
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid transparent;
+ @include mq(md, max) {
+ border-bottom: none;
+ }
@include mq(xl, min) {
font-size: 24px;
line-height: 38px;