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

core/src/components/toggle/toggle.md.scss
142 строки4 KB
Shane
fix(checkbox,radio,toggle): add missing keyboard focus indicators (#31295)
01 авг 2026, 00:57
01 авг 2026, 00:572f9c0b7
@import "./toggle";
@import "./toggle.md.vars";

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

:host {
  --track-background: #{$toggle-md-track-background-color-off};
  --track-background-checked: #{ion-color(primary, base, $toggle-md-track-background-color-alpha-on)};
  --border-radius: #{$toggle-md-track-height};
  --handle-background: #{$toggle-md-handle-background-color-off};
  --handle-background-checked: #{ion-color(primary, base)};
  --handle-border-radius: #{$toggle-md-handle-border-radius};
  --handle-box-shadow: #{$toggle-md-handle-box-shadow};
  --handle-width: #{$toggle-md-handle-width};
  --handle-height: #{$toggle-md-handle-height};
  --handle-max-height: #{$toggle-md-handle-max-height};
  // A length, not a bare 0, so it composes in `calc()`.
  --handle-spacing: 0px;
  --handle-transition: #{$toggle-md-transition};
}

// Toggle Native Wrapper
// ----------------------------------------------------------------

.native-wrapper .toggle-icon {
  width: $toggle-md-track-width;
  height: $toggle-md-track-height;
}

:host(.ion-color.toggle-checked) .toggle-icon {
  background: current-color(base, $toggle-md-track-background-color-alpha-on);
}

:host(.ion-color.toggle-checked) .toggle-inner {
  background: current-color(base);
}

:host(.toggle-checked) .toggle-inner {
  color: var(--ion-color-contrast, $toggle-md-on-off-label-checked-color);
}

// Material Design Toggle Background Track: Unchecked
// ----------------------------------------------------------

.toggle-icon {
  transition: background-color $toggle-md-transition-duration;
}

// Material Design Toggle Inner Knob: Unchecked
// ----------------------------------------------------------

.toggle-inner {
  will-change: background-color, transform;

  display: flex;

  align-items: center;
  justify-content: center;

  color: $toggle-md-on-off-label-color;
}

.toggle-inner .toggle-switch-icon {
  @include padding(1px);

  width: 100%;
  height: 100%;
}

// Material Design Toggle: Keyboard Focus
// ----------------------------------------------------------
// The indicator is drawn on the wrapper because the handle uses
// `contain: strict`, which would clip it. The wrapper travels with the handle.
//
// `toggle-defers-indicator` is excluded rather than overridden so the indicator
// is never created, leaving the rules that position and color it nothing to act on.

:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after {
  @include border-radius(50%);

  display: block;
  position: absolute;

  width: $toggle-md-focus-ring-size;
  height: $toggle-md-focus-ring-size;

  transform: translateY(-50%);

  background: $toggle-focus-ring-color-off;

  content: "";

  // Drawn behind the handle so the translucent indicator does not tint it. The
  // wrapper is its own stacking context, so it stays above the track.
  z-index: -1;

  inset-block-start: 50%;
}

// Positioned the same way as `.toggle-inner`, offset by half the size difference
// so it centers on the handle. Anchored physically to mirror the handle, which
// uses `left` in LTR and `right` in RTL.

:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after {
  // stylelint-disable-next-line property-disallowed-list
  left: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
}

:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after {
  // stylelint-disable-next-line property-disallowed-list
  right: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
}

// Matches the checked shift `.toggle-inner` applies, so the indicator stays on
// the handle. The Y component repeats the centering from the base rule.

:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
  transform: translate(calc(var(--handle-spacing) * -2), -50%);
}

:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
  transform: translate(calc(var(--handle-spacing) * 2), -50%);
}

:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
  background: $toggle-focus-ring-color;
}

:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
  background: current-color(base, $toggle-focus-ring-color-alpha);
}

// Material Design Toggle: Disabled
// ----------------------------------------------------------
// The toggle and label should use the
// same opacity and match the other form
// controls

:host(.toggle-disabled) {
  opacity: $toggle-md-disabled-opacity;
}