From f29c897da71029fcd74173da99d71f66c0a828f3 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 21 Jan 2023 17:47:29 -0300 Subject: [PATCH 1/3] feat(breadcrumb): created initial styles --- store/blocks/pdp/product.jsonc | 9 ++++- styles/css/agenciamagma.store-theme.css | 7 ++-- styles/css/vtex.breadcrumb.css | 33 +++++++++++++++++++ .../product/agenciamagma.store-theme.scss | 8 ++--- .../sass/pages/product/vtex.breadcrumb.scss | 30 +++++++++++++++++ 5 files changed, 76 insertions(+), 11 deletions(-) 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..ebb3d11 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -16,7 +16,7 @@ "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": ["breadcrumb#pdp-breadcrumb"] }, "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] @@ -181,5 +181,12 @@ "Pinterest": true } } + }, + + "breadcrumb#pdp-breadcrumb": { + "props": { + "homeIconSize": 0, + "showOnMobile": true + } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..6c3aa81 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - .html--pdp-breadcrumb { - background-color: green; + width: 271.25px; + padding: 0 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..587d8dc --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,33 @@ +/* +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 { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +.homeLink::before { + content: "Home"; +} + +.arrow { + display: block; +} + +.termArrow { + padding: 0; +} +.termArrow .caretIcon { + display: none; +} + +.term { + font-size: 0; +} \ 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..5c11d40 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,6 @@ -.html { - background-color: red; -} +$containers: (); .html--pdp-breadcrumb { - background-color: green; + width: 271.25px; + padding: 0 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..30760ad --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,30 @@ +.container { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +.homeLink { + &::before { + content: "Home"; + } +} + +.arrow-1 { +} + +.arrow { + display: block; +} + +.termArrow { + padding: 0; + + .caretIcon { + display: none; + } +} + +.term { + font-size: 0; +} From 5d4f3b6cb0b1b5163fb92181ec342d7f99e897ca Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 21 Jan 2023 19:09:43 -0300 Subject: [PATCH 2/3] feat(pdp/breadcrumb): finished styles in fonts --- styles/css/agenciamagma.store-theme.css | 2 +- styles/css/vtex.breadcrumb.css | 32 +++++++++---- .../product/agenciamagma.store-theme.scss | 4 +- .../sass/pages/product/vtex.breadcrumb.scss | 45 +++++++++++++------ 4 files changed, 56 insertions(+), 27 deletions(-) diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 6c3aa81..9965a16 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,6 +8,6 @@ /* Media Query M3 */ /* Grid breakpoints */ .html--pdp-breadcrumb { - width: 271.25px; + width: 100%; padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 587d8dc..39c43f9 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,16 +9,10 @@ /* Grid breakpoints */ .container { width: 100%; - display: flex; + display: inline-flex; flex-wrap: wrap; -} - -.homeLink::before { - content: "Home"; -} - -.arrow { - display: block; + flex-basis: 100%; + align-items: baseline; } .termArrow { @@ -30,4 +24,24 @@ .term { font-size: 0; +} + +.homeLink::before { + content: "Home"; + font-size: 14px; + line-height: 20.12px; +} + +.arrow--1 .link { + font-size: 0; +} +.arrow--1 .link::before { + content: "Sapatos"; + font-size: 14px; + line-height: 20.12px; +} + +.arrow--2 .link { + font-size: 14px; + line-height: 20.12px; } \ 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 5c11d40..b103300 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,6 +1,4 @@ -$containers: (); - .html--pdp-breadcrumb { - width: 271.25px; + width: 100%; padding: 0 40px; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 30760ad..948bc25 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,20 +1,9 @@ .container { width: 100%; - display: flex; + display: inline-flex; flex-wrap: wrap; -} - -.homeLink { - &::before { - content: "Home"; - } -} - -.arrow-1 { -} - -.arrow { - display: block; + flex-basis: 100%; + align-items: baseline; } .termArrow { @@ -28,3 +17,31 @@ .term { font-size: 0; } + +// manipulation fonts with before +.homeLink { + &::before { + content: "Home"; + font-size: 14px; + line-height: 20.12px; + } +} + +.arrow--1 { + .link { + font-size: 0; + + &::before { + content: "Sapatos"; + font-size: 14px; + line-height: 20.12px; + } + } +} + +.arrow--2 { + .link { + font-size: 14px; + line-height: 20.12px; + } +} From 4f4b7cae15790c32af70f480573a08d2ca3e2dab Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 21 Jan 2023 19:19:58 -0300 Subject: [PATCH 3/3] feat(pdp/breadcrumb): finished margin spaces in large, medium, small devices --- styles/css/agenciamagma.store-theme.css | 12 ++++++++++++ .../sass/pages/product/agenciamagma.store-theme.scss | 10 ++++++++++ 2 files changed, 22 insertions(+) diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 9965a16..7dfa27b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -10,4 +10,16 @@ .html--pdp-breadcrumb { width: 100%; padding: 0 40px; +} +@media screen and (min-width: 1025px) { + .html--pdp-breadcrumb { + width: 94.4444444444%; + padding: 0; + margin: 0 auto; + } +} +@media screen and (min-width: 1921px) { + .html--pdp-breadcrumb { + width: 68.75%; + } } \ 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 b103300..2c3b088 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,4 +1,14 @@ .html--pdp-breadcrumb { width: 100%; padding: 0 40px; + + @media screen and (min-width: 1025px) { + width: 94.44444444444444%; + padding: 0; + margin: 0 auto; + } + + @media screen and (min-width: 1921px) { + width: 68.75%; + } }