@likable-hair/svelte 3.0.17 → 3.0.18
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.
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
--button-default-text-hover-background-color: rgb(var(--global-color-primary-500), 0.2);
|
|
15
15
|
--button-default-active-background-color: rgb(var(--global-color-primary-500));
|
|
16
16
|
--button-default-focus-background-color: rgb(var(--global-color-primary-500));
|
|
17
|
+
--button-default-disabled-background-color: rgb(var(--global-color-primary-500), .6);
|
|
18
|
+
--button-default-disabled-color: rgb(var(--global-color-grey-50), .6);
|
|
17
19
|
--button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);
|
|
18
20
|
--button-default-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
|
|
19
21
|
--button-default-text-font-weight: 600;
|
|
@@ -38,6 +38,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
|
38
38
|
class:button-default={buttonType === "default"}
|
|
39
39
|
class:button-text={buttonType === "text"}
|
|
40
40
|
class:button-icon={buttonType === "icon"}
|
|
41
|
+
class:disabled={disabled}
|
|
41
42
|
on:click={handleClick}
|
|
42
43
|
on:keypress={handleKeyPress}
|
|
43
44
|
on:keydown={handleKeyDown}
|
|
@@ -163,7 +164,19 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
|
163
164
|
);
|
|
164
165
|
}
|
|
165
166
|
|
|
166
|
-
.button-default
|
|
167
|
+
.button-default.disabled {
|
|
168
|
+
cursor: not-allowed;
|
|
169
|
+
background-color: var(
|
|
170
|
+
--button-disabled-background-color,
|
|
171
|
+
var(--button-default-disabled-background-color)
|
|
172
|
+
);
|
|
173
|
+
color: var(
|
|
174
|
+
--button-disabled-color,
|
|
175
|
+
var(--button-default-disabled-color)
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.button-default:hover:not(.disabled) {
|
|
167
180
|
background-color: var(
|
|
168
181
|
--button-hover-background-color,
|
|
169
182
|
var(--button-default-hover-background-color)
|
|
@@ -174,14 +187,14 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
|
|
|
174
187
|
);
|
|
175
188
|
}
|
|
176
189
|
|
|
177
|
-
.button-default:active {
|
|
190
|
+
.button-default:active:not(.disabled) {
|
|
178
191
|
background-color: var(
|
|
179
192
|
--button-active-background-color,
|
|
180
193
|
var(--button-default-active-background-color)
|
|
181
194
|
);
|
|
182
195
|
}
|
|
183
196
|
|
|
184
|
-
.button-default:focus {
|
|
197
|
+
.button-default:focus:not(.disabled) {
|
|
185
198
|
background-color: var(
|
|
186
199
|
--button-focus-background-color,
|
|
187
200
|
var(--button-default-focus-background-color)
|