modificações de estilo da pagina

This commit is contained in:
Emerson Fully 2023-02-08 21:15:54 -03:00
parent cef4842b00
commit 9a1830025e
23 changed files with 1050 additions and 210 deletions

View File

@ -1,5 +1,5 @@
[class*="vtex-store-components-3-x-productImageTag--main"] { [class*="vtex-store-components-3-x-productImageTag--main"] {
max-height: 900px !important; max-height: 664px !important;
} }
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
@ -60,6 +60,7 @@
[class*="vtex-address-form__postalCode-forgottenURL"] a:hover { [class*="vtex-address-form__postalCode-forgottenURL"] a:hover {
color: black; color: black;
text-decoration: underline;
} }
[class*="vtex-address-form__postalCode-forgottenURL"] span { [class*="vtex-address-form__postalCode-forgottenURL"] span {

View File

@ -1,13 +1,9 @@
{ {
"product-specification-group#summary": { "product-specification-group#summary": {
"children": [ "children": ["product-specification#summary"]
"product-specification#summary"
]
}, },
"product-specification#summary": { "product-specification#summary": {
"children": [ "children": ["flex-layout.row#summarySpecificationValues"]
"flex-layout.row#summarySpecificationValues"
]
}, },
"flex-layout.row#summarySpecificationValues": { "flex-layout.row#summarySpecificationValues": {
"props": { "props": {

View File

@ -81,9 +81,7 @@
}, },
"product-price-savings#summary": { "product-price-savings#summary": {
"props": { "props": {
"markers": [ "markers": ["discount"],
"discount"
],
"blockClass": "summary" "blockClass": "summary"
} }
} }

View File

@ -1,9 +1,6 @@
{ {
"modal-trigger#quickview": { "modal-trigger#quickview": {
"children": [ "children": ["icon-expand", "modal-layout#quickview"],
"icon-expand",
"modal-layout#quickview"
],
"props": { "props": {
"blockClass": "quickview" "blockClass": "quickview"
} }
@ -63,9 +60,7 @@
}, },
"flex-layout.col#quickview-product-quantity": { "flex-layout.col#quickview-product-quantity": {
"children": [ "children": ["product-summary-quantity#quickview"]
"product-summary-quantity#quickview"
]
}, },
"product-summary-quantity#quickview": { "product-summary-quantity#quickview": {
"props": { "props": {
@ -74,18 +69,14 @@
} }
}, },
"flex-layout.col#quickview-add-to-card-button": { "flex-layout.col#quickview-add-to-card-button": {
"children": [ "children": ["add-to-cart-button"],
"add-to-cart-button"
],
"props": { "props": {
"width": "grow" "width": "grow"
} }
}, },
"flex-layout.row#quickview-actions-2": { "flex-layout.row#quickview-actions-2": {
"children": [ "children": ["link.product#button-pdp"]
"link.product#button-pdp"
]
}, },
"link.product#button-pdp": { "link.product#button-pdp": {
"props": { "props": {
@ -107,15 +98,10 @@
} }
}, },
"flex-layout.col#quickview-images": { "flex-layout.col#quickview-images": {
"children": [ "children": ["product-images#quickview"]
"product-images#quickview"
]
}, },
"flex-layout.col#quickview-product-details": { "flex-layout.col#quickview-product-details": {
"children": [ "children": ["modal-content#quickview", "modal-actions#quickview"],
"modal-content#quickview",
"modal-actions#quickview"
],
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"blockClass": "quickviewDetails" "blockClass": "quickviewDetails"
@ -134,7 +120,7 @@
"blockClass": "quickview" "blockClass": "quickview"
} }
}, },
"product-images#quickview" : { "product-images#quickview": {
"props": { "props": {
"blockClass": "quickview", "blockClass": "quickview",
"showNavigationArrows": true "showNavigationArrows": true

View File

@ -1,98 +1,43 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
} 900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
@media screen and (min-width: 40em) { 1800px + : Big desktop
.flexRowContent--menu-link, */
.flexRowContent--main-header { /* Media Query M3 */
padding: 0 1rem; /* Grid breakpoints */
@media screen and (max-width: 1024px) {
.flexRowContent {
display: flex;
flex-direction: column;
} }
} }
@media screen and (min-width: 80rem) { @media screen and (max-width: 1024px) {
.flexRowContent--menu-link, .flexRowContent--main-header-mobile {
.flexRowContent--main-header { display: flex;
padding: 0 0.25rem; flex-direction: row;
} }
} }
.flexRowContent--menu-link { .flexCol {
background-color: #03044e; position: relative;
color: #fff;
} }
.flexRowContent--main-header { .flexRow--btn-product {
background-color: #f0f0f0; width: 100%;
max-width: 400px;
position: absolute;
top: 358px;
left: 158px;
} }
.flexRow--btn-product :global(.vtex-button) {
.flexRowContent--main-header-mobile { background-color: black;
align-items: center; border: 1px solid black;
padding: 0.625rem 0.5rem; border-radius: 0;
background-color: #f0f0f0; font-family: "Open Sans";
} }
.flexRow--btn-product :global(.vtex-button):hover {
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { background-color: rgb(36, 36, 36);
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
} }

View File

@ -1,3 +1,19 @@
/*
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 */
.product-identifier--productReference { .product-identifier--productReference {
margin-bottom: 1rem; display: flex;
justify-content: right;
color: gray;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
} }

View File

@ -1,12 +1,24 @@
/*
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 */
.listPrice { .listPrice {
color: #727273; display: none;
margin-bottom: .25rem; }
font-size: 1rem;
.savings {
display: none;
} }
.sellingPrice { .sellingPrice {
color: #3f3f40; color: #3f3f40;
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: -12px;
} }
.sellingPriceValue { .sellingPriceValue {
@ -15,47 +27,42 @@
} }
.installments { .installments {
color: #727273; color: #929292;
margin-bottom: 1rem; margin-bottom: 8px;
} font-size: 0px;
.savings {
font-weight: 500;
color: #79B03A;
} }
.sellingPriceValue--summary { .sellingPriceValue--summary {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #2E2E2E; color: #2e2e2e;
} }
.savings--summary { .savings--summary {
background: #8BC34A; background: #8bc34a;
border-radius: 1000px; border-radius: 1000px;
align-items: center; align-items: center;
display: flex; display: flex;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
} }
.savings-discount--summary { .savings-discount--summary {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.listPrice--summary { .listPrice--summary {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
font-size: .875rem; font-size: 0.875rem;
} }
.installments--summary { .installments--summary {
@ -74,6 +81,35 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem;
} }
.installmentsNumber {
font-weight: bold;
font-size: 16px;
margin-right: 6px;
}
.installmentsNumber::after {
content: "x";
font-size: 16px;
margin-left: 4px;
}
.installmentValue {
font-size: 16px;
font-weight: bold;
margin-right: 6px;
}
.installmentValue::before {
content: "de";
font-size: 16px;
font-weight: normal;
margin-right: 6px;
}
.interestRate::after {
content: "sem juros";
font-size: 16px;
font-weight: normal;
}

View File

@ -0,0 +1,33 @@
/*
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 */
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
border-top: 2px solid #cccccc;
border-left: none;
border-right: none;
border-bottom: 2px solid #cccccc;
color: black;
height: 50px;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) {
color: black;
border-color: #cccccc;
border-radius: 0;
height: 50px;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
background-color: white;
border-color: #cccccc;
border-radius: 0;
height: 50px;
}

View File

@ -1,42 +1,12 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { /*
border-radius: 50%; 0 - 600PX: Phone
} 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
.container :global(.vtex-modal-layout-0-x-triggerContainer) { [1200 - 1800] is where our nortal styles apply
opacity: 0; 1800px + : Big desktop
transition: opacity 200ms ease-in-out; */
} /* Media Query M3 */
/* Grid breakpoints */
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { .buyButton {
opacity: 1; display: none;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
} }

23
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,23 @@
@charset "UTF-8";
/*
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 */
.title {
font-size: 0px;
}
.title::after {
content: "Você também pode gostar:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}

View File

@ -1,31 +1,24 @@
.sliderLayoutContainer { /*
justify-content: center; 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 */
.sliderLayoutContainer--carousel { .sliderLayoutContainer--carousel {
background-color: #F0F0F0; background-color: white;
min-height: 450px; padding: 0 40px;
} }
.sliderTrackContainer { .paginationDot {
max-width: 100%; background-color: black;
} }
.paginationDotsContainer { .paginationDot--isActive {
margin-top: .5rem; background-color: white;
margin-bottom: .5rem; border: 1px solid black;
} width: 17px;
height: 17px;
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
} }

View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -7,6 +8,261 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { /*Product name*/
background: red; .productNameContainer--quickview {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
/* carouselThumbs*/
.carouselGaleryThumbs {
height: 200px;
margin-top: 16px;
}
.carouselGaleryThumbs .productImagesThumb {
margin: 0px 10px;
}
.carouselGaleryThumbs .thumbImg {
border-radius: 8px;
}
/*SKU*/
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .frameAround {
border-radius: 50%;
border-color: black;
z-index: 2;
margin: 2px;
}
.skuSelectorContainer .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorItemTextValue {
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer .diagonalCross {
background-image: linear-gradient(to top left, transparent 44%, rgb(0, 0, 0) 48%, currentColor 48%, currentColor 52%, transparent 52%);
z-index: 2;
width: 32px;
height: 33px;
position: absolute;
top: 4px;
left: 4px;
}
.skuSelectorItem {
height: 40px;
width: 40px;
position: relative;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-size: 14px;
color: gray;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0px;
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES:";
font-size: 14px;
color: gray;
}
/*not-Avaliable*/
.subscriberContainer {
margin-top: 30px;
height: 180px;
position: relative;
}
.subscriberContainer .title {
font-size: 0px;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-size: 16px;
}
.subscriberContainer .subscribeLabel {
font-size: 0px;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-size: 16px;
}
.subscriberContainer .inputName :global(.vtex-input-prefix__group),
.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
.subscriberContainer .submit {
width: 100%;
position: absolute;
bottom: 0;
}
.subscriberContainer .submit :global(.vtex-button) {
background-color: black;
color: white;
font-size: 0px;
width: 100%;
height: 100%;
}
.subscriberContainer .submit :global(.vtex-button)::after {
content: "Avise-me";
font-size: 18px;
}
/*Shipping*/
.shippingContainer {
display: flex;
position: relative;
}
.shippingContainer :global(.vtex-button) {
background-color: black;
width: 50px;
height: 45px;
color: white;
margin-top: 22px;
margin-left: -4px;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0px;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "calcular frete:";
font-size: 14px;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0px;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-size: 14px;
}
.shippingContainer :global(.vtex-input-prefix__group) {
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
width: 280px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: black;
position: absolute;
right: 110px;
top: 25px;
}
@media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
right: -60px;
}
}
.shippingTable {
border: none;
}
.shippingTable .shippingTableHead {
display: contents;
}
.shippingTable .shippingTableCell {
padding: 7px 0;
}
.shippingTable .shippingTableRow {
text-align: left;
}
.shippingTable .shippingTableRadioBtn {
display: none;
}
/* Image and Text Description */
.content--imagem-descricao {
margin-right: 16px;
width: 50%;
}
.productDescriptionContainer {
width: 50%;
margin-left: 16px;
}
/*newsletter*/
.newsletter {
background: black;
color: white;
margin-top: 50px;
border-bottom: 2px solid lightgray;
}
.newsletter .container {
margin: auto;
padding: 32px;
padding-bottom: 16px;
}
.newsletter .form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.newsletter .label {
display: flex;
flex-direction: column;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #ffffff;
}
.newsletter .label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans;
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0em;
text-align: center;
color: #929292;
margin: 16px;
}
.newsletter .inputGroup {
width: 774px;
}
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid gray;
border-radius: 0;
}
.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
background-color: black;
}
.newsletter .inputGroup .buttonContainer {
padding: 0;
}
.newsletter .inputGroup .buttonContainer :global(.vtex-button) {
background-color: black;
border: none;
border-bottom: 2px solid white;
border-radius: 0;
}
.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
background-color: black;
border-bottom: 4px solid white;
} }

View File

@ -0,0 +1,31 @@
/*
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 */
.listContainer {
display: flex;
justify-content: space-evenly;
border-bottom: 1px solid #b9b9b9;
margin: auto;
width: 95%;
}
@media screen and (max-width: 1024px) {
.listContainer {
flex-direction: column;
}
}
.contentItem {
display: flex;
padding: 62px 52px;
}
@media screen and (max-width: 1024px) {
.contentItem {
flex-direction: column;
}
}

View File

@ -5,4 +5,3 @@
.html--pdp-breadcrumb { .html--pdp-breadcrumb {
background-color: green; background-color: green;
} }

View File

@ -0,0 +1,36 @@
.flexRowContent {
@media screen and (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent--main-header-mobile {
@media screen and (max-width: 1024px) {
display: flex;
flex-direction: row;
}
}
.flexCol {
position: relative;
}
.flexRow--btn-product {
width: 100%;
max-width: 400px;
position: absolute;
top: 358px;
left: 158px;
:global(.vtex-button) {
background-color: black;
border: 1px solid black;
border-radius: 0;
font-family: "Open Sans";
&:hover {
background-color: rgb(36, 36, 36);
}
}
}

View File

@ -0,0 +1,10 @@
.product-identifier--productReference {
display: flex;
justify-content: right;
color: gray;
}
.product-identifier__label,
.product-identifier__separator {
display: none;
}

View File

@ -0,0 +1,112 @@
.listPrice {
display: none;
}
.savings {
display: none;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
margin-bottom: -12px;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
}
.installments {
color: #929292;
margin-bottom: 8px;
font-size: 0px;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
.installmentsNumber {
font-weight: bold;
font-size: 16px;
margin-right: 6px;
&::after {
content: "x";
font-size: 16px;
margin-left: 4px;
}
}
.installmentValue {
font-size: 16px;
font-weight: bold;
margin-right: 6px;
&::before {
content: "de";
font-size: 16px;
font-weight: normal;
margin-right: 6px;
}
}
.interestRate {
&::after {
content: "sem juros";
font-size: 16px;
font-weight: normal;
}
}

View File

@ -0,0 +1,28 @@
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
:global(.vtex-numeric-stepper__input) {
border-top: 2px solid #cccccc;
border-left: none;
border-right: none;
border-bottom: 2px solid #cccccc;
color: black;
height: 50px;
}
:global(.vtex-numeric-stepper__plus-button) {
color: black;
border-color: #cccccc;
border-radius: 0;
height: 50px;
}
:global(.vtex-numeric-stepper__minus-button) {
background-color: white;
border-color: #cccccc;
border-radius: 0;
height: 50px;
}
}

View File

@ -0,0 +1,3 @@
.buyButton {
display: none;
}

View File

@ -0,0 +1,16 @@
.title {
font-size: 0px;
&::after {
content: "Você também pode gostar:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}
}

View File

@ -0,0 +1,15 @@
.sliderLayoutContainer--carousel {
background-color: white;
padding: 0 40px;
}
.paginationDot {
background-color: black;
}
.paginationDot--isActive {
background-color: white;
border: 1px solid black;
width: 17px;
height: 17px;
}

View File

@ -1,3 +1,320 @@
.newsletter{ /*Product name*/
background: red; .productNameContainer--quickview {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
} }
/* carouselThumbs*/
.carouselGaleryThumbs {
height: 200px;
margin-top: 16px;
.productImagesThumb {
margin: 0px 10px;
}
.thumbImg {
border-radius: 8px;
}
}
/*SKU*/
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
.frameAround {
border-radius: 50%;
border-color: black;
z-index: 2;
margin: 2px;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorItemTextValue {
padding: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.diagonalCross {
background-image: linear-gradient(
to top left,
transparent 44%,
rgb(0, 0, 0) 48%,
currentColor 48%,
currentColor 52%,
transparent 52%
);
z-index: 2;
width: 32px;
height: 33px;
position: absolute;
top: 4px;
left: 4px;
}
}
.skuSelectorItem {
height: 40px;
width: 40px;
position: relative;
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0px;
&::after {
content: "OUTROS TAMANHOS:";
font-size: 14px;
color: gray;
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0px;
&::after {
content: "OUTRAS CORES:";
font-size: 14px;
color: gray;
}
}
}
/*not-Avaliable*/
.subscriberContainer {
margin-top: 30px;
height: 180px;
position: relative;
.title {
font-size: 0px;
&::after {
content: "Produto indisponível";
font-size: 16px;
}
}
.subscribeLabel {
font-size: 0px;
&::after {
content: "Deseja saber quando estiver disponível?";
font-size: 16px;
}
}
.inputName,
.inputEmail {
:global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
}
.submit {
width: 100%;
position: absolute;
bottom: 0;
:global(.vtex-button) {
background-color: black;
color: white;
font-size: 0px;
width: 100%;
height: 100%;
&::after {
content: "Avise-me";
font-size: 18px;
}
}
}
}
/*Shipping*/
.shippingContainer {
display: flex;
position: relative;
:global(.vtex-button) {
background-color: black;
width: 50px;
height: 45px;
color: white;
margin-top: 22px;
margin-left: -4px;
}
:global(.vtex-input__label) {
font-size: 0px;
&::after {
content: "calcular frete:";
font-size: 14px;
text-transform: uppercase;
}
}
:global(.vtex-button__label) {
font-size: 0px;
}
:global(.vtex-button__label)::after {
content: "OK";
font-size: 14px;
}
:global(.vtex-input-prefix__group) {
border-radius: 0;
}
:global(.vtex-address-form__postalCode) {
width: 280px;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
color: black;
position: absolute;
right: 110px;
top: 25px;
@media screen and (max-width: 1024px) {
right: -60px;
}
}
}
.shippingTable {
border: none;
.shippingTableHead {
display: contents;
}
.shippingTableCell {
padding: 7px 0;
}
.shippingTableRow {
text-align: left;
}
.shippingTableRadioBtn {
display: none;
}
}
/* Image and Text Description */
.content--imagem-descricao {
margin-right: 16px;
width: 50%;
}
.productDescriptionContainer {
width: 50%;
margin-left: 16px;
}
/*newsletter*/
.newsletter {
background: black;
color: white;
margin-top: 50px;
border-bottom: 2px solid lightgray;
.container {
margin: auto;
padding: 32px;
padding-bottom: 16px;
}
.form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.label {
display: flex;
flex-direction: column;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #ffffff;
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans;
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0em;
text-align: center;
color: #929292;
margin: 16px;
}
.inputGroup {
width: 774px;
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid gray;
border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) {
background-color: black;
}
.buttonContainer {
padding: 0;
:global(.vtex-button) {
background-color: black;
border: none;
border-bottom: 2px solid white;
border-radius: 0;
&:hover {
background-color: black;
border-bottom: 4px solid white;
}
}
}
}
}
// .discountInsideContainer,
// .installmentsPrice {
// display: none;
// }
// .sellingPriceLabel {
// display: none;
// }
// .sellingPrice {
// font-weight: bolder;
// }

View File

@ -0,0 +1,20 @@
.listContainer {
display: flex;
justify-content: space-evenly;
border-bottom: 1px solid #b9b9b9;
margin: auto;
width: 95%;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
}
.contentItem {
display: flex;
padding: 62px 52px;
@media screen and (max-width: 1024px) {
flex-direction: column;
}
}