challenge-vtex-io-caina/styles/sass/pages/product/vtex.store-components.scss

712 lines
13 KiB
SCSS

.container {
margin: 0;
padding: 0;
}
//IMAGENS
.productImageTag--main {
max-height: max-content !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
display: block;
}
.thumbImg {
height: 90px;
max-width: 90px;
border-radius: 8px;
}
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.figure {
width: 90px;
height: 90px;
}
.productImagesThumb {
max-width: 90px;
width: 90px !important;
margin-right: 16px;
}
.productImagesGallerySlide {
width: 100%;
}
.productImagesGallerySlide--images-container {
width: 100% !important;
}
//NOME DO PRODUTO
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray8;
}
//SKUS
.skuSelectorContainer--skus {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
}
.frameAround--skus {
border: none;
}
.skuSelectorOptionsList {
display: flex;
margin-left: 0;
gap: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTROS TAMANHOS";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
}
}
}
}
}
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorInternalBox--skus {
border: 1px solid $color-gray7;
border-radius: 100%;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
display: flex;
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
border: 2px solid $color-black-100;
border-radius: 100%;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
display: flex;
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black-100;
}
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
}
}
.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 {
width: 48px;
height: 48px;
}
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
}
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(
to top right,
transparent 44%,
#d5d5d5 48%,
transparent 52%
);
max-width: 28px;
max-height: 30px;
left: 6px;
top: 3px;
}
.skuSelectorSelectorImageValue {
display: none;
}
//FRETE
.shippingContainer {
display: flex;
align-items: end;
margin-top: 16px;
@media screen and (max-width: 768px) {
margin-bottom: 24px;
}
:global(.vtex-address-form__postalCode) {
position: relative;
padding: 0;
@media screen and (max-width: 768px) {
width: 100%;
}
}
:global(.vtex-input__error) {
position: absolute;
margin-top: 2px;
}
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray6;
}
}
:global(.vtex-input-prefix__group) {
height: 49px;
border-radius: 0%;
:global(.vtex-input__suffix) {
padding: 0;
}
:global(.vtex-address-form-4-x-hideDecorators) {
width: 231px;
@media screen and (max-width: 768px) {
width: 100%;
}
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
top: 28px;
right: -180px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
@media screen and (max-width: 768px) {
top: 76px;
right: -50px;
}
:last-child {
color: $color-black-100;
}
}
:global(.vtex__icon-external-link) {
display: none;
}
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: $color-black-100;
border: none;
border-radius: inherit;
margin-left: -1px;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "OK";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: $color-white;
}
}
}
//FRETES OPCOES
.shippingTable {
border: none;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableHead {
display: table-header-group;
.shippingTableRow {
display: flex;
align-items: end;
}
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
color: $color-black2;
text-align: initial;
padding: 0;
}
.shippingTableHeadDeliveryName {
width: 110px;
@media screen and (max-width: 350px) {
width: 90px;
}
}
.shippingTableHeadDeliveryEstimate {
order: 3;
}
.shippingTableHeadDeliveryPrice {
display: flex;
width: 110px;
font-size: 0;
@media screen and (max-width: 350px) {
width: 56px;
}
&::after {
content: "FRETE";
font-size: 14px;
}
}
}
.shippingTableBody {
.shippingTableRow {
display: flex;
.shippingTableCell {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryPrice,
.shippingTableCellDeliveryEstimate {
padding: 15px 4px 0 0;
}
.shippingTableCellDeliveryName {
min-width: 112px;
width: 110px;
@media screen and (max-width: 350px) {
width: 90px;
min-width: 90px;
padding-right: 0;
}
}
.shippingTableCellDeliveryPrice {
width: 110px;
@media screen and (max-width: 768px) {
width: 70px;
min-width: 72px;
}
@media screen and (max-width: 350px) {
min-width: 56px;
width: 56px;
padding-right: 0;
}
}
.shippingTableCellDeliveryEstimate {
padding-right: 0;
order: 3;
}
}
}
//DESCRIÇÃO
.productDescriptionContainer--descricao {
display: flex;
justify-content: left;
flex-direction: column;
width: 49.82%;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.productImage--description-imagem {
display: flex;
}
.container--descricao {
margin: 0;
}
.productDescriptionContainer--descricao {
@media screen and (max-width: 1024px) {
border-bottom: 1px solid $color-gray9;
padding-bottom: 16px;
}
}
.productDescriptionTitle--descricao {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: $color-gray8;
margin-bottom: 8px;
@media screen and (min-width: 1921px) {
font-size: 32px;
}
@media screen and (max-width: 1024px) {
font-size: 20px;
}
}
.productDescriptionText--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (min-width: 1921px) {
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
//PRODUTO INDISPONIVEL
.subscriberContainer {
position: relative;
.content {
@media screen and (max-width: 1024px) {
display: flex;
width: 100% !important;
max-width: unset;
}
}
.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: 0.6px solid $color-gray7;
border-radius: 0%;
}
.inputEmail,
.inputName {
margin: 0;
}
.submit {
position: absolute;
top: 55px;
width: 100%;
cursor: pointer;
:global(.vtex-button) {
width: 100%;
background-color: $color-black-100;
border: none;
border-radius: 0%;
height: 49px;
cursor: pointer;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
color: $color-white;
}
}
}
:global(.vtex-input__error) {
margin: 0;
font-size: 12px;
line-height: 16px;
}
}
.success {
position: absolute;
top: 90px;
font-size: 12px;
line-height: 16px;
}
}
//NEWSLETTER
.newsletter--newsletter {
justify-content: center;
display: flex;
margin-top: 64px;
padding-top: 32px;
padding-bottom: 16px;
background-color: $color-black-100;
border-bottom: 1px solid $color-white;
@media screen and (max-width: 1024px) {
padding: 64px 16px 32px 16px;
}
@media screen and (max-width: 768px) {
margin-top: 32px;
}
}
.container--newsletter {
width: 53.75%;
color: $color-white;
max-width: unset;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.form--newsletter {
max-width: unset;
:global(.vtex-styleguide-9-x-noAppearance) {
background-color: $color-black-100;
padding: 0;
}
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid $color-gray6;
border-radius: 0%;
padding-bottom: 4px;
align-items: flex-end;
@media screen and (max-width: 1024px) {
padding-left: 18px;
padding-bottom: 12px;
}
:global(.vtex-styleguide-9-x-hideDecorators) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
&::placeholder {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
}
}
}
}
.label--newsletter {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: $color-white;
display: flex;
flex-direction: column;
&::after {
content: "Receba ofertas e novidades por e-mail";
margin-top: 16px;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 22px;
}
}
}
.inputGroup--newsletter {
margin-top: 16px;
padding: 0;
@media screen and (max-width: 768px) {
display: flex;
}
}
.buttonContainer--newsletter {
margin: 0;
padding: 0;
width: 84px;
:global(.vtex-button) {
border: none;
border-radius: 0%;
border-bottom: 3px solid $color-gray9;
background-color: transparent;
width: 100%;
:global(.vtex-button__label) {
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-white;
padding: 0;
}
}
}
//BUG SCROLL
:global(.vtex-store-footer-2-x-socialNetworksContainer) {
margin: 0;
}
:global(.vtex-store-footer-2-x-acceptedPaymentMethodContainer) {
margin: 0;
}