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 1025px até 768px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-28 10:49:06 -03:00
parent 2a21fdc536
commit 5213cb325f
14 changed files with 209 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,11 +13,17 @@
flex-wrap: wrap;
margin-left: 40px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container {
padding: 0 0 16px;
}
}
.container .homeLink {
padding: 0;
}
.container .homeLink::before {
content: "Home";
font-family: "Open Sans", sans-serif;
}
.container .homeIcon {
display: none;

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

@ -33,6 +33,12 @@
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%;
}
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
background: #000000;
@ -43,6 +49,7 @@
}
.flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;

7
styles/css/vtex.product-identifier.css
View File

@ -19,4 +19,11 @@
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
@media (max-width: 1025px) and (min-width: 768px) {
.product-identifier__value {
text-align: left;
float: left;
margin-bottom: 24px;
}
}

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

@ -27,6 +27,7 @@
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
@ -41,6 +42,7 @@
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;

5
styles/css/vtex.rich-text.css
View File

@ -13,6 +13,11 @@
margin-top: 16px;
margin-bottom: 32px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--slider-title {
margin-bottom: 24px;
}
}
.container--slider-title .wrapper--slider-title .heading--slider-title {
font-weight: 400;
font-size: 24px;

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

@ -20,6 +20,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
height: 90px !important;
}
.carouselGaleryThumbs .productImagesThumb {
width: 10% !important;
@ -61,6 +62,11 @@
max-height: unset !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImageTag--main {
height: 944px !important;
}
}
@media (max-width: 1920px) and (min-width: 1024px) {
.productVideo,
@ -68,10 +74,22 @@
height: 664px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productVideo,
.videoContainer {
height: 944px;
}
}
.productNameContainer {
text-align: right;
}
@media (max-width: 1025px) and (min-width: 768px) {
.productNameContainer {
text-align: left;
margin-top: 32px;
}
}
.productNameContainer .productBrand {
font-weight: 300;
font-size: 20px;
@ -91,6 +109,7 @@
.skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -99,19 +118,23 @@
.skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
margin: 8px 0 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
@ -164,12 +187,13 @@
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
margin: 8px 0 0;
height: 48px;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0 !important;
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
@ -226,6 +250,7 @@
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -238,6 +263,7 @@
margin-top: 8px;
height: 49px;
border-radius: 0;
width: 231px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
color: #afafaf;
@ -276,6 +302,7 @@
}
.shippingContainer :global(.vtex-button)::after {
content: "OK";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 600;
font-size: 14px;
@ -320,6 +347,7 @@
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
content: "frete";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -362,6 +390,13 @@
left: 6.9%;
position: relative;
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description {
width: 100%;
left: 0;
margin-bottom: 16px;
}
}
.productImagesContainer--image-description .productImageTag--image-description--main {
max-height: unset !important;
}
@ -371,6 +406,12 @@
width: 92.93%;
position: relative;
}
@media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer {
margin-left: 0;
width: 100%;
}
}
.productDescriptionContainer .productDescriptionTitle {
margin-bottom: 8px;
font-weight: 400;
@ -378,6 +419,11 @@
line-height: 32px;
color: #575757;
}
@media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 20px;
}
}
.productDescriptionContainer .productDescriptionText .container {
padding: 0;
}
@ -387,6 +433,12 @@
line-height: 22px;
color: #929292;
}
@media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer .productDescriptionText .container .content :first-child {
font-size: 14px;
line-height: 19px;
}
}
.installmentsPrice {
display: none;

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

@ -9,15 +9,26 @@
/* Grid breakpoints */
.container--description-block {
padding: 0 40px;
margin-top: 16px;
}
.container--description-block .listContainer {
justify-content: space-around;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
padding-top: 16px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer {
flex-direction: column;
border-top: 1px solid #b9b9b9;
margin-bottom: 16px;
}
}
.container--description-block .listContainer .listItem {
margin: 0;
padding: 0;
height: 38px;
margin-bottom: 16px;
}
.container--description-block .listContainer .listItem :global(.vtex-button) {
background-color: unset;
@ -34,9 +45,16 @@
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
justify-content: left;
}
}
.container--description-block .listContainer .listItemActive {
margin: 0;
padding: 0;
height: 38px;
margin-bottom: 16px;
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
background-color: unset;
@ -51,10 +69,32 @@
height: 38px;
border-radius: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
border-bottom: unset;
}
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
justify-content: left;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .contentContainer {
border-bottom: 1px solid #b9b9b9;
padding-bottom: 16px;
}
}
.container--description-block .contentContainer .contentItem {
display: grid;
grid-template-columns: 50% 50%;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .contentContainer .contentItem {
display: grid;
grid-template-columns: 100%;
}
}

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

