From 9adf9f339dded0c682ecf06b793f6886c6c81fd4 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Mon, 23 Dec 2024 17:14:13 +0100 Subject: [PATCH 1/7] fix: align multiline items w/ item text not marker Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index dec6f7f959..84ab9889f8 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -1,29 +1,34 @@ .nlds-anatomy-list { - padding-inline: 0; + column-gap: 2rem; + counter-reset: count 0; display: flex; flex-direction: column; - column-gap: 2rem; + padding-inline: 0; row-gap: 0.5rem; - counter-reset: count 0; } .nlds-anatomy-list__item { list-style: none; + padding-inline-start: calc( + var(--nl-anatomy-marker-min-inline-size, 2rem) + (4 * var(--nl-anatomy-marker-padding-inline, 0.125rem)) + ); + position: relative; } .nlds-anatomy-marker, .nlds-anatomy-list__item::before { - counter-increment: count 1; - border-width: var(--nl-number-badge-border-width, 1px); box-sizing: border-box; color: var(--nl-number-badge-color); + counter-increment: count 1; display: inline-flex; font-family: var(--nl-number-badge-font-family); font-size: max(var(--nl-number-badge-font-size), 1rem); font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: var(--nl-number-badge-font-weight, bold); + inset-block-start: calc(-1 * var(--nl-anatomy-marker-padding-inline, 0.125rem)); + inset-inline-start: 0; justify-content: center; max-block-size: max-content; max-inline-size: max-content; @@ -31,17 +36,18 @@ min-inline-size: var(--nl-anatomy-marker-min-inline-size, 2rem); padding-block: var(--nl-anatomy-marker-padding-block, 0.125rem); padding-inline: var(--nl-anatomy-marker-padding-inline, 0.125rem); + position: absolute; } .nlds-anatomy-list__item::before { - content: counter(count); background-color: #de00a4; - color: white; border-radius: 100%; - min-inline-size: 32px; + color: white; + content: counter(count); + margin-inline-end: 1ch; min-block-size: 32px; + min-inline-size: 32px; vertical-align: middle; - margin-inline-end: 1ch; } @media screen and (forced-colors: active) { From ebeacac4cd6a6db521a10ab05ea5dcead8e39faa Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 15:10:06 +0100 Subject: [PATCH 2/7] refactor: use nlds namespace for nlds specific components Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index 84ab9889f8..df8719f41c 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -27,15 +27,15 @@ font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: var(--nl-number-badge-font-weight, bold); - inset-block-start: calc(-1 * var(--nl-anatomy-marker-padding-inline, 0.125rem)); + inset-block-start: calc(-1 * var(--nlds-anatomy-marker-padding-inline, 0.125rem)); inset-inline-start: 0; justify-content: center; max-block-size: max-content; max-inline-size: max-content; - min-block-size: var(--nl-anatomy-marker-min-block-size, 2rem); - min-inline-size: var(--nl-anatomy-marker-min-inline-size, 2rem); - padding-block: var(--nl-anatomy-marker-padding-block, 0.125rem); - padding-inline: var(--nl-anatomy-marker-padding-inline, 0.125rem); + min-block-size: var(--nlds-anatomy-marker-min-block-size, 2rem); + min-inline-size: var(--nlds-anatomy-marker-min-inline-size, 2rem); + padding-block: var(--nlds-anatomy-marker-padding-block, 0.125rem); + padding-inline: var(--nlds-anatomy-marker-padding-inline, 0.125rem); position: absolute; } From f6f85b5d849bc0164b43a5c6ee9a4be252a25ac8 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 15:11:10 +0100 Subject: [PATCH 3/7] refactor: more resonable space between marker and item Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index df8719f41c..d543f0275c 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -10,7 +10,8 @@ .nlds-anatomy-list__item { list-style: none; padding-inline-start: calc( - var(--nl-anatomy-marker-min-inline-size, 2rem) + (4 * var(--nl-anatomy-marker-padding-inline, 0.125rem)) + var(--nlds-anatomy-marker-min-inline-size, 2rem) + (2 * var(--nlds-anatomy-marker-padding-inline, 0.125rem)) + + var(--nlds-anatomy-marker-gap, 0.5ch) ); position: relative; } @@ -44,7 +45,6 @@ border-radius: 100%; color: white; content: counter(count); - margin-inline-end: 1ch; min-block-size: 32px; min-inline-size: 32px; vertical-align: middle; From 2a121d1cc0ca537ea7bac36e210ca44c11940984 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 15:12:52 +0100 Subject: [PATCH 4/7] refactor: property not appropriate ford display:inline-item Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index d543f0275c..67acf6345f 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -47,7 +47,6 @@ content: counter(count); min-block-size: 32px; min-inline-size: 32px; - vertical-align: middle; } @media screen and (forced-colors: active) { From 42e16c3bc1bba319ee831bfa29833396ef99c0e1 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 15:15:48 +0100 Subject: [PATCH 5/7] refactor: use the correspondig axis Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index 67acf6345f..f6998ab628 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -28,7 +28,7 @@ font-style: normal; font-variant-numeric: lining-nums tabular-nums; font-weight: var(--nl-number-badge-font-weight, bold); - inset-block-start: calc(-1 * var(--nlds-anatomy-marker-padding-inline, 0.125rem)); + inset-block-start: calc(-1 * var(--nlds-anatomy-marker-padding-block, 0.125rem)); inset-inline-start: 0; justify-content: center; max-block-size: max-content; From 27969aa52b6ff88138d36904d91afbc0287dc121 Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 15:58:47 +0100 Subject: [PATCH 6/7] refactor: make configurable Signed-off-by: Hidde de Vries --- src/components/AnatomyList.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index f6998ab628..6a41df9f7c 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -45,8 +45,8 @@ border-radius: 100%; color: white; content: counter(count); - min-block-size: 32px; - min-inline-size: 32px; + min-block-size: var(--nlds-anatomy-marker-min-block-size, 32px); + min-inline-size: var(--nlds-anatomy-marker-min-inline-size, 32px); } @media screen and (forced-colors: active) { From 8d36b357a4b2efe05b232dc98527389743ec456e Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Fri, 27 Dec 2024 16:07:55 +0100 Subject: [PATCH 7/7] refactor: be more consistent about sizing --- src/components/AnatomyList.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AnatomyList.css b/src/components/AnatomyList.css index 6a41df9f7c..35ce7f0efa 100644 --- a/src/components/AnatomyList.css +++ b/src/components/AnatomyList.css @@ -10,7 +10,7 @@ .nlds-anatomy-list__item { list-style: none; padding-inline-start: calc( - var(--nlds-anatomy-marker-min-inline-size, 2rem) + (2 * var(--nlds-anatomy-marker-padding-inline, 0.125rem)) + + var(--nlds-anatomy-marker-min-size, 2rem) + (2 * var(--nlds-anatomy-marker-padding-inline, 0.125rem)) + var(--nlds-anatomy-marker-gap, 0.5ch) ); position: relative; @@ -33,20 +33,20 @@ justify-content: center; max-block-size: max-content; max-inline-size: max-content; - min-block-size: var(--nlds-anatomy-marker-min-block-size, 2rem); - min-inline-size: var(--nlds-anatomy-marker-min-inline-size, 2rem); + min-block-size: var(--nlds-anatomy-marker-min-size, 2rem); + min-inline-size: var(--nlds-anatomy-marker-min-size, 2rem); padding-block: var(--nlds-anatomy-marker-padding-block, 0.125rem); padding-inline: var(--nlds-anatomy-marker-padding-inline, 0.125rem); position: absolute; } .nlds-anatomy-list__item::before { + align-items: center; background-color: #de00a4; border-radius: 100%; color: white; content: counter(count); - min-block-size: var(--nlds-anatomy-marker-min-block-size, 32px); - min-inline-size: var(--nlds-anatomy-marker-min-inline-size, 32px); + display: flex; } @media screen and (forced-colors: active) {