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

503 lines
8.1 KiB
SCSS

.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) {
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) {
text-align: left;
padding-top: 32px;
}
}
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-bottom: 16px;
: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;
:global(.vtex-store-components-3-x-skuSelectorItemTextValue) {
color: #000000;
}
:global(.vtex-store-components-3-x-diagonalCross) {
border: 1.5px solid #000000;
}
: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;
&::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
margin-bottom: 8px;
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0;
&::before {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
.skuSelectorTextContainer {
margin-top: 10px;
}
}
.shippingContainer {
display: flex;
align-items: flex-end;
position: relative;
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "Calcular Frete";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #FFFFFF;
text-transform: uppercase;
}
}
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
@media screen and (max-width: 768px) {
width: 79vw;
}
}
: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) {
top: 85px;
width: 79vw;
left: 0;
text-align: right;
}
}
:global(.vtex-input-prefix__group ) {
height: 49px;
width: 231px;
border-radius: 0;
@media screen and (max-width: 768px) {
width: 79vw;
}
}
:global(.vtex-input__error) {
position: absolute;
margin: 2px;
}
}
.shippingTable {
margin: 16px 0 0 0;
padding: 0;
border: none;
@media screen and (max-width: 1024px) {
margin-top: 32px;
}
@media screen and (max-width: 768px) {
padding-top: 16px;
}
}
.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;
&::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%;
@media screen and (min-width: 1025px) and (max-width: 1100px) {
grid-template-columns: 25% 20% 65%;
}
@media screen and (min-width: 461px) and (max-width: 768px) {
grid-template-columns: 32% 25% 43%;
}
@media screen and (max-width: 460px) {
grid-template-columns: 37% 25% 38%;
}
}
.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;
}
.shippingTableBody {
display: grid;
gap: 16px;
}
.shippingTableRadioBtn {
display: none;
}
.title {
font-size: 0;
margin: 0;
&::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;
&::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;
:global(.vtex-button) {
height: 49px;
width: 100%;
background: #000000;
}
:global(.vtex-button__label) {
font-size: 0;
&::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;
}
:global(.vtex-input-prefix__group) {
border-radius: 0;
}
}
.subscriberContainer {
width: 60.07%;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
height: 40px;
margin-bottom: 8px;
@media screen and (min-width: 1920px) {
font-size: 32px;
margin-bottom: 16px;
}
@media screen and (max-width: 1024px) {
font-size: 20px;
}
}
.productDescriptionText {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
@media screen and (min-width: 1920px) {
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
padding-bottom: 16px;
}
}
.listContainer--list-product {
display: flex;
justify-content: space-between;
}
.productImageTag--image-description--main {
width: 100% !important;
margin: 0;
display: inline-block;
}