mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
995a848575
Issue number: resolves #27184 --------- ## What is the current behavior? The modern form controls do not use the same opacity for their labels when disabled, resulting in inconsistent UI when using two different types in the same view (select vs checkbox, for example). ## What is the new behavior? The checkbox, input, radio, range, select, textarea and toggle labels have been updated on both modes to use the same opacity as each other when disabled. The checkbox and radio icons have been updated to use a different opacity than the label for `md` mode. - Updates `ios` mode so all form controls use the same opacity of `0.3` - I could not find any guidelines by Apple for what color these should be, so I decided to just make them the same as what is most commonly used & match item - Updates `md` mode so all form control labels use the same opacity of `0.38` - I used the [Material Design 3 documentation](https://m2.material.io/components) to get this number as well as the opacity of the disabled selection controls in the [Material Design 2 figma design kit](https://www.figma.com/community/file/778763161265841481). The Material Design 2 documentation does not mention the opacity, but this is also the number used by Material Design 1 so it's safe to assume it is what the disabled form labels should also use for Material Design 2. - Updates the `md` range so the slotted elements are also included when setting the opacity on the label - Updates the range, radio & checkbox tests to make sure there are screenshots in the different disabled states - Updates the item/disabled test to include radio & textarea so you can see all form controls side by side ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information I downloaded screenshots of the item disabled tests and put them side by side for `main` and this branch in order to see the differences in the labels. The grey boxes to the left of each item are just a bigger version of the label color for that item, so it's easier to see when they aren't the same.   --------- Co-authored-by: ionitron <hi@ionicframework.com>
82 lines
3.2 KiB
SCSS
82 lines
3.2 KiB
SCSS
@use "sass:math";
|
|
@import "../../themes/ionic.globals.ios";
|
|
@import "../item/item.ios.vars";
|
|
|
|
// iOS Checkbox
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Background color of the checkbox when off
|
|
$checkbox-ios-background-color-off: $item-ios-background !default;
|
|
|
|
/// @prop - Background color of the checkbox when on
|
|
$checkbox-ios-background-color-on: ion-color(primary, base) !default;
|
|
|
|
/// @prop - Background color of focus indicator for checkbox when focused
|
|
$checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
|
|
|
|
/// @prop - Size of the checkbox icon
|
|
$checkbox-ios-icon-size: 26px !default;
|
|
|
|
/// @prop - Border color of the checkbox icon when off
|
|
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
|
|
|
|
/// @prop - Border color of the checkbox icon when on
|
|
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
|
|
|
|
/// @prop - Border width of the checkbox icon
|
|
$checkbox-ios-icon-border-width: 1px !default;
|
|
|
|
/// @prop - Border style of the checkbox icon
|
|
$checkbox-ios-icon-border-style: solid !default;
|
|
|
|
/// @prop - Border radius of the checkbox icon
|
|
$checkbox-ios-icon-border-radius: 50% !default;
|
|
|
|
/// @prop - Width of the checkmark border in the checkbox
|
|
$checkbox-ios-checkmark-border-width: 1px !default;
|
|
|
|
/// @prop - Style of the checkmark border in the checkbox
|
|
$checkbox-ios-checkmark-border-style: solid !default;
|
|
|
|
/// @prop - Color of the checkmark border in the checkbox
|
|
$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default;
|
|
|
|
/// @prop - Top of the checkmark in the checkbox
|
|
$checkbox-ios-checkmark-top: math.div($checkbox-ios-icon-size, 6) !default;
|
|
|
|
/// @prop - Start of the checkmark in the checkbox
|
|
$checkbox-ios-checkmark-start: math.div($checkbox-ios-icon-size, 3) + 1px !default;
|
|
|
|
/// @prop - Width of the checkmark in the checkbox
|
|
$checkbox-ios-checkmark-width: math.div($checkbox-ios-icon-size, 6) + 1px !default;
|
|
|
|
/// @prop - Height of the checkmark in the checkbox
|
|
$checkbox-ios-checkmark-height: $checkbox-ios-icon-size * 0.5 !default;
|
|
|
|
/// @prop - Opacity of the disabled checkbox
|
|
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
|
|
|
/// @prop - Margin top of the left checkbox item
|
|
$checkbox-ios-item-start-margin-top: 8px !default;
|
|
|
|
/// @prop - Margin end of the left checkbox item
|
|
$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default;
|
|
|
|
/// @prop - Margin bottom of the left checkbox item
|
|
$checkbox-ios-item-start-margin-bottom: $checkbox-ios-item-start-margin-top !default;
|
|
|
|
/// @prop - Margin start of the left checkbox item
|
|
$checkbox-ios-item-start-margin-start: 2px !default;
|
|
|
|
/// @prop - Margin top of the right checkbox item
|
|
$checkbox-ios-item-end-margin-top: 10px !default;
|
|
|
|
/// @prop - Margin end of the right checkbox item
|
|
$checkbox-ios-item-end-margin-end: 8px !default;
|
|
|
|
/// @prop - Margin bottom of the right checkbox item
|
|
$checkbox-ios-item-end-margin-bottom: 9px !default;
|
|
|
|
/// @prop - Margin start of the right checkbox item
|
|
$checkbox-ios-item-end-margin-start: 0 !default;
|