Thiago.bronisio/challenge-vtex-io-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add responsividade nas info da pdp, e a estilizacao do campo de cep e transportes #4

Merged
Thiago.bronisio merged 1 commits from feature/pagina-product into master 2023-01-26 04:35:56 +00:00
Conversation 0 Commits 1 Files Changed 14 +436 -91
14 changed files with 436 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
react/components/Html/styles.css
View File

@ -1,3 +1,10 @@
[class*="html--buy-button"]{ @media(min-width:769px){
display: flex; [class*="html--buy-button"]{
display: flex;
}
}
@media(max-width: 768px){
[class*="html--buy-button"]{
display: block;
}
} }

6
store/blocks/pdp/product-assembly.jsonc
View File

@ -6,12 +6,6 @@
}, },
"children": ["html#buy-button"] "children": ["html#buy-button"]
}, },
"product-assembly-options": {
"children": [
"flex-layout.row#product-assembly-options",
"assembly-option-input-values"
]
},
"assembly-option-input-values": { "assembly-option-input-values": {
"props": { "props": {
"optionsDisplay": "box" "optionsDisplay": "box"

2
store/blocks/pdp/product.jsonc
View File

@ -117,10 +117,8 @@
"flex-layout.row#list-price-savings", "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"product-separator",
"availability-subscriber", "availability-subscriber",
"sku-selector", "sku-selector",
"product-assembly-options",
"product-gifts", "product-gifts",
"html#buy-button", "html#buy-button",
"shipping-simulator" "shipping-simulator"

13
styles/css/vtex.flex-layout.css
View File

@ -21,6 +21,11 @@
margin-top: 24px; margin-top: 24px;
width: 375px; width: 375px;
} }
@media only screen and (max-width: 1023px) {
.flexRowContent--message-availability {
width: 100%;
}
}
.sellingPriceValue { .sellingPriceValue {
font-size: 50px; font-size: 50px;
@ -43,6 +48,12 @@
height: 49px; height: 49px;
margin-top: 8px; margin-top: 8px;
} }
@media only screen and (max-width: 767px) {
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
margin: 0 0 16px;
height: auto;
}
}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0; font-size: 0;
} }
@ -51,6 +62,6 @@
content: "ADICIONAR À SACOLA"; content: "ADICIONAR À SACOLA";
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
padding: 12px 0; padding: 12px 64px;
line-height: 22px; line-height: 22px;
} }

6
styles/css/vtex.product-identifier.css
View File

@ -15,6 +15,12 @@
line-height: 19px; line-height: 19px;
color: rgba(146, 146, 146, 0.48); color: rgba(146, 146, 146, 0.48);
} }
@media only screen and (max-width: 1023px) {
.product-identifier--productReference {
justify-content: start;
margin-bottom: 24px;
}
}
.product-identifier--productReference .product-identifier__label { .product-identifier--productReference .product-identifier__label {
display: none; display: none;
} }

22
styles/css/vtex.product-price.css
View File

@ -15,18 +15,34 @@
} }
.installments { .installments {
font-weight: 300; display: flex;
font-size: 16px; font-size: 0;
line-height: 22px;
color: #929292; color: #929292;
margin-bottom: 8px;
} }
.installments .installmentsNumber { .installments .installmentsNumber {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
} }
.installments .installmentsNumber::after {
content: "x ";
}
.installments .installmentValue { .installments .installmentValue {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
}
.installments .installmentValue::before {
content: "de ";
margin-left: 5px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.installments .installmentValue::after {
content: " sem juros";
font-weight: 400;
font-size: 16px;
line-height: 22px;
} }

5
styles/css/vtex.product-quantity.css
View File

@ -14,6 +14,11 @@
width: 149px; width: 149px;
margin-right: 10px; margin-right: 10px;
} }
@media only screen and (max-width: 767px) {
.quantitySelectorContainer {
margin-bottom: 10px;
}
}
.quantitySelectorContainer .quantitySelectorTitle { .quantitySelectorContainer .quantitySelectorTitle {
display: none; display: none;
} }

170
styles/css/vtex.store-components.css
View File

