AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hotfix: revendo parte01 todo css, deixando mais responsivo e proximo ao figma possivel

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-29 13:49:16 -03:00
parent cbf2a7d744
commit 3003b1e32b
11 changed files with 61 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
react/components/PlaceholderCep/styles.css
View File

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

@ -9,6 +9,7 @@
/* Grid breakpoints */
.stretchChildrenWidth {
width: 100% !important;
padding: 0;
}
@media (max-width: 1024px) {
.stretchChildrenWidth {
@ -32,6 +33,7 @@
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
gap: 32px;
padding-right: 40px !important;
}
@media (max-width: 1024px) {
@ -63,7 +65,7 @@
}
.flexCol--divImgDescription {
margin-right: 32px;
margin-right: 22px;
}
@media (max-width: 1024px) {
.flexCol--divImgDescription {

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

@ -11,7 +11,6 @@
background-color: #fff;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 105px;
}
.sliderTrackContainer--carousel .sliderTrack--carousel {
gap: 16px;
@ -33,6 +32,7 @@
height: 402.2px;
}
}
.paginationDotsContainer--carousel .paginationDot--carousel {
background-color: black;
}

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

@ -30,17 +30,17 @@
}
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-height: 100% !important;
max-width: 664px;
max-width: 100% !important;
margin-bottom: 16px;
}
@media (min-width: 2500px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 904px;
max-width: 100% !important;
}
}
@media (max-width: 1024px) {
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
max-width: 100%;
max-width: 100% !important;
}
}
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
@ -81,20 +81,20 @@
.productImageTag--imgDescription {
width: 100%;
max-height: 664px !important;
max-width: 664px;
max-height: 100% !important;
max-width: 100% !important;
}
@media (min-width: 2500px) {
.productImageTag--imgDescription {
max-width: 904px;
max-height: 904px !important;
max-width: 100% !important;
max-height: 100% !important;
}
}
@media (max-width: 1024px) {
.productImageTag--imgDescription {
max-width: 944px;
max-width: 100% !important;
margin-bottom: 16px;
max-height: 944px !important;
max-height: 100% !important;
}
}
@ -388,4 +388,14 @@
display: flex;
align-items: center;
color: #afafaf;
}
.inputGroup--newsletter :global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
}
.inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
background-color: black;
border: 0;
border-radius: 0;
}

19
styles/css/vtex.styleguide.css
View File

@ -1,19 +0,0 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
}
.noAppearance {
background-color: black;
border: 0;
border-radius: 0;
}

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

@ -47,6 +47,7 @@
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
border-bottom: 3px solid #000000;
background-color: white;
line-height: 0%;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {

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

@ -1,6 +1,7 @@
.stretchChildrenWidth{
width: 100% !important;
padding: 0 ;
@media (max-width: 1024px) {
padding-right: 0px
}
@ -21,6 +22,7 @@
padding: 0px;
padding-left: 40px !important;
margin-bottom: 16px;
gap: 32px;
padding-right: 40px !important;
@media (max-width:1024px) {
flex-direction: column;
@ -50,7 +52,7 @@
}
}
.flexCol--divImgDescription{
margin-right: 32px;
margin-right: 22px;
@media (max-width: 1024px) {
margin-right: 0px;
}

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

@ -1,8 +1,12 @@
// .sliderLayoutContainer--carousel{
// }
.sliderTrackContainer--carousel {
background-color: $color-white;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 105px;
// margin-bottom: 105px;
.sliderTrack--carousel {
gap: 16px;
}
@ -19,14 +23,14 @@
height: 402.2px;
}
}
.sliderArrows--carousel {
.caretIcon--carousel {
}
}
.sliderArrows--carousel {
.caretIcon--carousel {
}
}
// .sliderArrows--carousel {
// .caretIcon--carousel {
// }
// }
// .sliderArrows--carousel {
// .caretIcon--carousel {
// }
// }
}
.paginationDotsContainer--carousel {

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

@ -16,13 +16,13 @@
width: 100% !important;
.productImageTag {
max-height: 100% !important;
max-width: 664px;
max-width: 100% !important;
margin-bottom: 16px;
@media (min-width: 2500px) {
max-width: 904px;
max-width: 100% !important;
}
@media (max-width: 1024px) {
max-width: 100%;
max-width: 100% !important;
}
}
}
@ -67,16 +67,16 @@
.productImageTag--imgDescription {
width: 100%;
max-height: 664px !important;
max-width: 664px;
max-height: 100% !important;
max-width: 100% !important;
@media (min-width: 2500px) {
max-width: 904px;
max-height: 904px !important;
max-width: 100% !important;
max-height: 100% !important;
}
@media (max-width: 1024px) {
max-width: 944px;
max-width: 100% !important;
margin-bottom: 16px;
max-height: 944px !important;
max-height: 100% !important;
}
}
.productDescriptionContainer {
@ -373,3 +373,14 @@
}
}
}
.inputGroup--newsletter{
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
:global(.vtex-styleguide-9-x-input) {
background-color: black;
border: 0;
border-radius: 0;
}
}
}

9
styles/sass/pages/product/vtex.styleguide.scss
View File

@ -1,9 +0,0 @@
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid #929292;
}
.noAppearance {
background-color: black;
border: 0;
border-radius: 0;
}

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

@ -34,6 +34,7 @@
.listItemActive--renderGuia {
border-bottom: 3px solid #000000;
background-color: white;
line-height: 0%;
@media (max-width: 1024px) {
border-bottom: none;
}