From 33931066ce2ea8ca1d59faccd96b450e5b55996f Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Fri, 4 Oct 2024 18:01:22 +0200 Subject: [PATCH] Fix placement of form fields when just a single value is set Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values as empty. That makes the other value from the items/content pair unexpectedly used for both axes. --- src/styles/tools/form-fields/_box-field-layout.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/styles/tools/form-fields/_box-field-layout.scss b/src/styles/tools/form-fields/_box-field-layout.scss index 79d83636..dcca481b 100644 --- a/src/styles/tools/form-fields/_box-field-layout.scss +++ b/src/styles/tools/form-fields/_box-field-layout.scss @@ -55,6 +55,9 @@ // // 13. Label and field are vertically aligned to top (start) by default (see 10.). Vertical // alignment of each block can be changed by theme configuration. +// +// 14. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values +// as empty. That makes the other value from the items/content pair unexpectedly used for both axes. @use "../../settings/forms"; @use "../../settings/form-fields" as settings; @@ -125,7 +128,10 @@ .field { grid-area: field; - place-self: theme.$horizontal-field-vertical-alignment start; // 13. / 7. + // stylelint-disable declaration-block-no-redundant-longhand-properties -- 14. + align-self: theme.$horizontal-field-vertical-alignment; // 13. + justify-self: start; // 7. + // stylelint-enable declaration-block-no-redundant-longhand-properties } } }