@geoffcox/sterling-svelte 0.0.9 → 0.0.10
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/display/Label.svelte +27 -0
- package/display/Label.svelte.d.ts +20 -0
- package/display/Progress.svelte +141 -143
- package/index.d.ts +2 -1
- package/index.js +2 -1
- package/inputs/Checkbox.svelte +129 -125
- package/inputs/Input.svelte +108 -150
- package/inputs/Radio.svelte +129 -121
- package/inputs/Select.svelte +190 -195
- package/inputs/Slider.svelte +40 -74
- package/lists/List.svelte +143 -223
- package/package.json +3 -1
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script>export let disabled = false;
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<label class="sterling-label" class:disabled {...$$restProps}>
|
|
5
|
+
<slot />
|
|
6
|
+
</label>
|
|
7
|
+
|
|
8
|
+
<!--
|
|
9
|
+
@component
|
|
10
|
+
A styled HTML label element
|
|
11
|
+
-->
|
|
12
|
+
<style>
|
|
13
|
+
label {
|
|
14
|
+
transition: opacity 250ms;
|
|
15
|
+
font: inherit;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
label.disabled {
|
|
19
|
+
opacity: 0.5;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@media (prefers-reduced-motion) {
|
|
23
|
+
label {
|
|
24
|
+
transition: none;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
disabled?: boolean | undefined;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {
|
|
11
|
+
default: {};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export type LabelProps = typeof __propDef.props;
|
|
15
|
+
export type LabelEvents = typeof __propDef.events;
|
|
16
|
+
export type LabelSlots = typeof __propDef.slots;
|
|
17
|
+
/** A styled HTML label element */
|
|
18
|
+
export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
package/display/Progress.svelte
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import { v4 as uuid } from "uuid";
|
|
2
|
+
import Label from "../display/Label.svelte";
|
|
3
|
+
export let value = 0;
|
|
2
4
|
export let max = 100;
|
|
3
5
|
export let percent = 0;
|
|
4
6
|
export let vertical = false;
|
|
5
7
|
export let colorful = "none";
|
|
6
8
|
export let disabled = false;
|
|
9
|
+
const inputId = uuid();
|
|
7
10
|
let clientHeight;
|
|
8
11
|
let clientWidth;
|
|
9
12
|
$:
|
|
@@ -33,150 +36,145 @@ $:
|
|
|
33
36
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
34
37
|
|
|
35
38
|
<div
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
39
|
+
class="sterling-progress"
|
|
40
|
+
class:disabled
|
|
41
|
+
class:vertical
|
|
42
|
+
on:click
|
|
43
|
+
on:dblclick
|
|
44
|
+
on:focus
|
|
45
|
+
on:blur
|
|
46
|
+
on:mousedown
|
|
47
|
+
on:mouseenter
|
|
48
|
+
on:mouseleave
|
|
49
|
+
on:mousemove
|
|
50
|
+
on:mouseover
|
|
51
|
+
on:mouseout
|
|
52
|
+
on:mouseup
|
|
53
|
+
on:wheel
|
|
54
|
+
{...$$restProps}
|
|
52
55
|
>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
56
|
+
{#if $$slots.label}
|
|
57
|
+
<div class="label">
|
|
58
|
+
<Label {disabled} for={inputId}>
|
|
59
|
+
<slot name="label" />
|
|
60
|
+
</Label>
|
|
61
|
+
</div>
|
|
62
|
+
{/if}
|
|
63
|
+
<div class="progress-bar" id={inputId}>
|
|
64
|
+
<div class="container" bind:clientWidth bind:clientHeight>
|
|
65
|
+
<div
|
|
66
|
+
class="indicator"
|
|
67
|
+
class:progress={indicatorColor === 'progress'}
|
|
68
|
+
class:success={indicatorColor === 'success'}
|
|
69
|
+
class:warning={indicatorColor === 'warning'}
|
|
70
|
+
class:error={indicatorColor === 'error'}
|
|
71
|
+
style={indicatorStyle}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
70
75
|
</div>
|
|
71
76
|
|
|
72
77
|
<style>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
@media (prefers-reduced-motion) {
|
|
176
|
-
.progress-bar,
|
|
177
|
-
.indicator,
|
|
178
|
-
.label-content {
|
|
179
|
-
transition: none;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
78
|
+
.sterling-progress {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
align-content: flex-start;
|
|
82
|
+
align-items: flex-start;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.label {
|
|
86
|
+
font-size: 0.7em;
|
|
87
|
+
margin: 0.5em 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.progress-bar {
|
|
91
|
+
display: block;
|
|
92
|
+
background: var(--Common__background-color);
|
|
93
|
+
box-sizing: border-box;
|
|
94
|
+
height: 1em;
|
|
95
|
+
padding: 0.2em;
|
|
96
|
+
border-width: var(--Common__border-width);
|
|
97
|
+
border-style: var(--Common__border-style);
|
|
98
|
+
border-color: var(--Common__border-color);
|
|
99
|
+
border-radius: var(--Common__border-radius);
|
|
100
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.container {
|
|
104
|
+
display: flex;
|
|
105
|
+
justify-content: flex-start;
|
|
106
|
+
width: 100%;
|
|
107
|
+
height: 100%;
|
|
108
|
+
min-width: 100px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.indicator {
|
|
112
|
+
background-color: var(--Display__color);
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
height: 100%;
|
|
115
|
+
min-height: 1px;
|
|
116
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ----- Vertical ----- */
|
|
120
|
+
|
|
121
|
+
.sterling-progress.vertical {
|
|
122
|
+
align-items: center;
|
|
123
|
+
align-content: center;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.sterling-progress.vertical .progress-bar {
|
|
127
|
+
height: unset;
|
|
128
|
+
width: 1em;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.sterling-progress.vertical .container {
|
|
132
|
+
flex-direction: column;
|
|
133
|
+
justify-content: flex-end;
|
|
134
|
+
min-width: unset;
|
|
135
|
+
min-height: 100px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.sterling-progress.vertical .indicator {
|
|
139
|
+
height: unset;
|
|
140
|
+
min-height: unset;
|
|
141
|
+
min-width: 1px;
|
|
142
|
+
width: 100%;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ----- Colorful ----- */
|
|
146
|
+
|
|
147
|
+
.indicator.progress {
|
|
148
|
+
background-color: var(--Display__color--progress);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.indicator.success {
|
|
152
|
+
background-color: var(--Display__color--success);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.indicator.warning {
|
|
156
|
+
background-color: var(--Display__color--warning);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.indicator.error {
|
|
160
|
+
background-color: var(--Display__color--error);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ----- Disabled ----- */
|
|
164
|
+
|
|
165
|
+
.sterling-progress.disabled .progress-bar {
|
|
166
|
+
background: var(--Common__background-color--disabled);
|
|
167
|
+
border-color: var(--Common__border-color--disabled);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.sterling-progress.disabled .indicator {
|
|
171
|
+
background-color: var(--Display__color--disabled);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@media (prefers-reduced-motion) {
|
|
175
|
+
.progress-bar,
|
|
176
|
+
.indicator {
|
|
177
|
+
transition: none;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
182
180
|
</style>
|
package/index.d.ts
CHANGED
|
@@ -13,9 +13,10 @@ import Button from './buttons/Button.svelte';
|
|
|
13
13
|
import Checkbox from './inputs/Checkbox.svelte';
|
|
14
14
|
import Dialog from './surfaces/Dialog.svelte';
|
|
15
15
|
import Input from './inputs/Input.svelte';
|
|
16
|
+
import Label from './display/Label.svelte';
|
|
16
17
|
import List from './lists/List.svelte';
|
|
17
18
|
import Progress from './display/Progress.svelte';
|
|
18
19
|
import Radio from './inputs/Radio.svelte';
|
|
19
20
|
import Select from './inputs/Select.svelte';
|
|
20
21
|
import Slider from './inputs/Slider.svelte';
|
|
21
|
-
export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };
|
|
22
|
+
export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider };
|
package/index.js
CHANGED
|
@@ -13,9 +13,10 @@ import Button from './buttons/Button.svelte';
|
|
|
13
13
|
import Checkbox from './inputs/Checkbox.svelte';
|
|
14
14
|
import Dialog from './surfaces/Dialog.svelte';
|
|
15
15
|
import Input from './inputs/Input.svelte';
|
|
16
|
+
import Label from './display/Label.svelte';
|
|
16
17
|
import List from './lists/List.svelte';
|
|
17
18
|
import Progress from './display/Progress.svelte';
|
|
18
19
|
import Radio from './inputs/Radio.svelte';
|
|
19
20
|
import Select from './inputs/Select.svelte';
|
|
20
21
|
import Slider from './inputs/Slider.svelte';
|
|
21
|
-
export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };
|
|
22
|
+
export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider };
|
package/inputs/Checkbox.svelte
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import { v4 as uuid } from "uuid";
|
|
2
|
+
import Label from "../display/Label.svelte";
|
|
3
|
+
export let checked = false;
|
|
2
4
|
export let disabled = false;
|
|
5
|
+
const inputId = uuid();
|
|
3
6
|
</script>
|
|
4
7
|
|
|
5
8
|
<!--
|
|
@@ -7,153 +10,154 @@ export let disabled = false;
|
|
|
7
10
|
A styled HTML input type=checkbox element.
|
|
8
11
|
-->
|
|
9
12
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
13
|
+
<div class="sterling-checkbox">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<input
|
|
16
|
+
type="checkbox"
|
|
17
|
+
on:blur
|
|
18
|
+
on:click
|
|
19
|
+
on:change
|
|
20
|
+
on:dblclick
|
|
21
|
+
on:focus
|
|
22
|
+
on:focusin
|
|
23
|
+
on:focusout
|
|
24
|
+
on:keydown
|
|
25
|
+
on:keypress
|
|
26
|
+
on:keyup
|
|
27
|
+
on:input
|
|
28
|
+
on:mousedown
|
|
29
|
+
on:mouseenter
|
|
30
|
+
on:mouseleave
|
|
31
|
+
on:mousemove
|
|
32
|
+
on:mouseover
|
|
33
|
+
on:mouseout
|
|
34
|
+
on:mouseup
|
|
35
|
+
on:toggle
|
|
36
|
+
on:wheel
|
|
37
|
+
bind:checked
|
|
38
|
+
{...$$restProps}
|
|
39
|
+
id={inputId}
|
|
40
|
+
{disabled}
|
|
41
|
+
/>
|
|
42
|
+
<div class="indicator" />
|
|
43
|
+
</div>
|
|
44
|
+
{#if $$slots.label}
|
|
45
|
+
<div class="label">
|
|
46
|
+
<Label {disabled} for={inputId}>
|
|
47
|
+
<slot name="label" />
|
|
48
|
+
</Label>
|
|
49
|
+
</div>
|
|
50
|
+
{/if}
|
|
51
|
+
</div>
|
|
44
52
|
|
|
45
53
|
<style>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
.sterling-checkbox {
|
|
55
|
+
display: inline-flex;
|
|
56
|
+
align-content: stretch;
|
|
57
|
+
align-items: stretch;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
font: inherit;
|
|
60
|
+
gap: 0.4em;
|
|
61
|
+
outline: none;
|
|
62
|
+
padding: 0;
|
|
63
|
+
margin: 0;
|
|
64
|
+
}
|
|
57
65
|
|
|
58
|
-
|
|
66
|
+
/*
|
|
59
67
|
The container
|
|
60
68
|
- allows the input to be hidden
|
|
61
69
|
- avoids input participating in layout
|
|
62
70
|
- prevents collisions with surrounding slots
|
|
63
71
|
*/
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
72
|
+
.container {
|
|
73
|
+
font: inherit;
|
|
74
|
+
position: relative;
|
|
75
|
+
display: grid;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
70
78
|
|
|
71
|
-
|
|
79
|
+
/*
|
|
72
80
|
The input is hidden since the built-in browser checkbox cannot be customized
|
|
73
81
|
*/
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
82
|
+
input {
|
|
83
|
+
font: inherit;
|
|
84
|
+
margin: 0;
|
|
85
|
+
padding: 0;
|
|
86
|
+
position: absolute;
|
|
87
|
+
opacity: 0;
|
|
88
|
+
height: 20px;
|
|
89
|
+
width: 20px;
|
|
90
|
+
}
|
|
81
91
|
|
|
82
|
-
|
|
92
|
+
/*
|
|
83
93
|
The indicator handles both the box and the checkmark.
|
|
84
94
|
The box cannot be on the container since the adjacent sibling selector is needed
|
|
85
95
|
and there is not a parent CSS selector.
|
|
86
96
|
*/
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
.indicator {
|
|
98
|
+
background-color: var(--Input__background-color);
|
|
99
|
+
border-color: var(--Input__border-color);
|
|
100
|
+
border-style: var(--Input__border-style);
|
|
101
|
+
border-width: var(--Input__border-width);
|
|
102
|
+
box-sizing: border-box;
|
|
103
|
+
display: inline-block;
|
|
104
|
+
height: 20px;
|
|
105
|
+
position: relative;
|
|
106
|
+
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
107
|
+
width: 20px;
|
|
108
|
+
pointer-events: none;
|
|
109
|
+
}
|
|
99
110
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
111
|
+
input:checked + .indicator {
|
|
112
|
+
background-color: var(--Input__background-color);
|
|
113
|
+
border-color: var(--Input__border-color);
|
|
114
|
+
}
|
|
104
115
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
116
|
+
input:focus-visible + .indicator {
|
|
117
|
+
outline-color: var(--Common__outline-color);
|
|
118
|
+
outline-offset: var(--Common__outline-offset);
|
|
119
|
+
outline-style: var(--Common__outline-style);
|
|
120
|
+
outline-width: var(--Common__outline-width);
|
|
121
|
+
}
|
|
111
122
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
123
|
+
input:disabled + .indicator {
|
|
124
|
+
background-color: var(--Input__background-color--disabled);
|
|
125
|
+
border-color: var(--Input__border-color--disabled);
|
|
126
|
+
}
|
|
116
127
|
|
|
117
|
-
|
|
128
|
+
/*
|
|
118
129
|
The checkmark is a rotated L centered in the box.
|
|
119
130
|
*/
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
input:checked + .indicator::after {
|
|
132
|
+
border-color: var(--Input__color);
|
|
133
|
+
border-style: solid;
|
|
134
|
+
border-width: 0 3px 3px 0;
|
|
135
|
+
box-sizing: border-box;
|
|
136
|
+
content: '';
|
|
137
|
+
height: 14px;
|
|
138
|
+
left: 50%;
|
|
139
|
+
position: absolute;
|
|
140
|
+
top: 50%;
|
|
141
|
+
transform: translate(-50%, -50%) rotate(45deg);
|
|
142
|
+
transform-origin: center;
|
|
143
|
+
transition: border-color 250ms;
|
|
144
|
+
width: 7px;
|
|
145
|
+
visibility: visible;
|
|
146
|
+
}
|
|
136
147
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
148
|
+
input:checked:disabled + .indicator::after {
|
|
149
|
+
border-color: var(--Input__color--disabled);
|
|
150
|
+
}
|
|
140
151
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
146
|
-
}
|
|
152
|
+
.label {
|
|
153
|
+
user-select: none;
|
|
154
|
+
margin-top: 0.25em;
|
|
155
|
+
}
|
|
147
156
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
input:checked + .indicator::after,
|
|
155
|
-
.label-content {
|
|
156
|
-
transition: none;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
157
|
+
@media (prefers-reduced-motion) {
|
|
158
|
+
.indicator,
|
|
159
|
+
input:checked + .indicator::after {
|
|
160
|
+
transition: none;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
159
163
|
</style>
|