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

feat: scss prateleira sujestões

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-07 10:52:20 -03:00
parent ba26c57cb0
commit 0415e4e9c7
9 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/components/Html/style.css
View File

@ -1,11 +1,11 @@
[class*='html'] {
[class*='html--Quantity-Button'] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
[class*='html'] > [class*='button'] {
[class*='html--Quantity-Button'] > [class*='button'] {
width: 100%;
height: 49px;
background: #000;

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

@ -58,7 +58,7 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"html#product-images",
"product-bookmark",
"product-specification-badges"
]
@ -81,9 +81,13 @@
}
},
"flex-layout.row#product-image": {
"html#product-images": {
"props": {
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
@ -118,6 +122,12 @@
]
},
"shipping-simulator": {
"props": {
"testId": "shipping-simulator"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@ -145,6 +155,9 @@
}
},
"html#quantityAndButton": {
"props": {
"blockClass": "Quantity-Button"
},
"children": ["product-quantity", "add-to-cart-button"]
},
@ -322,6 +335,14 @@
]
},
"product-summary-image": {
"props": {
"aspectRatio": {
"desktop": "1:1"
}
}
},
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
@ -330,7 +351,7 @@
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"showNavigationArrows": "always",
"blockClass": "carousel"
}
}

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

@ -20,6 +20,9 @@
.flexColChild :global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button {
display: flex;
}
.flexRowContent {
margin-bottom: 0;

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

@ -8,19 +8,28 @@
/* Media Query M3 */
/* Grid breakpoints */
.sliderLayoutContainer {
padding: 16px 40px 113px;
padding: 0 40px 32px;
margin-bottom: 32px;
}
.sliderLayoutContainer .sliderLeftArrow {
left: 36px;
margin: 0;
padding: 0;
}
.sliderLayoutContainer .sliderRightArrow {
right: 36px;
margin: 0;
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer {
padding: 0 40px 36px;
margin: 0 auto;
width: 94%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
width: 450% !important;
gap: 16px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
max-width: none !important;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
padding: 0;
@ -28,22 +37,13 @@
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: fit-content;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) {
background-color: #ededed;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
width: fit-content;
min-width: 314.4px;
height: fit-content;
min-height: 314.4px;
max-height: 314.4px;
border-radius: 0;
background-color: #ededed;
width: 100%;
height: 100%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
@ -138,7 +138,6 @@
}
.sliderLayoutContainer .paginationDotsContainer {
align-items: center;
bottom: 113px;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot {
width: 10px;

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

@ -9,8 +9,12 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
margin-top: 32px;
background: black;
}
.newsletter .container {
padding: 32px 0 16px 0;
}
.newsletter .container .form .label {
font-size: 0;
display: flex;

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

@ -15,6 +15,10 @@
:global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
.agenciamagma-store-theme-5-x-html--Quantity-Button {
display: flex;
}
}
.flexRowContent {

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

@ -1,42 +1,45 @@
.sliderLayoutContainer {
padding: 16px 40px 113px;
padding: 0 40px 32px;
margin-bottom: 32px;
.sliderLeftArrow {
left: 36px;
margin: 0;
padding: 0;
}
.sliderRightArrow {
right: 36px;
margin: 0;
padding: 0;
}
.sliderTrackContainer {
padding: 0 40px 36px;
margin: 0 auto;
width: 94%;
.sliderTrack {
width: 450% !important;
gap: 16px;
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
max-width: none !important;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: fit-content;
:global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-product-summary-2-x-imageContainer) {
background-color: #ededed;
:global(.vtex-product-summary-2-x-imageNormal) {
width: fit-content;
min-width: 314.4px;
height: fit-content;
min-height: 314.4px;
max-height: 314.4px;
border-radius: 0;
background-color: #ededed;
width: 100%;
height: 100%;
}
}
}
@ -149,7 +152,7 @@
}
.paginationDotsContainer {
align-items: center;
bottom: 113px;
// bottom: -32px;
.paginationDot {
width: 10px;

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

@ -1,6 +1,8 @@
.newsletter {
margin-top: 32px;
background: black;
.container {
padding: 32px 0 16px 0;
.form {
.label {
font-size: 0;

1
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -4,7 +4,6 @@
flex-direction: row;
justify-content: space-around;
padding: 0 40px;
// column-gap: 197.5px;
&::after {
content: '';