@ -3,12 +3,16 @@
align-items: center;
flex-wrap: wrap;
margin-left: 40px;
@media (max-width: 1025px) and (min-width: 768px) {
padding: 0 0 16px;
}
.homeLink {
padding: 0;
}
.homeLink::before {
content: "Home";
font-family: "Open Sans", sans-serif;
}
.homeIcon {

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

@ -22,6 +22,10 @@
display: grid;
grid-template-columns: 48.819% 48.819%;
}
@media (max-width: 1025px) and (min-width: 768px) {
display: grid;
grid-template-columns: 100%;
}
}
//Botao add Cart
@ -37,6 +41,7 @@
border-radius: 0;
:global(.vtex-button__label)::before {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;

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

@ -11,6 +11,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
height: 90px !important;
.productImagesThumb {
width: 10% !important;
height: 10% !important;
@ -49,6 +50,9 @@
@media (max-width: 1920px) and (min-width: 1024px) {
max-height: unset !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important;
}
}
.productVideo,
@ -56,12 +60,19 @@
@media (max-width: 1920px) and (min-width: 1024px) {
height: 664px;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px;
}
}
//dados produto
.productNameContainer {
text-align: right;
@media (max-width: 1025px) and (min-width: 768px) {
text-align: left;
margin-top: 32px;
}
.productBrand {
font-weight: 300;
font-size: 20px;
@ -84,6 +95,7 @@
.skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -92,6 +104,7 @@
.skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -99,12 +112,13 @@
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
margin: 0;
margin: 8px 0 0;
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
.skuSelectorItem {
border-radius: 100%;
width: 40px;
@ -163,11 +177,12 @@
}
.skuSelectorSubcontainer--cor {
.skuSelectorNameContainer {
margin: 0;
margin: 8px 0 0;
height: 48px;
.skuSelectorOptionsList {
margin: 0 !important;
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
.skuSelectorItem {
border-radius: 100%;
width: 48px;
@ -226,6 +241,7 @@
padding-bottom: 0;
:global(.vtex-input)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -239,6 +255,7 @@
margin-top: 8px;
height: 49px;
border-radius: 0;
width: 231px;
:global(.vtex-address-form-4-x-input)::placeholder {
color: #afafaf;
font-weight: 400;
@ -279,6 +296,7 @@
}
:global(.vtex-button)::after {
content: "OK";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 600;
font-size: 14px;
@ -323,6 +341,7 @@
}
.shippingTableHeadDeliveryPrice::after {
content: "frete";
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -373,6 +392,11 @@
max-height: unset;
left: 6.9%;
position: relative;
@media (max-width: 1025px) and (min-width: 768px) {
width: 100%;
left: 0;
margin-bottom: 16px;
}
& .productImageTag--image-description--main {
max-height: unset !important;
}
@ -381,12 +405,19 @@
margin-left: 32px;
width: 92.93%;
position: relative;
@media (max-width: 1025px) and (min-width: 768px) {
margin-left: 0;
width: 100%;
}
.productDescriptionTitle {
margin-bottom: 8px;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 20px;
}
}
.productDescriptionText {
& .container {
@ -397,6 +428,10 @@
font-size: 16px;
line-height: 22px;
color: #929292;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 14px;
line-height: 19px;
}
}
}
}

5
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -12,4 +12,9 @@
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
@media (max-width: 1025px) and (min-width: 768px) {
text-align: left;
float: left;
margin-bottom: 24px;
}
}

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

@ -24,6 +24,7 @@
:global(.vtex-numeric-stepper__plus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__plus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;
@ -38,6 +39,7 @@
:global(.vtex-numeric-stepper__minus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__minus-button) {
font-family: "Open Sans", sans-serif;
height: 49px;
border-top-width: 1px;
border-bottom-width: 1px;

3
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -5,6 +5,9 @@
justify-content: center;
margin-top: 16px;
margin-bottom: 32px;
@media (max-width: 1025px) and (min-width: 768px) {
margin-bottom: 24px;
}
.wrapper--slider-title {
.heading--slider-title {
font-weight: 400;

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

@ -2,13 +2,22 @@
.container--description-block {
padding: 0 40px;
margin-top: 16px;
.listContainer {
justify-content: space-around;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
padding-top: 16px;
@media (max-width: 1025px) and (min-width: 768px) {
flex-direction: column;
border-top: 1px solid #b9b9b9;
margin-bottom: 16px;
}
.listItem {
margin: 0;
padding: 0;
height: 38px;
margin-bottom: 16px;
:global(.vtex-button) {
background-color: unset;
border: none;
@ -22,12 +31,17 @@
border-radius: 0;
:global(.vtex-button__label) {
padding: 0;
@media (max-width: 1025px) and (min-width: 768px) {
justify-content: left;
}
}
}
}
.listItemActive {
margin: 0;
padding: 0;
height: 38px;
margin-bottom: 16px;
:global(.vtex-button) {
background-color: unset;
border: none;
@ -40,16 +54,30 @@
width: 114px;
height: 38px;
border-radius: 0;
@media (max-width: 1025px) and (min-width: 768px) {
border-bottom: unset;
}
:global(.vtex-button__label) {
padding: 0;
@media (max-width: 1025px) and (min-width: 768px) {
justify-content: left;
}
}
}
}
}
.contentContainer {
@media (max-width: 1025px) and (min-width: 768px) {
border-bottom: 1px solid #b9b9b9;
padding-bottom: 16px;
}
.contentItem {
display: grid;
grid-template-columns: 50% 50%;
@media (max-width: 1025px) and (min-width: 768px) {
display: grid;
grid-template-columns: 100%;
}
}
}
}