From 16b2a368e240571d0b992870c7c6aa38871dabb8 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 25 Jan 2023 21:57:57 -0300 Subject: [PATCH] feat: adiciona estilos quantity botao add carrinho 1440px --- store/blocks/pdp/product.jsonc | 1 + styles/css/vtex.flex-layout.css | 6 ++++ styles/css/vtex.product-quantity.css | 29 +++++++++++++++++-- styles/css/vtex.store-components.css | 24 +++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 6 ++++ .../pages/product/vtex.product-quantity.scss | 22 ++++++++++++++ .../pages/product/vtex.store-components.scss | 29 +++++++++++++++++++ styles/sass/utils/_vars.scss | 23 ++++++++------- 8 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 81c8333..d6bacba 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -135,6 +135,7 @@ "product-installments": { "props": { + "markers": ["parcelas", "valor"], "message": "36 x de R$ 2,17 sem juros" } }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f755429..35319c2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -106,4 +106,10 @@ .flexRow--addToCartRow { padding-bottom: 1rem; +} + +.flexRowContent--buy-button :global(.vtex-button) { + background: black; + border: none; + border-radius: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index ecf0f5a..e05f762 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -1,3 +1,28 @@ -/* .quantitySelectorSteper--addToCart { +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__plus-button) { border-radius: 0; -} */ + border: 1px solid #cccccc; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid #cccccc; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid #cccccc; + border-left: 0; + border-right: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 023f573..2ed6ef4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -18,6 +18,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 80%; } .productImageTag--main { @@ -44,10 +45,17 @@ .frameAround { border-radius: 50%; + border-color: black; } .diagonalCross { transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; } .skuSelectorInternalBox { @@ -59,10 +67,26 @@ .skuSelectorSubcontainer--cor { order: 2; } +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 16px; +} .skuSelectorSubcontainer--tamanho { order: 1; } +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 16px; +} .productImagesThumb .figure .thumbImg { width: 90px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f1720d1..8ab9fec 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -100,3 +100,9 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +.flexRowContent--buy-button :global(.vtex-button) { + background: black; + border: none; + border-radius: 0; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..4086ed4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,22 @@ +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__plus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: 0; + border-right: 0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fd48980..517f4df 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -9,6 +9,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 80%; } .productImageTag--main { @@ -35,10 +36,17 @@ .frameAround { border-radius: 50%; + border-color: black; } .diagonalCross { transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; } .skuSelectorInternalBox { @@ -49,9 +57,30 @@ .skuSelectorSubcontainer--cor { order: 2; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 16px; + } + } } + .skuSelectorSubcontainer--tamanho { order: 1; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 16px; + } + } } .productImagesThumb { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..033dd14 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #cccccc; $color-blue: #4267b2; @@ -14,18 +15,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;