From 8eeeb58c7c68254d9567bc68262feee2a3167ac9 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Fri, 7 Feb 2025 16:36:19 +0000 Subject: [PATCH 1/4] feat: refactor accordion to details and summary --- css/components/accordion.css | 61 +++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/css/components/accordion.css b/css/components/accordion.css index 4ccfa498..6453898b 100644 --- a/css/components/accordion.css +++ b/css/components/accordion.css @@ -4,30 +4,63 @@ */ /* Default */ -.accordion-pane__title button { - display: inline-flex; - align-items: center; - justify-content: space-between; + +.accordion-pane summary { + padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); + cursor: pointer; + color: var(--button-text-color); + border: var(--border); + border-color: var(--button-border-color); + border-radius: var(--button-border-radius); + background-color: var(--button-bg-color); + font-family: var(--button-font-family); + font-size: var(--font-size-medium); + margin-block-end: var(--vertical-rhythm-spacing); } -.accordion-pane__title button:hover, -.accordion-pane__title button:focus { - text-decoration: none; +.accordion-pane summary:hover, .accordion-pane summary:focus { + background-color: var(--button-bg-color-hover); +} +.accordion-pane summary:hover, .accordion-pane summary:focus, +.accordion-pane summary:hover .accordion-pane__heading, .accordion-pane summary:focus .accordion-pane__heading { + color: var(--button-text-color-hover); } -.accordion-icon { - display: block; +.accordion-pane details > summary { + list-style: none; + display: flex; + justify-content: space-between; } -span.accordion-icon::after { - display: block; - font-size: 150%; +.accordion-pane summary::-webkit-details-marker { + display: none } -.accordion-pane__title button[aria-expanded="false"] > .accordion-icon::after { +.accordion-pane summary::after { content: var(--accordion-icon-closed); + font-size: 150%; + line-height: 1.2rem; } -.accordion-pane__title button[aria-expanded="true"] > .accordion-icon::after { +.accordion-pane details[open] summary:after { content: var(--accordion-icon-opened); } + +.accordion-pane__heading { + color: var(--button-text-color); + font-family: var(--button-font-family); + font-size: var(--font-size-medium); + font-weight: normal; +} + +.accordion-pane__title h2, +.accordion-pane__title h3, +.accordion-pane__title h4, +.accordion-pane__title h5, +.accordion-pane__title h6 { + display: inline; + margin-block-end: 0; + font-variant: normal; + line-height: normal; + font-size: var(--font-size-h3); +} \ No newline at end of file From 4a5d2c924b9ca0710028df7b00d311f331fd1163 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Fri, 7 Feb 2025 19:33:28 +0000 Subject: [PATCH 2/4] feat: refactor accordion to details and summary --- css/components/accordion.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/css/components/accordion.css b/css/components/accordion.css index 6453898b..9648145c 100644 --- a/css/components/accordion.css +++ b/css/components/accordion.css @@ -18,22 +18,25 @@ margin-block-end: var(--vertical-rhythm-spacing); } -.accordion-pane summary:hover, .accordion-pane summary:focus { +.accordion-pane summary:hover, +.accordion-pane summary:focus { background-color: var(--button-bg-color-hover); } -.accordion-pane summary:hover, .accordion-pane summary:focus, -.accordion-pane summary:hover .accordion-pane__heading, .accordion-pane summary:focus .accordion-pane__heading { +.accordion-pane summary:hover, +.accordion-pane summary:focus, +.accordion-pane summary:hover .accordion-pane__heading, +.accordion-pane summary:focus .accordion-pane__heading { color: var(--button-text-color-hover); } .accordion-pane details > summary { - list-style: none; display: flex; + list-style: none; justify-content: space-between; } .accordion-pane summary::-webkit-details-marker { - display: none + display: none; } .accordion-pane summary::after { @@ -63,4 +66,4 @@ font-variant: normal; line-height: normal; font-size: var(--font-size-h3); -} \ No newline at end of file +} From 10e1ca93177f54079e01b36b62fbb507c72f81a6 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Fri, 7 Feb 2025 19:43:06 +0000 Subject: [PATCH 3/4] feat: refactor accordion to details and summary --- css/components/accordion.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/components/accordion.css b/css/components/accordion.css index 9648145c..41e41286 100644 --- a/css/components/accordion.css +++ b/css/components/accordion.css @@ -45,7 +45,7 @@ line-height: 1.2rem; } -.accordion-pane details[open] summary:after { +.accordion-pane details[open] summary::after { content: var(--accordion-icon-opened); } @@ -64,6 +64,6 @@ display: inline; margin-block-end: 0; font-variant: normal; - line-height: normal; font-size: var(--font-size-h3); + line-height: normal; } From 5e75aaf3102c8ed608d04ffd506a5ca6b22aa2f8 Mon Sep 17 00:00:00 2001 From: Lee Mills Date: Fri, 7 Feb 2025 19:59:52 +0000 Subject: [PATCH 4/4] feat: refactor accordion to details and summary --- css/components/accordion.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css/components/accordion.css b/css/components/accordion.css index 41e41286..90723109 100644 --- a/css/components/accordion.css +++ b/css/components/accordion.css @@ -6,6 +6,7 @@ /* Default */ .accordion-pane summary { + margin-block-end: var(--vertical-rhythm-spacing); padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal); cursor: pointer; color: var(--button-text-color); @@ -15,14 +16,13 @@ background-color: var(--button-bg-color); font-family: var(--button-font-family); font-size: var(--font-size-medium); - margin-block-end: var(--vertical-rhythm-spacing); } .accordion-pane summary:hover, .accordion-pane summary:focus { background-color: var(--button-bg-color-hover); } -.accordion-pane summary:hover, +.accordion-pane summary:hover, .accordion-pane summary:focus, .accordion-pane summary:hover .accordion-pane__heading, .accordion-pane summary:focus .accordion-pane__heading { @@ -31,8 +31,8 @@ .accordion-pane details > summary { display: flex; - list-style: none; justify-content: space-between; + list-style: none; } .accordion-pane summary::-webkit-details-marker { @@ -63,7 +63,7 @@ .accordion-pane__title h6 { display: inline; margin-block-end: 0; - font-variant: normal; font-size: var(--font-size-h3); + font-variant: normal; line-height: normal; }