challenge-vtex-io-sabrina-m.../styles/css/vtex.store-components.css

426 lines
7.6 KiB
CSS

@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
}
.container {
padding-left: 0;
padding-right: 0;
}
.thumbImg,
.figure,
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.productImagesThumb {
width: 90px !important;
height: 90px !important;
margin: 0 16px 0 0;
}
.carouselGaleryThumbs {
margin: 0 !important;
}
@media screen and (max-width: 639px) {
.carouselGaleryThumbs {
display: inline-flex;
}
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
max-height: 100% !important;
margin-bottom: 16px;
}
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productNameContainer--quickview {
text-align: right;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: left;
padding-top: 32px;
}
}
/*
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
*/
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-bottom: 16px;
}
.skuSelectorContainer :global(.vtex-store-components-3-x-skuSelectorItemImageValue) {
border-radius: 50%;
}
.skuSelectorName,
.skuSelectorNameSeparator {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #989898;
position: relative;
}
.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
width: 100%;
height: 100%;
}
.frameAround {
display: none;
}
.skuSelectorItem {
width: 40px;
height: 40px;
margin: 0;
}
.skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
justify-content: center;
align-items: center;
color: rgba(185, 185, 185, 0.6);
width: 20px;
}
.skuSelectorItemImage {
display: flex;
justify-content: center;
align-items: center;
border: none;
}
.skuSelectorItem--selected {
border: 2px solid #000000;
border-radius: 50%;
margin: 0;
}
.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
color: #000000;
}
.skuSelectorItem--selected :global(.vtex-store-components-3-x-diagonalCross) {
border: 1.5px solid #000000;
}
.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
border: none;
}
.skuSelectorOptionsList {
gap: 16px;
margin: 0;
}
.diagonalCross {
background-image: none;
border: 1px solid #D5D5D5;
transform: rotate(-45deg);
position: absolute;
left: -100%;
right: -20%;
top: 82.5%;
bottom: 17.5%;
}
.skuSelectorTextContainer {
margin: 0 0 8px 0;
}
.skuSelectorSubcontainer {
margin: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
margin-bottom: 8px;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName::before {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--cor .skuSelectorTextContainer {
margin-top: 10px;
}
.shippingContainer {
display: flex;
align-items: flex-end;
position: relative;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "Calcular Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: 79vw;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
padding: 0;
position: absolute;
top: 43px;
left: 312px;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
top: 85px;
width: 79vw;
left: 0;
text-align: right;
}
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
width: 231px;
border-radius: 0;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-input-prefix__group) {
width: 79vw;
}
}
.shippingContainer :global(.vtex-input__error) {
position: absolute;
margin: 2px;
}
.shippingTable {
margin: 16px 0 0 0;
padding: 0;
border: none;
}
.shippingTableHead {
display: table-header-group;
text-align: left;
}
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
}
.shippingTableHeadDeliveryPrice::after {
content: "Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
margin-bottom: 15px;
}
.shippingTableRow {
display: grid;
grid-template-columns: 20% 15% 65%;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryName {
grid-area: 1/1;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
grid-area: 1/3;
}
.shippingTableHeadDeliveryPrice,
.shippingTableCellDeliveryPrice {
grid-area: 1/2;
}
.shippingTableCellDeliveryName,
.shippingTableCellDeliveryEstimate,
.shippingTableCellDeliveryPrice {
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
padding: 0 0 15px 0;
}
.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%;
border-radius: 0;
}
.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 :global(.vtex-input__error) {
position: absolute;
top: 32px;
}
.input :global(.vtex-input-prefix__group) {
border-radius: 0;
}
.subscriberContainer {
width: 60.07%;
}