From 2d66dd543618fe026fd29b3d604e528c3ec14484 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 23 May 2024 07:52:01 +0200 Subject: [PATCH 1/5] refactor: enhanced clickable area on the inline-end --- source/_patterns/01-elements/_form-elements.scss | 13 +++++++++++++ source/_patterns/01-elements/checkbox/checkbox.scss | 13 ++++++++++--- source/_patterns/01-elements/radio/radio.scss | 13 ++++++++++--- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index c209f8aa93a..8ac4118d331 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -134,3 +134,16 @@ padding: to-rem($pxValue: 6) to-rem($pxValue: 10); } } + +// enhance the clickable area for checkbox and radio elements +%form-element-enhanced-clickable-area { + &:has(+ label) { + &::after { + content: ""; + width: calc(var(--db-form-element-dimensions) + 4px); + height: var(--db-form-element-dimensions); + transform: translateX(4px); + position: absolute; + } + } +} diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss index e1dd03763e6..983cc4cc5a6 100644 --- a/source/_patterns/01-elements/checkbox/checkbox.scss +++ b/source/_patterns/01-elements/checkbox/checkbox.scss @@ -5,6 +5,13 @@ @import "../form-elements"; .elm-checkbox { + --db-form-element-dimensions: var( + --db-checkbox-dimensions, + #{to-rem($pxValue: 24)} + ); + + @extend %form-element-enhanced-clickable-area; + @include icon("\00A0", 24, "outline", $partial: $partial); align-content: center; @@ -15,9 +22,9 @@ color: $checkbox---color; display: inline-flex; - height: to-rem($pxValue: 24); + height: var(--db-form-element-dimensions); justify-content: center; - width: to-rem($pxValue: 24); + width: var(--db-form-element-dimensions); &[type="checkbox"] { vertical-align: top; @@ -67,6 +74,6 @@ & + label { @extend %form-label; - margin-left: $db-spacing-xs; + padding-inline-start: $db-spacing-xs; } } diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss index 8e4db1287f4..3caa4d05242 100644 --- a/source/_patterns/01-elements/radio/radio.scss +++ b/source/_patterns/01-elements/radio/radio.scss @@ -5,6 +5,13 @@ @import "../form-elements"; .elm-radio { + --db-form-element-dimensions: var( + --db-radio-dimensions, + #{to-em($pxValue: 20)} + ); + + @extend %form-element-enhanced-clickable-area; + appearance: none; background-color: rgba(255, 255, 255, 0.1); @@ -15,11 +22,11 @@ display: inline-block; font-size: to-rem($pxValue: 16); - height: to-em($pxValue: 20); + height: var(--db-form-element-dimensions); transition: border-width 0.5s ease; - width: to-em($pxValue: 20); + width: var(--db-form-element-dimensions); &[type="radio"] { vertical-align: sub; @@ -56,7 +63,7 @@ & + label { @extend %form-label; - margin-left: $db-spacing-xs; + padding-inline-start: $db-spacing-xs; } &:disabled { From b9dba7b4cff8f94237fe9e18a81dbba3b119a792 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 29 May 2024 11:01:14 +0200 Subject: [PATCH 2/5] Update _form-elements.scss --- source/_patterns/01-elements/_form-elements.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index 8ac4118d331..e061c456071 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -140,7 +140,7 @@ &:has(+ label) { &::after { content: ""; - width: calc(var(--db-form-element-dimensions) + 4px); + width: calc(var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)); height: var(--db-form-element-dimensions); transform: translateX(4px); position: absolute; From 6dc600e872c5a9ec1dd5a848bb167488172b57f4 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 29 May 2024 11:01:41 +0200 Subject: [PATCH 3/5] Update _form-elements.scss --- source/_patterns/01-elements/_form-elements.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index e061c456071..f2a13841032 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -142,7 +142,7 @@ content: ""; width: calc(var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)); height: var(--db-form-element-dimensions); - transform: translateX(4px); + transform: translateX(#{to-rem($pxValue: 4)); position: absolute; } } From ed03df206161053401c40afd3cb7a5ee352f66c3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 3 Jun 2024 12:58:42 +0200 Subject: [PATCH 4/5] Update _form-elements.scss --- source/_patterns/01-elements/_form-elements.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index f2a13841032..5caa31263a1 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -140,9 +140,9 @@ &:has(+ label) { &::after { content: ""; - width: calc(var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)); + width: calc(var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)}); height: var(--db-form-element-dimensions); - transform: translateX(#{to-rem($pxValue: 4)); + transform: translateX(#{to-rem($pxValue: 4)}); position: absolute; } } From 813299523460711629dee885c80f4a713e2117cf Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 16 Jul 2024 10:32:19 +0200 Subject: [PATCH 5/5] refactor: prettier --- source/_patterns/01-elements/_form-elements.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index 5caa31263a1..aa92e70e0f0 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -140,7 +140,9 @@ &:has(+ label) { &::after { content: ""; - width: calc(var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)}); + width: calc( + var(--db-form-element-dimensions) + #{to-rem($pxValue: 4)} + ); height: var(--db-form-element-dimensions); transform: translateX(#{to-rem($pxValue: 4)}); position: absolute;