@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +106 -106
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/prebuilt-themes/default/badge.css +234 -234
  5. package/prebuilt-themes/default/badge.css.map +1 -1
  6. package/prebuilt-themes/default/buttons/button.css +324 -324
  7. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  8. package/prebuilt-themes/default/buttons/fab.css +317 -319
  9. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  10. package/prebuilt-themes/default/buttons/icon-button.css +299 -300
  11. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  12. package/prebuilt-themes/default/calendar.css +390 -391
  13. package/prebuilt-themes/default/calendar.css.map +1 -1
  14. package/prebuilt-themes/default/card.css +151 -159
  15. package/prebuilt-themes/default/card.css.map +1 -1
  16. package/prebuilt-themes/default/checkbox-list.css +89 -88
  17. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  18. package/prebuilt-themes/default/checkbox.css +349 -349
  19. package/prebuilt-themes/default/checkbox.css.map +1 -1
  20. package/prebuilt-themes/default/chips.css +412 -412
  21. package/prebuilt-themes/default/chips.css.map +1 -1
  22. package/prebuilt-themes/default/color-display.css +34 -33
  23. package/prebuilt-themes/default/color-display.css.map +1 -1
  24. package/prebuilt-themes/default/color-picker.css +105 -103
  25. package/prebuilt-themes/default/color-picker.css.map +1 -1
  26. package/prebuilt-themes/default/core.css +108 -106
  27. package/prebuilt-themes/default/core.css.map +1 -1
  28. package/prebuilt-themes/default/dialog.css +19 -20
  29. package/prebuilt-themes/default/dialog.css.map +1 -1
  30. package/prebuilt-themes/default/divider.css +84 -83
  31. package/prebuilt-themes/default/divider.css.map +1 -1
  32. package/prebuilt-themes/default/dropdown-panel.css +42 -42
  33. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  34. package/prebuilt-themes/default/file-drop-area.css +329 -329
  35. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  36. package/prebuilt-themes/default/form-field-frame.css +102 -102
  37. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  38. package/prebuilt-themes/default/form-field.css +148 -151
  39. package/prebuilt-themes/default/form-field.css.map +1 -1
  40. package/prebuilt-themes/default/inputs/autocomplete-input.css +183 -183
  41. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  42. package/prebuilt-themes/default/inputs/color-input.css +99 -98
  43. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  44. package/prebuilt-themes/default/inputs/date-input.css +134 -135
  45. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  46. package/prebuilt-themes/default/inputs/digit-input.css +120 -122
  47. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  48. package/prebuilt-themes/default/inputs/file-input.css +385 -387
  49. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  50. package/prebuilt-themes/default/inputs/hex-input.css +150 -149
  51. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  52. package/prebuilt-themes/default/inputs/input.css +137 -136
  53. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  54. package/prebuilt-themes/default/inputs/number-input.css +213 -214
  55. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  56. package/prebuilt-themes/default/inputs/password-input.css +120 -120
  57. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  58. package/prebuilt-themes/default/kbd-shortcut.css +14 -13
  59. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  60. package/prebuilt-themes/default/kbd.css +26 -25
  61. package/prebuilt-themes/default/kbd.css.map +1 -1
  62. package/prebuilt-themes/default/modal.css +96 -95
  63. package/prebuilt-themes/default/modal.css.map +1 -1
  64. package/prebuilt-themes/default/progress-bar.css +250 -235
  65. package/prebuilt-themes/default/progress-bar.css.map +1 -1
  66. package/prebuilt-themes/default/progress-circle.css +178 -177
  67. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  68. package/prebuilt-themes/default/radio.css +246 -248
  69. package/prebuilt-themes/default/radio.css.map +1 -1
  70. package/prebuilt-themes/default/segment.css +432 -431
  71. package/prebuilt-themes/default/segment.css.map +1 -1
  72. package/prebuilt-themes/default/select.css +302 -304
  73. package/prebuilt-themes/default/select.css.map +1 -1
  74. package/prebuilt-themes/default/slide-toggle.css +319 -319
  75. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  76. package/prebuilt-themes/default/slider.css +399 -399
  77. package/prebuilt-themes/default/slider.css.map +1 -1
  78. package/prebuilt-themes/default/snackbar.css +185 -185
  79. package/prebuilt-themes/default/snackbar.css.map +1 -1
  80. package/prebuilt-themes/default/spinner.css +161 -161
  81. package/prebuilt-themes/default/spinner.css.map +1 -1
  82. package/prebuilt-themes/default/stars.css +271 -275
  83. package/prebuilt-themes/default/stars.css.map +1 -1
  84. package/prebuilt-themes/default/tabber.css +250 -250
  85. package/prebuilt-themes/default/tabber.css.map +1 -1
  86. package/prebuilt-themes/default/table-pagination.css +57 -57
  87. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  88. package/prebuilt-themes/default/table.css +464 -463
  89. package/prebuilt-themes/default/table.css.map +1 -1
  90. package/themes/default/badge.scss +112 -110
  91. package/themes/default/buttons/button.scss +91 -89
  92. package/themes/default/buttons/fab.scss +80 -76
  93. package/themes/default/buttons/icon-button.scss +73 -71
  94. package/themes/default/calendar.scss +246 -242
  95. package/themes/default/card.scss +161 -159
  96. package/themes/default/checkbox-list.scss +85 -83
  97. package/themes/default/checkbox.scss +68 -66
  98. package/themes/default/chips.scss +202 -195
  99. package/themes/default/color-display.scss +40 -38
  100. package/themes/default/color-picker.scss +95 -93
  101. package/themes/default/core.scss +124 -121
  102. package/themes/default/dialog.scss +21 -19
  103. package/themes/default/divider.scss +92 -90
  104. package/themes/default/dropdown-panel.scss +49 -47
  105. package/themes/default/file-drop-area.scss +197 -195
  106. package/themes/default/form-field-frame.scss +69 -67
  107. package/themes/default/form-field.scss +135 -133
  108. package/themes/default/inputs/autocomplete-input.scss +99 -97
  109. package/themes/default/inputs/color-input.scss +34 -32
  110. package/themes/default/inputs/date-input.scss +88 -86
  111. package/themes/default/inputs/digit-input.scss +103 -101
  112. package/themes/default/inputs/file-input.scss +158 -156
  113. package/themes/default/inputs/hex-input.scss +66 -64
  114. package/themes/default/inputs/input.scss +52 -50
  115. package/themes/default/inputs/number-input.scss +162 -160
  116. package/themes/default/inputs/password-input.scss +99 -97
  117. package/themes/default/kbd-shortcut.scss +15 -13
  118. package/themes/default/kbd.scss +34 -32
  119. package/themes/default/modal.scss +106 -104
  120. package/themes/default/progress-bar.scss +126 -102
  121. package/themes/default/progress-circle.scss +50 -48
  122. package/themes/default/radio.scss +110 -108
  123. package/themes/default/segment.scss +282 -277
  124. package/themes/default/select.scss +255 -253
  125. package/themes/default/slide-toggle.scss +173 -171
  126. package/themes/default/slider.scss +223 -217
  127. package/themes/default/snackbar.scss +49 -47
  128. package/themes/default/spinner.scss +23 -21
  129. package/themes/default/stars.scss +95 -93
  130. package/themes/default/tabber.scss +105 -103
  131. package/themes/default/table-pagination.scss +60 -59
  132. package/themes/default/table.scss +375 -373
