ionic-framework/checkbox.vars.scss at 03c830e9e98e5ca266fabd57372932970b99a280 - ionic-framework - Gitea: Git with a cup of tea

javascript/ionic-framework

mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00

Files

Amanda Johnston 35f0ec581a fix(radio, checkbox, toggle): add top and bottom margins when in ion-item (#27788 )

Issue number: Resolves #27498

---------

<!-- 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. -->

When `ion-radio`, `ion-checkbox`, or `ion-toggle` is used within
`ion-item`, top and bottom margins are not added to the label, while
they are present when using the legacy syntax. We didn't catch this
because the issue is only visible when using a label that breaks onto
more than one line; otherwise, the height of the item exceeds what the
margins would've added.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Margins added. Values were taken from `ion-item` styles
[here](096d9cc931/core/src/components/item/item.ios.scss (L203-L206))
and
[here](096d9cc931/core/src/components/item/item.md.scss (L298-L301)),
which no longer get applied because the `ion-label` is nested in an
additional shadow component. Note that left/right margins are already
included in the modern syntax 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. -->

This PR is a combination of the following:
- https://github.com/ionic-team/ionic-framework/pull/27771
- https://github.com/ionic-team/ionic-framework/pull/27783
- https://github.com/ionic-team/ionic-framework/pull/27784

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

2023-07-12 20:10:35 +00:00

5 lines

220 B

SCSS

Raw Blame History

 /// @prop - Top margin of checkbox's label when in an item
 $checkbox-item-label-margin-top: 10px !default;
 /// @prop - Bottom margin of checkbox's label when in an item
 $checkbox-item-label-margin-bottom: 10px !default;