fix: correção geral de responsividade e elementos da pagina de produto #8

Merged
Thiago.bronisio merged 1 commits from bug-fix/pagina-product into master 2023-02-10 02:52:16 +00:00
19 changed files with 267 additions and 105 deletions
Showing only changes of commit ea5740cfd6 - Show all commits

View File

@ -1,7 +1,6 @@
/* /*
CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO
*/ */
[class*="html--buy-button"] :global(.vtex-button) { [class*="html--buy-button"] :global(.vtex-button) {
min-height: 49px; min-height: 49px;
padding: 12px 64px; padding: 12px 64px;
@ -33,11 +32,6 @@
} }
} }
[class*="html--product-quantity"] {
width: 128px;
margin-right: 10px;
}
/* /*
DESCRIÇÃO DO PRODUTO SELECIONADO DESCRIÇÃO DO PRODUTO SELECIONADO
*/ */

View File

@ -1,12 +1,13 @@
.wrapper { .wrapper {
display: flex; display: flex;
align-items: center;
margin: 8px 0 16px 0; margin: 8px 0 16px 0;
height: 39px; height: 39px;
} }
.container-img{ .container-img{
margin-right: 26px; width: 66px;
display: flex; margin-right: 26px;
align-items: center; height: 24px;
} }
.figure-pix{ .figure-pix{
margin: 0; margin: 0;

View File

@ -412,7 +412,7 @@
"flex-layout.row#product-name": { "flex-layout.row#product-name": {
"props": { "props": {
"marginBottom": 3 "blockClass": "product-name"
}, },
"children": ["vtex.store-components:product-name"] "children": ["vtex.store-components:product-name"]
}, },

View File

@ -1,4 +1,4 @@
@font-face { @font-face {
font-family: "Open Sans", "sans-serif"; 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");
} }

View File

@ -9,7 +9,16 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container { .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 { .container .homeLink {
display: none; display: none;

View File

@ -14,42 +14,63 @@
} }
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ /* 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) { @media only screen and (max-width: 1024px) {
.flexRowContent--main { .flexRow--main .flexRowContent--main {
display: block; display: block;
} }
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRowContent--main .stretchChildrenWidth { .flexRow--main .flexRowContent--main .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
} }
.flexRowContent--main .stretchChildrenWidth .flexCol--stack {
padding-left: 40px;
}
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRowContent--main .stretchChildrenWidth .flexCol--stack { .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack {
padding: 0 40px;
width: 100%; width: 100%;
} }
} }
.flexRowContent--main .stretchChildrenWidth .flexCol--right-col { .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--stack .flexColChild--stack {
padding-right: 40px; 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; margin-left: 16px;
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRowContent--main .stretchChildrenWidth .flexCol--right-col { .flexRow--main .flexRowContent--main .stretchChildrenWidth .flexCol--right-col {
padding: 0 40px; margin: 0;
margin-left: 0;
} }
} }
.flexRow--product-name {
width: 100%;
min-height: 34px;
margin-bottom: 8px;
}
/* ASSINANTE DE PRODUTO INDISPONIVEL */ /* ASSINANTE DE PRODUTO INDISPONIVEL */
.flexRowContent--product-availability { .flexRowContent--product-availability {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding: 0 40px; padding: 0 40px;
} }
@media only screen and (min-width: 1921px) {
.flexRowContent--product-availability {
padding: 0 360px;
}
}
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRowContent--product-availability { .flexRowContent--product-availability {
display: block; display: block;
@ -103,7 +124,12 @@
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.flexRow--newsletter-container { .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 { .flexRow--newsletter-container .flexRowContent--newsletter-container {

View File

@ -10,7 +10,7 @@
/* INPUT CONTADOR DE PRODUTO */ /* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer { .quantitySelectorContainer {
height: 49px; height: 49px;
width: 100%; width: 128px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -21,9 +21,6 @@
.quantitySelectorContainer .quantitySelectorTitle { .quantitySelectorContainer .quantitySelectorTitle {
display: none; display: none;
} }
.quantitySelectorContainer .quantitySelectorStepper {
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
width: 31.6px; width: 31.6px;
height: 49px; height: 49px;
@ -39,20 +36,33 @@
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
background: #fff; background: #fff;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #000000; 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) { .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
height: 49px; height: 49px;
width: 10px;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
background: #fff; background: #fff;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #000000; 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;
} }

View File

@ -32,7 +32,7 @@
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.containerNormal .element .imageContainer--image-prateleira { .containerNormal .element .imageContainer--image-prateleira {
height: 124.81px; height: 124.82px;
} }
} }
.containerNormal .element .imageContainer--image-prateleira .imageNormal { .containerNormal .element .imageContainer--image-prateleira .imageNormal {

View File

@ -11,6 +11,12 @@
padding-left: 40px !important; padding-left: 40px !important;
padding-right: 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 { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
padding: 0 19.2px 49px 19.2px; padding: 0 19.2px 49px 19.2px;
} }
@ -21,7 +27,7 @@
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
padding: 0 14.7px 33px 14.7px; padding: 0 14.7px 32px 14.7px;
} }
} }
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
@ -35,6 +41,7 @@
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira .slide--prateleira {
margin: 0 4px; margin: 0 4px;
width: 7.1111% !important;
} }
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -60,10 +67,17 @@
visibility: hidden; visibility: hidden;
margin: 0 0 0 40px; margin: 0 0 0 40px;
padding: 0; padding: 0;
height: 29.6px; height: 29.61px;
width: 11.21px; width: 11.21px;
} }
@media only screen and (min-width: 1921px) {
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
margin: 0 0 0 360px;
}
}
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before { .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::before {
width: 11.21px;
height: 29.61px;
visibility: visible; visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
} }
@ -74,6 +88,11 @@
height: 29.6px; height: 29.6px;
width: 11.21px; width: 11.21px;
} }
@media only screen and (min-width: 1921px) {
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
margin: 0 360px 0 0;
}
}
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after { .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after {
visibility: visible; visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");

View File

@ -1,6 +1,6 @@
.stackItem--product { .stackItem--product {
width: 100%; width: 100%;
min-height: 257px min-height: 100%
} }
.stackItem--quickview { .stackItem--quickview {

View File

@ -21,25 +21,18 @@
margin: 0; margin: 0;
} }
} }
.productImagesGallerySlide .productImage { .productImagesGallerySlide .productImageTag--main {
margin-right: 16px;
}
@media only screen and (max-width: 1024px) {
.productImagesGallerySlide .productImage {
margin: 0;
}
}
.productImagesGallerySlide .productImage .productImageTag--main {
max-height: 100% !important; max-height: 100% !important;
} }
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs { .carouselGaleryThumbs {
margin: 16px 0; margin: 16px 16px 0 0;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 1024px) {
.carouselGaleryThumbs { .carouselGaleryThumbs {
display: block; display: block;
margin: 16px 0 32px 0;
} }
} }
.carouselGaleryThumbs .thumbImg { .carouselGaleryThumbs .thumbImg {
@ -58,7 +51,7 @@
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/ /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
.productNameContainer--quickview { .productNameContainer--quickview {
text-align: end; text-align: right;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
@ -117,26 +110,30 @@
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround--sku-selector {
border: 2px solid #000000; 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 { .skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px; margin-bottom: 10px;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
line-height: 19px; line-height: 19px;
font-size: 14px; font-size: 14px;
color: #929292; color: #929292;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 8px 0 0 0; min-height: 40px;
height: 40px; margin: 0;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0; margin: 0;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--sku-selector {
margin: 0 16px 0 0; margin: 8px 16px 0 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
@ -173,6 +170,11 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
color: #000000 !important; 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 { .skuSelectorContainer .skuSelectorTextContainer {
display: none; display: none;
} }
@ -316,6 +318,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
.shippingContainer { .shippingContainer {
display: block; display: block;
max-width: 296px; max-width: 296px;
width: 100%;
} }
} }
.shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
@ -455,14 +458,18 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
flex-direction: row; flex-direction: row;
} }
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 39px; min-width: 80px;
height: 19px;
margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #202020; color: #202020;
text-align: start;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
min-width: 69px;
margin-right: 32px; margin-right: 32px;
} }
} }
@ -476,7 +483,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0; font-size: 0;
margin-right: 30px; min-width: 50px;
margin-right: 32px;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
@ -495,8 +503,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
flex-direction: row; flex-direction: row;
} }
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
width: 82px; min-width: 82px;
margin-right: 28px; text-transform: capitalize;
margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -516,8 +525,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
color: #afafaf; color: #afafaf;
} }
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 50px; min-width: 50px;
margin-right: 28px; margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;

View File

@ -11,6 +11,11 @@
padding: 0 40px; padding: 0 40px;
margin: 16px 0; margin: 16px 0;
} }
@media only screen and (min-width: 1921px) {
.container--description {
padding: 0 360px;
}
}
.container--description .listContainer { .container--description .listContainer {
display: flex; display: flex;
padding: 0 64px; padding: 0 64px;
@ -64,6 +69,11 @@
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid transparent; 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) { @media only screen and (min-width: 1921px) {
.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-size: 24px; font-size: 24px;

View File

@ -1,5 +1,12 @@
.container { .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 { .homeLink {
display: none; display: none;

View File

@ -4,37 +4,54 @@
} }
/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/
.flexRowContent--main { .flexRow--main {
@include mq(md, max) { padding: 0 40px;
display: block; @include mq(xl, min) {
padding: 0 360px;
} }
.stretchChildrenWidth { .flexRowContent--main {
@include mq(md, max) { @include mq(md, max) {
width: 100% !important; display: block;
} }
.flexCol--stack { .stretchChildrenWidth {
padding-left: 40px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 40px; width: 100% !important;
width: 100%;
} }
} .flexCol--stack {
.flexCol--right-col { @include mq(md, max) {
padding-right: 40px; width: 100%;
margin-left: 16px; }
@include mq(md, max) { .flexColChild--stack {
padding: 0 40px; margin-right: 16px;
margin-left: 0; @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 */ /* ASSINANTE DE PRODUTO INDISPONIVEL */
.flexRowContent--product-availability { .flexRowContent--product-availability {
padding: 0; padding: 0;
margin: 0; margin: 0;
padding: 0 40px; padding: 0 40px;
@include mq(xl, min) {
padding: 0 360px;
}
@include mq(md, max) { @include mq(md, max) {
display: block; display: block;
} }
@ -80,7 +97,10 @@
background-color: $color-black-padrao; background-color: $color-black-padrao;
margin-top: 64px; margin-top: 64px;
@include mq(md, max) { @include mq(md, max) {
margin-top: 34px; margin-top: 64px;
}
@include mq(sm, max) {
margin-top: 32px;
} }
.flexRowContent--newsletter-container { .flexRowContent--newsletter-container {
display: flex; display: flex;

View File

@ -1,7 +1,7 @@
/* INPUT CONTADOR DE PRODUTO */ /* INPUT CONTADOR DE PRODUTO */
.quantitySelectorContainer { .quantitySelectorContainer {
height: 49px; height: 49px;
width: 100%; width: 128px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
@include mq(sm, max) { @include mq(sm, max) {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -10,7 +10,6 @@
display: none; display: none;
} }
.quantitySelectorStepper { .quantitySelectorStepper {
height: 49px;
:global(.vtex-numeric-stepper__input) { :global(.vtex-numeric-stepper__input) {
width: 31.6px; width: 31.6px;
height: 49px; height: 49px;
@ -26,22 +25,35 @@
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
background: $color-white; background: $color-white;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: $color-black-padrao; 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) { :global(.vtex-numeric-stepper__minus-button) {
height: 49px; height: 49px;
width: 10px;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
background: $color-white; background: $color-white;
font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: $color-black-padrao; 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;
}
} }
} }
} }

View File

@ -16,7 +16,7 @@
height: 291.21px; height: 291.21px;
} }
@include mq(sm, max) { @include mq(sm, max) {
height: 124.81px; height: 124.82px;
} }
.imageNormal { .imageNormal {
height: 100%; height: 100%;

View File

@ -1,13 +1,17 @@
.sliderLayoutContainer--prateleira { .sliderLayoutContainer--prateleira {
padding-left: 40px !important; padding-left: 40px !important;
padding-right: 40px !important; padding-right: 40px !important;
@include mq(xl, min) {
padding-left: 360px !important;
padding-right: 360px !important;
}
.sliderTrackContainer--prateleira { .sliderTrackContainer--prateleira {
padding: 0 19.2px 49px 19.2px; padding: 0 19.2px 49px 19.2px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 17.2px 41px 17.2px; padding: 0 17.2px 41px 17.2px;
} }
@include mq(sm, max) { @include mq(sm, max) {
padding: 0 14.7px 33px 14.7px; padding: 0 14.7px 32px 14.7px;
} }
.slide--prateleira { .slide--prateleira {
margin: 0 8px; margin: 0 8px;
@ -16,6 +20,7 @@
} }
@include mq(sm, max) { @include mq(sm, max) {
margin: 0 4px; margin: 0 4px;
width: 7.1111% !important;
} }
} }
@ -44,9 +49,14 @@
visibility: hidden; visibility: hidden;
margin: 0 0 0 40px; margin: 0 0 0 40px;
padding: 0; padding: 0;
height: 29.6px; height: 29.61px;
width: 11.21px; width: 11.21px;
@include mq(xl, min) {
margin: 0 0 0 360px;
}
&::before { &::before {
width: 11.21px;
height: 29.61px;
visibility: visible; visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png"); content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-left-thiagoBronisio.png");
} }
@ -58,6 +68,9 @@
padding: 0; padding: 0;
height: 29.6px; height: 29.6px;
width: 11.21px; width: 11.21px;
@include mq(xl, min) {
margin: 0 360px 0 0;
}
&::after { &::after {
visibility: visible; visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png"); content: url("https://agenciamagma.vtexassets.com/arquivos/arrow-right-thiagoBronisio.png");

View File

@ -10,22 +10,18 @@
@include mq(md, max) { @include mq(md, max) {
margin: 0; margin: 0;
} }
.productImage { .productImageTag--main {
margin-right: 16px; max-height: 100% !important;
@include mq(md, max) {
margin: 0;
}
.productImageTag--main {
max-height: 100% !important;
}
} }
} }
/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */
.carouselGaleryThumbs { .carouselGaleryThumbs {
margin: 16px 0; margin: 16px 16px 0 0;
@include mq(sm, max) {
@include mq(md, max) {
display: block; display: block;
margin: 16px 0 32px 0;
} }
.thumbImg { .thumbImg {
@ -46,7 +42,7 @@
/* TITULO (NOME DO PRODUTO PRINCIPAL)*/ /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
.productNameContainer--quickview { .productNameContainer--quickview {
text-align: end; text-align: right;
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
@ -101,6 +97,18 @@
.frameAround--sku-selector { .frameAround--sku-selector {
border: 2px solid $color-black-padrao; 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; margin-bottom: 10px;
&::before { &::before {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
line-height: 19px; line-height: 19px;
font-size: 14px; font-size: 14px;
color: $color-gray-6; color: $color-gray-6;
} }
.skuSelectorNameContainer { .skuSelectorNameContainer {
margin: 8px 0 0 0; min-height: 40px;
height: 40px; margin: 0;
.skuSelectorOptionsList { .skuSelectorOptionsList {
margin: 0; margin: 0;
.skuSelectorItem--sku-selector { .skuSelectorItem--sku-selector {
margin: 0 16px 0 0; margin: 8px 16px 0 0;
width: 40px; width: 40px;
height: 40px; height: 40px;
.frameAround--sku-selector { .frameAround--sku-selector {
@ -164,6 +171,18 @@
.skuSelectorItemTextValue { .skuSelectorItemTextValue {
color: $color-black-padrao !important; 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) { @include mq(sm, max) {
display: block; display: block;
max-width: 296px; max-width: 296px;
width: 100%;
} }
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
display: flex; display: flex;
@ -445,12 +465,16 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.shippingTableHeadDeliveryName { .shippingTableHeadDeliveryName {
margin-right: 39px; min-width: 80px;
height: 19px;
margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: $color-black2; color: $color-black2;
text-align: start;
@include mq(sm, max) { @include mq(sm, max) {
min-width: 69px;
margin-right: 32px; margin-right: 32px;
} }
} }
@ -465,7 +489,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
.shippingTableHeadDeliveryPrice { .shippingTableHeadDeliveryPrice {
font-size: 0; font-size: 0;
margin-right: 30px; min-width: 50px;
margin-right: 32px;
@include mq(sm, max) { @include mq(sm, max) {
margin-right: 32px; margin-right: 32px;
} }
@ -485,8 +510,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.shippingTableCellDeliveryName { .shippingTableCellDeliveryName {
width: 82px; min-width: 82px;
margin-right: 28px; text-transform: capitalize;
margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -506,8 +532,8 @@ FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.shippingTableCellDeliveryPrice { .shippingTableCellDeliveryPrice {
width: 50px; min-width: 50px;
margin-right: 28px; margin-right: 32px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;

View File

@ -1,6 +1,9 @@
.container--description { .container--description {
padding: 0 40px; padding: 0 40px;
margin: 16px 0; margin: 16px 0;
@include mq(xl, min) {
padding: 0 360px;
}
.listContainer { .listContainer {
display: flex; display: flex;
padding: 0 64px; padding: 0 64px;
@ -44,6 +47,9 @@
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@include mq(md, max) {
border-bottom: none;
}
@include mq(xl, min) { @include mq(xl, min) {
font-size: 24px; font-size: 24px;
line-height: 38px; line-height: 38px;