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

162 lines
2.5 KiB
SCSS

.newsletter{
background: red;
}
.container {
padding: 0 40px;
}
.thumbImg,
.figure,
.carouselThumbBorder {
width: 90px;
height: 90px;
}
.productImagesThumb {
width: 90px !important;
height: 90px !important;
margin: 0 16px 0 0;
}
.productImageTag,
.productImageTag--main {
max-width: 100%;
max-height: 100% !important;
margin-bottom: 16px;
}
.carouselGaleryThumbs,
.carouselGaleryCursor,
.carouselContainer,
.productImagesContainer,
.productImagesContainer--carousel,
.content {
max-width: 664px;
margin: 0;
@media screen and (min-width: 1920px) {
max-width: 904px;
}
@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
max-width: 500px;
}
}
.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%;
: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;
}