Vitor_soares/challenge-vtex-io-vitor-soares
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilização do bloco customizavel pix

Browse Source
This commit is contained in:
Vitor Soares 2023-01-31 19:28:50 -03:00
parent d987535bad
commit c8c8d5ab42
4 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -354,6 +354,8 @@
.subscriberContainer .title { .subscriberContainer .title {
font-size: 0; font-size: 0;
line-height: 0;
margin: 0;
} }
.subscriberContainer .title::after { .subscriberContainer .title::after {
content: "Produto Indisponível"; content: "Produto Indisponível";
@ -372,21 +374,29 @@
line-height: 19px; line-height: 19px;
color: #868686; color: #868686;
} }
.subscriberContainer .form {
margin-bottom: 16px;
}
.subscriberContainer .form .content { .subscriberContainer .form .content {
display: grid; display: grid;
grid-template-areas: " nome email" " submit submit"; grid-template-areas: " nome email" " submit submit";
justify-content: inherit; justify-content: inherit;
gap: 8px; gap: 8px;
margin-top: 15px;
} }
.subscriberContainer .form .content .inputName { .subscriberContainer .form .content .inputName {
grid-area: nome; grid-area: nome;
margin-bottom: 0;
} }
.subscriberContainer .form .content .inputEmail { .subscriberContainer .form .content .inputEmail {
grid-area: email; grid-area: email;
margin-bottom: 0;
} }
.subscriberContainer .form .content .submit { .subscriberContainer .form .content .submit {
grid-area: submit; grid-area: submit;
width: 100%; width: 100%;
margin-top: 7px;
margin-bottom: 0;
} }
.subscriberContainer .form .content .submit :global(.vtex-button) { .subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%; width: 100%;

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -13,6 +14,16 @@
.container--structure { .container--structure {
padding: 0 40px; padding: 0 40px;
} }
.container--structure::after {
content: "Você também pode gostar:";
display: block;
text-align: center;
font-weight: 400;
font-size: 24px;
line-height: 38px;
padding: 16px 0 32px 0;
color: #575757;
}
.contentContainer { .contentContainer {
padding: 0 32px; padding: 0 32px;
@ -38,6 +49,7 @@
} }
.listContainer .listItemActive :global(.vtex-button) { .listContainer .listItemActive :global(.vtex-button) {
background-color: #fff; background-color: #fff;
width: 114px;
border: none; border: none;
} }
.listContainer .listItemActive :global(.vtex-button__label) { .listContainer .listItemActive :global(.vtex-button__label) {

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

@ -430,6 +430,8 @@ margin-top: 16px;
.title { .title {
font-size: 0; font-size: 0;
line-height: 0;
margin: 0;
&::after { &::after {
content: "Produto Indisponível"; content: "Produto Indisponível";
@ -455,24 +457,31 @@ margin-top: 16px;
} }
.form { .form {
margin-bottom: 16px;
.content { .content {
display: grid; display: grid;
grid-template-areas: " nome email" grid-template-areas: " nome email"
" submit submit"; " submit submit";
justify-content: inherit; justify-content: inherit;
gap: 8px; gap: 8px;
margin-top: 15px;
.inputName { .inputName {
grid-area: nome; grid-area: nome;
margin-bottom: 0;
} }
.inputEmail { .inputEmail {
grid-area: email; grid-area: email;
margin-bottom: 0;
} }
.submit { .submit {
grid-area: submit; grid-area: submit;
width: 100%; width: 100%;
margin-top: 7px;
margin-bottom: 0;
:global(.vtex-button) { :global(.vtex-button) {
width: 100%; width: 100%;

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

@ -1,5 +1,17 @@
.container--structure { .container--structure {
padding: 0 40px; padding: 0 40px;
&::after {
content: "Você também pode gostar:";
display: block;
text-align: center;
font-weight: 400;
font-size: 24px;
line-height: 38px;
padding: 16px 0 32px 0;
color: $gray-100;
}
} }
.contentContainer { .contentContainer {
@ -34,6 +46,7 @@
.listItemActive { .listItemActive {
:global(.vtex-button) { :global(.vtex-button) {
background-color: $white; background-color: $white;
width: 114px;
border: none; border: none;
} }