Skip to content

Commit 381de0b

Browse files
fix(many): form controls labels have increased margin (#27447)
Issue number: resolves #27129 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Material Design has 16px of margin between the form control and the label, but we have 8px: https://m2.material.io/components/selection-controls#usage ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updates default margin from 8px to 16px for checkbox, input, radio, range, select, textarea, and toggle. Note: This should only apply to labels that are on the same line as the form control. In other words, they do not apply to stacked/floating labels. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>
1 parent eb2772c commit 381de0b

File tree

956 files changed

+27
-28
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

956 files changed

+27
-28
lines changed

core/src/components/checkbox/checkbox.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ input {
194194
* the checkbox should be on the end
195195
* when the label sits at the start.
196196
*/
197-
@include margin(0, 8px, 0, 0);
197+
@include margin(0, $form-control-label-margin, 0, 0);
198198
}
199199

200200

@@ -215,7 +215,7 @@ input {
215215
* when the label sits at the end.
216216
*/
217217
:host(.checkbox-label-placement-end) .label-text-wrapper {
218-
@include margin(0, 0, 0, 8px);
218+
@include margin(0, 0, 0, $form-control-label-margin);
219219
}
220220

221221

@@ -228,7 +228,7 @@ input {
228228
* the checkbox should be on the end
229229
* when the label sits at the start.
230230
*/
231-
@include margin(0, 8px, 0, 0);
231+
@include margin(0, $form-control-label-margin, 0, 0);
232232
}
233233

234234
/**
5 Bytes
18 Bytes
12 Bytes
16 Bytes
12 Bytes
17 Bytes
8 Bytes
10 Bytes
10 Bytes

0 commit comments

Comments
 (0)