SabrinaMiranda/challenge-vtex-io-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estiliza o bloco info-availability

Browse Source
This commit is contained in:
Sabrina Miranda 2023-02-03 19:14:51 -03:00
parent 0ecadd329b
commit 9f5f7d753a
3 changed files with 175 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react/components/Html/styles.css
View File

@ -83,3 +83,11 @@
[class*="html--shipping-simulator"] svg { [class*="html--shipping-simulator"] svg {
display: none; display: none;
} }
[class*="html--message-availability"] form {
margin: 0;
}
[class*="html--info-availability"] .html--sku-selector-m3 {
margin-top: 80px;
}

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -276,3 +277,83 @@
.shippingTableRadioBtn { .shippingTableRadioBtn {
display: none; display: none;
} }
.title {
font-size: 0;
margin: 0;
}
.title::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
.subscribeLabel {
font-size: 0;
}
.subscribeLabel::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
margin-bottom: 16px;
}
.content {
margin: 0;
position: relative;
gap: 8px;
}
.input,
.submit {
margin: 0;
}
.submit {
position: absolute;
top: 58px;
width: 100%;
}
.submit :global(.vtex-button) {
height: 49px;
width: 100%;
background: #000000;
}
.submit :global(.vtex-button__label) {
font-size: 0;
}
.submit :global(.vtex-button__label)::before {
content: "Avise-me";
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
color: #FFFFFF;
}
.input {
/*
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
*/
}
.input :global(.vtex-input__error) {
position: absolute;
top: 32px;
}
.subscriberContainer {
width: 60.07%;
}

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

@ -286,3 +286,88 @@
.shippingTableRadioBtn { .shippingTableRadioBtn {
display: none; display: none;
} }
.title {
font-size: 0;
margin: 0;
&::before {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
.subscribeLabel {
font-size: 0;
&::before {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
margin-bottom: 16px;
}
}
.content {
margin: 0;
position: relative;
gap: 8px;
}
.input,
.submit {
margin: 0;
}
.submit {
position: absolute;
top: 58px;
width: 100%;
:global(.vtex-button) {
height: 49px;
width: 100%;
background: #000000;
}
:global(.vtex-button__label) {
font-size: 0;
&::before {
content: "Avise-me";
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
color: #FFFFFF;
}
}
}
.input {
/*
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
*/
:global(.vtex-input__error) {
position: absolute;
top: 32px;
}
}
.subscriberContainer {
width: 60.07%;
}