From 8a5c9887e49f6aa05b6c43341bce9fcef763d5c1 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 21:34:14 -0300 Subject: [PATCH] feat: Adicionado estilo tablet do produto --- styles/css/vtex.flex-layout.css | 7 + styles/css/vtex.product-summary.css | 52 ++---- styles/css/vtex.store-components.css | 159 ++++++++++++------ styles/css/vtex.tab-layout.css | 16 ++ .../sass/pages/product/vtex.flex-layout.scss | 6 + .../pages/product/vtex.product-summary.scss | 2 + .../pages/product/vtex.slider-layout.scss | 2 + .../pages/product/vtex.store-components.scss | 71 +++++++- .../sass/pages/product/vtex.tab-layout.scss | 15 ++ 9 files changed, 234 insertions(+), 96 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c59897a..79d4bec 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -42,4 +42,11 @@ font-size: 18px; line-height: 25px; color: #ffffff; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..f5ba8ae 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,10 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d66941f..75263f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -178,24 +178,97 @@ color: #929292; } +/* .newsletter { - margin-top: 64px; -} -.newsletter .container { - display: flex; - height: 175px; - padding: 0 0 0 0; background: black; - align-items: center; - justify-content: center; -} -.newsletter .container .label { + border-bottom: 1px solid #ffffff; + margin: 0; display: flex; flex-direction: column; - font-size: 0; + justify-content: center; + align-items: center; + .container { + display: flex; + //height: 175px; + //padding: 0 0 0 0; + //background: black; + align-items: center; + justify-content: center; + .label { + display: flex; + flex-direction: column; + font-size: 0; + &::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + } + :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; + } + } + } } -.newsletter .container .label::before { - content: "Assine nossa Newsletter"; +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.label { font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -203,49 +276,41 @@ line-height: 38px; text-align: center; color: #ffffff; + border: none; } -.newsletter .container .label::after { + +.label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; + font-family: sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; color: #929292; -} -.newsletter .container :global(.vtex-input-prefix__group) { display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; + flex-direction: column; + gap: 16px; + margin-top: 16px; } -.newsletter .container :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; -} -.newsletter .container :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button):hover { - border-bottom: 5px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button) :global(.vtex-button__label) { - font-family: "Open Sans"; + +.productDescriptionTitle { + font-family: sans-serif; font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 79c6c7f..2150530 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -61,4 +61,20 @@ display: flex; flex-direction: row; gap: 32px; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3d2f750..e52a860 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -33,3 +33,9 @@ } } } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..595f5d8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,2 @@ +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8052275..a233b64 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -10,3 +10,5 @@ display: flex; justify-content: center; } +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0dd1aef..3a94064 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -181,14 +181,20 @@ color: #929292; } } - +/* .newsletter { - margin-top: 64px; + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; .container { display: flex; - height: 175px; - padding: 0 0 0 0; - background: black; + //height: 175px; + //padding: 0 0 0 0; + //background: black; align-items: center; justify-content: center; .label { @@ -254,6 +260,57 @@ } } } - -@media screen and (max-width: 1024px) { +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + border: none; +} +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + +.productDescriptionTitle { + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index d7ad334..6678e7d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -52,3 +52,18 @@ flex-direction: row; gap: 32px; } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } +}