fix: correção geral de responsividade e elementos da pagina de produto #8
@ -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
|
||||
*/
|
||||
|
@ -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;
|
||||
|
@ -412,7 +412,7 @@
|
||||
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
"marginBottom": 3
|
||||
"blockClass": "product-name"
|
||||
},
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
|
@ -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");
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
@ -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 {
|
||||
|
@ -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");
|
||||
|
@ -1,6 +1,6 @@
|
||||
.stackItem--product {
|
||||
width: 100%;
|
||||
min-height: 257px
|
||||
min-height: 100%
|
||||
}
|
||||
|
||||
.stackItem--quickview {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -16,7 +16,7 @@
|
||||
height: 291.21px;
|
||||
}
|
||||
@include mq(sm, max) {
|
||||
height: 124.81px;
|
||||
height: 124.82px;
|
||||
}
|
||||
.imageNormal {
|
||||
height: 100%;
|
||||
|
@ -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");
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user