forked from M3-Academy/challenge-vtex-io
feat: adiciona css product main 1024px
This commit is contained in:
parent
6b8aa62de9
commit
9c9fc3fb5a
@ -99,12 +99,11 @@
|
|||||||
"product-images": {
|
"product-images": {
|
||||||
"props": {
|
"props": {
|
||||||
"aspectRatio": {
|
"aspectRatio": {
|
||||||
"desktop": "auto",
|
"desktop": "auto"
|
||||||
"phone": "16:9"
|
// "phone": "16:9"
|
||||||
},
|
},
|
||||||
"showNavigationArrows": false,
|
"showNavigationArrows": false,
|
||||||
"showPaginationDots": false,
|
"showPaginationDots": false,
|
||||||
"maxHeight": 664,
|
|
||||||
"thumbnailsOrientation": "horizontal",
|
"thumbnailsOrientation": "horizontal",
|
||||||
"thumbnailMaxHeight": 90
|
"thumbnailMaxHeight": 90
|
||||||
}
|
}
|
||||||
@ -206,10 +205,18 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"flex-layout.row#product-name",
|
||||||
"product-identifier.product",
|
"product-identifier.product",
|
||||||
"flex-layout.row#availability",
|
"html#availability",
|
||||||
"sku-selector"
|
"sku-selector"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"html#availability": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "availability"
|
||||||
|
},
|
||||||
|
"children": ["flex-layout.row#availability"]
|
||||||
|
},
|
||||||
|
|
||||||
"flex-layout.row#availability": {
|
"flex-layout.row#availability": {
|
||||||
"props": {
|
"props": {
|
||||||
"blockClass": "message-availability"
|
"blockClass": "message-availability"
|
||||||
|
@ -115,5 +115,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent--product-container {
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
@ -11,6 +11,7 @@
|
|||||||
.product-identifier--productReference {
|
.product-identifier--productReference {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-identifier__value {
|
.product-identifier__value {
|
||||||
@ -19,3 +20,9 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.product-identifier--productReference {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
@ -35,7 +35,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sliderTrackContainer--shelf {
|
.sliderTrackContainer--shelf {
|
||||||
max-width: 1304px;
|
width: 95.883%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderLeftArrow--shelf {
|
.sliderLeftArrow--shelf {
|
||||||
|
@ -13,6 +13,11 @@
|
|||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.productBrand--quickview {
|
.productBrand--quickview {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
@ -28,7 +33,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productImageTag--main {
|
.productImageTag--main {
|
||||||
max-width: 664px;
|
width: 100%;
|
||||||
|
max-height: max-content !important;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselThumbBorder {
|
.carouselThumbBorder {
|
||||||
@ -85,6 +93,7 @@
|
|||||||
|
|
||||||
.skuSelectorSubcontainer--tamanho {
|
.skuSelectorSubcontainer--tamanho {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
.skuSelectorSubcontainer--tamanho .skuSelectorName {
|
.skuSelectorSubcontainer--tamanho .skuSelectorName {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -332,7 +341,7 @@
|
|||||||
|
|
||||||
.buttonContainer--pageProduct :global(.vtex-button) {
|
.buttonContainer--pageProduct :global(.vtex-button) {
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 4px solid #ffffff;
|
border-bottom: 4px solid #cccccc;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -345,7 +354,7 @@
|
|||||||
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-bottom: 1px solid #ffffff;
|
border-bottom: 1px solid #cccccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
||||||
@ -389,8 +398,7 @@
|
|||||||
grid-template-areas: "nm em" "sub sub";
|
grid-template-areas: "nm em" "sub sub";
|
||||||
justify-content: inherit;
|
justify-content: inherit;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
width: 59.024%;
|
||||||
max-width: 399px;
|
|
||||||
}
|
}
|
||||||
.form .content .inputName {
|
.form .content .inputName {
|
||||||
grid-area: nm;
|
grid-area: nm;
|
||||||
@ -400,13 +408,13 @@
|
|||||||
.form .content .inputName :global(.vtex-input-prefix__group) {
|
.form .content .inputName :global(.vtex-input-prefix__group) {
|
||||||
border: 1px solid #868686;
|
border: 1px solid #868686;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
|
.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
display: flex;
|
|
||||||
color: #989898;
|
color: #989898;
|
||||||
}
|
}
|
||||||
.form .content .inputEmail {
|
.form .content .inputEmail {
|
||||||
@ -417,13 +425,13 @@
|
|||||||
.form .content .inputEmail :global(.vtex-input-prefix__group) {
|
.form .content .inputEmail :global(.vtex-input-prefix__group) {
|
||||||
border: 1px solid #868686;
|
border: 1px solid #868686;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
|
.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
display: flex;
|
|
||||||
color: #989898;
|
color: #989898;
|
||||||
}
|
}
|
||||||
.form .content .submit {
|
.form .content .submit {
|
||||||
@ -437,6 +445,7 @@
|
|||||||
background: #000000;
|
background: #000000;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.form .content .submit :global(.vtex-button__label) {
|
.form .content .submit :global(.vtex-button__label) {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -449,3 +458,18 @@
|
|||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
color: #fff;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
@ -107,5 +107,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent--product-container {
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
.product-identifier--productReference {
|
.product-identifier--productReference {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-identifier__value {
|
.product-identifier__value {
|
||||||
@ -9,3 +10,9 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.product-identifier--productReference {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sliderTrackContainer--shelf {
|
.sliderTrackContainer--shelf {
|
||||||
max-width: 1304px;
|
width: 95.883%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sliderLeftArrow--shelf {
|
.sliderLeftArrow--shelf {
|
||||||
|
@ -2,10 +2,10 @@
|
|||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .container {
|
.container {
|
||||||
// display: flex;
|
display: flex;
|
||||||
// justify-content: center;
|
justify-content: center;
|
||||||
// }
|
}
|
||||||
|
|
||||||
.productBrand--quickview {
|
.productBrand--quickview {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -22,7 +22,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productImageTag--main {
|
.productImageTag--main {
|
||||||
max-width: 664px;
|
width: 100%;
|
||||||
|
max-height: max-content !important;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselThumbBorder {
|
.carouselThumbBorder {
|
||||||
@ -81,6 +84,7 @@
|
|||||||
|
|
||||||
.skuSelectorSubcontainer--tamanho {
|
.skuSelectorSubcontainer--tamanho {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
.skuSelectorName {
|
.skuSelectorName {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -332,7 +336,7 @@
|
|||||||
|
|
||||||
.buttonContainer--pageProduct :global(.vtex-button) {
|
.buttonContainer--pageProduct :global(.vtex-button) {
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 4px solid $color-gray11;
|
border-bottom: 4px solid $color-gray6;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -345,7 +349,7 @@
|
|||||||
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-bottom: 1px solid $color-gray11;
|
border-bottom: 1px solid $color-gray6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
|
||||||
@ -395,8 +399,7 @@
|
|||||||
"sub sub";
|
"sub sub";
|
||||||
justify-content: inherit;
|
justify-content: inherit;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
width: 59.024%;
|
||||||
max-width: 399px;
|
|
||||||
|
|
||||||
.inputName {
|
.inputName {
|
||||||
grid-area: nm;
|
grid-area: nm;
|
||||||
@ -406,6 +409,7 @@
|
|||||||
& :global(.vtex-input-prefix__group) {
|
& :global(.vtex-input-prefix__group) {
|
||||||
border: 1px solid $color-gray12;
|
border: 1px solid $color-gray12;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& :global(.vtex-styleguide-9-x-input)::placeholder {
|
& :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||||
@ -413,7 +417,6 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
display: flex;
|
|
||||||
color: $color-gray13;
|
color: $color-gray13;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -426,6 +429,7 @@
|
|||||||
& :global(.vtex-input-prefix__group) {
|
& :global(.vtex-input-prefix__group) {
|
||||||
border: 1px solid $color-gray12;
|
border: 1px solid $color-gray12;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& :global(.vtex-styleguide-9-x-input)::placeholder {
|
& :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||||
@ -433,7 +437,6 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
display: flex;
|
|
||||||
color: $color-gray13;
|
color: $color-gray13;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -449,6 +452,7 @@
|
|||||||
background: $color-black;
|
background: $color-black;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
& :global(.vtex-button__label) {
|
& :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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user