Rhayllon_Daudt/challenge-vtex-io-Rhayllon-Daudt
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat(Pdp): Adiciona fonte, cria descrição do produto e cria a base da prateleira de produtos

Browse Source
This commit is contained in:
Rhayllon Daudt 2023-02-09 08:14:34 -03:00
parent 7ab2ffd812
commit 2877374d0e
17 changed files with 372 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/OpenSans-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Light.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-SemiBold.ttf Normal file
View File

Binary file not shown.

3
store/blocks/minicart.jsonc
View File

@ -9,7 +9,8 @@
"props": { "props": {
"addToCartFeedback": "customEvent", "addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button", "customPixelEventId": "add-to-cart-button",
"text": "Adicionar à sacola" "text": "Adicionar à sacola",
"blockClass": "addSacola"
} }
}, },

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

@ -3,14 +3,15 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
// "flex-layout.row#description", "tab-layout#descriptionLayout",
"tab-layout#AA323",
// "flex-layout.row#specifications-title", // "flex-layout.row#specifications-title",
// "product-specification-group#table", // "product-specification-group#table",
"shelf.relatedProducts", // "shelf.relatedProducts",
"list-context.product-list#demo1",
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
"html#breadcrumb": { "html#breadcrumb": {
"props": { "props": {
"tag": "section", "tag": "section",
@ -27,12 +28,72 @@
"text": "##### Product Specifications" "text": "##### Product Specifications"
} }
}, },
"flex-layout.row#description": {
"props": { "product-summary.shelf#demo1": {
"marginBottom": 7 "children": [
}, "product-summary-name",
"children": ["product-description"] "product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
}, },
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
"desktop": 3,
"tablet": 1,
"phone": 1
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
// "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"]
},
// "rich-text#1AA": {
// "props": {
// "text": "ADADADAD"
// }
// },
// "rich-text#2AA": {
// "props": {
// "text": "FGFGFGFG"
// }
// },
// "rich-text#3AA": {
// "props": {
// "text": "GHGHGHGHHGH"
// }
// },
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
},
"flex-layout.col#description": {
"props": {
"preventVerticalStretch": true
},
"children": ["product-description#1", "product-description#2"]
},
"product-description#1": {
"props": {
"blockClass": "descriptioncontent1"
}
},
"product-description#2": {
"props": {
"blockClass": "descriptioncontent2",
"showTitle": false
}
},
"condition-layout.product#availability": { "condition-layout.product#availability": {
"props": { "props": {
"conditions": [ "conditions": [
@ -58,22 +119,10 @@
}, },
"flex-layout.row#descriptionRow": { "flex-layout.row#descriptionRow": {
"props": { "props": {
// "colGap": 7, "blockClass": "descriptionRow",
// "rowGap": 7, "colGap": 7
// "marginTop": 4,
// "marginBottom": 7,
// "paddingTop": 7,
// "paddingBottom": 7,
"blockClass": "descriptionRow"
}, },
"children": ["image#example111", "flex-layout.row#description"] "children": ["product-images#descriptionImg", "flex-layout.col#description"]
},
"image#example111": {
"props": {
"src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
"maxHeight": 100
}
}, },
"stack-layout": { "stack-layout": {
@ -102,47 +151,86 @@
} }
}, },
"tab-layout#AA323": { "tab-layout#descriptionLayout": {
"props": {
"blockClass": "descriptionLayout"
},
"children": [ "children": [
"tab-list#AA555", "tab-list#descriptionButtonWrapper",
"tab-content#AA555" "tab-content#descriptionContentWrapper"
] ]
}, },
"tab-list#AA555": { "tab-list#descriptionButtonWrapper": {
"props": {
"blockClass": "descriptionButtonWrapper"
},
"children": [ "children": [
"tab-list.item#1", "tab-list.item#1",
"tab-list.item#2" "tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
] ]
}, },
"tab-content#AA555": { "tab-content#descriptionContentWrapper": {
"props": {
"blockClass": "descriptionContentWrapper"
},
"children": [ "children": [
"tab-content.item#1", "tab-content.item#1",
"tab-content.item#2" "tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
] ]
}, },
"tab-list.item#1": { "tab-list.item#1": {
"props": { "props": {
"tabId": "majorAppliances", "tabId": "description1",
"label": "Major Appliances", "label": "Descrição",
"blockClass": "descriptionButton",
"defaultActiveTab": true "defaultActiveTab": true
} }
}, },
"tab-list.item#2": { "tab-list.item#2": {
"props": { "props": {
"tabId": "electronics", "tabId": "description2",
"label": "Electronics" "blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description3",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description4",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description5",
"blockClass": "descriptionButton",
"label": "Descrição"
} }
}, },
"tab-content.item#1": { "tab-content.item#1": {
"children": [ "children": [
"rich-text#1" "flex-layout.row#descriptionRow"
], ],
"props": { "props": {
"tabId": "majorAppliances" "tabId": "description1",
"blockClass": "descriptionContent"
} }
}, },
"tab-content.item#2": { "tab-content.item#2": {
@ -150,22 +238,43 @@
"flex-layout.row#descriptionRow" "flex-layout.row#descriptionRow"
], ],
"props": { "props": {
"tabId": "electronics" "tabId": "description2",
"blockClass": "descriptionContent"
} }
}, },
"tab-content.item#3": {
"rich-text#1": { "children": [
"flex-layout.row#descriptionRow"
],
"props": { "props": {
"text": "Texto para Major Appliances", "tabId": "description3",
"textPosition": "CENTER", "blockClass": "descriptionContent"
"font": "t-heading-3"
} }
}, },
"rich-text#2": { "tab-content.item#4": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": { "props": {
"text": "Texto para Electronics", "tabId": "description4",
"textPosition": "CENTER", "blockClass": "descriptionContent"
"font": "t-heading-3" }
},
"tab-content.item#5": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description5",
"blockClass": "descriptionContent"
}
},
"product-images#descriptionImg": {
"props": {
"displayMode": "first-image",
"maxHeight": 632,
"blockClass": "descriptionImg",
"width": "49%"
} }
}, },
@ -186,9 +295,9 @@
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"children": ["product-images"] "children": ["product-images#imgsMain"]
}, },
"product-images": { "product-images#imgsMain": {
"props": { "props": {
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "auto",
@ -198,6 +307,7 @@
"showPaginationDots": false, "showPaginationDots": false,
"thumbnailsOrientation": "horizontal", "thumbnailsOrientation": "horizontal",
"thumbnailMaxHeight": 90, "thumbnailMaxHeight": 90,
"blockClass": "ImgsMain",
"maxHeight": 664 "maxHeight": 664
} }
}, },

