anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: correção de estilos, adição de variáveis e correção de comentários

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-02 14:13:11 -03:00
parent e7518639c2
commit f45182dd4f
15 changed files with 363 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
styles/css/vtex.breadcrumb.css
View File

@ -21,15 +21,29 @@
} }
} }
.container .homeLink { .container .homeLink {
padding: 0; padding-right: 6px;
padding-left: 0;
} }
.container .homeLink::before { .container .homeLink::before {
content: "Home"; content: "Home";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
} }
.container .homeIcon { .container .homeIcon {
display: none; display: none;
} }
.container .arrow {
padding: 0 6px;
}
.container .arrow .link {
padding: 0 6px;
}
.container .term {
padding: 0 6px;
}
.container .link, .container .link,
.container .term { .container .term {
font-weight: 400; font-weight: 400;
@ -37,8 +51,3 @@
line-height: 19px; line-height: 19px;
color: #929292; color: #929292;
} }
@media (max-width: 768px) and (min-width: 375px) {
.container .term {
padding-left: 0;
}
}

10
styles/css/vtex.flex-layout.css
View File

@ -87,8 +87,18 @@
width: 22px; width: 22px;
height: 18px; height: 18px;
padding: 0; 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) { .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-weight: 400;
font-size: 12px; font-size: 12px;

2
styles/css/vtex.menu.css
View File

@ -44,7 +44,7 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 30px; 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--site-m3-academy-mobile--isClosed,
.menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed { .menuContainerNav .menuContainer .menuItem .styledLinkContainer .styledLink .styledLinkContent .accordionIcon--am3academy-mobile--isClosed {

4
styles/css/vtex.product-quantity.css
View File

@ -7,6 +7,9 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.quantitySelectorContainer {
margin-bottom: 0px;
}
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.quantitySelectorContainer { .quantitySelectorContainer {
margin: 0; margin: 0;
@ -27,6 +30,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
padding: 0;
} }
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) {
height: 49px; height: 49px;

120
styles/css/vtex.store-components.css
View File

@ -207,6 +207,8 @@
display: grid; display: grid;
grid-template-areas: "A B" "C C"; grid-template-areas: "A B" "C C";
max-width: unset !important; max-width: unset !important;
column-gap: 8px;
grid-template-columns: 49% 49%;
} }
@media (max-width: 2561px) and (min-width: 1920px) { @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) { :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) { @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-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) { @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-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%; 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) { :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; grid-area: A;
margin: 0 8px 15px 0; margin: 0 0 15px 0;
width: 12.22em; width: 100%;
} }
@media (max-width: 1025px) and (min-width: 768px) { @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) { :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) { @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) { :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) { :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: 1px solid #989898;
border-radius: unset; border-radius: unset;
height: 40px; 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 { :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; 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) { :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; grid-area: B;
margin: 0 0 15px; margin: 0 0 15px;
width: 12.22em; width: 100%;
height: 40px; height: 40px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @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) { :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) { @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) { :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) { :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; color: #989898;
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; 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 { :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; font-weight: 400;
@ -397,6 +407,11 @@
color: #000000; color: #000000;
} }
@media (max-width: 1025px) and (min-width: 768px) {
.skuSelectorSubcontainer--cor {
margin-bottom: 0;
}
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer { .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 8px 0 0; margin: 8px 0 0;
height: 48px; height: 48px;
@ -456,6 +471,11 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
@media (max-width: 768px) and (min-width: 375px) {
.shippingContainer {
padding-bottom: 40px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
padding-bottom: 0; padding-bottom: 0;
} }
@ -486,12 +506,22 @@
width: 100%; 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 { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
color: #afafaf; color: #afafaf;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; 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) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
height: 0; height: 0;
padding: 0; padding: 0;
@ -540,16 +570,38 @@
.shippingTable { .shippingTable {
border: 0; border: 0;
padding: 0; padding: 0;
margin-top: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
.shippingTable {
margin-top: 0;
margin-bottom: 16px;
}
} }
.shippingTable .shippingTableHead { .shippingTable .shippingTableHead {
display: block; display: block;
} }
.shippingTable .shippingTableHead .shippingTableRow { .shippingTable .shippingTableHead .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 16.36%); grid-template-columns: 13% 8% 17%;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; 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 .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
@ -584,11 +636,26 @@
} }
.shippingTable .shippingTableBody .shippingTableRow { .shippingTable .shippingTableBody .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 16.36%); grid-template-columns: 13% 8% 17%;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; column-gap: 32px;
margin-top: 15px; 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 { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
grid-area: A; grid-area: A;
text-transform: capitalize; text-transform: capitalize;
@ -614,6 +681,7 @@
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
height: 632px;
max-height: unset; max-height: unset;
position: relative; position: relative;
margin-left: 32px; margin-left: 32px;
@ -621,11 +689,13 @@
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 94.784%; width: 94.784%;
height: 872px;
} }
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
height: 944px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -633,11 +703,31 @@
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
height: 296px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; 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; max-height: unset !important;
} }
@ -645,6 +735,7 @@
width: 92.93%; width: 92.93%;
position: relative; position: relative;
margin-left: 16px; margin-left: 16px;
margin-right: 32px;
} }
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.productDescriptionContainer { .productDescriptionContainer {
@ -654,6 +745,7 @@
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 0; margin-left: 0;
margin-right: 0;
width: 100%; width: 100%;
} }
} }
@ -661,6 +753,7 @@
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
margin-right: 0;
} }
} }
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
@ -670,6 +763,11 @@
line-height: 32px; line-height: 32px;
color: #575757; color: #575757;
} }
@media (max-width: 2561px) and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 16px;
}
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
font-size: 20px; font-size: 20px;

