Gabriel_Ferraz_Nogueira/challenge-vtex-io-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adição css layout mobile até 280px

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-08 15:28:31 -03:00
parent 14f3177d73
commit 141f4ced54
5 changed files with 120 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
store/blocks/pdp/product.jsonc
View File

@ -6,8 +6,8 @@
"html#tab-layout#desc",
"flex-layout.row#specifications-title",
"list-context.product-list#demo1",
"product-questions-and-answers",
"newsletter"
"product-questions-and-answers"
// "newsletter"
]
},
"html#breadcrumb": {
@ -92,7 +92,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "1:1"
},
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false,

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

@ -9,7 +9,6 @@
/* Grid breakpoints */
.container {
padding-left: 40px;
display: flex;
align-items: center;
}
.container .homeLink .homeIcon {
@ -33,4 +32,7 @@
}
.container .arrow--1 .link:hover::before {
color: #0f3e99;
}
.container .term {
padding-right: 0;
}

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

@ -93,24 +93,36 @@
}
.carouselGaleryThumbs {
width: 47.67%;
display: flex !important;
margin-top: 16px;
}
@media (min-width: 1025px) {
.carouselGaleryThumbs {
width: 68.02%;
}
.carouselGaleryThumbs :first-child {
display: flex !important;
justify-content: flex-start;
margin: 0;
}
.carouselGaleryThumbs :first-child :first-child {
gap: 16px !important;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb {
height: fit-content !important;
max-height: 90px;
width: fit-content;
height: fit-content;
margin: 0;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure {
height: fit-content;
margin: 0;
padding: 0;
}
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg,
.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg--video {
border-radius: 8px;
min-height: 90px;
width: 100%;
min-width: 90px;
height: 100%;
max-height: 90px;
padding: 0;
margin: 0;
}
.productBrand {
@ -193,7 +205,7 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
gap: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
@ -254,10 +266,18 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 16px;
max-width: 280px;
width: 100%;
}
@media (max-width: 376px) {
@media (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
margin-bottom: 16px;
}
}
@media (max-width: 500px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
flex-direction: column;
padding-bottom: 24px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
@ -277,7 +297,7 @@
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 231px;
width: 100%;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
@ -302,17 +322,29 @@
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
}
@media (max-width: 376px) {
@media (min-width: 501px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: unset;
justify-content: right;
left: 361px;
top: 41.5px;
}
}
@media (max-width: 500px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
width: inherit;
height: fit-content;
bottom: 16px;
top: none;
left: none;
justify-content: end;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000;
text-decoration: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
display: none;
}
.shippingContainer :global(.vtex-button) {
display: flex;
@ -324,6 +356,17 @@
border-radius: 0;
cursor: pointer;
}
@media (max-width: 1024px) {
.shippingContainer :global(.vtex-button) {
margin-top: 0;
margin-bottom: 5px;
}
}
@media (max-width: 500px) {
.shippingContainer :global(.vtex-button) {
margin-bottom: 13px;
}
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
font-size: 0;

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

@ -1,8 +1,6 @@
.container {
padding-left: 40px;
display: flex;
align-items: center;
.homeLink {
.homeIcon {
display: none;
@ -29,4 +27,7 @@
color: #0f3e99;
}
}
.term {
padding-right: 0;
}
}

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

@ -87,23 +87,32 @@
}
.carouselGaleryThumbs {
width: 47.67%;
@media (min-width: 1025px) {
width: 68.02%;
}
display: flex !important;
margin-top: 16px;
:first-child {
display: flex !important;
justify-content: flex-start;
margin: 0;
:first-child {
gap: 16px !important;
.productImagesThumb {
height: fit-content !important;
max-height: 90px;
width: fit-content;
height: fit-content;
margin: 0;
.figure {
.thumbImg {
height: fit-content;
margin: 0;
padding: 0;
.thumbImg,
.thumbImg--video {
border-radius: 8px;
min-height: 90px;
width: 100%;
min-width: 90px;
height: 100%;
max-height: 90px;
padding: 0;
margin: 0;
}
}
}
@ -114,15 +123,12 @@
.productBrand {
display: flex;
justify-content: flex-start;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
@media (min-width: 1025px) {
justify-content: flex-end;
}
@ -132,7 +138,6 @@
display: flex;
flex-direction: column-reverse;
margin: 16px 0;
.frameAround {
width: 43px;
height: 43px;
@ -143,11 +148,9 @@
top: -3%;
left: -1px;
}
.skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorNameContainer {
@ -178,10 +181,8 @@
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
margin: 0;
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
@ -199,13 +200,12 @@
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
column-gap: 16px;
gap: 16px;
.skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
.frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
@ -264,26 +264,26 @@
margin: 0;
align-items: center;
position: relative;
:global(.vtex-address-form__postalCode) {
display: flex;
padding-bottom: 16px;
@media (max-width: 376px) {
flex-direction: column;
max-width: 280px;
width: 100%;
@media (max-width: 1024px) {
margin-bottom: 16px;
}
@media (max-width: 500px) {
flex-direction: column;
padding-bottom: 24px;
}
:global(.vtex-input) {
display: flex;
flex-direction: column;
:global(.vtex-input__label) {
font-size: 0;
}
:global(.vtex-input__label)::before {
content: 'CALCULAR FRETE:';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
@ -291,16 +291,13 @@
line-height: 19px;
color: #929292;
}
:global(.vtex-input-prefix__group) {
width: 231px;
width: 100%;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
:global(.vtex-address-form-4-x-input) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
@ -322,36 +319,47 @@
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
@media (max-width: 376px) {
position: unset;
justify-content: right;
@media (min-width: 501px) {
left: 361px;
top: 41.5px;
}
@media (max-width: 500px) {
width: inherit;
height: fit-content;
bottom: 16px;
top: none;
left: none;
justify-content: end;
}
:last-child {
color: #000;
text-decoration: underline;
:last-child {
display: none;
}
}
}
}
:global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
margin-top: 11px;
@media (max-width: 1024px) {
margin-top: 0;
margin-bottom: 5px;
}
@media (max-width: 500px) {
margin-bottom: 13px;
}
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
:global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
:global(.vtex-button__label)::before {
content: 'OK';
font-family: 'Open Sans', sans-serif;
@ -359,36 +367,30 @@
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
}
}
.shippingTable {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
border: none;
.shippingTableHead {
display: flex;
.shippingTableRow {
display: flex;
gap: 62px;
margin-bottom: 15px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
.shippingTableHeadDeliveryEstimate {
order: 2;
font-weight: 400 !important;
@ -405,15 +407,12 @@
}
}
}
.shippingTableBody {
display: flex;
flex-direction: column;
gap: 15px;
.shippingTableRow {
display: flex;
.shippingTableCell {
font-family: 'Open Sans', sans-serif;
font-style: normal;
@ -423,7 +422,6 @@
align-items: center;
color: #afafaf;
}
.shippingTableCellDeliveryEstimate {
order: 2;
}
@ -434,7 +432,6 @@
width: 95px;
margin-right: 32px;
padding: 0;
.shippingTableLabel {
.shippingTableRadioBtn {
display: none;