core/src/components/toggle/toggle.md.vars.scss - main - githubmirror/ionic-framework

core/src/components/toggle/toggle.md.vars.scss

52 строки2 KB

Shane

fix(checkbox,radio,toggle): add missing keyboard focus indicators (#31295)

01 авг 2026, 00:57

01 авг 2026, 00:572f9c0b7

@import "../../themes/ionic.globals.md";
@import "../item/item.md.vars";

// Material Design Toggle
// --------------------------------------------------

/// @prop - Width of the toggle track
$toggle-md-track-width:                           36px;

/// @prop - Height of the toggle track
$toggle-md-track-height:                          14px;

/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off:            rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);

/// @prop - Background color alpha of the checked toggle track
$toggle-md-track-background-color-alpha-on:       .5;

/// @prop - Width of the toggle handle
$toggle-md-handle-width:                          20px;

/// @prop - Height of the toggle handle
$toggle-md-handle-height:                         20px;

/// @prop - Max height of the toggle handle
$toggle-md-handle-max-height:                     calc(100% + 6px);

/// @prop - Border radius of the toggle handle
$toggle-md-handle-border-radius:                  50%;

/// @prop - Box shadow of the toggle handle
$toggle-md-handle-box-shadow:                     0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

/// @prop - Background color of the toggle handle
$toggle-md-handle-background-color-off:           #ffffff;

/// @prop - Transition duration of the toggle icon
$toggle-md-transition-duration:                   160ms;

/// @prop - Transition of the toggle icon
$toggle-md-transition:                            transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1);

/// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity:                      $form-control-md-disabled-opacity;

/// @prop - The text color of the on/off labels
$toggle-md-on-off-label-color: #000;

/// @prop - The text color of the on/off labels when the toggle is checked
$toggle-md-on-off-label-checked-color: #fff;

$toggle-md-focus-ring-size:                       36px;