[PATCH yew-widget-toolkit-assets] input: align check boxes better in forms

[PATCH yew-widget-toolkit-assets] input: align check boxes better in forms

[Shannon Sterz]

by applying a negative margin to the left and right sides. this is
necessary, as we apply a background-color when the checkbox is, for
exampled, hovered. if we just applied the padding to the bottom and
top, that background would appear as an oval due to the way
`border-radius: 50%` works on non-square elements.

the negative margin preserves the square shape of the element while
essentially removing the extra space added by the padding property.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 scss/_input.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/scss/_input.scss b/scss/_input.scss
index 293717c..3644043 100644
--- a/scss/_input.scss
+++ b/scss/_input.scss
@@ -187,7 +187,9 @@ input {
     @include accent-color-scheme-vars($default-accent-color);

     display: inline-block;
-    padding: max(map-get($line-height, "label-large") - map-get($font-size, "label-large"), var(--pwt-spacer-1));
+    $pwt-checkbox-state-padding: max(map-get($line-height, "label-large") - map-get($font-size, "label-large"), var(--pwt-spacer-1));
+    padding: $pwt-checkbox-state-padding;
+    margin: auto calc(-1 * $pwt-checkbox-state-padding);
     border-radius: 50%;
     transition: background 0.3s;

--
2.47.3

applied: [PATCH yew-widget-toolkit-assets] input: align check boxes better in forms

[Dominik Csapak]

On Mon, 09 Mar 2026 09:41:21 +0100, Shannon Sterz wrote:
> by applying a negative margin to the left and right sides. this is
> necessary, as we apply a background-color when the checkbox is, for
> exampled, hovered. if we just applied the padding to the bottom and
> top, that background would appear as an oval due to the way
> `border-radius: 50%` works on non-square elements.
> 
> the negative margin preserves the square shape of the element while
> essentially removing the extra space added by the padding property.
> 
> [...]

Applied, thanks!

[1/1] input: align check boxes better in forms
      commit: eeb320d320fee7e973d964bb8133c9aeb09f9fa9