ueberjames/challenge-vtex-io-ueber-james
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

estilização do mobile imagem de indisponivel

Browse Source
This commit is contained in:
Ueber James Santos 2023-02-08 23:09:19 -03:00
parent 0fb6147cf4
commit 1b452ddcd8
11 changed files with 192 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -285,7 +285,6 @@
"sku-selector",
// "product-quantity",
"html#quantity-button-buy",
"product-assembly-options",
"product-gifts",
// "flex-layout.row#buy-button",
"availability-subscriber",
@ -335,6 +334,7 @@
"flex-layout.row#product-availability": {
"props": {
"blockClass":"indisponivel",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,

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

@ -59,4 +59,14 @@
.flexRowContent--description .stretchChildrenWidth {
width: 100% !important;
}
}
@media only screen and (max-width: 1024px) {
.flexRowContent--indisponivel {
padding: 0 40px 0 40px;
flex-direction: column;
}
.flexRowContent--indisponivel .stretchChildrenWidth {
width: 100% !important;
}
}

5
styles/css/vtex.rich-text.css
View File

@ -16,7 +16,8 @@
font-weight: 400;
}
@media only screen and (max-width: 1024px) {
.wrapper--help-message {
margin: 0;
.wrapper--help-message .paragraph--help-message {
margin: 16px 0 24px 0;
padding: 0 40px 0 40px;
}
}

9
styles/css/vtex.slider-layout.css
View File

@ -25,6 +25,13 @@
height: 17px !important;
}
.sliderLayoutContainer {
.sliderLayoutContainer--carousel {
margin-bottom: 64px;
padding: 0 40px 0 40px;
}
.sliderLayoutContainer--carousel .sliderLeftArrow--carousel {
margin-left: 12px;
}
.sliderLayoutContainer--carousel .sliderRightArrow--carousel {
margin-right: 12px;
}

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

@ -256,6 +256,55 @@
margin-left: 58px;
}
.subscriberContainer .title {
font-size: 0;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-size: 14px;
color: #868686;
line-height: 19px;
font-family: "Open Sans", sans-serif;
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-size: 14px;
color: #868686;
font-family: "Open Sans", sans-serif;
}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: " nome email" " submit submit";
}
.subscriberContainer .form .content .inputName {
grid-area: nome;
}
.subscriberContainer .form .content .inputEmail {
grid-area: email;
}
.subscriberContainer .form .content .submit {
grid-area: submit;
width: 100%;
}
.subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%;
height: 49px;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
background-color: #000000;
font-size: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label)::after {
text-transform: uppcase;
content: "avise-me";
font-size: 18px;
color: #FFFFFF;
font-family: "Open Sans", sans-serif;
}
.productDescriptionTitle {
font-size: 24px;
line-height: 32px;
@ -283,6 +332,6 @@
}
@media only screen and (max-width: 1024px) {
.productDescriptionText::after {
padding-left: 0;
padding: 0px 21px 0px 0;
}
}

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

@ -56,6 +56,12 @@
.container .contentContainer--DescricaoCont {
padding-top: 32px;
}
@media only screen and (max-width: 1024px) {
.container .contentContainer--DescricaoCont {
border-bottom: 1px solid #BFBFBF;
padding-bottom: 62px;
}
}
.container--Descricao {
padding-top: 16px;
@ -63,8 +69,7 @@
}
@media only screen and (max-width: 1024px) {
.container--Descricao {
color: #BFBFBF;
border-top: 1px solid;
border-top: 1px solid #BFBFBF;
}
}

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

@ -57,6 +57,17 @@ margin-left: 10px;
}
}
.flexRowContent--indisponivel{
@include mq (md, max) {
padding: 0 40px 0 40px;
flex-direction: column;
.stretchChildrenWidth{
width: 100% !important;
}
}
}

8
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -5,7 +5,11 @@
color: $color-gray8;
font-weight: 400;
@include mq (md, max) {
margin: 0;
.paragraph--help-message
{margin: 16px 0 24px 0;
padding: 0 40px 0 40px;
}
}
}

10
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -18,7 +18,15 @@
height: 17px !important;
}
.sliderLayoutContainer{
.sliderLayoutContainer--carousel{
margin-bottom: 64px;
padding: 0 40px 0 40px;
.sliderLeftArrow--carousel{
margin-left: 12px;
}
.sliderRightArrow--carousel{
margin-right: 12px;}
}

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

@ -376,6 +376,78 @@ padding-bottom: 15px;
// cep-fim
//produto-indisponivel
.subscriberContainer {
.title {
font-size: 0;
&::after {
content: "Produto indisponível";
font-size: 14px;
color: $color-gray8;
line-height: 19px;
font-family: $font-open;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-size: 14px;
color: $color-gray8;
font-family: $font-open;
}
}
.form {
.content {
display: grid;
grid-template-areas: " nome email"
" submit submit";
.inputName {
grid-area: nome;
}
.inputEmail {
grid-area: email;
}
.submit {
grid-area: submit;
width: 100%;
:global(.vtex-button) {
width: 100%;
height: 49px;
}
:global(.vtex-button__label) {
background-color: $color-black2;
font-size: 0;
&::after {
text-transform: uppcase;
content: "avise-me";
font-size: 18px;
color: $color-white;
font-family: $font-open;
}
}
}
}
}
}
//produto-indiponivel-fim
// tab-descrição
.productDescriptionTitle {
@ -402,7 +474,12 @@ padding-bottom: 15px;
padding-left: 32px;
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
@include mq (md, max) {
padding-left: 0;}
padding: 0px 21px 0px 0;
// border-bottom: 1px solid $color-gray7;
}
}

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

@ -53,7 +53,13 @@
.container {
.contentContainer--DescricaoCont {
padding-top: 32px;
@include mq (md, max) {
border-bottom: 1px solid $color-gray7;
padding-bottom: 62px;
}
}
}
@ -62,8 +68,8 @@
margin: 0 40px 0 40px;
@include mq (md, max) {
color: #BFBFBF;
border-top: 1px solid;
border-top: 1px solid $color-gray7;
}
}