From eb45c69240a7c721a091f6029d350b59d838eddb Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 4 Feb 2026 16:50:49 +0200 Subject: [PATCH 1/2] feat(ui5-checkbox): enable font-size based scaling for standalone checkboxes --- packages/main/src/themes/CheckBox.css | 62 ++++++++++++++++++++++++--- 1 file changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 17a8b03cdba0..f51d6a0ed2d0 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -6,6 +6,17 @@ display: inline-block; } +:host(:not([text])) { + padding: 0.6875rem; + width: fit-content; + height: fit-content; + overflow: visible; + line-height: 0; + --_ui5_checkbox_inner_width_height: 1em; + --_ui5_checkbox_icon_size: 1em; + --_ui5_checkbox_partially_icon_size: .55em; +} + :host([required]) { vertical-align: middle; } @@ -121,15 +132,24 @@ display: inline-flex; align-items: center; max-width: 100%; - min-height: var(--_ui5_checkbox_width_height); - min-width: var(--_ui5_checkbox_width_height); - padding: 0 var(--_ui5_checkbox_wrapper_padding); box-sizing: border-box; outline: none; transition: var(--_ui5_checkbox_transition); border: var(--_ui5_checkbox_default_focus_border); border-radius: var(--_ui5_checkbox_border_radius); - box-sizing: border-box; +} + +:host(:not([text])) .ui5-checkbox-root { + width: 1em; + height: 1em; + padding: 0; +} + +:host([text]) .ui5-checkbox-root { + min-height: var(--_ui5_checkbox_width_height); + min-width: var(--_ui5_checkbox_width_height); + padding: 0.6875rem; + padding: 0 var(--_ui5_checkbox_wrapper_padding); } /* focused */ @@ -144,6 +164,12 @@ border-radius: var(--_ui5_checkbox_focus_border_radius); } +:host(:not([text])[desktop]) .ui5-checkbox-root:focus::before, +:host(:not([text])) .ui5-checkbox-root:focus-visible::before { + inset-inline: -0.425rem; + inset-block: -0.425rem; +} + :host([text]) .ui5-checkbox-root { padding-inline-end: var(--_ui5_checkbox_right_focus_distance); } @@ -242,6 +268,7 @@ .ui5-checkbox-icon { width: var(--_ui5_checkbox_icon_size); height: var(--_ui5_checkbox_icon_size); + font-size: var(--_ui5_checkbox_icon_size); color: currentColor; cursor: inherit; position: absolute; @@ -250,13 +277,36 @@ transform: translate(-50%, -50%); } +/* Override icon size for checkboxes without text to enable font-size scaling */ +:host(:not([text])) .ui5-checkbox-icon { + width: 1em; + height: 1em; + font-size: 1em; +} + /* Display only mode */ :host([display-only]) { cursor: default; } -:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] { - color: var(--sapTextColor); +:host([display-only]:not([text])) { + width: var(--_ui5_checkbox_icon_size); + height: var(--_ui5_checkbox_icon_size); + padding: 0.6875rem; + overflow: visible; + line-height: 0; + font-size: 1rem; + --_ui5_checkbox_inner_width_height: 1em; + --_ui5_checkbox_icon_size: 1em; + --_ui5_checkbox_partially_icon_size: .55em; +} + + +/* Override icon size for display-only checkboxes without text to enable font-size scaling */ +:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + width: 1em; + height: 1em; + font-size: 1em; } :host([display-only]) .ui5-checkbox-display-only-icon-inner { From 3b55a3499a539117c79a09313cc713f34dbc27d7 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 9 Feb 2026 13:02:49 +0200 Subject: [PATCH 2/2] refactor: change how the standalone checkbox handle its own size before setting anything --- packages/main/src/themes/CheckBox.css | 32 ++++++++++----------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index f51d6a0ed2d0..013070492566 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -7,6 +7,7 @@ } :host(:not([text])) { + font-size: 1.375rem; padding: 0.6875rem; width: fit-content; height: fit-content; @@ -148,7 +149,6 @@ :host([text]) .ui5-checkbox-root { min-height: var(--_ui5_checkbox_width_height); min-width: var(--_ui5_checkbox_width_height); - padding: 0.6875rem; padding: 0 var(--_ui5_checkbox_wrapper_padding); } @@ -268,7 +268,6 @@ .ui5-checkbox-icon { width: var(--_ui5_checkbox_icon_size); height: var(--_ui5_checkbox_icon_size); - font-size: var(--_ui5_checkbox_icon_size); color: currentColor; cursor: inherit; position: absolute; @@ -277,11 +276,9 @@ transform: translate(-50%, -50%); } -/* Override icon size for checkboxes without text to enable font-size scaling */ :host(:not([text])) .ui5-checkbox-icon { - width: 1em; - height: 1em; - font-size: 1em; + width: 0.75em; + height: 0.75em; } /* Display only mode */ @@ -290,23 +287,13 @@ } :host([display-only]:not([text])) { - width: var(--_ui5_checkbox_icon_size); - height: var(--_ui5_checkbox_icon_size); - padding: 0.6875rem; - overflow: visible; - line-height: 0; font-size: 1rem; - --_ui5_checkbox_inner_width_height: 1em; - --_ui5_checkbox_icon_size: 1em; - --_ui5_checkbox_partially_icon_size: .55em; -} - - -/* Override icon size for display-only checkboxes without text to enable font-size scaling */ -:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { width: 1em; height: 1em; - font-size: 1em; +} + +:host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + color: var(--sapTextColor); } :host([display-only]) .ui5-checkbox-display-only-icon-inner { @@ -318,3 +305,8 @@ align-items: center; justify-content: center; } + +:host([display-only]:not([text])) .ui5-checkbox-display-only-icon-inner [ui5-icon] { + width: 1em; + height: 1em; +}