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

feat: cria estilização e organizacao do breadcrumb

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-08 19:43:54 -03:00
parent e1a99a7e3c
commit 330664e216
13 changed files with 470 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,10 +82,10 @@
}
}
@media (min-width:374px) and (max-width:376px) {
/* @media (min-width:374px) and (max-width:376px) {
[class*="html--m3-html-product-sumary"] {
height: 254.8px!important;
}}
}} */
@media (max-width:1920px) {
[class*="html--m3-html-product-sumary"] {
height: unset;
@ -103,3 +103,7 @@ max-width:314.4px;
[class*="html--quantity"] {
max-width: 128px!important;
}
[class*="html--m3-html-product-sumary"]{
display: flex;
flex-direction: column;
}

9
store/blocks/pdp/product-shelf-related.jsonc
View File

@ -23,9 +23,16 @@
"children": [
"product-summary-image",
"product-summary-name",
"product-summary-price"
"product-list-price",
"product-selling-price"
]
},
"product-list-price": {
"props": {
"blockClass": "m3-product-list-price",
"message": "de {listPriceValue} por"
}
},
"slider-layout#m3-carousel-products": {
"props": {
"blockClass": "m3-carousel-products",

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

@ -181,17 +181,18 @@
"blockClass": "info-availability"
},
"children": [
"flex-layout.row#identifieAndName",
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#identifieAndName": {
"props": {
"blockClass": "identifieAndName"
},
"children": ["flex-layout.row#product-name", "product-identifier.product"]
},
// "flex-layout.row#identifieAndName": {
// "props": {
// "blockClass": "identifieAndName"
// },
// "children": ["flex-layout.row#product-name", "product-identifier.product"]
// },
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"

25
styles/css/vtex.breadcrumb.css Normal file
View File

@ -0,0 +1,25 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.container {
padding: 16px 40px;
}
.container .homeIcon {
display: none;
}
.container .homeLink {
vertical-align: top;
}
.container .homeLink::after {
content: "Home";
visibility: visible;
}
.container :global(.vtex-breadcrumb-1-x-term) {
color: #929292;
}

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

@ -1,79 +1,29 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.listPrice--m3-product-list-price {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #BABABA;
padding: 8px 0;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
.sellingPrice--hasListPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
}

10
styles/css/vtex.slider-layout.css
View File

@ -121,6 +121,16 @@
column-gap: 12px;
bottom: -16px;
}
@media (max-width: 1024px) {
.paginationDotsContainer--m3-carousel-products {
bottom: -24px;
}
}
@media (max-width: 768px) {
.paginationDotsContainer--m3-carousel-products {
bottom: -40px;
}
}
.paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
background-color: #000000;
}

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

@ -11,12 +11,7 @@
.newsletter {
background: #000000;
color: #ffffff;
margin: 64px 0;
}
@media (max-width: 1024px) {
.newsletter {
margin: 32px 0;
}
margin-top: 64px;
}
.newsletter :global(.vtex-store-components-3-x-container) {
padding: 0;
@ -510,84 +505,118 @@
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin: 16px 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTRAS CORES:";
font-size: 14px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-radius: 30px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 21px;
color: #000000;
}
.skuSelectorContainer .diagonalCross {
top: 0px;
right: 10px;
bottom: 0px;
left: 10px;
transform: rotateY(180deg);
color: black;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
.skuSelectorContainer .frameAround {
width: 40px;
height: 40px;
border-radius: 30px;
z-index: 3;
padding: 0;
border-color: #000;
top: 0;
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
margin: auto;
padding: 0;
.skuSelectorContainer .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0 !important;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorSelectorImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextrName .skuSelectorName::before,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectoContainer .skuSelectorName::before {
content: "OUTRAS CORES";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: "OUTROS TAMANHOS: ";
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
margin-left: 0;
gap: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
border-radius: 30px;
color: #000000;
border: 1px solid #989898;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: "Open Sans";
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.skuSelectorContainer .frameAround {
border-color: #000;
z-index: 9;
}
.skuSelectorOptionsList {
margin: 0;
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
color: #000000;
}
.productImageTag--imageDescription--main {

21
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
View File

@ -0,0 +1,21 @@
.container {
padding: 16px 40px;
.homeIcon {
display: none;
}
.homeLink {
vertical-align: top;
&::after {
content: "Home";
visibility: visible;
}
}
:global(.vtex-breadcrumb-1-x-term) {
color: $color-gray6;
}
}

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

@ -55,7 +55,7 @@
}
:global(.vtex-store-components-3-x-productNameContainer--quickview) {
font-family: 'Open Sans';
font-family: $font-family;
font-style: normal;
font-weight: 300;
font-size: 20px;

25
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,25 @@
.listPrice--m3-product-list-price {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: $color-gray9;
padding: 8px 0;
}
.sellingPrice--hasListPrice {
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $color-black;
}

8
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -110,6 +110,14 @@
column-gap: 12px;
bottom: -16px;
@media (max-width:1024px) {
bottom: -24px;
}
@media (max-width:768px) {
bottom: -40px;
}
.paginationDot--m3-carousel-products {
background-color: $color-black;
}

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

@ -2,11 +2,8 @@
background: $color-black;
color: $color-white;
margin: 64px 0;
margin-top: 64px;
@media (max-width:1024px) {
margin: 32px 0;
}
:global(.vtex-store-components-3-x-container) {
padding: 0;
@ -593,110 +590,255 @@
}
// SKU E TAMANHOS
// .skuSelectorContainer {
// display: flex;
// flex-direction: column-reverse;
// .skuSelectorSubcontainer--cor {
// .skuSelectorName {
// font-size: 0;
// margin-left: 16px;
// &::after {
// visibility: visible;
// display: block;
// content: "OUTRAS CORES:";
// font-size: 14px;
// }
// }
// .skuSelectorSelectorImageValue,
// .skuSelectorNameSeparator {
// display: none;
// }
// .frameAround {
// border-radius: 30px;
// }
// .skuSelectorItemImageValue,
// .skuSelectorInternalBox {
// border-radius: 21px;
// color: $color-black;
// }
// }
// .diagonalCross {
// top: 0px;
// right: 10px;
// bottom: 0px;
// left: 10px;
// transform: rotateY(180deg);
// color: black;
// }
// .skuSelectorSubcontainer--tamanho {
// .skuSelectorName {
// font-size: 0;
// margin-left: 16px;
// &::after {
// visibility: visible;
// display: block;
// content: "OUTROS TAMANHOS:";
// font-size: 14px;
// }
// }
// .frameAround {
// // border: 1px solid #989898;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// top: 0;
// left: 0;
// right: 0;
// }
// .skuSelectorInternalBox {
// margin: auto;
// padding: 0;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// color: $color-black;
// border: 1px solid #989898;
// }
// .skuSelectorItemTextValue {
// padding: 0;
// margin: auto;
// font-family: $font-family;
// font-style: normal;
// font-weight: 400;
// font-size: 14px;
// line-height: 19px;
// color: rgba(185, 185, 185, 0.6);
// }
// }
// .valueWrapper .skuSelectorItemTextValue {
// margin-right: 5px;
// }
// .frameAround {
// border-color: #000;
// z-index: 9;
// }
// }
// .skuSelectorOptionsList {
// margin: 0;
// }
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin: 16px 0;
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0;
margin-left: 16px;
&::after {
visibility: visible;
display: block;
content: "OUTRAS CORES:";
font-size: 14px;
}
}
.skuSelectorSelectorImageValue,
.skuSelectorNameSeparator {
display: none;
}
.frameAround {
border-radius: 30px;
}
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 21px;
color: $color-black;
}
.frameAround {
width: 40px;
height: 40px;
border-radius: 30px;
z-index: 3;
padding: 0;
border-color: #000;
top: 0;
left: 0;
}
.diagonalCross {
top: 0px;
right: 10px;
bottom: 0px;
left: 10px;
transform: rotateY(180deg);
color: black;
.skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
margin-left: 0 !important;
.skuSelectorItem {
margin: 0;
}
}
.skuSelectorTextrName,
.skuSelectoContainer {
.skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorName::before {
content: 'OUTRAS CORES';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorName {
font-size: 0;
.skuSelectorNameContainer {
margin: 0;
margin-left: 16px;
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
&::after {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
content: 'OUTROS TAMANHOS: ';
color: #929292;
}
}
}
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
gap: 16px;
.skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
.frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
border: 1px solid #989898;
.diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorItemTextValue {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.skuSelectorItemTextValue {
color: #000000;
}
}
}
}
}
.frameAround {
// border: 1px solid #989898;
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
.skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: $color-black;
border: 1px solid #989898;
}
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}
.valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.frameAround {
border-color: #000;
z-index: 9;
}
}
.skuSelectorOptionsList {
margin: 0;
}
.productImageTag--imageDescription--main {

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

@ -1,4 +1,4 @@
$font-family : $font-family;
$font-family :'Open Sans';
$color-black: #000000;
$color-black2: #292929;
$color-black3: #575757;