From 3fc37b03dfe5e462321104f191395e1e986c1ab8 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Wed, 8 Feb 2023 12:35:33 -0300 Subject: [PATCH] feat(skuseletor):estilizando skuseletor --- styles/css/vtex.flex-layout.css | 5 ++++ styles/css/vtex.product-identifier.css | 8 ++++- styles/css/vtex.product-price.css | 5 ---- styles/css/vtex.store-components.css | 30 +++++++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 4 +++ .../product/vtex.product-identifier.scss | 6 +++- .../pages/product/vtex.store-components.scss | 22 ++++++++++++++ styles/sass/pages/vtex.product-price.scss | 4 --- 8 files changed, 73 insertions(+), 11 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1617d34..e330da9 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -137,6 +137,11 @@ align-items: end; flex-direction: column-reverse; } +@media screen and (max-width: 1024px) { + .flexRowContent--title { + display: flex; + } +} .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) { top: 33%; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 023b6a4..1fbd6d5 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -10,6 +10,12 @@ .product-identifier--productReference { display: block; text-align: end; - margin-top: 8px; padding-right: 40px; + font-size: 14px; + line-height: 19px; +} +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + text-align: start; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 5ccb422..1b597fe 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -23,11 +23,6 @@ font-weight: 700; } -.installments { - color: #727273; - margin-bottom: 1rem; -} - .savings { font-weight: 500; color: #79B03A; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 73cdafe..695f34f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -30,10 +30,26 @@ display: flex; flex-direction: column-reverse; } +.skuSelectorContainer .skuSelectorSubcontainer { + max-width: 93.663%; +} +@media screen and (max-width: 1024px) { + .skuSelectorContainer .skuSelectorSubcontainer { + height: max-content; + } +} +.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList { + height: 40.61px; +} .skuSelectorContainer .skuSelectorItemImage { width: 48px; height: 48px; } +@media screen and (max-width: 1024px) { + .skuSelectorContainer .skuSelectorItemImage { + margin: 0; + } +} .skuSelectorContainer .skuSelectorItem--selected .frameAround { border-radius: 24px; border: 2px solid #000000; @@ -47,8 +63,15 @@ left: 0; right: 0; } +.skuSelectorContainer .skuSelectorSubcontainer--cor { + height: 75px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList { + height: 48px; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { text-transform: uppercase; + font-family: "Open Sans", sans-serif; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { content: "ES:"; @@ -70,6 +93,7 @@ } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { text-transform: uppercase; + font-family: "Open Sans", sans-serif; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { content: "S:"; @@ -98,6 +122,11 @@ line-height: 34px; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: start; + } +} .carouselContainer { max-width: 906px; @@ -143,6 +172,7 @@ height: max-content; } .carouselGaleryThumbs .productImagesThumb { + height: 100% !important; margin-right: 1em; } @media screen and (max-width: 1024px) { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index d50e02e..0ae9d40 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -130,6 +130,10 @@ .flexRowContent--title{ align-items: end; flex-direction: column-reverse; + @media screen and (max-width: 1024px){ + display: flex; + } + } .flexRowContent--pdp-carrousel{ :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){ diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2656078..a915e62 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -2,7 +2,11 @@ &--productReference{ display: block; text-align: end; - margin-top: 8px; padding-right: 40px; + font-size: 14px; + line-height: 19px; + @media screen and (max-width: 1024px){ + text-align: start; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6b94875..2fba2a5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -19,9 +19,21 @@ .skuSelectorContainer{ display: flex; flex-direction: column-reverse; + .skuSelectorSubcontainer{ + max-width: 93.663%; + @media screen and (max-width: 1024px){ + height: max-content; + } + .skuSelectorOptionsList{ + height: 40.61px; + } + } .skuSelectorItemImage{ width: 48px; height: 48px; + @media screen and (max-width: 1024px){ + margin: 0; + } } .skuSelectorItem--selected{ .frameAround{ @@ -40,9 +52,14 @@ } .skuSelectorSubcontainer-{ &-cor{ + height: 75px; + .skuSelectorOptionsList{ + height: 48px; + } .skuSelectorTextContainer{ .skuSelectorName{ text-transform: uppercase; + font-family: 'Open Sans',sans-serif; &::after{ content: "ES:"; } @@ -68,6 +85,7 @@ .skuSelectorTextContainer{ .skuSelectorName{ text-transform: uppercase; + font-family: 'Open Sans',sans-serif; &::after{ content: "S:"; } @@ -100,6 +118,9 @@ font-size: 20px; line-height: 34px; color: #575757; + @media screen and (max-width: 1024px){ + text-align: start; + } } .carouselContainer{ max-width: 906px; @@ -135,6 +156,7 @@ display: block; height: max-content; .productImagesThumb{ + height: 100% !important; margin-right: 1em; @media screen and (max-width: 1024px){ width: 30% !important; diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss index 907ecbd..4aa9ede 100644 --- a/styles/sass/pages/vtex.product-price.scss +++ b/styles/sass/pages/vtex.product-price.scss @@ -14,10 +14,6 @@ font-weight: 700; } -.installments { - color: #727273; - margin-bottom: 1rem; -} .savings { font-weight: 500;