26
styles/css/vtex.tab-layout.css
View File

@ -26,12 +26,13 @@
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px; margin-bottom: 32px;
padding-top: 16px; padding-top: 0;
column-gap: 99px;
} }
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer { .container--description-block .listContainer {
width: 71.858%; width: 71.858%;
margin: 0 auto 32px; margin: 0 auto 64px;
} }
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
@ -39,6 +40,7 @@
flex-direction: column; flex-direction: column;
border-top: 1px solid #b9b9b9; border-top: 1px solid #b9b9b9;
margin-bottom: 16px; margin-bottom: 16px;
padding-top: 16px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
@ -46,20 +48,29 @@
flex-direction: column; flex-direction: column;
border-top: 1px solid #b9b9b9; border-top: 1px solid #b9b9b9;
margin-bottom: 16px; margin-bottom: 16px;
padding-top: 16px;
} }
} }
.container--description-block .listContainer .listItem { .container--description-block .listContainer .listItem {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 114px;
height: 38px; 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) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItem { .container--description-block .listContainer .listItem {
width: 82px;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItem { .container--description-block .listContainer .listItem {
width: 82px;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@ -81,15 +92,24 @@
} }
} }
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { .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) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
width: 82px;
justify-content: left; justify-content: left;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
width: 82px;
justify-content: left; justify-content: left;
} }
} }

26
styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss
View File

@ -9,29 +9,39 @@
width: 71.858%; width: 71.858%;
} }
.homeLink { .homeLink {
padding: 0; padding-right: 6px;
padding-left: 0;
} }
.homeLink::before { .homeLink::before {
content: "Home"; content: "Home";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray;
} }
.homeIcon { .homeIcon {
display: none; display: none;
} }
.arrow {
padding: 0 6px;
.link {
padding: 0 6px;
}
}
.term {
padding: 0 6px;
}
.link, .link,
.term { .term {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: $gray;
}
.term {
@media (max-width: 768px) and (min-width: 375px) {
padding-left: 0;
}
} }
} }

20
styles/sass/pages/product/flex-layout/vtex.flex-layout.scss
View File

