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: adição scss newsletter

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-03 18:05:00 -03:00
parent e1db14dfae
commit 3567162e07
8 changed files with 419 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,9 +49,7 @@
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@ -81,7 +79,6 @@
"children": ["stack-layout"],
"props": {
"width": "51%",
// "maxHeight": 664,
"rowGap": 0
}
},
@ -266,27 +263,27 @@
}
},
"tab-content.item#desc2": {
"children": [],
"children": ["flex-layout.row#description-row"],
"props": {
"tabId": "desc2"
}
},
"tab-content.item#desc3": {
"children": [],
"children": ["flex-layout.row#description-row"],
"props": {
"tabId": "desc2"
"tabId": "desc3"
}
},
"tab-content.item#desc4": {
"children": [],
"children": ["flex-layout.row#description-row"],
"props": {
"tabId": "desc2"
"tabId": "desc4"
}
},
"tab-content.item#desc5": {
"children": [],
"children": ["flex-layout.row#description-row"],
"props": {
"tabId": "desc2"
"tabId": "desc5"
}
},

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

@ -13,10 +13,7 @@
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
max-height: 664px !important;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container {
display: none;
}
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper {
:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) :global(.vtex-store-components-3-x-figure--video) {
display: none;
}

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

@ -1,31 +1,133 @@
/*
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 */
.sliderLayoutContainer {
padding: 16px 40px 113px;
}
.sliderLayoutContainer .sliderTrackContainer {
padding: 0 24px 36px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
gap: 16px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 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-imageContainer) {
display: flex;
order: 1;
width: 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-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
}
.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;
order: 2;
padding: 0;
justify-content: center;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.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) :global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
height: 50px;
align-items: center;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000;
}
.sliderTrackContainer {
max-width: 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-priceContainer) {
display: flex;
order: 3;
padding: 0;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
display: flex;
justify-content: center;
align-items: center;
text-decoration-line: line-through;
gap: 1px;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-transform: lowercase;
text-decoration: none;
padding: 0;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-decoration: none;
padding: 0;
}
.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-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after {
content: "por";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
}
.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
}
.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
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-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) {
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-buyButtonContainer) {
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-description) {
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-SKUSelectorContainer) {
display: none;
}
.sliderLayoutContainer .paginationDotsContainer {
bottom: 113px;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot {
width: 10px;
height: 10px;
background-color: #000;
border: 0.5px solid #000;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
background-color: #fff;
}

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

@ -8,7 +8,70 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
background: black;
}
.newsletter .container .form .label {
font-size: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.newsletter .container .form .label::before {
content: "Assine nossa newsletter";
font-size: 24px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
line-height: 38px;
color: #ffffff;
}
.newsletter .container .form .label::after {
content: "Receba ofertas e novidades por e-mail";
white-space: pre;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
.newsletter .container .form .inputGroup {
display: flex;
justify-content: center;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
border-radius: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
background: black;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
width: 774px;
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before {
content: "Digite seu e-mail";
font-size: 16px;
color: white;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
}
.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
background: black;
border: none;
border-bottom: 3px gray solid;
border-radius: 0;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
.productBrand {

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

@ -5,11 +5,12 @@
max-height: 664px !important;
}
:global(.vtex-store-components-3-x-carouselGaleryThumbs) {
.swiper-container {
// display: none !important;
// :global(.vtex-store-components-3-x-carouselGaleryThumbs) > .swiper-wrapper {
// display: none;
// }
:global(.vtex-store-components-3-x-figure--video) {
display: none;
.swiper-wrapper {
display: none;
}
}
}
}

146
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,146 @@
.sliderLayoutContainer {
padding: 16px 40px 113px;
.sliderTrackContainer {
padding: 0 24px 36px;
.sliderTrack {
gap: 16px;
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) {
margin: 0;
width: 100%;
:global(.vtex-product-summary-2-x-element) {
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
width: 100%;
:global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
}
}
:global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
order: 2;
padding: 0;
justify-content: center;
:global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
height: 50px;
align-items: center;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #000;
}
}
:global(.vtex-product-summary-2-x-priceContainer) {
display: flex;
order: 3;
padding: 0;
:global(.vtex-store-components-3-x-listPrice) {
display: flex;
justify-content: center;
align-items: center;
text-decoration-line: line-through;
gap: 1px;
:global(.vtex-store-components-3-x-listPriceLabel) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-transform: lowercase;
text-decoration: none;
padding: 0;
}
:global(.vtex-store-components-3-x-listPriceValue) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
text-decoration: none;
padding: 0;
}
}
:global(.vtex-store-components-3-x-listPrice)::after {
content: 'por';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #bababa;
}
:global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;
:global(.vtex-product-summary-2-x-currencyContainer) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000;
}
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
}
:global(.vtex-store-components-3-x-installmentsPrice) {
display: none;
}
}
:global(.vtex-product-summary-2-x-buyButtonContainer) {
display: none;
}
:global(.vtex-product-summary-2-x-description) {
display: none;
}
:global(.vtex-product-summary-2-x-SKUSelectorContainer) {
display: none;
}
}
}
}
}
}
}
.paginationDotsContainer {
bottom: 113px;
.paginationDot {
width: 10px;
height: 10px;
background-color: #000;
border: 0.5px solid #000;
}
.paginationDot--isActive {
background-color: #fff;
}
}
}

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

@ -1,11 +1,79 @@
.newsletter {
background: red;
background: black;
.container {
.form {
.label {
font-size: 0;
display: flex;
flex-direction: column;
gap: 16px;
&::before {
content: 'Assine nossa newsletter';
font-size: 24px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
line-height: 38px;
color: #ffffff;
}
&::after {
content: 'Receba ofertas e novidades por e-mail';
white-space: pre;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
}
.inputGroup {
display: flex;
justify-content: center;
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px #929292 solid;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
background: black;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
width: 774px;
&::before {
content: 'Digite seu e-mail';
font-size: 16px;
color: white;
}
}
}
}
:global(.vtex-store-components-3-x-buttonContainer) {
padding: 0;
:global(.vtex-button) {
background: black;
border: none;
border-bottom: 3px gray solid;
border-radius: 0;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
}
}
}
}
}
.productBrand {
display: flex;
justify-content: flex-end;
// margin-right: 37px;
font-family: 'Open Sans', sans-serif;
font-style: normal;