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 e adicionando estilos para telas de 2561px até 1920px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-30 14:01:46 -03:00
parent e4d67cdd6e
commit 99dbcd3ef1
6 changed files with 67 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,48 +14,10 @@
column-gap: 32px;
}
.stretchChildrenWidth {
padding: 0;
}
@media (max-width: 1920px) and (min-width: 1024px) {
.stretchChildrenWidth {
width: 100% !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.stretchChildrenWidth {
width: 100% !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.stretchChildrenWidth {
width: 100% !important;
}
}
.flexCol--stack-layout-content {
width: 100% !important;
}
@media (max-width: 1920px) and (min-width: 1024px) {
.flexRowContent--product-main-content {
display: grid;
grid-template-columns: 48.819% 48.819%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.flexRowContent--product-main-content {
display: grid;
grid-template-columns: 100%;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.flexRowContent--product-main-content {
display: grid;
grid-template-columns: 100%;
}
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
background: #000000;
padding: 12px 64px;
@ -69,7 +31,10 @@
margin-top: 10px;
}
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before {
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
color: #ffffff;
@ -77,6 +42,3 @@
font-size: 18px;
line-height: 25px;
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
display: none;
}

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

@ -13,6 +13,11 @@
width: 94.435%;
margin: 0 auto 64px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel {
width: 71.858%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel {
width: 92.166%;
@ -128,7 +133,13 @@
color: #bababa;
}
.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-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
text-transform: lowercase;
display: none;
}
.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-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before {
content: "de ";
}
.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-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after {
content: " por";
}
.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-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
padding: 0;

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

@ -11,6 +11,11 @@
padding: 0 40px;
margin-top: 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block {
padding: 0;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.container--description-block {
margin-top: 40px;
@ -22,6 +27,12 @@
margin-bottom: 32px;
padding-top: 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer {
width: 71.858%;
margin: 0 auto 32px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer {
flex-direction: column;
@ -128,6 +139,12 @@
justify-content: left;
}
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .contentContainer {
width: 71.858%;
margin: 0 auto;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .contentContainer {
border-bottom: 1px solid #b9b9b9;

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

@ -6,39 +6,10 @@
column-gap: 32px;
}
.stretchChildrenWidth {
padding: 0;
@media (max-width: 1920px) and (min-width: 1024px) {
width: 100% !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 100% !important;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 100% !important;
}
}
.flexCol--stack-layout-content {
width: 100% !important;
}
.flexRowContent--product-main-content {
@media (max-width: 1920px) and (min-width: 1024px) {
display: grid;
grid-template-columns: 48.819% 48.819%;
}
@media (max-width: 1025px) and (min-width: 768px) {
display: grid;
grid-template-columns: 100%;
}
@media (max-width: 768px) and (min-width: 375px) {
// padding: 0 40px;
display: grid;
grid-template-columns: 100%;
}
}
//Botao add Cart
.flexRow {
@ -54,17 +25,17 @@
height: 74px;
margin-top: 10px;
}
:global(.vtex-button__label)::before {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
:global(.vtex-button__label) {
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
display: none;
font-size: 0;
}
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
}

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

@ -5,6 +5,9 @@
min-height: 448.4px;
width: 94.435%;
margin: 0 auto 64px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 92.166%;
}
@ -94,7 +97,17 @@
text-decoration-line: line-through;
color: #bababa;
:global(.vtex-store-components-3-x-listPriceLabel) {
text-transform: lowercase;
display: none;
}
:global(.vtex-store-components-3-x-listPriceValue) {
:global(.vtex-product-summary-2-x-currencyContainer) {
&::before {
content: "de ";
}
&::after {
content: " por";
}
}
}
}
:global(.vtex-store-components-3-x-sellingPrice) {

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

@ -3,6 +3,9 @@
.container--description-block {
padding: 0 40px;
margin-top: 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
padding: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
margin-top: 40px;
}
@ -11,6 +14,10 @@
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
padding-top: 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%;
margin: 0 auto 32px;
}
@media (max-width: 1025px) and (min-width: 768px) {
flex-direction: column;
border-top: 1px solid #b9b9b9;
@ -95,6 +102,10 @@
}
}
.contentContainer {
@media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%;
margin: 0 auto;
}
@media (max-width: 1025px) and (min-width: 768px) {
border-bottom: 1px solid #b9b9b9;
padding-bottom: 16px;