@geoffcox/sterling-svelte 0.0.7 → 0.0.8
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/buttons/Button.svelte.d.ts +1 -1
- package/buttons/{types.d.ts → Button.types.d.ts} +0 -0
- package/buttons/{types.js → Button.types.js} +0 -0
- package/display/Progress.svelte +172 -0
- package/display/Progress.svelte.d.ts +42 -0
- package/display/Progress.types.d.ts +1 -0
- package/display/Progress.types.js +1 -0
- package/index.d.ts +6 -3
- package/index.js +6 -3
- package/inputs/Slider.svelte +157 -77
- package/inputs/Slider.svelte.d.ts +3 -1
- package/package.json +5 -2
- package/theme/lightTheme.js +2 -2
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<script>export let value = 0;
|
|
2
|
+
export let max = 100;
|
|
3
|
+
export let percent = 0;
|
|
4
|
+
export let vertical = false;
|
|
5
|
+
export let colorful = "none";
|
|
6
|
+
export let disabled = false;
|
|
7
|
+
let clientHeight;
|
|
8
|
+
let clientWidth;
|
|
9
|
+
$:
|
|
10
|
+
clampMax = Math.max(1, max);
|
|
11
|
+
$:
|
|
12
|
+
clampValue = Math.max(0, Math.min(value, clampMax));
|
|
13
|
+
$:
|
|
14
|
+
ratio = clampValue / clampMax;
|
|
15
|
+
$: {
|
|
16
|
+
percent = Math.round(ratio * 100);
|
|
17
|
+
}
|
|
18
|
+
$:
|
|
19
|
+
percentHeight = clientHeight * ratio;
|
|
20
|
+
$:
|
|
21
|
+
percentWidth = clientWidth * ratio;
|
|
22
|
+
$:
|
|
23
|
+
indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
|
|
24
|
+
$:
|
|
25
|
+
indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "progress" : colorful;
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<!--
|
|
29
|
+
@component
|
|
30
|
+
An indicator of a value between 0 and a maximum value.ß
|
|
31
|
+
Does not use the HTML progress element.
|
|
32
|
+
-->
|
|
33
|
+
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
34
|
+
|
|
35
|
+
<div
|
|
36
|
+
class="sterling-progress"
|
|
37
|
+
class:disabled
|
|
38
|
+
class:vertical
|
|
39
|
+
on:click
|
|
40
|
+
on:dblclick
|
|
41
|
+
on:focus
|
|
42
|
+
on:blur
|
|
43
|
+
on:mousedown
|
|
44
|
+
on:mouseenter
|
|
45
|
+
on:mouseleave
|
|
46
|
+
on:mousemove
|
|
47
|
+
on:mouseover
|
|
48
|
+
on:mouseout
|
|
49
|
+
on:mouseup
|
|
50
|
+
on:wheel
|
|
51
|
+
{...$$restProps}
|
|
52
|
+
>
|
|
53
|
+
{#if $$slots.label}
|
|
54
|
+
<div class="label-content" class:disabled>
|
|
55
|
+
<slot name="label" />
|
|
56
|
+
</div>
|
|
57
|
+
{/if}
|
|
58
|
+
<div class="progress-bar">
|
|
59
|
+
<div class="container" bind:clientWidth bind:clientHeight>
|
|
60
|
+
<div
|
|
61
|
+
class="indicator"
|
|
62
|
+
class:progress={indicatorColor === 'progress'}
|
|
63
|
+
class:success={indicatorColor === 'success'}
|
|
64
|
+
class:warning={indicatorColor === 'warning'}
|
|
65
|
+
class:error={indicatorColor === 'error'}
|
|
66
|
+
style={indicatorStyle}
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<style>
|
|
73
|
+
.sterling-progress {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
align-content: flex-start;
|
|
77
|
+
align-items: flex-start;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.label-content {
|
|
81
|
+
font-size: 0.7em;
|
|
82
|
+
margin: 0.5em 0;
|
|
83
|
+
color: var(--Display__color--subtle);
|
|
84
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.progress-bar {
|
|
88
|
+
display: block;
|
|
89
|
+
background: var(--Common__background-color);
|
|
90
|
+
box-sizing: border-box;
|
|
91
|
+
height: 1em;
|
|
92
|
+
padding: 0.2em;
|
|
93
|
+
border-width: var(--Common__border-width);
|
|
94
|
+
border-style: var(--Common__border-style);
|
|
95
|
+
border-color: var(--Common__border-color);
|
|
96
|
+
border-radius: var(--Common__border-radius);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.container {
|
|
100
|
+
display: flex;
|
|
101
|
+
justify-content: flex-start;
|
|
102
|
+
width: 100%;
|
|
103
|
+
height: 100%;
|
|
104
|
+
min-width: 100px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.indicator {
|
|
108
|
+
background-color: var(--Display__color);
|
|
109
|
+
box-sizing: border-box;
|
|
110
|
+
height: 100%;
|
|
111
|
+
min-height: 1px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ----- Vertical ----- */
|
|
115
|
+
|
|
116
|
+
.sterling-progress.vertical {
|
|
117
|
+
align-items: center;
|
|
118
|
+
align-content: center;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.sterling-progress.vertical .progress-bar {
|
|
122
|
+
height: unset;
|
|
123
|
+
width: 1em;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.sterling-progress.vertical .container {
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
justify-content: flex-end;
|
|
129
|
+
min-width: unset;
|
|
130
|
+
min-height: 100px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.sterling-progress.vertical .indicator {
|
|
134
|
+
height: unset;
|
|
135
|
+
min-height: unset;
|
|
136
|
+
min-width: 1px;
|
|
137
|
+
width: 100%;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* ----- Colorful ----- */
|
|
141
|
+
|
|
142
|
+
.indicator.progress {
|
|
143
|
+
background-color: var(--Display__color--progress);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.indicator.success {
|
|
147
|
+
background-color: var(--Display__color--success);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.indicator.warning {
|
|
151
|
+
background-color: var(--Display__color--warning);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.indicator.error {
|
|
155
|
+
background-color: var(--Display__color--error);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* ----- Disabled ----- */
|
|
159
|
+
|
|
160
|
+
.label-content.disabled {
|
|
161
|
+
color: var(--Display__color--disabled);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.sterling-progress.disabled .progress-bar {
|
|
165
|
+
background: var(--Common__background-color--disabled);
|
|
166
|
+
border-color: var(--Common__border-color--disabled);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.sterling-progress.disabled .indicator {
|
|
170
|
+
background-color: var(--Display__color--disabled);
|
|
171
|
+
}
|
|
172
|
+
</style>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
import type { ProgressColorful } from './Progress.types';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
value?: number | undefined;
|
|
7
|
+
max?: number | undefined;
|
|
8
|
+
percent?: number | undefined;
|
|
9
|
+
vertical?: boolean | undefined;
|
|
10
|
+
colorful?: ProgressColorful | undefined;
|
|
11
|
+
disabled?: boolean | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
click: MouseEvent;
|
|
15
|
+
dblclick: MouseEvent;
|
|
16
|
+
focus: FocusEvent;
|
|
17
|
+
blur: FocusEvent;
|
|
18
|
+
mousedown: MouseEvent;
|
|
19
|
+
mouseenter: MouseEvent;
|
|
20
|
+
mouseleave: MouseEvent;
|
|
21
|
+
mousemove: MouseEvent;
|
|
22
|
+
mouseover: MouseEvent;
|
|
23
|
+
mouseout: MouseEvent;
|
|
24
|
+
mouseup: MouseEvent;
|
|
25
|
+
wheel: WheelEvent;
|
|
26
|
+
} & {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {
|
|
30
|
+
label: {};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export type ProgressProps = typeof __propDef.props;
|
|
34
|
+
export type ProgressEvents = typeof __propDef.events;
|
|
35
|
+
export type ProgressSlots = typeof __propDef.slots;
|
|
36
|
+
/**
|
|
37
|
+
* An indicator of a value between 0 and a maximum value.ß
|
|
38
|
+
* Does not use the HTML progress element.
|
|
39
|
+
*/
|
|
40
|
+
export default class Progress extends SvelteComponentTyped<ProgressProps, ProgressEvents, ProgressSlots> {
|
|
41
|
+
}
|
|
42
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type ProgressColorful = 'none' | 'auto' | 'progress' | 'success' | 'warning' | 'error';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/index.d.ts
CHANGED
|
@@ -6,12 +6,15 @@ export { darkTheme } from './theme/darkTheme';
|
|
|
6
6
|
export { lightTheme } from './theme/lightTheme';
|
|
7
7
|
export { neutrals } from './theme/colors';
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
|
-
export { type ButtonVariant, type ButtonShape } from './buttons/types';
|
|
9
|
+
export { type ButtonVariant, type ButtonShape } from './buttons/Button.types';
|
|
10
|
+
export { type ProgressColorful } from './display/Progress.types';
|
|
10
11
|
export { clickOutside } from './clickOutside';
|
|
11
12
|
import Button from './buttons/Button.svelte';
|
|
13
|
+
import Checkbox from './inputs/Checkbox.svelte';
|
|
12
14
|
import Input from './inputs/Input.svelte';
|
|
13
15
|
import List from './lists/List.svelte';
|
|
14
|
-
import
|
|
16
|
+
import Progress from './display/Progress.svelte';
|
|
15
17
|
import Radio from './inputs/Radio.svelte';
|
|
16
18
|
import Select from './inputs/Select.svelte';
|
|
17
|
-
|
|
19
|
+
import Slider from './inputs/Slider.svelte';
|
|
20
|
+
export { Button, Checkbox, Input, List, Progress, Radio, Select, Slider };
|
package/index.js
CHANGED
|
@@ -6,12 +6,15 @@ export { darkTheme } from './theme/darkTheme';
|
|
|
6
6
|
export { lightTheme } from './theme/lightTheme';
|
|
7
7
|
export { neutrals } from './theme/colors';
|
|
8
8
|
export { toggleDarkTheme } from './theme/toggleDarkTheme';
|
|
9
|
-
export {} from './buttons/types';
|
|
9
|
+
export {} from './buttons/Button.types';
|
|
10
|
+
export {} from './display/Progress.types';
|
|
10
11
|
export { clickOutside } from './clickOutside';
|
|
11
12
|
import Button from './buttons/Button.svelte';
|
|
13
|
+
import Checkbox from './inputs/Checkbox.svelte';
|
|
12
14
|
import Input from './inputs/Input.svelte';
|
|
13
15
|
import List from './lists/List.svelte';
|
|
14
|
-
import
|
|
16
|
+
import Progress from './display/Progress.svelte';
|
|
15
17
|
import Radio from './inputs/Radio.svelte';
|
|
16
18
|
import Select from './inputs/Select.svelte';
|
|
17
|
-
|
|
19
|
+
import Slider from './inputs/Slider.svelte';
|
|
20
|
+
export { Button, Checkbox, Input, List, Progress, Radio, Select, Slider };
|
package/inputs/Slider.svelte
CHANGED
|
@@ -121,64 +121,112 @@ const onKeyDown = (event) => {
|
|
|
121
121
|
<!-- @component
|
|
122
122
|
Slider lets the user chose a value within a min/max range by dragging a thumb button.
|
|
123
123
|
-->
|
|
124
|
-
|
|
125
|
-
class="sterling-slider"
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
124
|
+
{#if $$slots.label}
|
|
125
|
+
<label class="sterling-slider-label" class:vertical>
|
|
126
|
+
<div class="label-content" class:disabled>
|
|
127
|
+
<slot name="label" />
|
|
128
|
+
</div>
|
|
129
|
+
<div
|
|
130
|
+
class="sterling-slider labeled"
|
|
131
|
+
class:disabled
|
|
132
|
+
class:horizontal={!vertical}
|
|
133
|
+
class:vertical
|
|
134
|
+
role="slider"
|
|
135
|
+
aria-valuemin={0}
|
|
136
|
+
aria-valuenow={value}
|
|
137
|
+
aria-valuemax={max}
|
|
138
|
+
tabindex={!disabled ? 0 : undefined}
|
|
139
|
+
{...$$restProps}
|
|
140
|
+
on:keydown={onKeyDown}
|
|
141
|
+
on:pointerdown={onPointerDown}
|
|
142
|
+
on:pointermove={onPointerMove}
|
|
143
|
+
on:pointerup={onPointerUp}
|
|
144
|
+
>
|
|
145
|
+
<div
|
|
146
|
+
class="container"
|
|
147
|
+
bind:this={sliderRef}
|
|
148
|
+
bind:clientWidth={sliderWidth}
|
|
149
|
+
bind:clientHeight={sliderHeight}
|
|
150
|
+
>
|
|
151
|
+
<div class="track" />
|
|
152
|
+
<div
|
|
153
|
+
class="fill"
|
|
154
|
+
style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
|
|
155
|
+
/>
|
|
156
|
+
<div
|
|
157
|
+
class="thumb"
|
|
158
|
+
style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
|
|
159
|
+
/>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</label>
|
|
163
|
+
{:else}
|
|
136
164
|
<div
|
|
137
|
-
class="
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
165
|
+
class="sterling-slider"
|
|
166
|
+
class:disabled
|
|
167
|
+
class:horizontal={!vertical}
|
|
168
|
+
class:vertical
|
|
169
|
+
role="slider"
|
|
170
|
+
aria-valuemin={0}
|
|
171
|
+
aria-valuenow={value}
|
|
172
|
+
aria-valuemax={max}
|
|
173
|
+
tabindex={!disabled ? 0 : undefined}
|
|
174
|
+
{...$$restProps}
|
|
175
|
+
on:keydown={onKeyDown}
|
|
176
|
+
on:pointerdown={onPointerDown}
|
|
177
|
+
on:pointermove={onPointerMove}
|
|
178
|
+
on:pointerup={onPointerUp}
|
|
141
179
|
>
|
|
142
|
-
<div
|
|
143
|
-
|
|
144
|
-
|
|
180
|
+
<div
|
|
181
|
+
class="container"
|
|
182
|
+
bind:this={sliderRef}
|
|
183
|
+
bind:clientWidth={sliderWidth}
|
|
184
|
+
bind:clientHeight={sliderHeight}
|
|
185
|
+
>
|
|
186
|
+
<div class="track" />
|
|
187
|
+
<div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
|
|
188
|
+
<div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
|
|
189
|
+
</div>
|
|
145
190
|
</div>
|
|
146
|
-
|
|
191
|
+
{/if}
|
|
147
192
|
|
|
148
193
|
<style>
|
|
149
|
-
.sterling-slider {
|
|
150
|
-
box-sizing: border-box;
|
|
151
|
-
outline: none;
|
|
152
|
-
padding: 0;
|
|
153
|
-
overflow: visible;
|
|
194
|
+
.sterling-slider-label {
|
|
154
195
|
display: grid;
|
|
196
|
+
grid-template-columns: 1fr;
|
|
197
|
+
grid-template-rows: auto 1fr;
|
|
155
198
|
}
|
|
156
199
|
|
|
157
|
-
.sterling-slider.
|
|
158
|
-
|
|
200
|
+
.sterling-slider-label.vertical {
|
|
201
|
+
justify-items: center;
|
|
202
|
+
height: 100%;
|
|
159
203
|
}
|
|
160
204
|
|
|
161
|
-
.
|
|
162
|
-
|
|
205
|
+
.label-content {
|
|
206
|
+
font-size: 0.7em;
|
|
207
|
+
color: var(--Display__color--subtle);
|
|
208
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
163
209
|
}
|
|
164
210
|
|
|
165
|
-
.
|
|
166
|
-
|
|
167
|
-
outline-offset: var(--Common__outline-offset);
|
|
168
|
-
outline-style: var(--Common__outline-style);
|
|
169
|
-
outline-width: var(--Common__outline-width);
|
|
211
|
+
.label-content.disabled {
|
|
212
|
+
color: var(--Display__color--disabled);
|
|
170
213
|
}
|
|
171
214
|
|
|
172
|
-
.
|
|
173
|
-
|
|
215
|
+
.sterling-slider {
|
|
216
|
+
box-sizing: border-box;
|
|
217
|
+
outline: none;
|
|
218
|
+
padding: 0;
|
|
219
|
+
overflow: visible;
|
|
220
|
+
display: grid;
|
|
221
|
+
height: 100%;
|
|
174
222
|
}
|
|
175
223
|
|
|
176
|
-
.sterling-slider.
|
|
177
|
-
|
|
224
|
+
.sterling-slider.labeled {
|
|
225
|
+
height: unset;
|
|
178
226
|
}
|
|
179
227
|
|
|
180
|
-
.
|
|
181
|
-
|
|
228
|
+
.container {
|
|
229
|
+
position: relative;
|
|
182
230
|
}
|
|
183
231
|
|
|
184
232
|
.track {
|
|
@@ -186,48 +234,11 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
|
|
|
186
234
|
background: var(--Display__background-color);
|
|
187
235
|
}
|
|
188
236
|
|
|
189
|
-
.sterling-slider.horizontal .track {
|
|
190
|
-
left: 0;
|
|
191
|
-
right: 0;
|
|
192
|
-
top: 50%;
|
|
193
|
-
height: 3px;
|
|
194
|
-
transform: translate(0, -50%);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.sterling-slider.vertical .track {
|
|
198
|
-
bottom: 0;
|
|
199
|
-
left: 50%;
|
|
200
|
-
top: 0;
|
|
201
|
-
transform: translate(-50%, 0);
|
|
202
|
-
width: 3px;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.sterling-slider.disabled .track {
|
|
206
|
-
background: var(--Common__background-color--disabled);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
237
|
.fill {
|
|
210
238
|
background: var(--Display__color);
|
|
211
239
|
position: absolute;
|
|
212
240
|
}
|
|
213
241
|
|
|
214
|
-
.sterling-slider.horizontal .fill {
|
|
215
|
-
height: 3px;
|
|
216
|
-
top: 50%;
|
|
217
|
-
transform: translate(0, -50%);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.sterling-slider.vertical .fill {
|
|
221
|
-
bottom: 0;
|
|
222
|
-
left: 50%;
|
|
223
|
-
transform: translate(-50%, 0);
|
|
224
|
-
width: 3px;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.sterling-slider.disabled .fill {
|
|
228
|
-
background: var(--Common__color--disabled);
|
|
229
|
-
}
|
|
230
|
-
|
|
231
242
|
.thumb {
|
|
232
243
|
background-color: var(--Button__background-color);
|
|
233
244
|
border-color: var(--Button__border-color);
|
|
@@ -249,28 +260,97 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
|
|
|
249
260
|
width: 1.5em;
|
|
250
261
|
}
|
|
251
262
|
|
|
263
|
+
/* ----- horizontal ----- */
|
|
264
|
+
|
|
265
|
+
.sterling-slider.horizontal {
|
|
266
|
+
height: 2em;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.sterling-slider.horizontal .container {
|
|
270
|
+
margin: 0 0.75em;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.sterling-slider.horizontal .track {
|
|
274
|
+
left: 0;
|
|
275
|
+
right: 0;
|
|
276
|
+
top: 50%;
|
|
277
|
+
height: 3px;
|
|
278
|
+
transform: translate(0, -50%);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.sterling-slider.horizontal .fill {
|
|
282
|
+
height: 3px;
|
|
283
|
+
top: 50%;
|
|
284
|
+
transform: translate(0, -50%);
|
|
285
|
+
}
|
|
286
|
+
|
|
252
287
|
.sterling-slider.horizontal .thumb {
|
|
253
288
|
top: 50%;
|
|
254
289
|
transform: translate(-50%, -50%);
|
|
255
290
|
}
|
|
256
291
|
|
|
292
|
+
/* ----- vertical ----- */
|
|
293
|
+
|
|
294
|
+
.sterling-slider.vertical {
|
|
295
|
+
width: 2em;
|
|
296
|
+
}
|
|
297
|
+
.sterling-slider.vertical .container {
|
|
298
|
+
margin: 0.75em 0;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.sterling-slider.vertical .track {
|
|
302
|
+
bottom: 0;
|
|
303
|
+
left: 50%;
|
|
304
|
+
top: 0;
|
|
305
|
+
transform: translate(-50%, 0);
|
|
306
|
+
width: 3px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.sterling-slider.vertical .fill {
|
|
310
|
+
bottom: 0;
|
|
311
|
+
left: 50%;
|
|
312
|
+
transform: translate(-50%, 0);
|
|
313
|
+
width: 3px;
|
|
314
|
+
}
|
|
315
|
+
|
|
257
316
|
.sterling-slider.vertical .thumb {
|
|
258
317
|
left: 50%;
|
|
259
318
|
transform: translate(-50%, 50%);
|
|
260
319
|
}
|
|
261
320
|
|
|
321
|
+
/* ----- hover ----- */
|
|
322
|
+
|
|
262
323
|
.thumb:hover {
|
|
263
324
|
background-color: var(--Button__background-color--hover);
|
|
264
325
|
border-color: var(--Button__border-color--hover);
|
|
265
326
|
color: var(--Button__color--hover);
|
|
266
327
|
}
|
|
267
328
|
|
|
329
|
+
/* ----- active ----- */
|
|
330
|
+
|
|
268
331
|
.thumb:active {
|
|
269
332
|
background-color: var(--Button__background-color--active);
|
|
270
333
|
border-color: var(--Button__border-color--active);
|
|
271
334
|
color: var(--Button__color--active);
|
|
272
335
|
}
|
|
273
336
|
|
|
337
|
+
/* ----- focus ----- */
|
|
338
|
+
.sterling-slider:focus-visible {
|
|
339
|
+
outline-color: var(--Common__outline-color);
|
|
340
|
+
outline-offset: var(--Common__outline-offset);
|
|
341
|
+
outline-style: var(--Common__outline-style);
|
|
342
|
+
outline-width: var(--Common__outline-width);
|
|
343
|
+
}
|
|
344
|
+
/* ----- disabled ----- */
|
|
345
|
+
|
|
346
|
+
.sterling-slider.disabled .track {
|
|
347
|
+
background: var(--Common__background-color--disabled);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.sterling-slider.disabled .fill {
|
|
351
|
+
background: var(--Common__color--disabled);
|
|
352
|
+
}
|
|
353
|
+
|
|
274
354
|
.sterling-slider.disabled .thumb {
|
|
275
355
|
background-color: var(--Common__background-color--disabled);
|
|
276
356
|
border-color: var(--Common__border-color--disabled);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoffcox/sterling-svelte",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"devDependencies": {
|
|
5
5
|
"@fontsource/fira-mono": "^4.5.10",
|
|
6
6
|
"@fontsource/overpass": "^4.5.10",
|
|
@@ -28,13 +28,16 @@
|
|
|
28
28
|
"type": "module",
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@floating-ui/dom": "^1.1.0",
|
|
31
|
+
"lodash-es": "^4.17.21",
|
|
31
32
|
"uuid": "^9.0.0"
|
|
32
33
|
},
|
|
33
34
|
"exports": {
|
|
34
35
|
"./package.json": "./package.json",
|
|
35
36
|
"./buttons/Button.svelte": "./buttons/Button.svelte",
|
|
36
|
-
"./buttons/types": "./buttons/types.js",
|
|
37
|
+
"./buttons/Button.types": "./buttons/Button.types.js",
|
|
37
38
|
"./clickOutside": "./clickOutside.js",
|
|
39
|
+
"./display/Progress.svelte": "./display/Progress.svelte",
|
|
40
|
+
"./display/Progress.types": "./display/Progress.types.js",
|
|
38
41
|
".": "./index.js",
|
|
39
42
|
"./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
|
|
40
43
|
"./inputs/Input.svelte": "./inputs/Input.svelte",
|
package/theme/lightTheme.js
CHANGED
|
@@ -22,8 +22,8 @@ export const lightTheme = {
|
|
|
22
22
|
'--Common__outline-width': '2px',
|
|
23
23
|
// disabled
|
|
24
24
|
'--Common__background-color--disabled': neutrals.neutral96,
|
|
25
|
-
'--Common__border-color--disabled': neutrals.
|
|
26
|
-
'--Common__color--disabled': neutrals.
|
|
25
|
+
'--Common__border-color--disabled': neutrals.neutral75,
|
|
26
|
+
'--Common__color--disabled': neutrals.neutral75,
|
|
27
27
|
// ----- Layer ---- //
|
|
28
28
|
'--Layer__background-color--1': neutrals.neutral98,
|
|
29
29
|
'--Layer__color--1': neutrals.neutral15,
|