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

feat: Estiliza bloco de Newsletter desktop

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-29 18:48:16 -03:00
parent 15ad1c3b84
commit d631739c78
7 changed files with 147 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -336,7 +336,7 @@
"newsletter": {
"props": {
"label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail",
"label": "Assine nossa newsletter",
"placeholder": "Digite seu e-mail",
"submit": "ENVIAR"
}

14
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,14 @@
/*
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 */
.title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

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

@ -8,23 +8,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
display: block;
background: #000000;
}
.newsletter :global(.vtex-input-prefix__group) {
border: none;
}
.newsletter .label {
color: #fff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
.newsletter .button-container :global(.vtex-button__label) {
background-color: transparent;
}
.container {
padding: 0 40px;
}
@ -342,3 +325,61 @@
font-size: 12px;
line-height: 16px;
}
.newsletter {
display: block;
background: #000000;
}
.newsletter :global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
max-width: 774px;
position: relative;
}
.newsletter :global(.vtex-store-components-3-x-form) .label {
color: #fff;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
.newsletter :global(.vtex-store-components-3-x-form) .label::after {
content: "Receba ofertas e novidades por e-mail";
font-size: 18px;
line-height: 25px;
color: #929292;
position: absolute;
top: 85px;
right: 225px;
}
.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
padding-top: 52px;
}
.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
}
.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
border-radius: 0;
border-bottom: 1px solid #929292;
background: transparent;
padding: 0;
}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer {
padding: 0;
}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) {
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #fff;
background-color: transparent;
border: none;
}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
border-bottom: 3px solid #929292;
padding: 6px 17px 12px !important;
}

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

@ -52,7 +52,7 @@
flex-direction: row;
gap: 32px;
align-items: flex-start;
padding: 32px;
padding: 32px 32px 16px;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;

5
styles/sass/pages/product/vtex.shelf.scss Normal file
View File

@ -0,0 +1,5 @@
.title {
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

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

@ -1,29 +1,3 @@
.newsletter {
display: block;
background: $black;
:global(.vtex-input-prefix__group) {
border: none;
// background: $black;
}
.label {
color: $white;
font-weight: 400;
// font-size: 24px;
// line-height: 38px;
font-size: 18px;
line-height: 25px;
}
.button-container {
:global(.vtex-button__label) {
background-color: transparent;
}
}
}
.container {
padding: 0 40px;
@ -397,3 +371,69 @@
}
}
}
.newsletter {
display: block;
background: $black;
:global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
max-width: 774px;
position: relative;
.label {
color: $white;
font-weight: 400;
font-size: 24px;
line-height: 38px;
&::after {
content: "Receba ofertas e novidades por e-mail";
font-size: 18px;
line-height: 25px;
color: $gray-500;
position: absolute;
top: 85px;
right: 225px;
}
}
:global(.vtex-store-components-3-x-inputGroup) {
padding-top: 52px;
:global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $gray-500;
border-radius: 0;
border-bottom: 1px solid $gray-500;
background: transparent;
padding: 0;
}
}
}
.buttonContainer {
padding: 0;
:global(.vtex-button) {
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $white;
background-color: transparent;
border: none;
}
:global(.vtex-button__label) {
border-bottom: 3px solid $gray-500;
padding: 6px 17px 12px !important;
}
}
}
}

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

@ -35,6 +35,7 @@
}
.listItemActive {
:global(.vtex-button) {
background-color: white;
border: none;
@ -58,7 +59,7 @@
flex-direction: row;
gap: 32px;
align-items: flex-start;
padding: 32px;
padding: 32px 32px 16px;
// :global(.vtex-store-components-3-x-content) {
// max-width: 100%;