ueberjames/challenge-vtex-io-ueber-james
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

estilização do mobile produtos indiponiveis

Browse Source
This commit is contained in:
Ueber James Santos 2023-02-09 01:00:25 -03:00
parent 02f056b3b7
commit 2a0a38c957
8 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/components/Html/styles.css
View File

@ -3,6 +3,13 @@
gap: 10px;
}
@media (max-width: 768px) {
[class*="html--quantity-button-buy"] {
flex-direction: column;
}
}

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

@ -33,6 +33,14 @@
margin: 0;
margin-left: 10px;
}
@media only screen and (max-width: 767px) {
.flexRow--size-buy-button {
margin: 0 0 16px 0;
}
.flexRow--size-buy-button .stretchChildrenWidth {
height: 74px;
}
}
.flexRow--size-buy-button .flexRowContent--size-buy-button {
height: 49px;
width: 100%;
@ -45,11 +53,6 @@
border-radius: 0;
width: 100%;
}
@media only screen and (max-width: 1024px) {
.flexRowContent--size-buy-button :global(.vtex-button) {
width: 780px;
}
}
@media only screen and (max-width: 1024px) {
.flexRowContent--description {

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

@ -20,6 +20,11 @@
width: 128px;
height: 49px;
}
@media only screen and (max-width: 767px) {
.quantitySelectorContainer {
margin-bottom: 0;
}
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
height: 49px;
}

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

@ -35,6 +35,7 @@
}
.container .carouselGaleryThumbs {
gap: 16px;
display: block !important;
}
.container .carouselGaleryThumbs .productImagesThumb {
max-width: 90px;
@ -50,11 +51,6 @@
justify-content: flex-start;
}
}
@media only screen and (max-width: 375px) {
.container .carouselGaleryThumbs {
display: block;
}
}
.skuSelectorContainer {
display: flex;
@ -192,6 +188,11 @@
margin-bottom: 16px;
}
}
@media only screen and (max-width: 767px) {
.shippingContainer {
padding-top: 16px;
}
}
.shippingTable {
border: none;

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

@ -25,6 +25,14 @@
// quantity
.flexRow--size-buy-button{
@include mq (sm, max) {
margin: 0 0 16px 0 ;
.stretchChildrenWidth{
height: 74px;
}
}
width: 100%;
height: 49px;
margin: 0;
@ -34,6 +42,8 @@ margin-left: 10px;
width: 100%;
margin: 0;
}
}
@ -42,9 +52,9 @@ margin-left: 10px;
border: none;
border-radius: 0;
width: 100%;
@include mq (md, max) {
width: 780px;
}
// @include mq (md, max) {
// width: 780px;
// }
}
.flexRowContent--description{

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

@ -9,7 +9,9 @@
.quantitySelectorContainer{
width: 128px;
height: 49px;
@include mq (sm, max) {
margin-bottom: 0;
}
:global(.vtex-numeric-stepper-container){
height: 49px;

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

@ -4,6 +4,7 @@
max-width: 100%;
padding-left: 40px;
padding-right: 40px;
@include mq (md, max) {
padding: 0;
}
@ -29,35 +30,35 @@
.carouselGaleryThumbs {
gap: 16px;
.productImagesThumb{
gap: 16px;
display: block !important;
.productImagesThumb {
max-width: 90px;
width: 100%;
margin-right: 16px;
}
.thumbImg {
border-radius: 9px;
height: 90px;
}
}
@include mq (md, max) {
.productNameContainer {
justify-content: flex-start;
}
}
@include mq (sm, max) {
.carouselGaleryThumbs{
display: block;
}
}
}
// sku-selector
@ -281,12 +282,11 @@ display: block;
margin-bottom: 16px;
}
}
@include mq (sm, max) {
padding-top: 16px;
}
}
.shippingTable {
@ -299,9 +299,9 @@ display: block;
font-weight: 400 !important;
text-transform: uppercase;
.shippingTableLabel{
.shippingTableLabel {
color: $color-gray9;
font-weight: 400 ;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
@ -311,7 +311,7 @@ display: block;
padding: 0;
display: flex;
color: $color-gray9;
font-weight: 400 ;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
@ -323,7 +323,7 @@ display: block;
.shippingTableHead {
display: flex;
padding-bottom: 15px;
padding-bottom: 15px;
.shippingTableRow {
position: relative;
@ -366,17 +366,17 @@ padding-bottom: 15px;
width: 100px;
}
.shippingTableCellDeliveryEstimate {
.shippingTableCellDeliveryEstimate {
display: flex;
order: 2;
margin-left: 66px;
}
.shippingTableCellDeliveryPrice{
.shippingTableCellDeliveryPrice {
margin-left: 58px;
}
}
}
}
}
@ -419,6 +419,7 @@ padding-bottom: 15px;
.inputName {
grid-area: nome;
@include mq (md, max) {
margin-bottom: 0;
}
@ -427,6 +428,7 @@ padding-bottom: 15px;
.inputEmail {
grid-area: email;
@include mq (md, max) {
margin-bottom: 0;
}
@ -469,6 +471,7 @@ padding-bottom: 15px;
line-height: 32px;
font-family: $font-open;
padding-left: 32px;
@include mq (md, max) {
padding-left: 0;
padding-top: 16px;
@ -487,9 +490,10 @@ padding-bottom: 15px;
color: $color-gray6;
padding-left: 32px;
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
@include mq (md, max) {
padding: 0px 21px 0px 0;
// border-bottom: 1px solid $color-gray7;
// border-bottom: 1px solid $color-gray7;
@ -502,5 +506,3 @@ padding-bottom: 15px;
}
// tab-descrição-fim

2
styles/sass/utils/_vars.scss
View File

@ -22,7 +22,7 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 376px,
sm: 768px,
md: 1025px,
lg: 1920px,
xl: 1921px