ionic-framework/core/src/components/radio/radio.ionic.scss at d4d8d8085af8fc563720b18ab897a8b76ad8c685 · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./radio.common";

// Ionic Radio
// --------------------------------------------------

:host {
  --color: #{globals.$ion-primitives-neutral-500};
  --color-checked: #{globals.$ion-semantics-primary-base};
  --border-width: #{globals.$ion-border-size-025};
  --border-style: #{globals.$ion-border-style-solid};
  --border-radius: #{globals.$ion-border-radius-full};
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  @include globals.typography(globals.$ion-body-md-regular);

  min-height: globals.$ion-scale-1200;

  color: globals.$ion-text-default;
}

// Radio Color
// --------------------------------------------------

:host(.ion-color.radio-checked) .radio-icon {
  border-color: globals.current-color(base);

  background-color: globals.current-color(base);
}

// Radio Label
// ----------------------------------------------------------------

:host(.in-item.radio-label-placement-stacked) .native-wrapper {
  @include globals.margin(null, null, globals.$ion-space-250, null);
}

// Radio Native Wrapper
// ----------------------------------------------------------------

.native-wrapper .radio-icon {
  width: globals.$ion-scale-600;
  height: globals.$ion-scale-600;
}

// Ionic Radio Outer Circle: Unchecked
// -----------------------------------------

.radio-icon {
  @include globals.margin(0);
  @include globals.border-radius(var(--border-radius));

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--color);

  background-color: globals.$ion-bg-surface-default;
}

// Ionic Radio Inner Circle: Unchecked
// -----------------------------------------

.radio-inner {
  @include globals.border-radius(var(--inner-border-radius));

  width: calc(32% + var(--border-width));
  height: calc(32% + var(--border-width));

  background-color: globals.$ion-bg-surface-default;
}

// Ionic Radio Outer Circle: Checked
// -----------------------------------------

:host(.radio-checked) .radio-icon {
  border-color: var(--color-checked);

  background-color: var(--color-checked);
}

// Radio Label Placement - Start & Fixed
// ----------------------------------------------------------------

:host(.radio-label-placement-start) .label-text-wrapper,
:host(.radio-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the radio should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(null, globals.$ion-space-400, null, 0);
}

// Radio Label Placement - End
// ----------------------------------------------------------------

/**
 * The margin between the label and
 * the radio should be on the start
 * when the label sits at the end.
 */
:host(.radio-label-placement-end) .label-text-wrapper {
  @include globals.margin(null, 0, null, globals.$ion-space-400);
}

// Radio Label Placement - Stacked
// ----------------------------------------------------------------

:host(.radio-label-placement-stacked) .label-text-wrapper {
  @include globals.transform(scale(0.75));

  /**
   * The margin between the label and
   * the radio should be on the bottom
   * when the label sits on top.
   */
  @include globals.margin(null, 0, globals.$ion-space-400, 0);

  /**
   * Label text should not extend
   * beyond the bounds of the radio.
   */
  max-width: calc(100% / 0.75);
}

// Radio Not In Item
// -----------------------------------------

:host(:not(.in-item):not(:last-of-type)) {
  @include globals.margin(null, null, globals.$ion-space-200, null);
}

// Ionic Radio: Disabled
// -----------------------------------------

:host(.radio-disabled) .radio-icon::after {
  @include globals.disabled-state();
  @include globals.border-radius(inherit);

  // The border-width is added to the width and height to ensure
  // the disabled state covers the entire radio icon. The top and
  // left are adjusted to ensure the disabled state is centered on
  // the radio icon.
  @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
  width: calc(100% + (2 * var(--border-width)));
  height: calc(100% + (2 * var(--border-width)));
}

// Ionic Radio: Keyboard Focus
// -----------------------------------------

:host(.ion-focused) .radio-icon {
  @include globals.focused-state(var(--focus-ring-width), null, var(--focus-ring-color));
}

// Ionic Radio: Pressed
// -----------------------------------------

:host(.ion-activated) .radio-icon::after {
  @include globals.pressed-state();
  @include globals.border-radius(inherit);

  // The border-width is added to the width and height to ensure
  // the activated state covers the entire radio icon. The top and
  // left are adjusted to ensure the activated state is centered on
  // the radio icon.
  @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
  width: calc(100% + (2 * var(--border-width)));
  height: calc(100% + (2 * var(--border-width)));
}