diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 0abdabd..bd2e59d 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -13,11 +13,17 @@ flex-wrap: wrap; margin-left: 40px; } +@media (max-width: 1025px) and (min-width: 768px) { + .container { + padding: 0 0 16px; + } +} .container .homeLink { padding: 0; } .container .homeLink::before { content: "Home"; + font-family: "Open Sans", sans-serif; } .container .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index fa83039..843477e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -33,6 +33,12 @@ grid-template-columns: 48.819% 48.819%; } } +@media (max-width: 1025px) and (min-width: 768px) { + .flexRowContent--product-main-content { + display: grid; + grid-template-columns: 100%; + } +} .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child { background: #000000; @@ -43,6 +49,7 @@ } .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ee10127..54f7f0a 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -19,4 +19,11 @@ line-height: 19px; text-align: right; color: rgba(146, 146, 146, 0.48); +} +@media (max-width: 1025px) and (min-width: 768px) { + .product-identifier__value { + text-align: left; + float: left; + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index ea70604..9efa127 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -27,6 +27,7 @@ height: 49px; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; @@ -41,6 +42,7 @@ height: 49px; } .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 70bf4c7..e67e0b7 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -13,6 +13,11 @@ margin-top: 16px; margin-bottom: 32px; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--slider-title { + margin-bottom: 24px; + } +} .container--slider-title .wrapper--slider-title .heading--slider-title { font-weight: 400; font-size: 24px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d543552..97e8441 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -20,6 +20,7 @@ .carouselGaleryThumbs { margin-top: 16px; + height: 90px !important; } .carouselGaleryThumbs .productImagesThumb { width: 10% !important; @@ -61,6 +62,11 @@ max-height: unset !important; } } +@media (max-width: 1025px) and (min-width: 768px) { + .productImageTag--main { + height: 944px !important; + } +} @media (max-width: 1920px) and (min-width: 1024px) { .productVideo, @@ -68,10 +74,22 @@ height: 664px; } } +@media (max-width: 1025px) and (min-width: 768px) { + .productVideo, + .videoContainer { + height: 944px; + } +} .productNameContainer { text-align: right; } +@media (max-width: 1025px) and (min-width: 768px) { + .productNameContainer { + text-align: left; + margin-top: 32px; + } +} .productNameContainer .productBrand { font-weight: 300; font-size: 20px; @@ -91,6 +109,7 @@ .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -99,19 +118,23 @@ .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; @@ -164,12 +187,13 @@ } .skuSelectorSubcontainer--cor .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; + height: 48px; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0 !important; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; } .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; @@ -226,6 +250,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before { content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -238,6 +263,7 @@ margin-top: 8px; height: 49px; border-radius: 0; + width: 231px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; @@ -276,6 +302,7 @@ } .shippingContainer :global(.vtex-button)::after { content: "OK"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 600; font-size: 14px; @@ -320,6 +347,7 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { content: "frete"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -362,6 +390,13 @@ left: 6.9%; position: relative; } +@media (max-width: 1025px) and (min-width: 768px) { + .productImagesContainer--image-description { + width: 100%; + left: 0; + margin-bottom: 16px; + } +} .productImagesContainer--image-description .productImageTag--image-description--main { max-height: unset !important; } @@ -371,6 +406,12 @@ width: 92.93%; position: relative; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer { + margin-left: 0; + width: 100%; + } +} .productDescriptionContainer .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; @@ -378,6 +419,11 @@ line-height: 32px; color: #575757; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; + } +} .productDescriptionContainer .productDescriptionText .container { padding: 0; } @@ -387,6 +433,12 @@ line-height: 22px; color: #929292; } +@media (max-width: 1025px) and (min-width: 768px) { + .productDescriptionContainer .productDescriptionText .container .content :first-child { + font-size: 14px; + line-height: 19px; + } +} .installmentsPrice { display: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d6b1b82..0bf1593 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,15 +9,26 @@ /* Grid breakpoints */ .container--description-block { padding: 0 40px; + margin-top: 16px; } .container--description-block .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; + padding-top: 16px; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } } .container--description-block .listContainer .listItem { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; } .container--description-block .listContainer .listItem :global(.vtex-button) { background-color: unset; @@ -34,9 +45,16 @@ .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} .container--description-block .listContainer .listItemActive { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; } .container--description-block .listContainer .listItemActive :global(.vtex-button) { background-color: unset; @@ -51,10 +69,32 @@ height: 38px; border-radius: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) { + border-bottom: unset; + } +} .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + justify-content: left; + } +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } +} .container--description-block .contentContainer .contentItem { display: grid; grid-template-columns: 50% 50%; +} +@media (max-width: 1025px) and (min-width: 768px) { + .container--description-block .contentContainer .contentItem { + display: grid; + grid-template-columns: 100%; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss index 71bda56..db1e98c 100644 --- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss @@ -3,12 +3,16 @@ align-items: center; flex-wrap: wrap; margin-left: 40px; + @media (max-width: 1025px) and (min-width: 768px) { + padding: 0 0 16px; + } .homeLink { padding: 0; } .homeLink::before { content: "Home"; + font-family: "Open Sans", sans-serif; } .homeIcon { diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss index 4efb96c..1904617 100644 --- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -22,6 +22,10 @@ display: grid; grid-template-columns: 48.819% 48.819%; } + @media (max-width: 1025px) and (min-width: 768px) { + display: grid; + grid-template-columns: 100%; + } } //Botao add Cart @@ -37,6 +41,7 @@ border-radius: 0; :global(.vtex-button__label)::before { content: "ADICIONAR À SACOLA"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 400; font-size: 18px; diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1f07099..9cc4e95 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -11,6 +11,7 @@ .carouselGaleryThumbs { margin-top: 16px; + height: 90px !important; .productImagesThumb { width: 10% !important; height: 10% !important; @@ -49,6 +50,9 @@ @media (max-width: 1920px) and (min-width: 1024px) { max-height: unset !important; } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px !important; + } } .productVideo, @@ -56,12 +60,19 @@ @media (max-width: 1920px) and (min-width: 1024px) { height: 664px; } + @media (max-width: 1025px) and (min-width: 768px) { + height: 944px; + } } //dados produto .productNameContainer { text-align: right; + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + margin-top: 32px; + } .productBrand { font-weight: 300; font-size: 20px; @@ -84,6 +95,7 @@ .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -92,6 +104,7 @@ .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -99,12 +112,13 @@ } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; .skuSelectorOptionsList { + margin: 0; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; .skuSelectorItem { border-radius: 100%; width: 40px; @@ -163,11 +177,12 @@ } .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { - margin: 0; + margin: 8px 0 0; + height: 48px; .skuSelectorOptionsList { + margin: 0 !important; margin-left: 0; column-gap: 16px; - margin: 8px 0 0; .skuSelectorItem { border-radius: 100%; width: 48px; @@ -226,6 +241,7 @@ padding-bottom: 0; :global(.vtex-input)::before { content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -239,6 +255,7 @@ margin-top: 8px; height: 49px; border-radius: 0; + width: 231px; :global(.vtex-address-form-4-x-input)::placeholder { color: #afafaf; font-weight: 400; @@ -279,6 +296,7 @@ } :global(.vtex-button)::after { content: "OK"; + font-family: "Open Sans", sans-serif; color: #ffffff; font-weight: 600; font-size: 14px; @@ -323,6 +341,7 @@ } .shippingTableHeadDeliveryPrice::after { content: "frete"; + font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 14px; line-height: 19px; @@ -373,6 +392,11 @@ max-height: unset; left: 6.9%; position: relative; + @media (max-width: 1025px) and (min-width: 768px) { + width: 100%; + left: 0; + margin-bottom: 16px; + } & .productImageTag--image-description--main { max-height: unset !important; } @@ -381,12 +405,19 @@ margin-left: 32px; width: 92.93%; position: relative; + @media (max-width: 1025px) and (min-width: 768px) { + margin-left: 0; + width: 100%; + } .productDescriptionTitle { margin-bottom: 8px; font-weight: 400; font-size: 24px; line-height: 32px; color: #575757; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 20px; + } } .productDescriptionText { & .container { @@ -397,6 +428,10 @@ font-size: 16px; line-height: 22px; color: #929292; + @media (max-width: 1025px) and (min-width: 768px) { + font-size: 14px; + line-height: 19px; + } } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2d78c00..737eb53 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -12,4 +12,9 @@ line-height: 19px; text-align: right; color: rgba(146, 146, 146, 0.48); + @media (max-width: 1025px) and (min-width: 768px) { + text-align: left; + float: left; + margin-bottom: 24px; + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 2165783..bbe9eb7 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -24,6 +24,7 @@ :global(.vtex-numeric-stepper__plus-button-container) { height: 49px; :global(.vtex-numeric-stepper__plus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; @@ -38,6 +39,7 @@ :global(.vtex-numeric-stepper__minus-button-container) { height: 49px; :global(.vtex-numeric-stepper__minus-button) { + font-family: "Open Sans", sans-serif; height: 49px; border-top-width: 1px; border-bottom-width: 1px; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 50085f9..02d4a8a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -5,6 +5,9 @@ justify-content: center; margin-top: 16px; margin-bottom: 32px; + @media (max-width: 1025px) and (min-width: 768px) { + margin-bottom: 24px; + } .wrapper--slider-title { .heading--slider-title { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index dfecdf8..03525b0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,13 +2,22 @@ .container--description-block { padding: 0 40px; + margin-top: 16px; .listContainer { justify-content: space-around; border-bottom: 1px solid #b9b9b9; margin-bottom: 32px; + padding-top: 16px; + @media (max-width: 1025px) and (min-width: 768px) { + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-bottom: 16px; + } .listItem { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; :global(.vtex-button) { background-color: unset; border: none; @@ -22,12 +31,17 @@ border-radius: 0; :global(.vtex-button__label) { padding: 0; + @media (max-width: 1025px) and (min-width: 768px) { + justify-content: left; + } } } } .listItemActive { margin: 0; padding: 0; + height: 38px; + margin-bottom: 16px; :global(.vtex-button) { background-color: unset; border: none; @@ -40,16 +54,30 @@ width: 114px; height: 38px; border-radius: 0; + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: unset; + } :global(.vtex-button__label) { padding: 0; + @media (max-width: 1025px) and (min-width: 768px) { + justify-content: left; + } } } } } .contentContainer { + @media (max-width: 1025px) and (min-width: 768px) { + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } .contentItem { display: grid; grid-template-columns: 50% 50%; + @media (max-width: 1025px) and (min-width: 768px) { + display: grid; + grid-template-columns: 100%; + } } } }