BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product): realizando estilização do produto indisponivel

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-02-01 19:34:40 -03:00
parent f43a5ebef0
commit 082fa300d5
7 changed files with 270 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -196,3 +196,122 @@
padding: 0;
margin: 0;
}
.flexColChild--info-availability .flexRow--message-availability {
width: 57.74%;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.flexColChild--info-availability .flexRow--message-availability {
width: 100%;
}
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
margin: 0;
padding: 0;
font-size: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) {
margin: 16px 0 0 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 100%;
margin: 0;
display: grid;
grid-template-areas: "A B" "C C";
max-width: unset !important;
grid-template-columns: 49% 49%;
column-gap: 8px;
row-gap: 16px;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input__error) {
position: absolute;
margin: 0;
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input-prefix__group) {
border-radius: 0;
border: none;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0;
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputEmail) {
grid-area: B;
margin: 0;
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) {
height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 14px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #292929;
border: 1px solid #989898;
border-radius: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input)::placeholder {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-submit) {
grid-area: C;
margin: 0;
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) {
width: 100%;
height: 49px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
cursor: pointer;
font-size: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label)::after {
content: "AVISE-ME";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: #fff;
}

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

@ -12,7 +12,7 @@
display: flex;
align-items: center;
justify-content: end;
margin-bottom: 24px;
margin-bottom: 16px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.product-identifier--productReference {

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

@ -277,6 +277,9 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
padding: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) {
position: absolute;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 250px;
height: 49px;

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

@ -300,6 +300,10 @@
:global(.vtex-address-form__postalCode){
padding: 0;
:global(.vtex-input__error){
position: absolute;
}
}
:global(.vtex-input-prefix__group) {

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

@ -197,3 +197,144 @@
}
}
}
.flexColChild--info-availability {
.flexRow--message-availability {
width: 57.74%;
@media #{$mq-tablet}, #{$mq-mobile}{
width: 100%;
}
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
padding: 0;
&::after {
content: "Produto indisponível";
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray9;
}
}
:global(.vtex-store-components-3-x-subscribeLabel) {
margin: 0;
padding: 0;
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray9;
}
}
:global(.vtex-store-components-3-x-form) {
margin: 16px 0 0 0;
:global(.vtex-store-components-3-x-content) {
width: 100%;
margin: 0;
display: grid;
grid-template-areas: "A B"
"C C";
max-width: unset !important;
grid-template-columns: 49% 49%;
column-gap: 8px;
row-gap: 16px;
}
:global(.vtex-input__error){
position: absolute;
margin: 0;
padding: 0;
}
:global(.vtex-input-prefix__group) {
border-radius: 0;
border: none;
}
:global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0;
padding: 0;
}
:global(.vtex-store-components-3-x-inputEmail) {
grid-area: B;
margin: 0;
padding: 0;
}
:global(.vtex-styleguide-9-x-input) {
height: 40px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 14px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-black;
border: 1px solid #989898;
border-radius: 0;
&::placeholder {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
:global(.vtex-store-components-3-x-submit) {
grid-area: C;
margin: 0;
padding: 0;
}
:global(.vtex-button) {
width: 100%;
height: 49px;
display: flex;
justify-content: center;
align-items: center;
background: $color-black0;
cursor: pointer;
font-size: 0;
:global(.vtex-button__label) {
padding: 0;
&::after{
content: "AVISE-ME";
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
}
}
}

2
styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss
View File

@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: end;
margin-bottom: 24px;
margin-bottom: 16px;
@media #{$mq-tablet}, #{$mq-mobile} {
justify-content: flex-start;

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

@ -16,6 +16,7 @@ $color-gray5: #e5e5e5;
$color-gray6: #929292;
$color-gray7: #575757;
$color-gray8: rgba(185, 185, 185, 0.6);
$color-gray9: #868686;
$color-blue: #4267b2;