Vitor_soares/challenge-vtex-io-vitor-soares
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona estilização das imagens do produto

Browse Source
This commit is contained in:
Vitor Soares 2023-01-27 11:05:43 -03:00
parent 08819e3af8
commit 57ae2ef075
17 changed files with 270 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/components/Html/index.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import './styles.css';
import "./styles.css";
const CSS_HANDLES = ["html"] as const;

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

@ -1,3 +1,12 @@
[class*=".html--breadcrumb"] {
background: red;
[class*="html--buy-button"] {
display: flex;
gap: 10px;
margin-bottom: 5px;
}
[class*="html--buy-button"] :global(.vtex-button) {
height: 49px;
background: black;
border: none;
border-radius: 0;
}

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

@ -67,6 +67,7 @@
]
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
@ -111,13 +112,21 @@
"product-installments",
"product-separator",
"sku-selector",
"flex-layout.row#buy-button",
"html#buy-button",
// "flex-layout.row#buy-button",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
]
},
"html#buy-button": {
"props": {
"blockClass": "buy-button"
},
"children": ["product-quantity", "add-to-cart-button"]
},
"html#product-name": {
"props": {
"blockClass": "product-name"
@ -211,5 +220,12 @@
"width": "28%",
"showLabel": false
}
},
"product-installments": {
"props": {
"installmentsCriteria": "max-quality-without-interest",
"blockClass": "fees"
}
}
}

24
styles/configs/style.json
View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

