Files
ionic-framework/core/src/components/checkbox/checkbox.md.vars.scss
Liam DeBeasi fb5ae5b07f refactor(checkbox): remove legacy property and support for legacy syntax (#29043)
BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
2024-02-14 12:49:50 -05:00

41 lines
1.6 KiB
SCSS

@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";
// Material Design Checkbox
// --------------------------------------------------
/// @prop - Opacity of the disabled checkbox label
$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default;
/// @prop - Background color of the checkbox icon when off
$checkbox-md-icon-background-color-off: $item-md-background !default;
/// @prop - Size of the checkbox icon
/// The icon size does not use dynamic font
/// because it does not scale in native.
$checkbox-md-icon-size: 18px !default;
/// @prop - Border width of the checkbox icon
$checkbox-md-icon-border-width: 2px !default;
/// @prop - Border style of the checkbox icon
$checkbox-md-icon-border-style: solid !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default;
/// @prop - Transition duration of the checkbox
$checkbox-md-transition-duration: 180ms !default;
/// @prop - Transition easing of the checkbox
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
/// @prop - Opacity of the disabled checkbox
/// This value is used because the checkbox color is set to
/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
/// opacity is applied on top of the transparent color so
/// this opacity gets us the equivalent of applying `0.38`
/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)`
$checkbox-md-icon-disabled-opacity: 0.63 !default;