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

refactor: aplica mudanças no código

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-03 16:57:10 -03:00
parent 8ccd7cd95d
commit 0ecadd329b
4 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,8 @@
background-color: #FFFFFF; background-color: #FFFFFF;
} }
[class*="html--product-main"] { [class*="html--product-main"],
[class*="html--product-availability"] {
width: 94.4444%; width: 94.4444%;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
@ -13,7 +14,8 @@
grid-area: 1/1; grid-area: 1/1;
} }
[class*="html--right-col"] { [class*="html--right-col"],
[class*="html--info-availability"] {
grid-area: 1/2; grid-area: 1/2;
margin-left: 32px; margin-left: 32px;
} }

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

@ -205,7 +205,7 @@
"html#product-availability": { "html#product-availability": {
"props": { "props": {
"tag": "div", "tag": "section",
"blockClass": "product-availability" "blockClass": "product-availability"
}, },
"children": [ "children": [
@ -216,14 +216,14 @@
"html#right-col-availability": { "html#right-col-availability": {
"props": { "props": {
"blockClass": "info-availability", "tag": "section",
"tag": "div" "blockClass": "info-availability"
}, },
"children": [ "children": [
"html#product-name", "html#product-name",
"product-identifier.product", "product-identifier.product",
"html#sku-selector-m3", "html#availability",
"html#availability" "html#sku-selector-m3"
] ]
}, },

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

@ -67,6 +67,9 @@
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {
border-radius: 50%;
}
.skuSelectorName, .skuSelectorName,
.skuSelectorNameSeparator, .skuSelectorNameSeparator,
@ -87,8 +90,8 @@
} }
.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) { .skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
width: 46px; width: 100%;
height: 46px; height: 100%;
} }
.frameAround { .frameAround {
@ -125,6 +128,12 @@
.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) { .skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
color: #000000; color: #000000;
} }
.skuSelectorItem--selected :global(.vtex-store-components-3-x-diagonalCross) {
border: 2px solid #000000;
}
.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
border: none;
}
.skuSelectorOptionsList { .skuSelectorOptionsList {
gap: 16px; gap: 16px;
@ -136,8 +145,8 @@
border: 1px solid #D5D5D5; border: 1px solid #D5D5D5;
transform: rotate(-45deg); transform: rotate(-45deg);
position: absolute; position: absolute;
left: -80%; left: -100%;
right: -10.46%; right: -20%;
top: 82.5%; top: 82.5%;
bottom: 17.5%; bottom: 17.5%;
} }

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

@ -57,6 +57,10 @@
flex-direction: column-reverse; flex-direction: column-reverse;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
:global(.vtex-store-components-3-x-skuSelectorItemImageValue) {
border-radius: 50%;
}
} }
.skuSelectorName, .skuSelectorName,
@ -79,8 +83,8 @@
.skuSelectorItemImage { .skuSelectorItemImage {
:global(.vtex-store-components-3-x-skuSelectorInternalBox) { :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
width: 46px; width: 100%;
height: 46px; height: 100%;
} }
} }
@ -118,6 +122,14 @@
:global(.vtex-store-components-3-x-skuSelectorItemTextValue) { :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
color: #000000; color: #000000;
} }
:global(.vtex-store-components-3-x-diagonalCross) {
border: 2px solid #000000;
}
:global(.vtex-store-components-3-x-skuSelectorInternalBox) {
border: none;
}
} }
.skuSelectorOptionsList { .skuSelectorOptionsList {
@ -132,8 +144,8 @@
transform: rotate(-45deg); transform: rotate(-45deg);
position: absolute; position: absolute;
left: -80%; left: -100%;
right: -10.46%; right: -20%;
top: 82.5%; top: 82.5%;
bottom: 17.5%; bottom: 17.5%;
} }