challenge-vtex-io-nicolly-v.../styles/css/vtex.store-components.css

359 lines
11 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;
}
.productImageTag--main {
max-height: max-content !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
}
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs {
margin-bottom: 32px;
display: block;
}
}
.carouselGaleryThumbs .productImagesThumbActive,
.carouselGaleryThumbs .productImagesThumb {
margin: 0 16px 0 0;
width: 90px !important;
height: 90px;
border-radius: 8px;
overflow: hidden;
}
.productNameContainer {
margin-bottom: 8px;
}
.productNameContainer .productBrand {
color: #575757;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList {
margin: 0;
gap: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
background-image: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after {
content: "";
display: block;
width: 1px;
height: 40px;
background: #D5D5D5;
transform: rotate(45deg);
bottom: 0;
left: 50%;
position: relative;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
color: #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
background-color: #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "Outras Cores:";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem {
width: 48px;
height: 48px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border: 1px solid rgba(185, 185, 185, 0.6);
border-radius: 50%;
position: absolute;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
background-image: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after {
content: "";
height: 48px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
color: #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
background-color: #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem {
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border: 1px solid #989898;
border-radius: 50%;
position: absolute;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
padding: 0;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
color: #000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after {
background-color: #000;
}
.shippingContainer {
position: relative;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border: 1px solid #cccccc;
border-radius: 0;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
padding-bottom: 16px;
}
.shippingContainer :global(.vtex-input) {
width: auto;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-input) {
width: 100%;
}
}
.shippingContainer :global(.vtex-input__suffix) {
display: none;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
margin: 0;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0 0 16.5px 32px;
color: #000000 !important;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 8px 0 0 0;
text-align: end;
width: 100%;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000 !important;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-decoration-line: underline;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
margin: 0;
}
}
.shippingContainer :global(.vtex-button) {
width: auto;
border: none;
top: 27px;
left: 230px;
position: absolute;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-button) {
right: 0;
left: auto;
}
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
background-color: #000000;
width: 49px;
height: 49px;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
.shippingTable {
margin: 0;
padding: 0;
border: none;
width: 326px;
}
@media screen and (max-width: 768px) {
.shippingTable {
width: 100%;
}
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableHead {
display: block;
}
.shippingTableLabel,
.shippingTableCell,
.currencyContainer {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
text-align: start;
}
.shippingTableRow {
display: flex;
gap: 32px;
}
.shippingTableCell {
padding: 0;
}
.shippingTableHeadDeliveryName, .shippingTableCellDeliveryName {
width: 23.92638036%;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
order: 3;
width: 41.71779%;
}
.shippingTableCellDeliveryPrice,
.shippingTableHeadDeliveryPrice {
width: 14.723926%;
}