SabrinaMiranda/challenge-vtex-io-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estiliza o bloco shipping-simulator

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-03 02:14:49 -03:00
parent 57d8ce54bb
commit c15689a338
4 changed files with 137 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,3 +60,18 @@
line-height: 22px; line-height: 22px;
color: #000000; color: #000000;
} }
[class*="html--shipping-simulator"] button {
background-color: #000000;
border: none;
width: 49px;
height: 49px;
}
[class*="html--shipping-simulator"] a {
color: #000000;
}
[class*="html--shipping-simulator"] svg {
display: none;
}

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

@ -146,11 +146,20 @@
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "html#shipping-simulator",
"share#default" "share#default"
] ]
}, },
"html#shipping-simulator": {
"props": {
"tag": "div",
"testId": "shipping-simulator",
"blockClass": "shipping-simulator"
},
"children": ["shipping-simulator"]
},
"product-installments#m3": { "product-installments#m3": {
"props": { "props": {
"markers": ["highlight"], "markers": ["highlight"],

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

@ -145,3 +145,54 @@
.skuSelectorSubcontainer { .skuSelectorSubcontainer {
margin: 0; margin: 0;
} }
.shippingContainer {
display: flex;
align-items: flex-end;
position: relative;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "Calcular Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
padding: 0;
position: absolute;
top: 43px;
left: 312px;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
width: 231px;
}
.shippingContainer :global(.vtex-input__error) {
position: absolute;
margin: 2px;
}

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

@ -141,3 +141,64 @@
.skuSelectorSubcontainer { .skuSelectorSubcontainer {
margin: 0; margin: 0;
} }
.shippingContainer {
display: flex;
align-items: flex-end;
position: relative;
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "Calcular Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
text-transform: uppercase;
}
}
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
padding: 0;
position: absolute;
top: 43px;
left: 312px;
}
:global(.vtex-input-prefix__group ) {
height: 49px;
width: 231px;
}
:global(.vtex-input__error) {
position: absolute;
margin: 2px;
}
}