@hyvor/design 0.0.43 → 0.0.46
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/dist/components/ActionList/ActionListItem.svelte +11 -0
- package/dist/components/Button/Button.svelte +0 -1
- package/dist/components/Checkbox/Checkbox.svelte +19 -0
- package/dist/components/Checkbox/Checkbox.svelte.d.ts +1 -0
- package/dist/components/IconButton/IconButton.svelte +15 -19
- package/dist/components/IconButton/IconButton.svelte.d.ts +1 -1
- package/dist/components/IconMessage/IconMessage.svelte +3 -3
- package/dist/components/Tooltip/Tooltip.svelte +4 -1
- package/dist/index.css +7 -0
- package/package.json +1 -1
|
@@ -120,4 +120,15 @@ function handleClick() {
|
|
|
120
120
|
color: var(--text-light);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
+
div.action-list-item.disabled {
|
|
124
|
+
opacity: 0.5;
|
|
125
|
+
cursor: not-allowed;
|
|
126
|
+
pointer-events: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
div.action-list-item.disabled:hover {
|
|
130
|
+
background-color: transparent;
|
|
131
|
+
pointer-events: none;
|
|
132
|
+
}
|
|
133
|
+
|
|
123
134
|
</style>
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
<script>export let checked = void 0;
|
|
2
2
|
export let group = [];
|
|
3
3
|
export let value = "on";
|
|
4
|
+
export let disabled = false;
|
|
4
5
|
export let input = {};
|
|
5
6
|
function handleChange() {
|
|
7
|
+
if (disabled)
|
|
8
|
+
return;
|
|
6
9
|
const index = group.indexOf(value);
|
|
7
10
|
if (checked === void 0)
|
|
8
11
|
checked = index >= 0;
|
|
@@ -28,6 +31,7 @@ function handleChange() {
|
|
|
28
31
|
type="checkbox"
|
|
29
32
|
bind:checked
|
|
30
33
|
bind:this={input}
|
|
34
|
+
disabled={disabled}
|
|
31
35
|
|
|
32
36
|
on:keyup
|
|
33
37
|
on:keydown
|
|
@@ -127,4 +131,19 @@ function handleChange() {
|
|
|
127
131
|
input:checked ~ span.placeholder:after {
|
|
128
132
|
display:block;
|
|
129
133
|
}
|
|
134
|
+
|
|
135
|
+
/* disabled styles */
|
|
136
|
+
input:disabled ~ span.placeholder {
|
|
137
|
+
background-color: var(--accent-light);
|
|
138
|
+
border: none !important;
|
|
139
|
+
opacity: 0.2;
|
|
140
|
+
cursor: not-allowed;
|
|
141
|
+
box-shadow: none !important;
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
input:disabled:checked ~ span.placeholder:after {
|
|
146
|
+
display: none;
|
|
147
|
+
pointer-events: none;
|
|
148
|
+
}
|
|
130
149
|
</style>
|
|
@@ -61,45 +61,47 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
|
|
|
61
61
|
--local-hover-shadow-size: 3px;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
.button.fill {
|
|
65
|
+
transition: 0.2s box-shadow;
|
|
66
|
+
}
|
|
64
67
|
.button.fill.accent {
|
|
65
68
|
background-color: var(--accent);
|
|
66
69
|
color: var(--accent-text);
|
|
67
|
-
transition: 0.2s box-shadow;
|
|
68
70
|
--local-hover-shadow-color: var(--accent-light);
|
|
69
71
|
}
|
|
70
72
|
.button.fill.gray {
|
|
71
73
|
background-color: var(--gray-dark);
|
|
72
74
|
color: var(--text-white);
|
|
73
|
-
|
|
75
|
+
--local-hover-shadow-color: var(--gray-light);
|
|
76
|
+
}
|
|
77
|
+
.button.fill.input {
|
|
78
|
+
background-color: var(--input);
|
|
79
|
+
color: var(--text);
|
|
74
80
|
--local-hover-shadow-color: var(--gray-light);
|
|
75
81
|
}
|
|
76
82
|
.button.fill.green {
|
|
77
83
|
background-color: var(--green-dark);
|
|
78
84
|
color: var(--text-white);
|
|
79
|
-
transition: 0.2s box-shadow;
|
|
80
85
|
--local-hover-shadow-color: var(--green-light);
|
|
81
86
|
}
|
|
82
87
|
.button.fill.red {
|
|
83
88
|
background-color: var(--red-dark);
|
|
84
89
|
color: var(--text-white);
|
|
85
|
-
transition: 0.2s box-shadow;
|
|
86
90
|
--local-hover-shadow-color: var(--red-light);
|
|
87
91
|
}
|
|
88
92
|
.button.fill.blue {
|
|
89
93
|
background-color: var(--blue-dark);
|
|
90
94
|
color: var(--text-white);
|
|
91
|
-
transition: 0.2s box-shadow;
|
|
92
95
|
--local-hover-shadow-color: var(--blue-light);
|
|
93
96
|
}
|
|
94
97
|
.button.fill.orange {
|
|
95
98
|
background-color: var(--orange-dark);
|
|
96
99
|
color: var(--text-white);
|
|
97
|
-
transition: 0.2s box-shadow;
|
|
98
100
|
--local-hover-shadow-color: var(--orange-light);
|
|
99
101
|
}
|
|
100
102
|
.button.fill-light.accent {
|
|
101
|
-
background-color: var(--accent);
|
|
102
|
-
color: var(--accent
|
|
103
|
+
background-color: var(--accent-light);
|
|
104
|
+
color: var(--accent);
|
|
103
105
|
--local-hover-shadow-color: var(--accent-light);
|
|
104
106
|
}
|
|
105
107
|
.button.fill-light.gray {
|
|
@@ -136,31 +138,26 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
|
|
|
136
138
|
--local-hover-shadow-color: var(--accent-light);
|
|
137
139
|
}
|
|
138
140
|
.button.outline.gray {
|
|
139
|
-
background-color: none;
|
|
140
141
|
border-color: var(--gray-dark);
|
|
141
142
|
color: var(--gray-dark);
|
|
142
143
|
--local-hover-shadow-color: var(--gray-light);
|
|
143
144
|
}
|
|
144
145
|
.button.outline.green {
|
|
145
|
-
background-color: none;
|
|
146
146
|
border-color: var(--green-dark);
|
|
147
147
|
color: var(--green-dark);
|
|
148
148
|
--local-hover-shadow-color: var(--green-light);
|
|
149
149
|
}
|
|
150
150
|
.button.outline.red {
|
|
151
|
-
background-color: none;
|
|
152
151
|
border-color: var(--red-dark);
|
|
153
152
|
color: var(--red-dark);
|
|
154
153
|
--local-hover-shadow-color: var(--red-light);
|
|
155
154
|
}
|
|
156
155
|
.button.outline.blue {
|
|
157
|
-
background-color: none;
|
|
158
156
|
border-color: var(--blue-dark);
|
|
159
157
|
color: var(--blue-dark);
|
|
160
158
|
--local-hover-shadow-color: var(--blue-light);
|
|
161
159
|
}
|
|
162
160
|
.button.outline.orange {
|
|
163
|
-
background-color: none;
|
|
164
161
|
border-color: var(--orange-dark);
|
|
165
162
|
color: var(--orange-dark);
|
|
166
163
|
--local-hover-shadow-color: var(--orange-light);
|
|
@@ -207,35 +204,34 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
|
|
|
207
204
|
.button.invisible {
|
|
208
205
|
background-color: transparent;
|
|
209
206
|
transition: 0.2s background-color;
|
|
207
|
+
box-shadow: none !important;
|
|
210
208
|
}
|
|
211
209
|
.button.invisible.accent:hover {
|
|
212
210
|
background-color: var(--accent-light);
|
|
213
|
-
box-shadow: none !important;
|
|
214
211
|
color: var(--text-light);
|
|
215
212
|
}
|
|
216
213
|
.button.invisible.gray:hover {
|
|
217
214
|
background-color: var(--gray-light);
|
|
218
|
-
box-shadow: none !important;
|
|
219
215
|
color: var(--gray-dark);
|
|
220
216
|
}
|
|
217
|
+
.button.invisible.input:hover {
|
|
218
|
+
background-color: var(--input);
|
|
219
|
+
color: var(--text);
|
|
220
|
+
}
|
|
221
221
|
.button.invisible.green:hover {
|
|
222
222
|
background-color: var(--green-light);
|
|
223
|
-
box-shadow: none !important;
|
|
224
223
|
color: var(--green-dark);
|
|
225
224
|
}
|
|
226
225
|
.button.invisible.red:hover {
|
|
227
226
|
background-color: var(--red-light);
|
|
228
|
-
box-shadow: none !important;
|
|
229
227
|
color: var(--red-dark);
|
|
230
228
|
}
|
|
231
229
|
.button.invisible.blue:hover {
|
|
232
230
|
background-color: var(--blue-light);
|
|
233
|
-
box-shadow: none !important;
|
|
234
231
|
color: var(--blue-dark);
|
|
235
232
|
}
|
|
236
233
|
.button.invisible.orange:hover {
|
|
237
234
|
background-color: var(--orange-light);
|
|
238
|
-
box-shadow: none !important;
|
|
239
235
|
color: var(--orange-dark);
|
|
240
236
|
}
|
|
241
237
|
|
|
@@ -3,7 +3,7 @@ declare const __propDef: {
|
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
size?: number | "small" | "medium" | "large" | undefined;
|
|
6
|
-
color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
|
|
6
|
+
color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
|
|
7
7
|
variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
|
|
8
8
|
as?: "button" | "a" | undefined;
|
|
9
9
|
};
|
|
@@ -35,13 +35,13 @@ iconColor = iconColor || "var(--gray-dark)";
|
|
|
35
35
|
{/if}
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<
|
|
38
|
+
<div class="message">
|
|
39
39
|
{#if $$slots.message}
|
|
40
40
|
<slot name="message" />
|
|
41
41
|
{:else if message}
|
|
42
42
|
{message}
|
|
43
43
|
{/if}
|
|
44
|
-
</
|
|
44
|
+
</div>
|
|
45
45
|
|
|
46
46
|
</div>
|
|
47
47
|
|
|
@@ -62,7 +62,7 @@ iconColor = iconColor || "var(--gray-dark)";
|
|
|
62
62
|
.message {
|
|
63
63
|
/* Add message styles here */
|
|
64
64
|
color: var(--text-light);
|
|
65
|
-
margin-top:
|
|
65
|
+
margin-top: 15px;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.icon {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script>import { tick, onMount, onDestroy } from "svelte";
|
|
2
|
+
import { fade } from "svelte/transition";
|
|
2
3
|
export let text = "";
|
|
3
4
|
export let position = "top";
|
|
4
5
|
export let color = "black";
|
|
@@ -69,6 +70,7 @@ onMount(() => {
|
|
|
69
70
|
class="tooltip {position}"
|
|
70
71
|
style:max-width={maxWidth + 'px'}
|
|
71
72
|
bind:this={tooltip}
|
|
73
|
+
transition:fade={{duration: 100}}
|
|
72
74
|
>
|
|
73
75
|
{#if $$slots.tooltip}
|
|
74
76
|
<slot name="tooltip" />
|
|
@@ -81,7 +83,8 @@ onMount(() => {
|
|
|
81
83
|
|
|
82
84
|
<style>
|
|
83
85
|
.tooltip-wrap {
|
|
84
|
-
display: inline;
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
85
88
|
position: relative;
|
|
86
89
|
|
|
87
90
|
--local-bg: #24292f;
|
package/dist/index.css
CHANGED