feat: estiliza o bloco info-availability
This commit is contained in:
parent
0ecadd329b
commit
9f5f7d753a
@ -83,3 +83,11 @@
|
||||
[class*="html--shipping-simulator"] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="html--message-availability"] form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[class*="html--info-availability"] .html--sku-selector-m3 {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -276,3 +277,83 @@
|
||||
.shippingTableRadioBtn {
|
||||
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%;
|
||||
}
|
@ -286,3 +286,88 @@
|
||||
.shippingTableRadioBtn {
|
||||
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%;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user