package/themes/default/slide-toggle.scss CHANGED
@@ -2,225 +2,227 @@
2
2
  @use './coloring' as coloringMixins;
3
3
  @use '../variables' as ARD;
4
4
 
5
- // the variables are commented out intentionally
6
- // read more in docs/dev/css-variables.md
7
- :root {
8
- --ard-slide-toggle-height: 1.25em;
9
- --ard-slide-toggle-hitbox-offset: -4px;
10
- --ard-slide-toggle-track-width: 2.25em;
11
- --ard-slide-toggle-track-height: 0.75em;
12
- --ard-slide-toggle-track-opacity: 20%;
13
- --ard-slide-toggle-track-selected-opacity: 40%;
14
- --ard-slide-toggle-track-selected-opacity-no-color: 35%;
15
- --ard-slide-toggle-handle-size: 1.25em;
16
- --ard-slide-toggle-handle-icon-size: 0.95em;
17
- --ard-slide-toggle-border-radius: 9999px;
18
- --ard-slide-toggle-transition-duration: 0.1s;
19
- --ard-slide-toggle-box-shadow-transition: 0.28s;
20
- --ard-slide-toggle-hover-overlay-opacity: 4%;
21
- --ard-slide-toggle-active-overlay-opacity: 12%;
22
- --ard-slide-toggle-contained-height: 1.5em;
23
- --ard-slide-toggle-contained-handle-size: 1.125em;
24
- --ard-slide-toggle-contained-handle-margin: 0.25em;
25
- --ard-slide-toggle-contained-border: 1px solid ARD.$detail-ultralight;
26
- --ard-slide-toggle-disabled-opacity: 60%;
27
- --ard-slide-toggle-disabled-track-opacity: 20%;
28
- --ard-slide-toggle-disabled-track-opacity-unselected: 12.5%;
29
- --ard-slide-toggle-disabled-overlay-opacity: 20%;
30
- --ard-slide-toggle-disabled-icon-opacity: 60%;
31
- }
32
-
33
- .ard-slide-toggle {
34
- @include coloringMixins.typeColors();
35
-
36
- position: relative;
37
- height: var(--ard-slide-toggle-height, 1.25em);
38
- font-size: inherit;
39
- cursor: pointer;
40
- user-select: none;
41
- border: none;
42
- background: none;
43
- border-radius: var(--ard-slide-toggle-border-radius, 9999px);
44
- padding: 0;
45
-
46
- //! hitbox
47
- .ard-hitbox {
48
- position: absolute;
49
- inset: var(--ard-slide-toggle-hitbox-offset, -4px);
5
+ @layer ard-theme {
6
+ // the variables are commented out intentionally
7
+ // read more in docs/dev/css-variables.md
8
+ :root {
9
+ --ard-slide-toggle-height: 1.25em;
10
+ --ard-slide-toggle-hitbox-offset: -4px;
11
+ --ard-slide-toggle-track-width: 2.25em;
12
+ --ard-slide-toggle-track-height: 0.75em;
13
+ --ard-slide-toggle-track-opacity: 20%;
14
+ --ard-slide-toggle-track-selected-opacity: 40%;
15
+ --ard-slide-toggle-track-selected-opacity-no-color: 35%;
16
+ --ard-slide-toggle-handle-size: 1.25em;
17
+ --ard-slide-toggle-handle-icon-size: 0.95em;
18
+ --ard-slide-toggle-border-radius: 9999px;
19
+ --ard-slide-toggle-transition-duration: 0.1s;
20
+ --ard-slide-toggle-box-shadow-transition: 0.28s;
21
+ --ard-slide-toggle-hover-overlay-opacity: 4%;
22
+ --ard-slide-toggle-active-overlay-opacity: 12%;
23
+ --ard-slide-toggle-contained-height: 1.5em;
24
+ --ard-slide-toggle-contained-handle-size: 1.125em;
25
+ --ard-slide-toggle-contained-handle-margin: 0.25em;
26
+ --ard-slide-toggle-contained-border: 1px solid ARD.$detail-ultralight;
27
+ --ard-slide-toggle-disabled-opacity: 60%;
28
+ --ard-slide-toggle-disabled-track-opacity: 20%;
29
+ --ard-slide-toggle-disabled-track-opacity-unselected: 12.5%;
30
+ --ard-slide-toggle-disabled-overlay-opacity: 20%;
31
+ --ard-slide-toggle-disabled-icon-opacity: 60%;
50
32
  }
51
33
 
52
- //! track
53
- .ard-slide-toggle-track {
54
- position: relative;
55
- width: var(--ard-slide-toggle-track-width, 2.25em);
56
- height: var(--ard-slide-toggle-track-height, 0.75em);
57
- font-size: inherit;
58
- border-radius: var(--ard-slide-toggle-border-radius, 9999px);
59
- overflow: hidden;
60
- background: ARD.$bg;
61
-
62
- .ard-slide-toggle-track-overlay {
63
- position: absolute;
64
- inset: 0;
65
- background: ARD.$overlay;
66
- opacity: var(--ard-slide-toggle-track-opacity, 20%);
67
- transition: opacity var(--ard-slide-toggle-transition-duration, 0.1s) ease;
68
- }
69
- }
34
+ .ard-slide-toggle {
35
+ @include coloringMixins.typeColors();
70
36
 
71
- //! handle
72
- .ard-slide-toggle-handle {
73
- width: var(--ard-slide-toggle-handle-size, 1.25em);
74
- height: var(--ard-slide-toggle-handle-size, 1.25em);
37
+ position: relative;
38
+ height: var(--ard-slide-toggle-height, 1.25em);
75
39
  font-size: inherit;
40
+ cursor: pointer;
41
+ user-select: none;
42
+ border: none;
43
+ background: none;
76
44
  border-radius: var(--ard-slide-toggle-border-radius, 9999px);
77
- background: ARD.$bg-f;
78
- position: absolute;
79
- top: 0;
80
- left: 0;
81
- box-shadow: ARD.$simple-shadow;
82
- overflow: hidden;
83
- transition:
84
- box-shadow var(--ard-slide-toggle-box-shadow-transition, 0.28s) ARD.$timing-fn,
85
- left var(--ard-slide-toggle-transition-duration, 0.1s) ease,
86
- background-color var(--ard-slide-toggle-transition-duration, 0.1s) ease,
87
- transform var(--ard-slide-toggle-transition-duration, 0.1s) ease;
45
+ padding: 0;
88
46
 
89
- .ard-focus-overlay {
90
- @include defaultMixins.focus-overlay;
91
- background: var(--ard-cmpcl--overlay-colored);
92
- }
93
-
94
- .ard-slide-toggle-icon {
95
- @include defaultMixins.icon(0, 600);
96
- font-size: var(--ard-slide-toggle-handle-icon-size, 0.95em);
97
- color: ARD.$text;
47
+ //! hitbox
48
+ .ard-hitbox {
98
49
  position: absolute;
99
- left: 50%;
100
- top: 50%;
101
- transform: translate(-50%, -50%);
102
- transition: color var(--ard-slide-toggle-transition-duration, 0.1s) ease;
103
-
104
- &.ard-icon-for-selected {
105
- display: none;
106
- }
50
+ inset: var(--ard-slide-toggle-hitbox-offset, -4px);
107
51
  }
108
- }
109
52
 
110
- //! interaction states
111
- &:hover,
112
- &:focus {
113
- .ard-slide-toggle-handle {
114
- box-shadow: ARD.$simple-shadow2;
53
+ //! track
54
+ .ard-slide-toggle-track {
55
+ position: relative;
56
+ width: var(--ard-slide-toggle-track-width, 2.25em);
57
+ height: var(--ard-slide-toggle-track-height, 0.75em);
58
+ font-size: inherit;
59
+ border-radius: var(--ard-slide-toggle-border-radius, 9999px);
60
+ overflow: hidden;
61
+ background: ARD.$bg;
115
62
 
116
- .ard-focus-overlay {
117
- opacity: var(--ard-slide-toggle-hover-overlay-opacity, 4%);
63
+ .ard-slide-toggle-track-overlay {
64
+ position: absolute;
65
+ inset: 0;
66
+ background: ARD.$overlay;
67
+ opacity: var(--ard-slide-toggle-track-opacity, 20%);
68
+ transition: opacity var(--ard-slide-toggle-transition-duration, 0.1s) ease;
118
69
  }
119
70
  }
120
- }
121
71
 
122
- &:active {
72
+ //! handle
123
73
  .ard-slide-toggle-handle {
124
- box-shadow: ARD.$simple-shadow3;
74
+ width: var(--ard-slide-toggle-handle-size, 1.25em);
75
+ height: var(--ard-slide-toggle-handle-size, 1.25em);
76
+ font-size: inherit;
77
+ border-radius: var(--ard-slide-toggle-border-radius, 9999px);
78
+ background: ARD.$bg-f;
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
82
+ box-shadow: ARD.$simple-shadow;
83
+ overflow: hidden;
84
+ transition:
85
+ box-shadow var(--ard-slide-toggle-box-shadow-transition, 0.28s) ARD.$timing-fn,
86
+ left var(--ard-slide-toggle-transition-duration, 0.1s) ease,
87
+ background-color var(--ard-slide-toggle-transition-duration, 0.1s) ease,
88
+ transform var(--ard-slide-toggle-transition-duration, 0.1s) ease;
125
89
 
126
90
  .ard-focus-overlay {
127
- opacity: var(--ard-slide-toggle-active-overlay-opacity, 12%);
91
+ @include defaultMixins.focus-overlay;
92
+ background: var(--ard-cmpcl--overlay-colored);
128
93
  }
129
- }
130
- }
131
-
132
- //! selected state
133
- &.ard-slide-toggle-selected {
134
- .ard-slide-toggle-track-overlay {
135
- background: var(--ard-cmpcl--content);
136
- opacity: var(--ard-slide-toggle-track-selected-opacity, 40%);
137
- }
138
-
139
- .ard-slide-toggle-handle {
140
- left: 100%;
141
- transform: translateX(-100%);
142
- background: var(--ard-cmpcl--bg);
143
94
 
144
95
  .ard-slide-toggle-icon {
145
- color: var(--ard-cmpcl--on-bg);
96
+ @include defaultMixins.icon(0, 600);
97
+ font-size: var(--ard-slide-toggle-handle-icon-size, 0.95em);
98
+ color: ARD.$text;
99
+ position: absolute;
100
+ left: 50%;
101
+ top: 50%;
102
+ transform: translate(-50%, -50%);
103
+ transition: color var(--ard-slide-toggle-transition-duration, 0.1s) ease;
146
104
 
147
105
  &.ard-icon-for-selected {
148
- display: block;
149
- }
150
- &.ard-icon-for-unselected {
151
106
  display: none;
152
107
  }
153
108
  }
154
109
  }
155
110
 
156
- &.ard-color-none .ard-slide-toggle-track-overlay {
157
- opacity: var(--ard-slide-toggle-track-selected-opacity-no-color, 35%);
111
+ //! interaction states
112
+ &:hover,
113
+ &:focus {
114
+ .ard-slide-toggle-handle {
115
+ box-shadow: ARD.$simple-shadow2;
116
+
117
+ .ard-focus-overlay {
118
+ opacity: var(--ard-slide-toggle-hover-overlay-opacity, 4%);
119
+ }
120
+ }
158
121
  }
159
- }
160
122
 
161
- //! contained appearance
162
- &.ard-appearance-contained {
163
- height: var(--ard-slide-toggle-contained-height, 1.5em);
123
+ &:active {
124
+ .ard-slide-toggle-handle {
125
+ box-shadow: ARD.$simple-shadow3;
164
126
 
165
- .ard-slide-toggle-track {
166
- height: var(--ard-slide-toggle-contained-height, 1.5em);
167
- background: ARD.$bg-f;
168
- border: var(--ard-slide-toggle-contained-border, 1px solid ARD.$detail-ultralight);
169
- box-sizing: border-box;
127
+ .ard-focus-overlay {
128
+ opacity: var(--ard-slide-toggle-active-overlay-opacity, 12%);
129
+ }
130
+ }
131
+ }
170
132
 
133
+ //! selected state
134
+ &.ard-slide-toggle-selected {
171
135
  .ard-slide-toggle-track-overlay {
172
136
  background: var(--ard-cmpcl--content);
173
- opacity: 0;
137
+ opacity: var(--ard-slide-toggle-track-selected-opacity, 40%);
174
138
  }
175
- }
176
139
 
177
- .ard-slide-toggle-handle {
178
- width: var(--ard-slide-toggle-contained-handle-size, 1.125em);
179
- height: var(--ard-slide-toggle-contained-handle-size, 1.125em);
180
- background: ARD.$bg;
181
- border: var(--ard-slide-toggle-contained-border, 1px solid ARD.$detail-ultralight);
182
- box-shadow: none;
183
- box-sizing: border-box;
184
- top: 50%;
185
- margin: 0 var(--ard-slide-toggle-contained-handle-margin, 0.25em);
186
- transform: translateX(-1px) translateY(-50%);
140
+ .ard-slide-toggle-handle {
141
+ left: 100%;
142
+ transform: translateX(-100%);
143
+ background: var(--ard-cmpcl--bg);
144
+
145
+ .ard-slide-toggle-icon {
146
+ color: var(--ard-cmpcl--on-bg);
147
+
148
+ &.ard-icon-for-selected {
149
+ display: block;
150
+ }
151
+ &.ard-icon-for-unselected {
152
+ display: none;
153
+ }
154
+ }
155
+ }
156
+
157
+ &.ard-color-none .ard-slide-toggle-track-overlay {
158
+ opacity: var(--ard-slide-toggle-track-selected-opacity-no-color, 35%);
159
+ }
187
160
  }
188
161
 
189
- &.ard-slide-toggle-selected {
162
+ //! contained appearance
163
+ &.ard-appearance-contained {
164
+ height: var(--ard-slide-toggle-contained-height, 1.5em);
165
+
190
166
  .ard-slide-toggle-track {
191
- border-color: var(--ard-cmpcl--content);
167
+ height: var(--ard-slide-toggle-contained-height, 1.5em);
168
+ background: ARD.$bg-f;
169
+ border: var(--ard-slide-toggle-contained-border, 1px solid ARD.$detail-ultralight);
170
+ box-sizing: border-box;
171
+
172
+ .ard-slide-toggle-track-overlay {
173
+ background: var(--ard-cmpcl--content);
174
+ opacity: 0;
175
+ }
192
176
  }
193
177
 
194
- .ard-slide-toggle-track-overlay {
195
- opacity: 100%;
178
+ .ard-slide-toggle-handle {
179
+ width: var(--ard-slide-toggle-contained-handle-size, 1.125em);
180
+ height: var(--ard-slide-toggle-contained-handle-size, 1.125em);
181
+ background: ARD.$bg;
182
+ border: var(--ard-slide-toggle-contained-border, 1px solid ARD.$detail-ultralight);
183
+ box-shadow: none;
184
+ box-sizing: border-box;
185
+ top: 50%;
186
+ margin: 0 var(--ard-slide-toggle-contained-handle-margin, 0.25em);
187
+ transform: translateX(-1px) translateY(-50%);
196
188
  }
197
189
 
198
- .ard-slide-toggle-handle {
199
- transform: translateX(calc(-100% - var(--ard-slide-toggle-contained-handle-margin, 0.25em) * 2 + 1px)) translateY(-50%);
190
+ &.ard-slide-toggle-selected {
191
+ .ard-slide-toggle-track {
192
+ border-color: var(--ard-cmpcl--content);
193
+ }
194
+
195
+ .ard-slide-toggle-track-overlay {
196
+ opacity: 100%;
197
+ }
198
+
199
+ .ard-slide-toggle-handle {
200
+ transform: translateX(calc(-100% - var(--ard-slide-toggle-contained-handle-margin, 0.25em) * 2 + 1px)) translateY(-50%);
201
+ }
200
202
  }
201
203
  }
202
204
  }
203
- }
204
205
 
205
- //! disabled state
206
- .ard-disabled .ard-slide-toggle {
207
- pointer-events: none;
208
- opacity: var(--ard-slide-toggle-disabled-opacity, 60%);
206
+ //! disabled state
207
+ .ard-disabled .ard-slide-toggle {
208
+ pointer-events: none;
209
+ opacity: var(--ard-slide-toggle-disabled-opacity, 60%);
209
210
 
210
- .ard-slide-toggle-track-overlay {
211
- opacity: var(--ard-slide-toggle-disabled-track-opacity, 20%);
212
- }
211
+ .ard-slide-toggle-track-overlay {
212
+ opacity: var(--ard-slide-toggle-disabled-track-opacity, 20%);
213
+ }
213
214
 
214
- .ard-focus-overlay {
215
- opacity: var(--ard-slide-toggle-disabled-overlay-opacity, 20%);
216
- }
215
+ .ard-focus-overlay {
216
+ opacity: var(--ard-slide-toggle-disabled-overlay-opacity, 20%);
217
+ }
217
218
 
218
- .ard-slide-toggle-icon {
219
- opacity: var(--ard-slide-toggle-disabled-icon-opacity, 60%);
220
- }
219
+ .ard-slide-toggle-icon {
220
+ opacity: var(--ard-slide-toggle-disabled-icon-opacity, 60%);
221
+ }
221
222
 
222
- &:not(.ard-slide-toggle-selected) .ard-slide-toggle-track-overlay,
223
- &.ard-color-none .ard-slide-toggle-track-overlay {
224
- opacity: var(--ard-slide-toggle-disabled-track-opacity-unselected, 12.5%);
223
+ &:not(.ard-slide-toggle-selected) .ard-slide-toggle-track-overlay,
224
+ &.ard-color-none .ard-slide-toggle-track-overlay {
225
+ opacity: var(--ard-slide-toggle-disabled-track-opacity-unselected, 12.5%);
226
+ }
225
227
  }
226
228
  }