challenge-vtex-io-eleonora-otz/styles/css/vtex.store-components.css

142 lines
3.1 KiB
CSS

/*
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 {
margin: 0 36px;
padding: 0 4px;
}
@media screen and (min-width: 112.5em) {
.container {
margin: 6px 356px;
}
}
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productImageTag--main {
max-height: max-content !important;
max-width: 664px;
}
.carouselGaleryThumbs {
margin-right: 16px;
max-height: 90px;
}
.thumbImg {
height: 90px;
max-width: 90px;
}
.carouselThumbBorder {
height: 90px;
width: 90px;
}
.figure {
width: 90px;
height: 90px;
}
.productImagesThumb {
max-width: 90px;
margin-right: 16px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
order: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
order: 1;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
border-radius: 50%;
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
border-color: #000000;
top: -2px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
top: 4px;
right: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku {
color: #000000;
}
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}