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

Merge pull request 'Entrega do Desafio' (#9) from feature/challenge-vtex-io into develop

Browse Source 
Reviewed-on: #9
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-08 14:30:18 +00:00
commit 8089f36bd7
6 changed files with 72 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/css/vtex.slider-layout.css
View File

@ -29,6 +29,7 @@
.sliderLayoutContainer--carousel { .sliderLayoutContainer--carousel {
width: 78.616%; width: 78.616%;
margin: 0 auto 32px; margin: 0 auto 32px;
min-height: 254.8px;
} }
} }
.sliderLayoutContainer--carousel .sliderTrackContainer { .sliderLayoutContainer--carousel .sliderTrackContainer {
@ -86,6 +87,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) {
line-height: 0;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -95,7 +99,6 @@
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
padding: 0 16px; padding: 0 16px;
min-height: 19px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) {

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

@ -87,19 +87,18 @@
.productNameContainer { .productNameContainer {
text-align: right; text-align: right;
margin-bottom: 8px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productNameContainer { .productNameContainer {
text-align: left; text-align: left;
margin-top: 32px; margin-top: 32px;
margin-bottom: 8px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productNameContainer { .productNameContainer {
text-align: left; text-align: left;
margin-top: 32px; margin-top: 32px;
margin-bottom: 8px;
} }
} }
.productNameContainer .productBrand { .productNameContainer .productBrand {
@ -161,7 +160,7 @@
@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; column-gap: 8px;
grid-template-columns: 48.57% 48.57%; grid-template-columns: 48.563% 48.563%;
width: 100%; width: 100%;
} }
} }
@ -181,6 +180,10 @@
margin-right: 0; 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) {
border: 0 !important;
border-radius: unset !important;
}
: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) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -189,7 +192,8 @@
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
height: 40px; height: 40px;
padding: 0 14px; padding: 12px 14px;
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-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;
@ -214,6 +218,10 @@
margin-right: 0; 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) {
border: 0 !important;
border-radius: unset !important;
}
: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) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -221,7 +229,8 @@
color: #989898; color: #989898;
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
padding: 0 14px; padding: 12px 14px;
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-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;

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

@ -33,6 +33,7 @@
.container--description-block .listContainer { .container--description-block .listContainer {
width: 71.858%; width: 71.858%;
margin: 0 auto 64px; margin: 0 auto 64px;
column-gap: 7%;
} }
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
@ -85,6 +86,7 @@
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
min-height: unset;
} }
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer .listItem :global(.vtex-button) { .container--description-block .listContainer .listItem :global(.vtex-button) {
@ -117,6 +119,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 38px; height: 38px;
min-height: unset;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive { .container--description-block .listContainer .listItemActive {
@ -136,37 +139,50 @@
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid #000000;
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
} }
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: "";
border-bottom: 2px solid #000000;
width: 100%;
}
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) { .container--description-block .listContainer .listItemActive :global(.vtex-button) {
font-size: 24px; font-size: 24px;
} }
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
border-bottom: 3px solid #000000;
}
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) { .container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: unset;
border-bottom: unset; border-bottom: unset;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) { .container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: unset;
border-bottom: unset; border-bottom: unset;
} }
} }
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding: 0; padding: 0;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
flex-direction: row;
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 .listItemActive :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
flex-direction: row;
justify-content: left; justify-content: left;
} }
} }

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

@ -16,6 +16,7 @@
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 78.616%; width: 78.616%;
margin: 0 auto 32px; margin: 0 auto 32px;
min-height: 254.8px;
} }
.sliderTrackContainer { .sliderTrackContainer {
width: 96%; width: 96%;
@ -55,6 +56,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
:global(.vtex-product-summary-2-x-productNameContainer) { :global(.vtex-product-summary-2-x-productNameContainer) {
line-height: 0;
:global(.vtex-product-summary-2-x-productBrand) { :global(.vtex-product-summary-2-x-productBrand) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -64,7 +66,6 @@
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
padding: 0 16px; padding: 0 16px;
min-height: 19px;
@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;

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

@ -95,15 +95,14 @@
.productNameContainer { .productNameContainer {
text-align: right; text-align: right;
margin-bottom: 8px;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
text-align: left; text-align: left;
margin-top: 32px; margin-top: 32px;
margin-bottom: 8px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
text-align: left; text-align: left;
margin-top: 32px; margin-top: 32px;
margin-bottom: 8px;
} }
.productBrand { .productBrand {
font-weight: 300; font-weight: 300;
@ -159,7 +158,7 @@
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
column-gap: 8px; column-gap: 8px;
grid-template-columns: 48.57% 48.57%; grid-template-columns: 48.563% 48.563%;
width: 100%; width: 100%;
} }
:global(.vtex-store-components-3-x-inputName) { :global(.vtex-store-components-3-x-inputName) {
@ -175,6 +174,8 @@
} }
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: 0 !important;
border-radius: unset !important;
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -183,7 +184,8 @@
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
height: 40px; height: 40px;
padding: 0 14px; padding: 12px 14px;
width: 100%;
} }
:global(.vtex-styleguide-9-x-input)::placeholder { :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400; font-weight: 400;
@ -208,6 +210,8 @@
} }
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: 0 !important;
border-radius: unset !important;
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -215,7 +219,8 @@
color: #989898; color: #989898;
border: 1px solid #989898; border: 1px solid #989898;
border-radius: unset; border-radius: unset;
padding: 0 14px; padding: 12px 14px;
width: 100%;
} }
:global(.vtex-styleguide-9-x-input)::placeholder { :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400; font-weight: 400;
@ -588,7 +593,6 @@
} }
} }
//Tab Layout //Tab Layout
.productImagesContainer--image-description { .productImagesContainer--image-description {

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

@ -19,6 +19,7 @@
@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 64px; margin: 0 auto 64px;
column-gap: 7%;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
flex-direction: column; flex-direction: column;
@ -59,6 +60,7 @@
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
min-height: unset;
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
font-size: 24px; font-size: 24px;
} }
@ -84,6 +86,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 38px; height: 38px;
min-height: unset;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -98,26 +101,43 @@
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid $black;
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
::after {
content: "";
border-bottom: 2px solid $black;
width: 100%;
}
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
font-size: 24px; font-size: 24px;
::after {
border-bottom: 3px solid $black;
}
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
border-bottom: unset; ::after {
content: unset;
border-bottom: unset;
}
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
border-bottom: unset; ::after {
content: unset;
border-bottom: unset;
}
} }
:global(.vtex-button__label) { :global(.vtex-button__label) {
padding: 0; padding: 0;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
flex-direction: row;
justify-content: left; justify-content: left;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
flex-direction: row;
justify-content: left; justify-content: left;
} }
} }