31
styles/configs/font-faces.css Normal file
View File

@ -0,0 +1,31 @@
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-SemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-ExtraBold.ttf);
font-weight: 800;
}

24
styles/configs/style.json
View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20], "measure": [30, 34, 20],
"styles": { "styles": {
"heading-1": { "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", "fontWeight": "700",
"fontSize": "3rem", "fontSize": "3rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-2": { "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", "fontWeight": "700",
"fontSize": "2.25rem", "fontSize": "2.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-3": { "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", "fontWeight": "700",
"fontSize": "1.75rem", "fontSize": "1.75rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-4": { "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", "fontWeight": "normal",
"fontSize": "1.5rem", "fontSize": "1.5rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-5": { "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", "fontWeight": "normal",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"heading-6": { "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", "fontWeight": "normal",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"body": { "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", "fontWeight": "normal",
"fontSize": "1rem", "fontSize": "1rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"small": { "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", "fontWeight": "normal",
"fontSize": "0.875rem", "fontSize": "0.875rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"mini": { "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", "fontWeight": "normal",
"fontSize": "0.75rem", "fontSize": "0.75rem",
"textTransform": "initial", "textTransform": "initial",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action": { "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", "fontWeight": "500",
"fontSize": "1rem", "fontSize": "1rem",
"textTransform": "uppercase", "textTransform": "uppercase",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action--small": { "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", "fontWeight": "500",
"fontSize": "0.875rem", "fontSize": "0.875rem",
"textTransform": "uppercase", "textTransform": "uppercase",
"letterSpacing": "0" "letterSpacing": "0"
}, },
"action--large": { "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", "fontWeight": "500",
"fontSize": "1.25rem", "fontSize": "1.25rem",
"textTransform": "uppercase", "textTransform": "uppercase",

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

@ -21,3 +21,14 @@
margin: 0; margin: 0;
height: 49px; height: 49px;
} }
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: #292929;
color: #fff;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}

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

@ -11,7 +11,7 @@
background: red; background: red;
} }
.productImageTag--main { .productImageTag--ImgsMain--main {
object-fit: unset !important; object-fit: unset !important;
} }
@ -53,6 +53,7 @@
left: 150px; left: 150px;
align-items: center; align-items: center;
padding-top: 16.1px; padding-top: 16.1px;
text-decoration: underline;
} }
.shippingContainer :global(.vtex__icon-external-link) { .shippingContainer :global(.vtex__icon-external-link) {
display: none; display: none;
@ -64,7 +65,7 @@
position: relative; position: relative;
right: 129px; right: 129px;
margin-top: 24px; margin-top: 24px;
background-color: black; background-color: #292929;
font-size: 0; font-size: 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
@ -74,5 +75,25 @@
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: white; color: #fff;
}
.productDescriptionContainer--descriptioncontent1 {
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
} }

51
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,51 @@
/*
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 */
.container--descriptionLayout {
margin: 0 40px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
padding: 0 64px;
margin-bottom: 32px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
margin: 0;
padding: 0;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) {
color: #bfbfbf;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
margin-top: 2px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
background-color: #fff;
color: #292929;
border: 0;
border-bottom: 2px solid #292929;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}

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

@ -10,6 +10,18 @@
.flexRowContent--buyButton{ .flexRowContent--buyButton{
margin: 0; margin: 0;
height: 49px; height: 49px;
:global(.vtex-button){
background-color: $color-black;
color: $color-white;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}
} }
} }

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

@ -2,7 +2,7 @@
background: red; background: red;
} }
.productImageTag--main{ .productImageTag--ImgsMain--main{
object-fit: unset !important; object-fit: unset !important;
} }
@ -35,7 +35,7 @@
} }
:global(.vtex-input-prefix__group){ :global(.vtex-input-prefix__group){
height: 49px; height: 49px;
border: 1px solid #CCCCCC; border: 1px solid $color-gray7;
border-radius: 0; border-radius: 0;
} }
:global(.vtex-address-form__postalCode-forgottenURL){ :global(.vtex-address-form__postalCode-forgottenURL){
@ -44,6 +44,7 @@
left: 150px; left: 150px;
align-items: center; align-items: center;
padding-top: 16.1px; padding-top: 16.1px;
text-decoration: underline;
} }
:global(.vtex__icon-external-link){ :global(.vtex__icon-external-link){
@ -57,7 +58,7 @@
position: relative; position: relative;
right: 129px; right: 129px;
margin-top: 24px; margin-top: 24px;
background-color: black; background-color: $color-black;
font-size: 0; font-size: 0;
border: none; border: none;
border-radius: 0; border-radius: 0;
@ -67,7 +68,26 @@
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: white; color: $color-white;
} }
} }
} }
.productDescriptionContainer--descriptioncontent1{
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1{
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

44
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,44 @@
.container--descriptionLayout{
margin: 0 40px;
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
border-bottom: 1px solid $color-gray6;
padding: 0 64px;
margin-bottom: 32px;
.listItem--descriptionButton{
margin: 0;
padding: 0;
:global(.vtex-button){
color: $color-gray8;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
}
}
.listItemActive--descriptionButton{
margin-top: 2px;
:global(.vtex-button){
background-color: $color-white;
color: $color-black;
border: 0;
border-bottom: 2px solid $color-black;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
}
}
}
}

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

@ -7,6 +7,9 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #c4c4c4; $color-gray4: #c4c4c4;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #B9B9B9;
$color-gray7: #CCCCCC;
$color-gray8: #bfbfbf;
$color-blue: #4267b2; $color-blue: #4267b2;