From d88ca7f69aa0eff34aef5f6f320fd1a292f5e55e Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Sat, 21 Jan 2023 13:01:27 -0300 Subject: [PATCH] feat: Breadcrumb finalizado --- store/blocks/pdp/product.jsonc | 12 ++++-- styles/configs/font-face.css | 5 +++ styles/configs/style.json | 24 +++++------ styles/css/agenciamagma.store-theme.css | 6 +-- styles/css/vtex.breadcrumb.css | 41 +++++++++++++++++++ .../product/agenciamagma.store-theme.scss | 6 ++- .../sass/pages/product/vtex.breadcrumb.scss | 38 +++++++++++++++++ 7 files changed, 110 insertions(+), 22 deletions(-) create mode 100644 styles/configs/font-face.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..c192455 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -78,8 +78,9 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "width": "46.18%", + "rowGap": 7, + "colGap": 7 } }, "flex-layout.row#product-image": { @@ -91,7 +92,12 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "colGap": 7, + "defaultSize": 665, + "maxHeight": 665 } }, "flex-layout.col#right-col": { diff --git a/styles/configs/font-face.css b/styles/configs/font-face.css new file mode 100644 index 0000000..9a1582b --- /dev/null +++ b/styles/configs/font-face.css @@ -0,0 +1,5 @@ +@font-face { + @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); + font-family: 'Open Sans', sans-serif; + src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap') format("opentype"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..ee3264d 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -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", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..51d2038 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - .html--pdp-breadcrumb { - background-color: green; + padding-left: 40px; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..529d592 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,41 @@ +/* +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 */ +.homeIcon, .caretIcon { + display: none; +} + +.termArrow::before, .arrow::before { + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link, .term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link { + padding-left: 8px; +} +.link:first-child { + padding-left: 0; +} + +.homeLink::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..61ddc3b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,10 @@ .html { - background-color: red; + // background-color: red; } .html--pdp-breadcrumb { - background-color: green; + padding-left: 40px; } + + diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..cd5d14f --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,38 @@ +.homeIcon, .caretIcon{ + display: none; +} + +.termArrow, .arrow{ + + &::before{ + content: ">"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +.link, .term{ + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link{ + padding-left: 8px; + + &:first-child{ + padding-left: 0; + } +} + +.homeLink { + &::after{ + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } +}