From f1d02d3776afe86ef241168b978b55877d97f03b Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:36:31 -0300 Subject: [PATCH 1/3] feat(main-product): Adiciona sass do componente --- .../product/agenciamagma.store-theme.scss | 0 .../sass/pages/product/vtex.breadcrumb.scss | 9 - .../product/vtex.product-identifier.scss | 20 ++ styles/sass/pages/product/vtex.rich-text.scss | 0 .../pages/product/vtex.store-components.scss | 180 ------------------ 5 files changed, 20 insertions(+), 189 deletions(-) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss delete mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.scss delete mode 100644 styles/sass/pages/product/vtex.store-components.scss diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss deleted file mode 100644 index 7065031..0000000 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ /dev/null @@ -1,9 +0,0 @@ -.homeLink { - .homeIcon { - display: none; - } -} - -.homeLink::before { - content: "Home"; -} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..358d25a --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,20 @@ +.product-identifier__label, +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + float: right; + margin-bottom: 24px; + color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) { + .product-identifier__value { + float: left; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss deleted file mode 100644 index b0633f0..0000000 --- a/styles/sass/pages/product/vtex.store-components.scss +++ /dev/null @@ -1,180 +0,0 @@ -.shippingContainer { - display: flex; - margin: 0; - align-items: center; - position: relative; - - :global(.vtex-address-form__postalCode) { - display: flex; - - :global(.vtex-address-form__postalCode-forgottenURL) { - line-height: normal; - - :first-child { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 12px; - :first-child { - display: none; - } - } - } - - :global(.vtex-input) { - display: flex; - flex-direction: column; - - :global(.vtex-input__label) { - font-size: 0; - } - - :global(.vtex-input__label)::before { - content: "CALCULAR FRETE:"; - - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } - - :global(.vtex-input-prefix__group) { - width: 231px; - height: 49px; - margin: 0; - padding: 16.5px 0 16.5px 16px; - - border: 1px solid #cccccc; - border-radius: 0; - - :global(.vtex-address-form-4-x-input) { - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; - display: flex; - align-items: center; - padding: 8px 0; - } - } - :global(.vtex-input__error) { - position: absolute; - bottom: 0; - } - } - - :global(.vtex-address-form__postalCode-forgottenURL) { - display: flex; - position: absolute; - padding: 0; - left: 312px; - top: 41.5px; - - :last-child { - color: #000; - } - } - } - - :global(.vtex-button) { - display: flex; - width: 49px; - height: 49px; - margin-bottom: 5px; - - background: #000; - border: 1px solid #000; - border-radius: 0; - - cursor: pointer; - - :global(.vtex-button__label) { - padding: 0; - font-size: 0; - } - - :global(.vtex-button__label)::before { - content: "OK"; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 19px; - - display: flex; - align-items: center; - - color: #fff; - } - } -} - -.shippingTable { - border: 0; - width: auto; - .shippingTableHead { - display: block; - .shippingTableRow { - display: grid; - grid-template-columns: 103px 56px 136px; - grid-template-areas: "A B C"; - column-gap: 32px; - .shippingTableHeadDeliveryName, - .shippingTableHeadDeliveryEstimate, - .shippingTableHeadDeliveryPrice { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #202020; - text-transform: uppercase; - padding: 0; - } - .shippingTableHeadDeliveryName { - text-align: left; - grid-area: A; - } - .shippingTableHeadDeliveryEstimate { - grid-area: C; - text-align: left; - } - .shippingTableHeadDeliveryPrice { - text-align: left; - grid-area: B; - font-size: 0; - &::after { - content: "Valor"; - font-size: 14px; - } - } - } - } - .shippingTableBody { - .shippingTableRow { - display: grid; - grid-template-columns: 103px 56px 136px; - grid-template-areas: "A B C"; - column-gap: 32px; - margin-top: 15px; - .shippingTableCell { - padding: 0; - } - .shippingTableRadioBtn { - display: none; - } - .shippingTableCellDeliveryName { - grid-area: A; - text-transform: capitalize; - } - .shippingTableCellDeliveryEstimate { - white-space: nowrap; - grid-area: C; - } - .shippingTableCellDeliveryPrice { - grid-area: B; - } - } - } -} From bc2a0b0f6734f524b13ffae57cbba7f80678344e Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:38:52 -0300 Subject: [PATCH 2/3] feat(main-product): Continua a estilizacao do componente --- .../pages/product/vtex.product-price.scss | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..61d80b4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,69 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: #000000; +} +.flexRowContent { + margin: 0 !important; +} + +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; + &::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; + } + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; + } + .currencyCode, + .currencyLiteral, + .currencyInteger { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + } +} + +@media screen and (max-width: 1024px) { + .listPrice { + height: 19px; + } + .listPriceValue { + .currencyCode, + .currencyLiteral, + .currencyInteger { + font-size: 12px; + line-height: 16px; + } + } + + .sellingPrice { + font-size: 18px; + line-height: 25px; + } +} + +.currencyGroup { + color: #bababa; +} From 93dbf9084235642ceb408ebaa61ab1a0ceafeb7c Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Fri, 10 Feb 2023 14:39:35 -0300 Subject: [PATCH 3/3] feat(main-product): finaliza a estilizacao do componenta --- .../sass/pages/product/vtex.breadcrumb.scss | 35 ++++++++++++ .../pages/product/vtex.product-quantity.scss | 56 +++++++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..c178ec3 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,35 @@ +.container { + align-items: center; + + .homeLink { + padding: 0; + + .homeIcon { + display: none; + } + } + .homeLink::before { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: "Sapatos"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} 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..88dc6fb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,56 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + :global(.vtex-numeric-stepper__input) { + width: 32px; + height: 49px; + border-left-width: 0px; + border-right-width: 0px; + border-top-width: 1px; + border-bottom-width: 1px; + border-color: #cccccc; + color: #929292; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + :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; + border-color: #cccccc; + color: #000000; + border-radius: 0; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + :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; + border-color: #cccccc; + color: #000000; + border-radius: 0; + background-color: #ffffff; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + } + } + } + // .quantitySelectorStepper { + // } +}