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

feat(pdp): Adiciona gap skus e margins title prateleira

Browse Source
This commit is contained in:
Cainã Milech 2023-02-03 17:22:47 -03:00
parent 5b93735a80
commit 94aa3c4768
9 changed files with 105 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/components/Pix/Pix.module.css
View File

@ -3,6 +3,7 @@
gap: 26px;
align-items: center;
margin-top: 8px;
width: 197px;
}
.image {

5
store/blocks/pdp/product-tablayout.jsonc
View File

@ -1,4 +1,9 @@
{
"html#tab-layout": {
"props": { "testId": "tab-layout" },
"children": ["tab-layout#details"]
},
"tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"],
"props": {

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

@ -3,7 +3,7 @@
"children": [
"html#breadcontainer",
"condition-layout.product#availability",
"tab-layout#details",
"html#tab-layout",
"list-context.product-list#prateleira",
"newsletter"
]
@ -160,7 +160,7 @@
"html#skus",
"html#qtd-btn",
"availability-subscriber",
"shipping-simulator"
"html#shipping-simulator"
]
},
@ -291,5 +291,11 @@
"props": {
"blockClass": "frete"
}
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
}
}

4
styles/css/vtex.product-summary.css
View File

@ -27,4 +27,8 @@
.spacer {
display: none;
}
.element {
padding: 0;
}

12
styles/css/vtex.rich-text.css
View File

@ -9,7 +9,17 @@
/* Grid breakpoints */
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
.container--title-prateleira {
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-prateleira {
margin-bottom: 16px;
}
}
.container--title-prateleira .paragraph--title-prateleira {
margin: 0;

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

@ -63,6 +63,11 @@
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
}
.frameAround--skus {
@ -70,9 +75,14 @@
}
.skuSelectorOptionsList {
margin-left: -5px;
display: flex;
margin-left: 0;
gap: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
@ -85,6 +95,10 @@
color: color-gray6;
}
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -111,6 +125,9 @@
justify-content: center;
display: flex;
}
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -118,6 +135,9 @@
color: #000000;
}
.skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
@ -146,6 +166,10 @@
height: 48px;
}
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);

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

@ -18,3 +18,7 @@
.spacer {
display: none;
}
.element {
padding: 0;
}

8
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -1,6 +1,12 @@
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
margin-bottom: 32px;
@media screen and (max-width: 1024px) {
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
margin-bottom: 16px;
}
.paragraph--title-prateleira {
margin: 0;

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

@ -55,6 +55,11 @@
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
}
.frameAround--skus {
@ -62,10 +67,14 @@
}
.skuSelectorOptionsList {
margin-left: -5px;
display: flex;
margin-left: 0;
gap: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
.skuSelectorTextContainer {
.skuSelectorName {
@ -84,6 +93,10 @@
}
}
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -101,6 +114,7 @@
display: flex;
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
border: 2px solid $color-black-100;
@ -110,6 +124,15 @@
align-items: center;
justify-content: center;
display: flex;
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
.skuSelectorItemTextValue--skus {
@ -121,6 +144,8 @@
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorName {
font-size: 0;
@ -159,6 +184,20 @@
}
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
}
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(
@ -178,7 +217,6 @@
}
//FRETE
.shippingContainer {
display: flex;
align-items: end;