Rafael_Sampaio_de_Oliveira/challenge-vtex-io-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona produto indisponivel 1440px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-02-01 10:20:54 -03:00
parent d24d6daab0
commit 6f5edc7f77
6 changed files with 219 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -126,7 +126,7 @@
"product-gifts",
// "flex-layout.row#buy-button",
"html#buy-button",
"availability-subscriber",
// "availability-subscriber",
"shipping-simulator",
"share#default"
]
@ -206,8 +206,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {

2
styles/css/vtex.product-price.css
View File

@ -111,5 +111,5 @@
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #292929;
color: #000000;
}

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

@ -351,4 +351,101 @@
.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0;
}
.subscriberContainer {
margin-top: 43px;
}
.subscriberContainer .title {
font-size: 0;
margin: 0;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.form {
width: 100%;
margin: 0;
}
.form .content {
display: grid;
grid-template-areas: "nm em" "sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
}
.form .content .inputName {
grid-area: nm;
width: 100%;
margin: 0;
}
.form .content .inputName :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
}
.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .inputEmail {
grid-area: em;
width: 100%;
margin: 0;
}
.form .content .inputEmail :global(.vtex-input-prefix__group) {
border: 1px solid #868686;
border-radius: 0;
}
.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: #989898;
}
.form .content .submit {
grid-area: sub;
width: 100%;
margin: 0;
margin-top: 7px;
}
.form .content .submit :global(.vtex-button) {
height: 49px;
background: #000000;
border: none;
border-radius: 0;
}
.form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
.form .content .submit :global(.vtex-button__label)::after {
content: "avise-me";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}

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

@ -50,8 +50,8 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #292929;
border-bottom: 2px solid #292929;
color: #000000;
border-bottom: 2px solid #000000;
border-radius: 0;
text-transform: capitalize;
}

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

@ -352,3 +352,117 @@
background: transparent;
padding: 0;
}
.subscriberContainer {
margin-top: 43px;
.title {
font-size: 0;
margin: 0;
&::after {
content: "Produto indisponível";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray12;
}
}
}
.form {
width: 100%;
margin: 0;
.content {
display: grid;
grid-template-areas:
"nm em"
"sub sub";
justify-content: inherit;
gap: 8px;
width: 100%;
max-width: 399px;
.inputName {
grid-area: nm;
width: 100%;
margin: 0;
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
.inputEmail {
grid-area: em;
width: 100%;
margin: 0;
& :global(.vtex-input-prefix__group) {
border: 1px solid $color-gray12;
border-radius: 0;
}
& :global(.vtex-styleguide-9-x-input)::placeholder {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
color: $color-gray13;
}
}
.submit {
grid-area: sub;
width: 100%;
margin: 0;
margin-top: 7px;
& :global(.vtex-button) {
height: 49px;
background: $color-black;
border: none;
border-radius: 0;
}
& :global(.vtex-button__label) {
font-size: 0;
&::after {
content: "avise-me";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
}
}

2
styles/sass/utils/_vars.scss
View File

@ -15,6 +15,8 @@ $color-gray8: #575757;
$color-gray9: #afafaf;
$color-gray10: #bfbfbf;
$color-gray11: #ffffff;
$color-gray12: #868686;
$color-gray13: #989898;
$color-blue: #4267b2;