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

Merge pull request 'feat: adiciona css product main 1024px' (#23) from feature/adiciona-css-product-main-1024px into development

Browse Source 
Reviewed-on: #23
This commit is contained in:
Rafael Sampaio de Oliveira 2023-02-01 20:13:57 +00:00
commit 2e2d36d50a
9 changed files with 116 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,12 +99,11 @@
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"desktop": "auto"
// "phone": "16:9"
},
"showNavigationArrows": false,
"showPaginationDots": false,
"maxHeight": 664,
"thumbnailsOrientation": "horizontal",
"thumbnailMaxHeight": 90
}
@ -206,10 +205,18 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#availability",
"html#availability",
"sku-selector"
]
},
"html#availability": {
"props": {
"blockClass": "availability"
},
"children": ["flex-layout.row#availability"]
},
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"

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

@ -115,5 +115,15 @@
}
.flexRowContent--product-container {
padding: 0 40px;
width: 94.973%;
}
@media (max-width: 1024px) {
.flexRowContent--product-container .flexRowContent {
flex-direction: column;
}
.flexRowContent--product-container .stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}

7
styles/css/vtex.product-identifier.css
View File

@ -11,6 +11,7 @@
.product-identifier--productReference {
display: flex;
justify-content: end;
margin-bottom: 24px;
}
.product-identifier__value {
@ -18,4 +19,10 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
@media (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}

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

@ -35,7 +35,7 @@
}
.sliderTrackContainer--shelf {
max-width: 1304px;
width: 95.883%;
}
.sliderLeftArrow--shelf {

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

@ -13,6 +13,11 @@
background: red;
}
.container {
display: flex;
justify-content: center;
}
.productBrand--quickview {
display: flex;
justify-content: end;
@ -28,7 +33,10 @@
}
.productImageTag--main {
max-width: 664px;
width: 100%;
max-height: max-content !important;
max-width: 100%;
object-fit: contain;
}
.carouselThumbBorder {
@ -85,6 +93,7 @@
.skuSelectorSubcontainer--tamanho {
order: 1;
margin: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
@ -332,7 +341,7 @@
.buttonContainer--pageProduct :global(.vtex-button) {
border: none;
border-bottom: 4px solid #ffffff;
border-bottom: 4px solid #cccccc;
border-radius: 0;
background: transparent;
font-style: normal;
@ -345,7 +354,7 @@
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
}
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
@ -389,8 +398,7 @@
grid-template-areas: "nm em" "sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
width: 59.024%;
}
.form .content .inputName {
grid-area: nm;
@ -400,13 +408,13 @@
.form .content .inputName :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
padding-bottom: 5px;
}
.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .inputEmail {
@ -417,13 +425,13 @@
.form .content .inputEmail :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
padding-bottom: 5px;
}
.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .submit {
@ -437,6 +445,7 @@
background: #000000;
border: none;
border-radius: 0;
width: 100%;
}
.form .content .submit :global(.vtex-button__label) {
font-size: 0;
@ -448,4 +457,19 @@
font-size: 18px;
line-height: 25px;
color: #fff;
}
.productImagesGallerySlide {
width: 100% !important;
}
@media (max-width: 1024px) {
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
.form .content {
width: 100%;
max-width: 100%;
}
}

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

@ -107,5 +107,18 @@
}
.flexRowContent--product-container {
padding: 0 40px;
width: 94.973%;
}
@media (max-width: 1024px) {
.flexRowContent--product-container {
.flexRowContent {
flex-direction: column;
}
.stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
}
}

7
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,6 +1,7 @@
.product-identifier--productReference {
display: flex;
justify-content: end;
margin-bottom: 24px;
}
.product-identifier__value {
@ -9,3 +10,9 @@
font-size: 14px;
line-height: 19px;
}
@media (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}

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

@ -25,7 +25,7 @@
}
.sliderTrackContainer--shelf {
max-width: 1304px;
width: 95.883%;
}
.sliderLeftArrow--shelf {

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

@ -2,10 +2,10 @@
background: red;
}
// .container {
// display: flex;
// justify-content: center;
// }
.container {
display: flex;
justify-content: center;
}
.productBrand--quickview {
display: flex;
@ -22,7 +22,10 @@
}
.productImageTag--main {
max-width: 664px;
width: 100%;
max-height: max-content !important;
max-width: 100%;
object-fit: contain;
}
.carouselThumbBorder {
@ -81,6 +84,7 @@
.skuSelectorSubcontainer--tamanho {
order: 1;
margin: 0;
.skuSelectorName {
font-size: 0;
@ -332,7 +336,7 @@
.buttonContainer--pageProduct :global(.vtex-button) {
border: none;
border-bottom: 4px solid $color-gray11;
border-bottom: 4px solid $color-gray6;
border-radius: 0;
background: transparent;
font-style: normal;
@ -345,7 +349,7 @@
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
border-bottom: 1px solid $color-gray11;
border-bottom: 1px solid $color-gray6;
}
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
@ -395,8 +399,7 @@
"sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
width: 59.024%;
.inputName {
grid-area: nm;
@ -406,6 +409,7 @@
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
padding-bottom: 5px;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
@ -413,7 +417,6 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
@ -426,6 +429,7 @@
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
padding-bottom: 5px;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
@ -433,7 +437,6 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
@ -449,6 +452,7 @@
background: $color-black;
border: none;
border-radius: 0;
width: 100%;
}
& :global(.vtex-button__label) {
@ -466,3 +470,21 @@
}
}
}
.productImagesGallerySlide {
width: 100% !important;
}
@media (max-width: 1024px) {
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
.form {
.content {
width: 100%;
max-width: 100%;
}
}
}