ionic-framework/core/src/components/toggle/toggle.md.scss at 2784a6f2aeac9d3aab975ec09066639e30bc3488 · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@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};
  --handle-spacing: 0;
  --handle-transition: #{$toggle-md-transition};
  --on-off-label-icon-size: 13px;


}

// 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: var(--on-off-label-icon-size);
height: var(--on-off-label-icon-size);}

// 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;
}