1
styles/css/agenciamagma.store-theme.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Cores */
/* Grid breakpoints */
.html {
background-color: none;

9
styles/css/global.css Normal file
View File

@ -0,0 +1,9 @@
/*
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 */

3
styles/css/vtex.add-to-cart-button.css
View File

@ -7,6 +7,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Fontes */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */
.buttonText {
font-size: 0;

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

@ -6,17 +6,28 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Cores */
/* Grid breakpoints */
.homeIcon {
.container {
padding-right: 40px;
padding-left: 40px;
}
.homeIcon,
.homeLink {
display: none;
}
.arrow--1 {
padding-left: 0;
}
.arrow--1 .caretIcon {
display: none;
}
.link--1 {
font-size: 0px;
padding-left: 0;
}
.link--1::after {
content: "Home";

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

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Cores */
/* Grid breakpoints */
.flexRowContent--buy-button-row :global(.vtex-button) {
background: #000000;

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

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Cores */
/* Grid breakpoints */
.product-identifier__label {
display: none;

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

@ -6,6 +6,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Fontes */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */
.sellingPriceValue {
font-weight: 700;
@ -15,7 +18,7 @@
}
.installments {
font-size: 0;
font-size: 0px;
}
.installments .installmentsNumber--36 {
font-weight: 700;

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

@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Cores */
/* Grid breakpoints */

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

@ -6,6 +6,9 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Fontes */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */
.newsletter {
background: #000000;
@ -15,10 +18,12 @@
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
border-color: #cccccc;
}
:global(.vtex-numeric-stepper__minus-button) {
background: #fff;
border-color: #cccccc;
}
:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) {
font-size: 16px;
@ -28,6 +33,7 @@
:global(.vtex-numeric-stepper__plus-button) {
background: #fff;
border-color: #cccccc;
}
:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
@ -35,6 +41,10 @@
color: #000000;
}
.container {
padding: 0 40px;
}
.productNameContainer {
font-weight: 300;
font-size: 20px;
@ -43,6 +53,25 @@
color: #575757;
}
.productImage .productImageTag {
max-height: unset !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
}
.productImagesThumb {
width: unset !important;
margin-bottom: 0 !important;
margin-right: 16px;
}
.productImagesThumb .thumbImg {
max-width: 90px;
width: 100%;
height: 90px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
@ -105,12 +134,45 @@
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
left: 3px;
top: 2px;
left: 8px;
top: 5px;
right: 5px;
bottom: 3px;
transform: rotateY(180deg);
}
.skuSelectorContainer .skuSelectorItem--selected .skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #000000;
}
.skuSelectorContainer .skuSelectorItem--selected .diagonalCross {
color: #000000;
}
.skuSelectorContainer .skuSelectorItemImage--sku-size .diagonalCross {
left: 4px;
top: 5px;
right: 3px;
bottom: 3px;
transform: rotateY(180deg);
}
.subscriberContainer {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.submit :global(.vtex-button) {
background: #000000;
height: 40px;
margin-top: -1px;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #fff;
}
.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size {
color: #000000;
@ -197,6 +259,8 @@
.shippingTable {
display: flex;
flex-direction: column;
border: none;
margin-top: 0;
}
.shippingTable .shippingTableHead {
display: block;
@ -233,10 +297,26 @@
line-height: 19px;
color: #202020;
}
.shippingTable .shippingTableHeadDeliveryName,
.shippingTable .shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
}
.shippingTable .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
}
.shippingTable .shippingTableCellDeliveryPrice,
.shippingTable .shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
}
.shippingTableBody .shippingtableRow {
display: flex;
flex-direction: row;
text-align: left;
}
.shippingTableBody .shippingTableCellDeliveryEstimate {
display: flex;

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

@ -1,8 +1,15 @@
.homeIcon {
.container {
padding-right: 40px;
padding-left: 40px;
}
.homeIcon,
.homeLink {
display: none;
}
.arrow--1 {
padding-left: 0;
.caretIcon {
display: none;
}
@ -10,6 +17,7 @@
.link--1 {
font-size: 0px;
padding-left: 0;
&::after {
content: "Home";

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

@ -7,7 +7,7 @@
}
.installments {
font-size: 0;
font-size: 0px;
.installmentsNumber--36 {
font-weight: 700;

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

@ -6,10 +6,12 @@
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
border-color: $gray-200;
}
:global(.vtex-numeric-stepper__minus-button) {
background: $white;
border-color: $gray-200;
:global(.vtex-numeric-stepper__minus-button__text) {
font-size: 16px;
@ -21,6 +23,7 @@
:global(.vtex-numeric-stepper__plus-button) {
background: $white;
border-color: $gray-200;
:global(.vtex-numeric-stepper__plus-button__text) {
font-size: 16px;
@ -30,14 +33,43 @@
}
}
// TITULO E IMAGENS
.container {
padding: 0 40px;
}
.productNameContainer {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: $gray-100;
}
.productImage {
.productImageTag {
max-height: unset !important;
}
}
.carouselGaleryThumbs {
margin-top: 16px;
}
.productImagesThumb {
width: unset !important;
margin-bottom: 0 !important;
margin-right: 16px;
.thumbImg {
max-width: 90px;
width: 100%;
height: 90px;
}
}
// sku Tamanho e Cor
.skuSelectorContainer {
display: flex;
flex-direction: column;
@ -120,13 +152,58 @@
}
.diagonalCross {
left: 3px;
top: 2px;
left: 8px;
top: 5px;
right: 5px;
bottom: 3px;
transform: rotateY(180deg);
}
}
.skuSelectorItem--selected {
.skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $black;
}
.diagonalCross {
color: $black;
}
}
.skuSelectorItemImage--sku-size {
.diagonalCross {
left: 4px;
top: 5px;
right: 3px;
bottom: 3px;
transform: rotateY(180deg);
}
}
}
.subscriberContainer {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray;
}
.submit {
:global(.vtex-button) {
background: $black;
height: 40px;
margin-top: -1px;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: $white;
}
}
.skuSelectorItem--sku-size-selected {
@ -237,6 +314,8 @@
.shippingTable {
display: flex;
flex-direction: column;
border: none;
margin-top: 0;
.shippingTableHead {
display: block;
@ -284,12 +363,31 @@
}
}
}
.shippingTableHeadDeliveryName,
.shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
}
.shippingTableCellDeliveryPrice,
.shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
}
}
.shippingTableBody {
.shippingtableRow {
display: flex;
flex-direction: row;
text-align: left;
}
.shippingTableCellDeliveryEstimate {

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

@ -1,3 +1,7 @@
/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
/* Cores */
$color-black: #292929;
$black-100: #202020;
$black: #000000;
@ -6,6 +10,7 @@ $white: #fff;
$gray: #929292;
$gray-100: #575757;
$gray-200: #cccccc;
$color-gray: #6c6c6c;