diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ce44ec5..10a44a7 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -20,21 +20,36 @@ } } .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - width: 97.1773%; + width: 96.91521%; } @media screen and (min-width: 1921px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - width: 97.914%; + width: 97.72%; } } @media screen and (max-width: 1024px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - width: 97.63%; + width: 96.12%; } } @media screen and (max-width: 768px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { - width: 89.73%; + width: 89.34%; + } +} + +.sliderTrack--prateleira { + gap: 16px; + margin-bottom: 32px; +} +@media screen and (max-width: 1024px) { + .sliderTrack--prateleira { + gap: 12px; + } +} +@media screen and (max-width: 768px) { + .sliderTrack--prateleira { + gap: 8px; } } @@ -53,18 +68,6 @@ height: 17px !important; } -.slide--prateleira { - margin-right: 8px; - margin-left: 8px; - margin-bottom: 32px; -} -@media screen and (max-width: 768px) { - .slide--prateleira { - margin-left: 4px; - margin-right: 4px; - } -} - .sliderArrows--prateleira { margin: 30px; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 567ac08..e882970 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -75,6 +75,10 @@ .frameAround--skus { border: none; + bottom: unset; + top: unset; + left: unset; + right: unset; } .skuSelectorOptionsList { @@ -87,6 +91,7 @@ margin-bottom: 10px; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + color: #929292; font-size: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { @@ -95,11 +100,12 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: color-gray6; + color: #929292; } .skuSelectorItem { margin: 0; + height: unset; } .skuSelectorItemTextValue--skus { @@ -142,6 +148,7 @@ margin: 0; } .skuSelectorSubcontainer--cor .skuSelectorName { + color: #929292; font-size: 0; } .skuSelectorSubcontainer--cor .skuSelectorName::after { @@ -150,7 +157,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: color-gray6; + color: #929292; } .skuSelectorSubcontainer--cor .skuSelectorItemImage--skus { height: 48px; @@ -273,6 +280,7 @@ margin-left: -1px; } .shippingContainer :global(.vtex-button__label) { + cursor: pointer; font-size: 0; } .shippingContainer :global(.vtex-button__label)::after { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 7af32ef..4886c1a 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -8,19 +8,31 @@ } .sliderTrackContainer--prateleira { - width: 97.1773%; + width: 96.91521%; @media screen and (min-width: 1921px) { - width: 97.914%; + width: 97.72%; } @media screen and (max-width: 1024px) { - width: 97.63%; + width: 96.12%; } @media screen and (max-width: 768px) { - width: 89.73%; + width: 89.34%; } } } +.sliderTrack--prateleira { + gap: 16px; + margin-bottom: 32px; + @media screen and (max-width: 1024px) { + gap: 12px; + } + + @media screen and (max-width: 768px) { + gap: 8px; + } +} + //DOTS .paginationDotsContainer--prateleira { @@ -40,18 +52,6 @@ } } -//SLIDES -.slide--prateleira { - margin-right: 8px; - margin-left: 8px; - margin-bottom: 32px; - - @media screen and (max-width: 768px) { - margin-left: 4px; - margin-right: 4px; - } -} - .sliderArrows--prateleira { margin: 30px; @media screen and (min-width: 1921px) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7685cd6..28af539 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -66,6 +66,10 @@ .frameAround--skus { border: none; + bottom: unset; + top: unset; + left: unset; + right: unset; } .skuSelectorOptionsList { @@ -80,6 +84,7 @@ .skuSelectorNameContainer { .skuSelectorTextContainer { .skuSelectorName { + color: $color-gray6; font-size: 0; &::after { @@ -88,7 +93,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: color-gray6; + color: $color-gray6; } } } @@ -97,6 +102,7 @@ .skuSelectorItem { margin: 0; + height: unset; } .skuSelectorItemTextValue--skus { @@ -149,6 +155,7 @@ margin: 0; .skuSelectorName { + color: $color-gray6; font-size: 0; &::after { @@ -157,7 +164,7 @@ font-weight: 400; font-size: 14px; line-height: 19px; - color: color-gray6; + color: $color-gray6; } } @@ -270,7 +277,7 @@ font-weight: 400; font-size: 12px; line-height: 16px; - color: #afafaf; + color: $color-gray13; } } } @@ -310,6 +317,7 @@ } :global(.vtex-button__label) { + cursor: pointer; font-size: 0; &::after { @@ -390,7 +398,7 @@ font-weight: 400; font-size: 12px; line-height: 16px; - color: #afafaf; + color: $color-gray13; } .shippingTableCellDeliveryName, diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index f1a3197..93bb215 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -18,6 +18,7 @@ $color-gray9: #bfbfbf; $color-gray10: #868686; $color-gray11: #bababa; $color-gray12: #b9b9b9; +$color-gray13: #afafaf; $color-blue: #4267b2;