@ -83,6 +83,8 @@
width: 22px; width: 22px;
height: 18px; height: 18px;
padding: 0; padding: 0;
left: 0;
position: absolute;
} }
} }
} }
@ -94,6 +96,10 @@
.flexColChild { .flexColChild {
:global(.vtex-menu-2-x-menuContainerNav) { :global(.vtex-menu-2-x-menuContainerNav) {
:global(.vtex-menu-2-x-menuContainer) { :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-menuItem) {
:global(.vtex-menu-2-x-styledLink) { :global(.vtex-menu-2-x-styledLink) {
:global(.vtex-menu-2-x-styledLinkContent) { :global(.vtex-menu-2-x-styledLinkContent) {
@ -102,7 +108,7 @@
line-height: 16px; line-height: 16px;
letter-spacing: -0.1em; letter-spacing: -0.1em;
text-transform: uppercase; text-transform: uppercase;
color: #929292; color: $gray;
} }
} }
} }
@ -110,7 +116,7 @@
} }
} }
//product-images //Product-images
.flexRowContent { .flexRowContent {
padding: 0; padding: 0;
@ -128,7 +134,7 @@
.flexRowContent { .flexRowContent {
.stretchChildrenWidth { .stretchChildrenWidth {
:global(.vtex-button):first-child { :global(.vtex-button):first-child {
background: #000000; background: $black;
padding: 12px 64px; padding: 12px 64px;
height: 49px; height: 49px;
border: none; border: none;
@ -144,7 +150,7 @@
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
content: "ADICIONAR À SACOLA"; content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #ffffff; color: $white;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
@ -158,7 +164,7 @@
//Footer //Footer
.flexRow--menu-row { .flexRow--menu-row {
background-color: #000000; background-color: $black;
height: 464px; height: 464px;
padding: 32px 32px 128px; padding: 32px 32px 128px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
@ -166,13 +172,13 @@
} }
} }
.flexRow--menu-row-mobile { .flexRow--menu-row-mobile {
background-color: #000000; background-color: $black;
min-height: 532px; min-height: 532px;
padding: 0px 16px 32px; padding: 0px 16px 32px;
.flexRowContent--menu-row-mobile { .flexRowContent--menu-row-mobile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.stretchChildrenWidth{ .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
} }

153
styles/sass/pages/product/store-components/vtex.store-components.scss
View File

@ -1,4 +1,5 @@
//Logo Header //Logo Header
.logoContainer { .logoContainer {
padding-left: 40px; padding-left: 40px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
@ -7,6 +8,7 @@
} }
//Input Header //Input Header
.autoCompleteOuterContainer { .autoCompleteOuterContainer {
&:first-child { &:first-child {
:global(.vtex-input) { :global(.vtex-input) {
@ -21,7 +23,7 @@
} }
} }
//product-images //Product-images
.container { .container {
width: 100%; width: 100%;
@ -79,18 +81,14 @@
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important; height: 904px !important;
} }
// @media (max-width: 1920px) and (min-width: 1024px) {
// max-height: unset !important;
// }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important; height: 944px !important;
// max-height: unset !important;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 99.67% !important; width: 99.67% !important;
height: 296px !important; height: 296px !important;
object-fit: cover !important; object-fit: cover !important;
// max-height: unset !important;
} }
} }
} }
@ -133,7 +131,7 @@
} }
} }
//dados produto //Dados produto
.productNameContainer { .productNameContainer {
text-align: right; text-align: right;
@ -189,24 +187,31 @@
"A B" "A B"
"C C"; "C C";
max-width: unset !important; max-width: unset !important;
column-gap: 8px;
grid-template-columns: 49% 49%;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 44.138%; width: 44.138%;
} }
@media (max-width: 1025px) and (min-width: 768px) { @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) { @media (max-width: 768px) and (min-width: 375px) {
column-gap: 8px;
grid-template-columns: 48.57% 48.57%;
width: 100%; width: 100%;
} }
:global(.vtex-store-components-3-x-inputName) { :global(.vtex-store-components-3-x-inputName) {
grid-area: A; grid-area: A;
margin: 0 8px 15px 0; margin: 0 0 15px 0;
width: 12.22em; width: 100%;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em; width: 100%;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 94.26%; width: 100%;
margin-right: 0;
} }
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
@ -218,6 +223,7 @@
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
height: 40px; height: 40px;
padding: 0 14px;
} }
:global(.vtex-styleguide-9-x-input)::placeholder { :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400; font-weight: 400;
@ -231,13 +237,14 @@
:global(.vtex-store-components-3-x-inputEmail) { :global(.vtex-store-components-3-x-inputEmail) {
grid-area: B; grid-area: B;
margin: 0 0 15px; margin: 0 0 15px;
width: 12.22em; width: 100%;
height: 40px; height: 40px;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em; width: 100%;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 99.47%; width: 100%;
margin-right: 0;
} }
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
@ -248,6 +255,7 @@
color: #989898; color: #989898;
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
padding: 0 14px;
} }
:global(.vtex-styleguide-9-x-input)::placeholder { :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400; font-weight: 400;
@ -273,7 +281,7 @@
:global(.vtex-button__label)::after { :global(.vtex-button__label)::after {
content: "AVISE-ME"; content: "AVISE-ME";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #ffffff; color: $white;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
@ -284,7 +292,7 @@
} }
} }
// sku selector // Sku selector
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
@ -302,7 +310,7 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: $gray;
} }
.skuSelectorSubcontainer--tamanho::before { .skuSelectorSubcontainer--tamanho::before {
@ -311,7 +319,7 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: $gray;
} }
.skuSelectorSubcontainer--tamanho { .skuSelectorSubcontainer--tamanho {
@ -328,7 +336,7 @@
height: 40px; height: 40px;
margin: 0; margin: 0;
.frameAround--sku-selector { .frameAround--sku-selector {
border-color: #000000; border-color: $black;
border-width: 2px; border-width: 2px;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -371,7 +379,7 @@
.skuSelectorItem--selected { .skuSelectorItem--selected {
.skuSelectorInternalBox { .skuSelectorInternalBox {
.skuSelectorItemTextValue { .skuSelectorItemTextValue {
color: #000000; color: $black;
} }
} }
} }
@ -379,6 +387,9 @@
} }
} }
.skuSelectorSubcontainer--cor { .skuSelectorSubcontainer--cor {
@media (max-width: 1025px) and (min-width: 768px) {
margin-bottom: 0;
}
.skuSelectorNameContainer { .skuSelectorNameContainer {
margin: 8px 0 0; margin: 8px 0 0;
height: 48px; height: 48px;
@ -392,7 +403,7 @@
height: 48px; height: 48px;
margin: 0; margin: 0;
.frameAround--sku-selector { .frameAround--sku-selector {
border-color: #000000; border-color: $black;
border-width: 2px; border-width: 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -435,11 +446,14 @@
} }
} }
// Calculadora de Frete //Calculadora de Frete
.shippingContainer { .shippingContainer {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@media (max-width: 768px) and (min-width: 375px) {
padding-bottom: 40px;
}
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
padding-bottom: 0; padding-bottom: 0;
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
@ -451,7 +465,7 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: $gray;
} }
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input__label) { :global(.vtex-input__label) {
@ -465,6 +479,13 @@
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; 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 { :global(.vtex-address-form-4-x-input)::placeholder {
color: #afafaf; color: #afafaf;
font-weight: 400; font-weight: 400;
@ -472,13 +493,16 @@
line-height: 16px; line-height: 16px;
} }
} }
:global(.vtex-input__error) {
position: absolute;
}
} }
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
height: 0; height: 0;
padding: 0; padding: 0;
:last-child { :last-child {
text-decoration-line: underline; text-decoration-line: underline;
color: #000000; color: $black;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -500,7 +524,7 @@
:global(.vtex-button) { :global(.vtex-button) {
width: 49px; width: 49px;
height: 49px; height: 49px;
background: #000000; background: $black;
border-radius: 0; border-radius: 0;
border: none; border: none;
bottom: 1px; bottom: 1px;
@ -511,7 +535,7 @@
:global(.vtex-button)::after { :global(.vtex-button)::after {
content: "OK"; content: "OK";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
color: #ffffff; color: $white;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -523,13 +547,27 @@
.shippingTable { .shippingTable {
border: 0; border: 0;
padding: 0; padding: 0;
margin-top: 16px;
@media (max-width: 768px) and (min-width: 375px) {
margin-top: 0;
margin-bottom: 16px;
}
.shippingTableHead { .shippingTableHead {
display: block; display: block;
.shippingTableRow { .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 16.36%); grid-template-columns: 13% 8% 17%;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; 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, .shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice { .shippingTableHeadDeliveryPrice {
@ -567,10 +605,19 @@
.shippingTableBody { .shippingTableBody {
.shippingTableRow { .shippingTableRow {
display: grid; display: grid;
grid-template-columns: repeat(3, 16.36%); grid-template-columns: 13% 8% 17%;
grid-template-areas: "A B C"; grid-template-areas: "A B C";
column-gap: 32px; column-gap: 32px;
margin-top: 15px; 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 { .shippingTableCellDeliveryName {
grid-area: A; grid-area: A;
text-transform: capitalize; text-transform: capitalize;
@ -603,40 +650,60 @@
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
height: 632px;
max-height: unset; max-height: unset;
position: relative; position: relative;
margin-left: 32px; margin-left: 32px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%; width: 94.784%;
height: 872px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 100%; width: 100%;
height: 944px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; width: 100%;
height: 296px;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
.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 { & .productImageTag--image-description--main {
object-fit: cover !important;
max-height: unset !important; max-height: unset !important;
} }
}
} }
.productDescriptionContainer { .productDescriptionContainer {
width: 92.93%; width: 92.93%;
position: relative; position: relative;
margin-left: 16px; margin-left: 16px;
margin-right: 32px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%; width: 94.784%;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
margin-left: 0; margin-left: 0;
margin-right: 0;
width: 100%; width: 100%;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
margin-right: 0;
} }
.productDescriptionTitle { .productDescriptionTitle {
margin-bottom: 8px; margin-bottom: 8px;
@ -644,6 +711,9 @@
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
color: #575757; color: #575757;
@media (max-width: 2561px) and (min-width: 1920px) {
margin-bottom: 16px;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
font-size: 20px; font-size: 20px;
} }
@ -659,7 +729,7 @@
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #929292; color: $gray;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@ -687,12 +757,12 @@
.newsletter { .newsletter {
height: 175px; height: 175px;
background: #000000; background: $black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 32px 16px 16px; padding: 32px 16px 16px;
border-bottom: 1px solid #ffffff; border-bottom: 1px solid $white;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
border-bottom: none !important; border-bottom: none !important;
} }
@ -724,7 +794,7 @@
font-size: 24px; font-size: 24px;
line-height: 38px; line-height: 38px;
text-align: center; text-align: center;
color: #ffffff; color: $white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -734,7 +804,7 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
color: #929292; color: $gray;
margin-top: 16px; margin-top: 16px;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
font-size: 16px; font-size: 16px;
@ -758,7 +828,7 @@
border-top: none; border-top: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-bottom: 1px solid #929292; border-bottom: 1px solid $gray;
border-radius: 0; border-radius: 0;
height: 32px; height: 32px;
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
@ -767,8 +837,8 @@
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: #929292; color: $gray;
border: 1px solid #000000; border: 1px solid $black;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -786,8 +856,8 @@
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
color: #929292; color: $gray;
border: 1px solid #000000; border: 1px solid $black;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -806,7 +876,7 @@
padding: 0 16px 0; padding: 0 16px 0;
width: 84px; width: 84px;
height: 32px; height: 32px;
border-bottom: 3px solid #bfbfbf; border-bottom: 3px solid $gray-300;
min-height: unset; min-height: unset;
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
margin-top: 0; margin-top: 0;
@ -817,9 +887,8 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
text-align: center; text-align: center;
color: #ffffff; color: $white;
padding: 0 !important; padding: 0 !important;
// border: 1px solid #000000;
} }
} }
} }

17
styles/sass/pages/product/vtex.menu.scss
View File

@ -1,4 +1,5 @@
//Footer //Footer
.menuContainerNav { .menuContainerNav {
.menuContainer { .menuContainer {
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
@ -27,7 +28,7 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: rgba(255, 255, 255, 0.45); color: $gray;
.accordionIcon--site-m3-academy-mobile--isClosed, .accordionIcon--site-m3-academy-mobile--isClosed,
.accordionIcon--am3academy-mobile--isClosed { .accordionIcon--am3academy-mobile--isClosed {
visibility: hidden; visibility: hidden;
@ -76,13 +77,13 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
color: #ffffff; color: $white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 164px; width: 164px;
height: 42px; height: 42px;
border: 1px solid #ffffff; border: 1px solid $white;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 100%; width: 100%;
} }
@ -92,7 +93,7 @@
} }
.styledLinkContent--site-m3-academy-mobile, .styledLinkContent--site-m3-academy-mobile,
.styledLinkContent--am3academy-mobile { .styledLinkContent--am3academy-mobile {
border-bottom: 1px solid #ffffff; border-bottom: 1px solid $white;
padding: 8px 0; padding: 8px 0;
} }
.styledLinkContent--site-m3-academy, .styledLinkContent--site-m3-academy,
@ -104,7 +105,7 @@
.styledLinkContent--seja-um-franqueado-block { .styledLinkContent--seja-um-franqueado-block {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #ffffff; color: $white;
} }
} }
} }
@ -144,13 +145,13 @@
margin-bottom: 0; margin-bottom: 0;
} }
.SpanTitle { .SpanTitle {
color: #ffffff; color: $white;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 38px; line-height: 38px;
} }
.SpanTitleBig { .SpanTitleBig {
color: #ffffff; color: $white;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
@ -207,7 +208,7 @@
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: #ffffff; color: $white;
column-gap: 8.72px; column-gap: 8.72px;
} }
} }

2
styles/sass/pages/product/vtex.product-price.scss
View File

@ -4,6 +4,6 @@
font-weight: 700; font-weight: 700;
font-size: 25px; font-size: 25px;
line-height: 38px; line-height: 38px;
color: #000000; color: $black;
margin-top: 24px; margin-top: 24px;
} }

18
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,6 +1,7 @@
//product quantity //Product quantity
.quantitySelectorContainer { .quantitySelectorContainer {
margin-bottom: 0px;
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
margin: 0; margin: 0;
} }
@ -18,11 +19,12 @@
border-right-width: 0px; border-right-width: 0px;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
border-color: #cccccc; border-color: $cccccc;
color: #929292; color: $gray;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
padding: 0;
} }
:global(.vtex-numeric-stepper__plus-button-container) { :global(.vtex-numeric-stepper__plus-button-container) {
height: 49px; height: 49px;
@ -31,8 +33,8 @@
height: 49px; height: 49px;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
border-color: #cccccc; border-color: $cccccc;
color: #000000; color: $black;
border-radius: 0; border-radius: 0;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -46,10 +48,10 @@
height: 49px; height: 49px;
border-top-width: 1px; border-top-width: 1px;
border-bottom-width: 1px; border-bottom-width: 1px;
border-color: #cccccc; border-color: $cccccc;
color: #000000; color: $black;
border-radius: 0; border-radius: 0;
background-color: #ffffff; background-color: $white;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;

14
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -32,7 +32,7 @@
.slide--carousel { .slide--carousel {
width: 5.3515% !important; width: 5.3515% !important;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 5.4036%!important; width: 5.4036% !important;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 6.0831% !important; width: 6.0831% !important;
@ -68,7 +68,7 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
color: #000000; color: $black;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
min-height: 50px; min-height: 50px;
@ -107,7 +107,7 @@
line-height: 19px; line-height: 19px;
text-align: center; text-align: center;
text-decoration-line: line-through; text-decoration-line: line-through;
color: #bababa; color: $BABABA;
:global(.vtex-store-components-3-x-listPriceLabel) { :global(.vtex-store-components-3-x-listPriceLabel) {
display: none; display: none;
} }
@ -134,7 +134,7 @@
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
text-align: center; text-align: center;
color: #000000; color: $black;
} }
} }
} }
@ -185,13 +185,13 @@
align-items: center; align-items: center;
bottom: -32px; bottom: -32px;
.paginationDot { .paginationDot {
background-color: #000000; background-color: $black;
width: 10px !important; width: 10px !important;
height: 10px !important; height: 10px !important;
} }
.paginationDot--isActive { .paginationDot--isActive {
background-color: #ffffff; background-color: $white;
border: 0.5px solid #000000; border: 0.5px solid $black;
width: 17px !important; width: 17px !important;
height: 17px !important; height: 17px !important;
} }

