Skip to content

Commit

Permalink
Fix placement of form fields when just a single value is set
Browse files Browse the repository at this point in the history
Intentionally use longhand properties because the custom property
fallback mechanism evaluates `initial` values as empty. That makes
the other value of the shorthand property unexpectedly used for
both axes.
  • Loading branch information
adamkudrna committed Oct 7, 2024
1 parent 637e64d commit 7898915
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/styles/tools/form-fields/_box-field-layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 of the shorthand property unexpectedly used for both axes.

@use "../../settings/forms";
@use "../../settings/form-fields" as settings;
Expand Down Expand Up @@ -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
}
}
}
Expand Down

0 comments on commit 7898915

Please sign in to comment.