@gitlab/ui 96.0.0 → 96.1.0
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.
package/package.json
CHANGED
|
@@ -26,32 +26,6 @@ $toggle-height: 2.5 * $grid-size;
|
|
|
26
26
|
@apply gl-leading-normal;
|
|
27
27
|
@apply gl-font-normal;
|
|
28
28
|
@apply gl-inline-flex;
|
|
29
|
-
|
|
30
|
-
&.is-disabled {
|
|
31
|
-
@apply gl-cursor-not-allowed;
|
|
32
|
-
|
|
33
|
-
.gl-toggle {
|
|
34
|
-
@apply gl-cursor-not-allowed;
|
|
35
|
-
@apply gl-bg-gray-200;
|
|
36
|
-
|
|
37
|
-
.toggle-icon > svg {
|
|
38
|
-
@apply gl-fill-gray-200;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.gl-toggle.is-checked {
|
|
43
|
-
@apply gl-bg-blue-200;
|
|
44
|
-
|
|
45
|
-
.toggle-icon > svg {
|
|
46
|
-
@apply gl-fill-blue-200;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.gl-toggle-label,
|
|
51
|
-
.gl-description-label {
|
|
52
|
-
@apply gl-text-gray-500;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
29
|
}
|
|
56
30
|
|
|
57
31
|
.gl-description-label {
|
|
@@ -184,20 +158,20 @@ $toggle-height: 2.5 * $grid-size;
|
|
|
184
158
|
}
|
|
185
159
|
|
|
186
160
|
.toggle-icon {
|
|
187
|
-
transform: translateX($toggle-translate-width);
|
|
188
161
|
background-color: var(--gl-action-strong-confirm-foreground-color-default);
|
|
162
|
+
transform: translateX($toggle-translate-width);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
189
165
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
background-color: var(--gl-action-strong-confirm-foreground-color-focus);
|
|
196
|
-
}
|
|
166
|
+
&.is-disabled,
|
|
167
|
+
&.is-checked.is-disabled {
|
|
168
|
+
@apply gl-cursor-not-allowed;
|
|
169
|
+
color: var(--gl-action-disabled-background-color);
|
|
170
|
+
background-color: var(--gl-action-disabled-background-color);
|
|
197
171
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
172
|
+
.toggle-icon {
|
|
173
|
+
color: var(--gl-action-disabled-background-color);
|
|
174
|
+
background-color: var(--gl-action-disabled-foreground-color);
|
|
201
175
|
}
|
|
202
176
|
}
|
|
203
177
|
}
|
|
@@ -174,16 +174,15 @@ export default {
|
|
|
174
174
|
:aria-describedby="helpId"
|
|
175
175
|
:aria-disabled="disabled"
|
|
176
176
|
:class="{
|
|
177
|
-
'gl-toggle': true,
|
|
178
177
|
'is-checked': value,
|
|
179
|
-
'is-disabled': disabled,
|
|
178
|
+
'is-disabled': disabled || isLoading,
|
|
180
179
|
}"
|
|
181
|
-
class="gl-shrink-0"
|
|
180
|
+
class="gl-toggle gl-shrink-0"
|
|
182
181
|
type="button"
|
|
183
182
|
@click.prevent="toggleFeature"
|
|
184
183
|
>
|
|
185
|
-
<gl-loading-icon v-if="isLoading" color="
|
|
186
|
-
<span v-else
|
|
184
|
+
<gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
|
|
185
|
+
<span v-else class="toggle-icon">
|
|
187
186
|
<gl-icon :name="icon" :size="12" />
|
|
188
187
|
</span>
|
|
189
188
|
</button>
|