@ -16,8 +16,8 @@
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */ /*PRODUTO INDISPONIVEL, TEXTOS */
/* FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */ /* BUSCA DE CEP */
/* TRANSPORTADORAS */
} }
.container .productNameContainer--quickview { .container .productNameContainer--quickview {
text-align: end; text-align: end;
@ -26,6 +26,11 @@
line-height: 34px; line-height: 34px;
color: #575757; color: #575757;
} }
@media only screen and (max-width: 1023px) {
.container .productNameContainer--quickview {
text-align: start;
}
}
.container .skuSelectorContainer { .container .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -106,6 +111,8 @@
} }
.container .subscriberContainer { .container .subscriberContainer {
width: 100%; width: 100%;
margin-top: 24px;
/* FORMULARIO DE PRODUTO INDISPONIVEL */
} }
.container .subscriberContainer .title { .container .subscriberContainer .title {
font-size: 0; font-size: 0;
@ -128,30 +135,41 @@
line-height: 19px; line-height: 19px;
color: #868686; color: #868686;
} }
.container .form { .container .subscriberContainer .form {
position: relative; position: relative;
} }
.container .form :global(.vtex-store-components-3-x-content) { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 374.65px; width: 374.65px;
display: block; display: block;
margin-top: 16px; margin-top: 16px;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputName { @media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 100%;
max-width: 100%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 182.46px; width: 182.46px;
margin-right: 10.08px; margin-right: 10.08px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { @media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 49%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292; border: 0.6px solid #929292;
border-radius: 0; border-radius: 0;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
padding: 0 14px; padding: 0 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; color: #929292;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputEmail { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
position: absolute; position: absolute;
left: 51%; left: 51%;
top: 0%; top: 0%;
@ -160,21 +178,28 @@
font-weight: 400; font-weight: 400;
margin-bottom: 15px; margin-bottom: 15px;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { @media only screen and (max-width: 1023px) {
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
width: -webkit-fill-available;
margin: 0 0 0 8px;
left: 49%;
}
}
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292; border: 0.6px solid #929292;
border-radius: 0; border-radius: 0;
} }
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 0 14px; padding: 0 14px;
font-size: 12px; font-size: 12px;
line-height: 28px; line-height: 28px;
color: #929292; color: #929292;
} }
.container .form :global(.vtex-store-components-3-x-content) .submit { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
width: 100%; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
} }
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
width: 100%; width: 100%;
height: 49px; height: 49px;
background-color: #000000; background-color: #000000;
@ -185,7 +210,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
content: "AVISE-ME"; content: "AVISE-ME";
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
@ -193,17 +218,28 @@
line-height: 25px; line-height: 25px;
font-family: "Open sans", sans-serif; font-family: "Open sans", sans-serif;
} }
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0; padding: 0;
} }
.container .shippingContainer { .container .shippingContainer {
display: flex; display: flex;
} }
@media only screen and (max-width: 767px) {
.container .shippingContainer {
display: block;
position: relative;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) { .container .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
} }
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) {
display: block;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0; font-size: 0;
} }
@ -219,6 +255,11 @@
height: 49px; height: 49px;
border-radius: 0; border-radius: 0;
} }
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0; padding: 0;
margin-top: 25px; margin-top: 25px;
@ -229,6 +270,13 @@
line-height: 16px; line-height: 16px;
text-decoration: underline; text-decoration: underline;
} }
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
left: 0;
margin-top: 8px;
text-align: end;
}
}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000; color: #000000;
} }
@ -245,6 +293,13 @@
border-radius: 0; border-radius: 0;
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 767px) {
.container .shippingContainer :global(.vtex-button) {
position: absolute;
right: 0px;
top: 0px;
}
}
.container .shippingContainer :global(.vtex-button)::before { .container .shippingContainer :global(.vtex-button)::before {
content: "OK"; content: "OK";
font-weight: 600; font-weight: 600;
@ -255,6 +310,95 @@
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { .container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: fit-content; height: fit-content;
} }
.container .shippingTable {
border: none;
padding: 0;
margin: 15px 0;
}
.container .shippingTable .shippingTableHead {
display: block;
text-transform: uppercase;
margin-bottom: 15px;
}
.container .shippingTable .shippingTableHead .shippingTableRow {
display: flex;
flex-direction: row;
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 39px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
margin-right: 32px;
}
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0;
margin-right: 30px;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
margin-right: 32px;
}
}
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.container .shippingTable .shippingTableBody .shippingTableRow {
display: flex;
flex-direction: row;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
width: 82px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
@media only screen and (max-width: 767px) {
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
margin-right: 22px;
}
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
width: 50px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
padding: 0 0 15px;
}
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
display: none;
}
.productImage { .productImage {
width: max-content; width: max-content;

9
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -14,6 +14,9 @@
.flexRowContent--message-availability { .flexRowContent--message-availability {
margin-top: 24px; margin-top: 24px;
width: 375px; width: 375px;
@include mq(md, max) {
width: 100%;
}
} }
.sellingPriceValue { .sellingPriceValue {
@ -34,6 +37,10 @@
border: none; border: none;
height: 49px; height: 49px;
margin-top: 8px; margin-top: 8px;
@include mq(sm, max) {
margin: 0 0 16px;
height: auto;
}
:global(.vtex-button__label) { :global(.vtex-button__label) {
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0; font-size: 0;
@ -42,7 +49,7 @@
content: "ADICIONAR À SACOLA"; content: "ADICIONAR À SACOLA";
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
padding: 12px 0; padding: 12px 64px;
line-height: 22px; line-height: 22px;
} }
} }

4
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -5,6 +5,10 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: rgba(146, 146, 146, 0.48); color: rgba(146, 146, 146, 0.48);
@include mq(md, max) {
justify-content: start;
margin-bottom: 24px;
}
.product-identifier__label { .product-identifier__label {
display: none; display: none;

23
styles/sass/pages/product/vtex.product-price.scss
View File

@ -6,18 +6,35 @@
} }
.installments { .installments {
font-weight: 300; display: flex;
font-size: 16px; font-size: 0;
line-height: 22px;
color: $color-gray-6; color: $color-gray-6;
margin-bottom: 8px;
.installmentsNumber { .installmentsNumber {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
&::after {
content: "x ";
}
} }
.installmentValue { .installmentValue {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
&::before {
content: "de ";
margin-left: 5px;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
&::after {
content: " sem juros";
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
} }
} }

3
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -4,6 +4,9 @@
margin-bottom: 16px; margin-bottom: 16px;
width: 149px; width: 149px;
margin-right: 10px; margin-right: 10px;
@include mq(sm, max) {
margin-bottom: 10px;
}
.quantitySelectorTitle { .quantitySelectorTitle {
display: none; display: none;
} }

243
styles/sass/pages/product/vtex.store-components.scss
View File

@ -10,6 +10,9 @@
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
color: $color-gray-7; color: $color-gray-7;
@include mq(md, max) {
text-align: start;
}
} }
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
@ -121,6 +124,7 @@
/*PRODUTO INDISPONIVEL, TEXTOS */ /*PRODUTO INDISPONIVEL, TEXTOS */
.subscriberContainer { .subscriberContainer {
width: 100%; width: 100%;
margin-top: 24px;
.title { .title {
font-size: 0; font-size: 0;
margin-bottom: 0; margin-bottom: 0;
@ -144,42 +148,29 @@
color: $color-gray-9; color: $color-gray-9;
} }
} }
} /* FORMULARIO DE PRODUTO INDISPONIVEL */
.form {
/* FORMULARIO DE PRODUTO INDISPONIVEL */ position: relative;
.form { :global(.vtex-store-components-3-x-content) {
position: relative; width: 374.65px;
:global(.vtex-store-components-3-x-content) { display: block;
width: 374.65px; margin-top: 16px;
display: block; @include mq(md, max) {
margin-top: 16px; width: 100%;
.inputName { max-width: 100%;
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
:global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6;
border-radius: 0;
} }
:global(.vtex-styleguide-9-x-input) { .inputName {
padding: 0 14px; width: 182.46px;
font-size: 12px; margin-right: 10.08px;
line-height: 28px; margin-bottom: 15px;
color: $color-gray-6; @include mq(md, max) {
} width: 49%;
} }
.inputEmail {
position: absolute;
left: 51%;
top: 0%;
border-radius: 0;
width: 182.46px;
font-weight: 400;
margin-bottom: 15px;
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: 0.6px solid $color-gray-6; border: 0.6px solid $color-gray-6;
border-radius: 0; border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
padding: 0 14px; padding: 0 14px;
font-size: 12px; font-size: 12px;
@ -187,31 +178,56 @@
color: $color-gray-6; color: $color-gray-6;
} }
} }
} .inputEmail {
.submit { position: absolute;
width: 100%; left: 51%;
margin-bottom: 16px; top: 0%;
:global(.vtex-button) {
width: 100%;
height: 49px;
background-color: $color-black-padrao;
border: none;
border-radius: 0; border-radius: 0;
font-size: 0; width: 182.46px;
display: flex; font-weight: 400;
align-items: center; margin-bottom: 15px;
justify-content: center; @include mq(md, max) {
&::before { width: -webkit-fill-available;
content: "AVISE-ME"; margin: 0 0 0 8px;
color: $color-white; left: 49%;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
} }
:global(.vtex-button__label) { :global(.vtex-input-prefix__group) {
padding: 0; border: 0.6px solid $color-gray-6;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: $color-gray-6;
}
}
}
.submit {
width: 100%;
margin-bottom: 16px;
:global(.vtex-button) {
width: 100%;
height: 49px;
background-color: $color-black-padrao;
border: none;
border-radius: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: "AVISE-ME";
color: $color-white;
font-weight: 600;
font-size: 18px;
line-height: 25px;
font-family: "Open sans", sans-serif;
}
:global(.vtex-button__label) {
padding: 0;
}
} }
} }
} }
@ -221,10 +237,17 @@
/* BUSCA DE CEP */ /* BUSCA DE CEP */
.shippingContainer { .shippingContainer {
display: flex; display: flex;
@include mq(sm, max) {
display: block;
position: relative;
}
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
@include mq(sm, max) {
display: block;
}
:global(.vtex-input__label) { :global(.vtex-input__label) {
font-size: 0; font-size: 0;
&::before { &::before {
@ -239,6 +262,9 @@
width: 280px; width: 280px;
height: 49px; height: 49px;
border-radius: 0; border-radius: 0;
@include mq(sm, max) {
width: 100%;
}
} }
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0; padding: 0;
@ -249,6 +275,11 @@
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-decoration: underline; text-decoration: underline;
@include mq(sm, max) {
left: 0;
margin-top: 8px;
text-align: end;
}
:last-child { :last-child {
color: $color-black-padrao; color: $color-black-padrao;
} }
@ -266,6 +297,12 @@
font-size: 0; font-size: 0;
border-radius: 0; border-radius: 0;
cursor: pointer; cursor: pointer;
@include mq(sm, max) {
position: absolute;
right: 0px;
top: 0px;
}
&::before { &::before {
content: "OK"; content: "OK";
font-weight: 600; font-weight: 600;
@ -278,6 +315,100 @@
} }
} }
} }
/* TRANSPORTADORAS */
.shippingTable {
border: none;
padding: 0;
margin: 15px 0;
.shippingTableHead {
display: block;
text-transform: uppercase;
margin-bottom: 15px;
.shippingTableRow {
display: flex;
flex-direction: row;
.shippingTableHeadDeliveryName {
margin-right: 39px;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
@include mq(sm, max) {
margin-right: 32px;
}
}
.shippingTableHeadDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
margin-right: 30px;
@include mq(sm, max) {
margin-right: 32px;
}
&::before {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
}
}
}
}
.shippingTableBody {
.shippingTableRow {
display: flex;
flex-direction: row;
.shippingTableCellDeliveryName {
width: 82px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
@include mq(sm, max) {
margin-right: 22px;
}
}
.shippingTableCellDeliveryEstimate {
display: flex;
order: 1;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
}
.shippingTableCellDeliveryPrice {
width: 50px;
margin-right: 28px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray-10;
}
.shippingTableCell {
padding: 0 0 15px;
.shippingTableLabel {
.shippingTableRadioBtn {
display: none;
}
}
}
}
}
}
} }
.productImage { .productImage {

10
styles/sass/utils/_vars.scss
View File

@ -1,5 +1,6 @@
$color-black: #292929; $color-black: #292929;
$color-black-padrao: #000000; $color-black-padrao: #000000;
$color-black2: #202020;
$color-white: #fff; $color-white: #fff;
$color-gray: #6c6c6c; $color-gray: #6c6c6c;
@ -11,6 +12,7 @@ $color-gray-6: #929292;
$color-gray-7: #575757; $color-gray-7: #575757;
$color-gray-8: #989898; $color-gray-8: #989898;
$color-gray-9: #868686; $color-gray-9: #868686;
$color-gray-10: #afafaf;
$color-blue: #4267b2; $color-blue: #4267b2;
@ -20,10 +22,10 @@ $color-green: #4caf50;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 768px,
md: 768px, md: 1024px,
lg: 992px, lg: 1920px,
xl: 1200px, xl: 1921px,
) !default; ) !default;
$z-index: ( $z-index: (