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

147 lines
2.4 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;
}
.thumbImg,
.figure,
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.productImagesThumb {
width: 90px !important;
height: 90px !important;
margin: 0 16px 0 0;
}
.carouselGaleryThumbs {
margin: 0 !important;
}
.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;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorName,
.skuSelectorNameSeparator,
.skuSelectorSelectorImageValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #989898;
position: relative;
}
.skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
width: 46px;
height: 46px;
}
.frameAround {
display: none;
}
.skuSelectorItem {
width: 40px;
height: 40px;
}
.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%;
}
.skuSelectorItem--selected :global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
color: #000000;
}
.skuSelectorOptionsList {
gap: 16px;
margin: 0;
}
.diagonalCross {
background-image: none;
border: 1px solid #D5D5D5;
transform: rotate(-45deg);
position: absolute;
left: -80%;
right: -10.46%;
top: 82.5%;
bottom: 17.5%;
}
.skuSelectorSubcontainer {
margin: 0;
}