2
styles/sass/pages/product/vtex.sticky-layout.scss
View File

@ -1,5 +1,5 @@
// Header // Header
.wrapper--sticky-header { .wrapper--sticky-header {
background-color: #ffffff !important; background-color: $white !important;
} }

38
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -12,37 +12,46 @@
} }
.listContainer { .listContainer {
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid $B9B9B9;
margin-bottom: 32px; margin-bottom: 32px;
padding-top: 16px; padding-top: 0;
column-gap: 99px;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%; width: 71.858%;
margin: 0 auto 32px; margin: 0 auto 64px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
flex-direction: column; flex-direction: column;
border-top: 1px solid #b9b9b9; border-top: 1px solid $B9B9B9;
margin-bottom: 16px; margin-bottom: 16px;
padding-top: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
flex-direction: column; flex-direction: column;
border-top: 1px solid #b9b9b9; border-top: 1px solid $B9B9B9;
margin-bottom: 16px; margin-bottom: 16px;
padding-top: 16px;
} }
.listItem { .listItem {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 114px;
height: 38px; height: 38px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 142px;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 82px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 82px;
margin-bottom: 16px; margin-bottom: 16px;
} }
:global(.vtex-button) { :global(.vtex-button) {
background-color: unset; background-color: unset;
border: none; border: none;
color: #bfbfbf; color: $gray-300;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
@ -54,11 +63,18 @@
font-size: 24px; font-size: 24px;
} }
:global(.vtex-button__label) { :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) { @media (max-width: 1025px) and (min-width: 768px) {
width: 82px;
justify-content: left; justify-content: left;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 82px;
justify-content: left; justify-content: left;
} }
} }
@ -77,12 +93,12 @@
:global(.vtex-button) { :global(.vtex-button) {
background-color: unset; background-color: unset;
border: none; border: none;
color: #000000; color: $black;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid #000000; border-bottom: 2px solid $black;
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
@ -114,11 +130,11 @@
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid $B9B9B9;
padding-bottom: 16px; padding-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid $B9B9B9;
padding-bottom: 16px; padding-bottom: 16px;
} }
.contentItem { .contentItem {