forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #1
@ -21,24 +21,33 @@
|
||||
}
|
||||
}
|
||||
.container .homeLink {
|
||||
padding: 0;
|
||||
padding-right: 6px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.container .homeLink::before {
|
||||
content: "Home";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .homeIcon {
|
||||
display: none;
|
||||
}
|
||||
.container .arrow {
|
||||
padding: 0 6px;
|
||||
}
|
||||
.container .arrow .link {
|
||||
padding: 0 6px;
|
||||
}
|
||||
.container .term {
|
||||
padding: 0 6px;
|
||||
}
|
||||
.container .link,
|
||||
.container .term {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.container .term {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@ -87,8 +87,18 @@
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) {
|
||||
margin-left: 148.08px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) {
|
||||
margin-left: 308.08px;
|
||||
}
|
||||
}
|
||||
.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: #929292;
|
||||
}
|
||||
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--site-m3-academy-mobile--isClosed,
|
||||
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed {
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.quantitySelectorContainer {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.quantitySelectorContainer {
|
||||
margin: 0;
|
||||
@ -27,6 +30,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) {
|
||||
height: 49px;
|
||||
|
||||
@ -207,6 +207,8 @@
|
||||
display: grid;
|
||||
grid-template-areas: "A B" "C C";
|
||||
max-width: unset !important;
|
||||
column-gap: 8px;
|
||||
grid-template-columns: 49% 49%;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
|
||||
@ -215,27 +217,32 @@
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
|
||||
width: 81.02%;
|
||||
grid-template-columns: 49.6% 49.6%;
|
||||
column-gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
|
||||
column-gap: 8px;
|
||||
grid-template-columns: 48.57% 48.57%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
|
||||
grid-area: A;
|
||||
margin: 0 8px 15px 0;
|
||||
width: 12.22em;
|
||||
margin: 0 0 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
|
||||
width: 23.657em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
|
||||
width: 94.26%;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
@ -246,6 +253,7 @@
|
||||
border: 1px solid #989898;
|
||||
border-radius: unset;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||
font-weight: 400;
|
||||
@ -256,17 +264,18 @@
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
|
||||
grid-area: B;
|
||||
margin: 0 0 15px;
|
||||
width: 12.22em;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
|
||||
width: 23.657em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
|
||||
width: 99.47%;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
@ -276,6 +285,7 @@
|
||||
color: #989898;
|
||||
border: 1px solid #989898;
|
||||
border-radius: unset;
|
||||
padding: 0 14px;
|
||||
}
|
||||
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
|
||||
font-weight: 400;
|
||||
@ -397,6 +407,11 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.skuSelectorSubcontainer--cor {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.skuSelectorSubcontainer--cor .skuSelectorNameContainer {
|
||||
margin: 8px 0 0;
|
||||
height: 48px;
|
||||
@ -456,6 +471,11 @@
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.shippingContainer {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -486,12 +506,22 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
|
||||
color: #afafaf;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 16.5px 0 16.5px 16px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
|
||||
color: #afafaf;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
|
||||
position: absolute;
|
||||
}
|
||||
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
@ -540,16 +570,38 @@
|
||||
.shippingTable {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.shippingTable {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableHead {
|
||||
display: block;
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 16.36%);
|
||||
grid-template-columns: 13% 8% 17%;
|
||||
grid-template-areas: "A B C";
|
||||
column-gap: 32px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
grid-template-columns: 10% 5.6% 12.5%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
grid-template-columns: 9.6% 5.5% 11.5%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.shippingTable .shippingTableHead .shippingTableRow {
|
||||
grid-template-columns: 30% 18% 39%;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
|
||||
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
@ -584,11 +636,26 @@
|
||||
}
|
||||
.shippingTable .shippingTableBody .shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 16.36%);
|
||||
grid-template-columns: 13% 8% 17%;
|
||||
grid-template-areas: "A B C";
|
||||
column-gap: 32px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.shippingTable .shippingTableBody .shippingTableRow {
|
||||
grid-template-columns: 10% 5.6% 12.5%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.shippingTable .shippingTableBody .shippingTableRow {
|
||||
grid-template-columns: 9.6% 5.5% 11.5%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.shippingTable .shippingTableBody .shippingTableRow {
|
||||
grid-template-columns: 30% 18% 39%;
|
||||
}
|
||||
}
|
||||
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
grid-area: A;
|
||||
text-transform: capitalize;
|
||||
@ -614,6 +681,7 @@
|
||||
|
||||
.productImagesContainer--image-description {
|
||||
width: 92.93%;
|
||||
height: 632px;
|
||||
max-height: unset;
|
||||
position: relative;
|
||||
margin-left: 32px;
|
||||
@ -621,11 +689,13 @@
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.productImagesContainer--image-description {
|
||||
width: 94.784%;
|
||||
height: 872px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.productImagesContainer--image-description {
|
||||
width: 100%;
|
||||
height: 944px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -633,11 +703,31 @@
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.productImagesContainer--image-description {
|
||||
width: 100%;
|
||||
height: 296px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.productImagesContainer--image-description .productImageTag--image-description--main {
|
||||
.productImagesContainer--image-description .productImage--image-description {
|
||||
height: 632px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.productImagesContainer--image-description .productImage--image-description {
|
||||
height: 872px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.productImagesContainer--image-description .productImage--image-description {
|
||||
height: 944px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.productImagesContainer--image-description .productImage--image-description {
|
||||
height: 296px;
|
||||
}
|
||||
}
|
||||
.productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main {
|
||||
object-fit: cover !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
|
||||
@ -645,6 +735,7 @@
|
||||
width: 92.93%;
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.productDescriptionContainer {
|
||||
@ -654,6 +745,7 @@
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.productDescriptionContainer {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -661,6 +753,7 @@
|
||||
.productDescriptionContainer {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
@ -670,6 +763,11 @@
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-size: 20px;
|
||||
|
||||
@ -26,12 +26,13 @@
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
margin-bottom: 32px;
|
||||
padding-top: 16px;
|
||||
padding-top: 0;
|
||||
column-gap: 99px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.container--description-block .listContainer {
|
||||
width: 71.858%;
|
||||
margin: 0 auto 32px;
|
||||
margin: 0 auto 64px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
@ -39,6 +40,7 @@
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
@ -46,20 +48,29 @@
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer .listItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 114px;
|
||||
height: 38px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.container--description-block .listContainer .listItem {
|
||||
width: 142px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.container--description-block .listContainer .listItem {
|
||||
width: 82px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.container--description-block .listContainer .listItem {
|
||||
width: 82px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@ -81,15 +92,24 @@
|
||||
}
|
||||
}
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
padding: 0 !important;
|
||||
width: 114px;
|
||||
height: 38px;
|
||||
}
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
width: 142px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
width: 82px;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
width: 82px;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,29 +9,39 @@
|
||||
width: 71.858%;
|
||||
}
|
||||
.homeLink {
|
||||
padding: 0;
|
||||
padding-right: 6px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.homeLink::before {
|
||||
content: "Home";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.homeIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0 6px;
|
||||
.link {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.term {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.link,
|
||||
.term {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.term {
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,6 +83,8 @@
|
||||
width: 22px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,6 +96,10 @@
|
||||
.flexColChild {
|
||||
:global(.vtex-menu-2-x-menuContainerNav) {
|
||||
:global(.vtex-menu-2-x-menuContainer) {
|
||||
margin-left: 148.08px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
margin-left: 308.08px;
|
||||
}
|
||||
:global(.vtex-menu-2-x-menuItem) {
|
||||
:global(.vtex-menu-2-x-styledLink) {
|
||||
:global(.vtex-menu-2-x-styledLinkContent) {
|
||||
@ -102,7 +108,7 @@
|
||||
line-height: 16px;
|
||||
letter-spacing: -0.1em;
|
||||
text-transform: uppercase;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -110,7 +116,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
//product-images
|
||||
//Product-images
|
||||
|
||||
.flexRowContent {
|
||||
padding: 0;
|
||||
@ -128,7 +134,7 @@
|
||||
.flexRowContent {
|
||||
.stretchChildrenWidth {
|
||||
:global(.vtex-button):first-child {
|
||||
background: #000000;
|
||||
background: $black;
|
||||
padding: 12px 64px;
|
||||
height: 49px;
|
||||
border: none;
|
||||
@ -144,7 +150,7 @@
|
||||
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
@ -158,7 +164,7 @@
|
||||
//Footer
|
||||
|
||||
.flexRow--menu-row {
|
||||
background-color: #000000;
|
||||
background-color: $black;
|
||||
height: 464px;
|
||||
padding: 32px 32px 128px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
@ -166,13 +172,13 @@
|
||||
}
|
||||
}
|
||||
.flexRow--menu-row-mobile {
|
||||
background-color: #000000;
|
||||
background-color: $black;
|
||||
min-height: 532px;
|
||||
padding: 0px 16px 32px;
|
||||
.flexRowContent--menu-row-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.stretchChildrenWidth{
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
//Logo Header
|
||||
|
||||
.logoContainer {
|
||||
padding-left: 40px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
@ -7,6 +8,7 @@
|
||||
}
|
||||
|
||||
//Input Header
|
||||
|
||||
.autoCompleteOuterContainer {
|
||||
&:first-child {
|
||||
:global(.vtex-input) {
|
||||
@ -21,7 +23,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
//product-images
|
||||
//Product-images
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
@ -79,18 +81,14 @@
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
height: 904px !important;
|
||||
}
|
||||
// @media (max-width: 1920px) and (min-width: 1024px) {
|
||||
// max-height: unset !important;
|
||||
// }
|
||||
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
height: 944px !important;
|
||||
// max-height: unset !important;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 99.67% !important;
|
||||
height: 296px !important;
|
||||
object-fit: cover !important;
|
||||
// max-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -133,7 +131,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
//dados produto
|
||||
//Dados produto
|
||||
|
||||
.productNameContainer {
|
||||
text-align: right;
|
||||
@ -189,24 +187,31 @@
|
||||
"A B"
|
||||
"C C";
|
||||
max-width: unset !important;
|
||||
column-gap: 8px;
|
||||
grid-template-columns: 49% 49%;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 44.138%;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 81.02%;
|
||||
grid-template-columns: 49.6% 49.6%;
|
||||
column-gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
column-gap: 8px;
|
||||
grid-template-columns: 48.57% 48.57%;
|
||||
width: 100%;
|
||||
}
|
||||
:global(.vtex-store-components-3-x-inputName) {
|
||||
grid-area: A;
|
||||
margin: 0 8px 15px 0;
|
||||
width: 12.22em;
|
||||
margin: 0 0 15px 0;
|
||||
width: 100%;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 23.657em;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 94.26%;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
:global(.vtex-input) {
|
||||
:global(.vtex-input-prefix__group) {
|
||||
@ -218,6 +223,7 @@
|
||||
border: 1px solid #989898;
|
||||
border-radius: unset;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input)::placeholder {
|
||||
font-weight: 400;
|
||||
@ -231,13 +237,14 @@
|
||||
:global(.vtex-store-components-3-x-inputEmail) {
|
||||
grid-area: B;
|
||||
margin: 0 0 15px;
|
||||
width: 12.22em;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 23.657em;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 99.47%;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
:global(.vtex-input) {
|
||||
:global(.vtex-input-prefix__group) {
|
||||
@ -248,6 +255,7 @@
|
||||
color: #989898;
|
||||
border: 1px solid #989898;
|
||||
border-radius: unset;
|
||||
padding: 0 14px;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input)::placeholder {
|
||||
font-weight: 400;
|
||||
@ -273,7 +281,7 @@
|
||||
:global(.vtex-button__label)::after {
|
||||
content: "AVISE-ME";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
@ -284,7 +292,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// sku selector
|
||||
// Sku selector
|
||||
|
||||
.skuSelectorContainer {
|
||||
display: flex;
|
||||
@ -302,7 +310,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho::before {
|
||||
@ -311,7 +319,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
@ -328,7 +336,7 @@
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
.frameAround--sku-selector {
|
||||
border-color: #000000;
|
||||
border-color: $black;
|
||||
border-width: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@ -371,7 +379,7 @@
|
||||
.skuSelectorItem--selected {
|
||||
.skuSelectorInternalBox {
|
||||
.skuSelectorItemTextValue {
|
||||
color: #000000;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -379,6 +387,9 @@
|
||||
}
|
||||
}
|
||||
.skuSelectorSubcontainer--cor {
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.skuSelectorNameContainer {
|
||||
margin: 8px 0 0;
|
||||
height: 48px;
|
||||
@ -392,7 +403,7 @@
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
.frameAround--sku-selector {
|
||||
border-color: #000000;
|
||||
border-color: $black;
|
||||
border-width: 2px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@ -435,11 +446,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Calculadora de Frete
|
||||
//Calculadora de Frete
|
||||
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
padding-bottom: 0;
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
@ -451,7 +465,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
}
|
||||
:global(.vtex-input) {
|
||||
:global(.vtex-input__label) {
|
||||
@ -465,6 +479,13 @@
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 100%;
|
||||
}
|
||||
:global(.vtex-address-form-4-x-input) {
|
||||
color: #afafaf;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 16.5px 0 16.5px 16px;
|
||||
}
|
||||
:global(.vtex-address-form-4-x-input)::placeholder {
|
||||
color: #afafaf;
|
||||
font-weight: 400;
|
||||
@ -472,13 +493,16 @@
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input__error) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
:last-child {
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
color: $black;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@ -500,7 +524,7 @@
|
||||
:global(.vtex-button) {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
background: #000000;
|
||||
background: $black;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
bottom: 1px;
|
||||
@ -511,7 +535,7 @@
|
||||
:global(.vtex-button)::after {
|
||||
content: "OK";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -523,13 +547,27 @@
|
||||
.shippingTable {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
.shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 16.36%);
|
||||
grid-template-columns: 13% 8% 17%;
|
||||
grid-template-areas: "A B C";
|
||||
column-gap: 32px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
grid-template-columns: 10% 5.6% 12.5%;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
grid-template-columns: 9.6% 5.5% 11.5%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
grid-template-columns: 30% 18% 39%;
|
||||
}
|
||||
.shippingTableHeadDeliveryName,
|
||||
.shippingTableHeadDeliveryEstimate,
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
@ -567,10 +605,19 @@
|
||||
.shippingTableBody {
|
||||
.shippingTableRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 16.36%);
|
||||
grid-template-columns: 13% 8% 17%;
|
||||
grid-template-areas: "A B C";
|
||||
column-gap: 32px;
|
||||
margin-top: 15px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
grid-template-columns: 10% 5.6% 12.5%;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
grid-template-columns: 9.6% 5.5% 11.5%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
grid-template-columns: 30% 18% 39%;
|
||||
}
|
||||
.shippingTableCellDeliveryName {
|
||||
grid-area: A;
|
||||
text-transform: capitalize;
|
||||
@ -603,40 +650,60 @@
|
||||
|
||||
.productImagesContainer--image-description {
|
||||
width: 92.93%;
|
||||
height: 632px;
|
||||
max-height: unset;
|
||||
position: relative;
|
||||
margin-left: 32px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 94.784%;
|
||||
height: 872px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 100%;
|
||||
height: 944px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 100%;
|
||||
height: 296px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
& .productImageTag--image-description--main {
|
||||
max-height: unset !important;
|
||||
.productImage--image-description {
|
||||
height: 632px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
height: 872px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
height: 944px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
height: 296px;
|
||||
}
|
||||
& .productImageTag--image-description--main {
|
||||
object-fit: cover !important;
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer {
|
||||
width: 92.93%;
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
margin-right: 32px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 94.784%;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.productDescriptionTitle {
|
||||
margin-bottom: 8px;
|
||||
@ -644,6 +711,9 @@
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -659,7 +729,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -687,12 +757,12 @@
|
||||
|
||||
.newsletter {
|
||||
height: 175px;
|
||||
background: #000000;
|
||||
background: $black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px 16px 16px;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
border-bottom: 1px solid $white;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
@ -724,7 +794,7 @@
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -734,7 +804,7 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
color: $gray;
|
||||
margin-top: 16px;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
font-size: 16px;
|
||||
@ -758,7 +828,7 @@
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
border-bottom: 1px solid $gray;
|
||||
border-radius: 0;
|
||||
height: 32px;
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
@ -767,8 +837,8 @@
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #929292;
|
||||
border: 1px solid #000000;
|
||||
color: $gray;
|
||||
border: 1px solid $black;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@ -786,8 +856,8 @@
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #929292;
|
||||
border: 1px solid #000000;
|
||||
color: $gray;
|
||||
border: 1px solid $black;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@ -806,7 +876,7 @@
|
||||
padding: 0 16px 0;
|
||||
width: 84px;
|
||||
height: 32px;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
border-bottom: 3px solid $gray-300;
|
||||
min-height: unset;
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
margin-top: 0;
|
||||
@ -817,9 +887,8 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
padding: 0 !important;
|
||||
// border: 1px solid #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
//Footer
|
||||
|
||||
.menuContainerNav {
|
||||
.menuContainer {
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
@ -27,7 +28,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: $gray;
|
||||
.accordionIcon--site-m3-academy-mobile--isClosed,
|
||||
.accordionIcon--am3academy-mobile--isClosed {
|
||||
visibility: hidden;
|
||||
@ -76,13 +77,13 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 164px;
|
||||
height: 42px;
|
||||
border: 1px solid #ffffff;
|
||||
border: 1px solid $white;
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
@ -92,7 +93,7 @@
|
||||
}
|
||||
.styledLinkContent--site-m3-academy-mobile,
|
||||
.styledLinkContent--am3academy-mobile {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
border-bottom: 1px solid $white;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.styledLinkContent--site-m3-academy,
|
||||
@ -104,7 +105,7 @@
|
||||
.styledLinkContent--seja-um-franqueado-block {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -144,13 +145,13 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.SpanTitle {
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.SpanTitleBig {
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
@ -207,7 +208,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: #ffffff;
|
||||
color: $white;
|
||||
column-gap: 8.72px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
color: $black;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
//product quantity
|
||||
//Product quantity
|
||||
|
||||
.quantitySelectorContainer {
|
||||
margin-bottom: 0px;
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
margin: 0;
|
||||
}
|
||||
@ -18,11 +19,12 @@
|
||||
border-right-width: 0px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-color: #cccccc;
|
||||
color: #929292;
|
||||
border-color: $cccccc;
|
||||
color: $gray;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 0;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__plus-button-container) {
|
||||
height: 49px;
|
||||
@ -31,8 +33,8 @@
|
||||
height: 49px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-color: #cccccc;
|
||||
color: #000000;
|
||||
border-color: $cccccc;
|
||||
color: $black;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -46,10 +48,10 @@
|
||||
height: 49px;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-color: #cccccc;
|
||||
color: #000000;
|
||||
border-color: $cccccc;
|
||||
color: $black;
|
||||
border-radius: 0;
|
||||
background-color: #ffffff;
|
||||
background-color: $white;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
.slide--carousel {
|
||||
width: 5.3515% !important;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 5.4036%!important;
|
||||
width: 5.4036% !important;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 6.0831% !important;
|
||||
@ -48,7 +48,7 @@
|
||||
:global(.vtex-product-summary-2-x-clearLink) {
|
||||
min-height: 448.4px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
min-height: 543.4px;
|
||||
min-height: 543.4px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
min-height: 402.2px;
|
||||
@ -68,7 +68,7 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
color: $black;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
min-height: 50px;
|
||||
@ -80,7 +80,7 @@
|
||||
height: 314.4px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
height: 434.4px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
height: 291.2px;
|
||||
}
|
||||
@ -107,7 +107,7 @@
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
text-decoration-line: line-through;
|
||||
color: #bababa;
|
||||
color: $BABABA;
|
||||
:global(.vtex-store-components-3-x-listPriceLabel) {
|
||||
display: none;
|
||||
}
|
||||
@ -134,7 +134,7 @@
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -185,13 +185,13 @@
|
||||
align-items: center;
|
||||
bottom: -32px;
|
||||
.paginationDot {
|
||||
background-color: #000000;
|
||||
background-color: $black;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
}
|
||||
.paginationDot--isActive {
|
||||
background-color: #ffffff;
|
||||
border: 0.5px solid #000000;
|
||||
background-color: $white;
|
||||
border: 0.5px solid $black;
|
||||
width: 17px !important;
|
||||
height: 17px !important;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Header
|
||||
|
||||
.wrapper--sticky-header {
|
||||
background-color: #ffffff !important;
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
@ -12,37 +12,46 @@
|
||||
}
|
||||
.listContainer {
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
border-bottom: 1px solid $B9B9B9;
|
||||
margin-bottom: 32px;
|
||||
padding-top: 16px;
|
||||
padding-top: 0;
|
||||
column-gap: 99px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 71.858%;
|
||||
margin: 0 auto 32px;
|
||||
margin: 0 auto 64px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
border-top: 1px solid $B9B9B9;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #b9b9b9;
|
||||
border-top: 1px solid $B9B9B9;
|
||||
margin-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.listItem {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 114px;
|
||||
height: 38px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 142px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 82px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 82px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
background-color: unset;
|
||||
border: none;
|
||||
color: #bfbfbf;
|
||||
color: $gray-300;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
@ -54,11 +63,18 @@
|
||||
font-size: 24px;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
padding: 0 !important;
|
||||
width: 114px;
|
||||
height: 38px;
|
||||
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||
width: 142px;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
width: 82px;
|
||||
justify-content: left;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
width: 82px;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
@ -77,12 +93,12 @@
|
||||
:global(.vtex-button) {
|
||||
background-color: unset;
|
||||
border: none;
|
||||
color: #000000;
|
||||
color: $black;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
text-transform: capitalize;
|
||||
border-bottom: 2px solid #000000;
|
||||
border-bottom: 2px solid $black;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border-radius: 0;
|
||||
@ -114,11 +130,11 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (max-width: 1025px) and (min-width: 768px) {
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
border-bottom: 1px solid $B9B9B9;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
@media (max-width: 768px) and (min-width: 375px) {
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
border-bottom: 1px solid $B9B9B9;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.contentItem {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user