feat(pdp): Adiciona aviso indisponivel
This commit is contained in:
parent
c9a4ae4eda
commit
a2c9c02a40
@ -286,9 +286,9 @@
|
||||
},
|
||||
"children": [
|
||||
"flex-layout.row#product-name",
|
||||
"product-identifier.product",
|
||||
"sku-selector",
|
||||
"flex-layout.row#availability"
|
||||
"html#codigo",
|
||||
"flex-layout.row#availability",
|
||||
"sku-selector"
|
||||
]
|
||||
},
|
||||
"flex-layout.row#availability": {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -135,6 +136,14 @@
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
.skuSelectorSubcontainer--cor .skuSelectorItemImage--skus .diagonalCross--skus {
|
||||
transform: rotate(80deg);
|
||||
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);
|
||||
max-width: 27px;
|
||||
max-height: 38px;
|
||||
left: 11px;
|
||||
top: 5px;
|
||||
}
|
||||
.skuSelectorSubcontainer--cor .skuSelectorInternalBox--skus {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@ -278,4 +287,73 @@
|
||||
|
||||
.content--description-imagem {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.subscriberContainer .title {
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.subscriberContainer .title::after {
|
||||
content: "Produto indisponível";
|
||||
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-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.subscriberContainer .content {
|
||||
position: relative;
|
||||
width: 399px;
|
||||
gap: 8px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.subscriberContainer .content :global(.vtex-styleguide-9-x-input) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #989898;
|
||||
border: none;
|
||||
}
|
||||
.subscriberContainer .content :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #989898;
|
||||
}
|
||||
.subscriberContainer .content :global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
}
|
||||
.subscriberContainer .content .inputEmail,
|
||||
.subscriberContainer .content .inputName {
|
||||
border: 0.6px solid #989898;
|
||||
margin: 0;
|
||||
}
|
||||
.subscriberContainer .content .submit {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
width: 100%;
|
||||
}
|
||||
.subscriberContainer .content .submit :global(.vtex-button) {
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
height: 49px;
|
||||
}
|
||||
.subscriberContainer .content .submit :global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
.subscriberContainer .content .submit :global(.vtex-button__label)::after {
|
||||
content: "AVISE-ME";
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
@ -138,6 +138,20 @@
|
||||
.skuSelectorItemImage--skus {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
.diagonalCross--skus {
|
||||
transform: rotate(80deg);
|
||||
background-image: linear-gradient(
|
||||
to top right,
|
||||
transparent 44%,
|
||||
#d5d5d5 48%,
|
||||
transparent 52%
|
||||
);
|
||||
max-width: 27px;
|
||||
max-height: 38px;
|
||||
left: 11px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.skuSelectorInternalBox--skus {
|
||||
@ -306,3 +320,84 @@
|
||||
.content--description-imagem {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
//PRODUTO INDISPONIVEL
|
||||
.subscriberContainer {
|
||||
.title {
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
&::after {
|
||||
content: "Produto indisponível";
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray10;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribeLabel {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "Deseja saber quando estiver disponível?";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray10;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
width: 399px;
|
||||
gap: 8px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray7;
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray7;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.inputEmail,
|
||||
.inputName {
|
||||
border: 0.6px solid $color-gray7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
width: 100%;
|
||||
|
||||
:global(.vtex-button) {
|
||||
width: 100%;
|
||||
background-color: $color-black-100;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-size: 0;
|
||||
&::after {
|
||||
content: "AVISE-ME";
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ $color-gray6: #929292;
|
||||
$color-gray7: #989898;
|
||||
$color-gray8: #575757;
|
||||
$color-gray9: #bfbfbf;
|
||||
$color-gray10: #868686;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user