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

feature/pagina-de-produto #1

Merged
EleonoraOtz merged 21 commits from feature/pagina-de-produto into master 2023-02-03 20:04:20 +00:00
Conversation 0 Commits 21 Files Changed 54 +82 -43
2 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6e86de8d25 - Show all commits

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

@ -334,38 +334,56 @@
line-height: 19px;
color: #868686;
}
.subscriberContainer .form :global(.vtex-input-prefix__group) {
.subscriberContainer .form .content {
display: grid;
grid-template-areas: " nome email" " submit submit";
justify-content: inherit;
gap: 8px;
}
.subscriberContainer .form .content .inputName {
grid-area: nome;
}
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group),
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) {
border-radius: 0;
border: 1px solid #989898;
}
.subscriberContainer .form :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input),
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 12px 14px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) {
display: grid;
grid-template-areas: "name email" "submit submit";
.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder,
.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
grid-area: name;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
.subscriberContainer .form .content .inputEmail {
grid-area: email;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
.subscriberContainer .form .content .submit {
grid-area: submit;
width: 100%;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) {
.subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%;
height: 49px;
cursor: pointer;
background-color: #000000;
border: none;
border-radius: 0;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button__label) {
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button__label)::after {
content: "AVISE-ME";
.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
content: "avise-me";
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 25px;

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

@ -382,25 +382,41 @@
}
.form {
:global(.vtex-input-prefix__group) {
border-radius: 0;
border: 1px solid $gray-800;
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
}
:global(.vtex-store-components-3-x-content) {
.content {
display: grid;
grid-template-areas:
"name email"
"submit submit";
" nome email"
" submit submit";
justify-content: inherit;
gap: 8px;
.inputName {
grid-area: name;
grid-area: nome;
}
.inputName,
.inputEmail {
:global(.vtex-input-prefix__group) {
border-radius: 0;
border: 1px solid $gray-800;
:global(.vtex-styleguide-9-x-input) {
padding: 12px 14px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-800;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-800;
}
}
}
}
.inputEmail {
@ -409,23 +425,28 @@
.submit {
grid-area: submit;
}
width: 100%;
:global(.vtex-button) {
background-color: $black;
border: none;
border-radius: 0;
}
:global(.vtex-button) {
width: 100%;
height: 49px;
cursor: pointer;
background-color: $black;
border: none;
border-radius: 0;
}
:global(.vtex-button__label) {
font-size: 0;
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $white;
&::after {
content: "avise-me";
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $white;
}
}
}
}