@geoffcox/sterling-svelte 1.0.12 → 2.0.1
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/Button.svelte +8 -46
- package/dist/Button.svelte.d.ts +9 -65
- package/dist/Callout.svelte +47 -72
- package/dist/Callout.svelte.d.ts +14 -55
- package/dist/Callout.types.d.ts +11 -0
- package/dist/Checkbox.svelte +12 -48
- package/dist/Checkbox.svelte.d.ts +9 -62
- package/dist/Dialog.svelte +30 -38
- package/dist/Dialog.svelte.d.ts +13 -36
- package/dist/Dropdown.svelte +39 -71
- package/dist/Dropdown.svelte.d.ts +17 -76
- package/dist/Input.svelte +16 -50
- package/dist/Input.svelte.d.ts +12 -74
- package/dist/Label.svelte +55 -161
- package/dist/Label.svelte.d.ts +16 -81
- package/dist/Link.svelte +9 -41
- package/dist/Link.svelte.d.ts +11 -64
- package/dist/List.svelte +35 -85
- package/dist/List.svelte.d.ts +19 -74
- package/dist/List.types.d.ts +3 -11
- package/dist/ListItem.svelte +27 -56
- package/dist/ListItem.svelte.d.ts +12 -66
- package/dist/Menu.svelte +18 -45
- package/dist/Menu.svelte.d.ts +13 -63
- package/dist/MenuBar.svelte +36 -78
- package/dist/MenuBar.svelte.d.ts +12 -57
- package/dist/MenuButton.svelte +56 -85
- package/dist/MenuButton.svelte.d.ts +19 -70
- package/dist/MenuItem.svelte +107 -151
- package/dist/MenuItem.svelte.d.ts +21 -82
- package/dist/MenuItem.types.d.ts +1 -9
- package/dist/MenuSeparator.svelte +9 -7
- package/dist/MenuSeparator.svelte.d.ts +6 -20
- package/dist/Popover.svelte +45 -64
- package/dist/Popover.svelte.d.ts +14 -58
- package/dist/Progress.constants.d.ts +1 -1
- package/dist/Progress.constants.js +1 -1
- package/dist/Progress.svelte +24 -71
- package/dist/Progress.svelte.d.ts +11 -60
- package/dist/Progress.types.d.ts +3 -3
- package/dist/Radio.svelte +19 -92
- package/dist/Radio.svelte.d.ts +11 -63
- package/dist/Select.svelte +55 -94
- package/dist/Select.svelte.d.ts +19 -82
- package/dist/Slider.svelte +41 -98
- package/dist/Slider.svelte.d.ts +18 -65
- package/dist/Switch.svelte +29 -78
- package/dist/Switch.svelte.d.ts +20 -73
- package/dist/Tab.svelte +23 -66
- package/dist/Tab.svelte.d.ts +11 -70
- package/dist/TabList.svelte +50 -76
- package/dist/TabList.svelte.d.ts +17 -69
- package/dist/TabList.types.d.ts +3 -11
- package/dist/TextArea.svelte +17 -59
- package/dist/TextArea.svelte.d.ts +18 -68
- package/dist/Tooltip.svelte +23 -66
- package/dist/Tooltip.svelte.d.ts +9 -69
- package/dist/Tree.svelte +32 -83
- package/dist/Tree.svelte.d.ts +14 -66
- package/dist/Tree.types.d.ts +3 -11
- package/dist/TreeChevron.svelte +10 -49
- package/dist/TreeChevron.svelte.d.ts +8 -52
- package/dist/TreeItem.svelte +105 -159
- package/dist/TreeItem.svelte.d.ts +21 -100
- package/dist/TreeItem.types.d.ts +2 -12
- package/dist/actions/clickOutside.d.ts +1 -0
- package/dist/actions/clickOutside.js +1 -0
- package/dist/actions/extraClass.d.ts +8 -0
- package/dist/actions/extraClass.js +14 -0
- package/dist/index.d.ts +4 -12
- package/dist/index.js +3 -9
- package/package.json +20 -22
- package/dist/Button.constants.d.ts +0 -2
- package/dist/Button.constants.js +0 -2
- package/dist/Button.types.d.ts +0 -6
- package/dist/ColorPicker.constants.d.ts +0 -1
- package/dist/ColorPicker.constants.js +0 -1
- package/dist/ColorPicker.svelte +0 -287
- package/dist/ColorPicker.svelte.d.ts +0 -52
- package/dist/ColorPicker.types.d.ts +0 -4
- package/dist/ColorPicker.types.js +0 -1
- package/dist/HexColorSliders.svelte +0 -103
- package/dist/HexColorSliders.svelte.d.ts +0 -51
- package/dist/HslColorSliders.svelte +0 -128
- package/dist/HslColorSliders.svelte.d.ts +0 -51
- package/dist/Label.types.d.ts +0 -6
- package/dist/Label.types.js +0 -1
- package/dist/MenuItemDisplay.svelte +0 -32
- package/dist/MenuItemDisplay.svelte.d.ts +0 -39
- package/dist/RgbColorSliders.svelte +0 -93
- package/dist/RgbColorSliders.svelte.d.ts +0 -24
- package/dist/TreeItemDisplay.svelte +0 -74
- package/dist/TreeItemDisplay.svelte.d.ts +0 -73
- package/dist/css/Button.base.css +0 -54
- package/dist/css/Button.colorful.css +0 -17
- package/dist/css/Button.css +0 -8
- package/dist/css/Button.disabled.css +0 -22
- package/dist/css/Button.secondary.colorful.css +0 -15
- package/dist/css/Button.secondary.css +0 -11
- package/dist/css/Button.shapes.css +0 -14
- package/dist/css/Button.tool.colorful.css +0 -13
- package/dist/css/Button.tool.css +0 -18
- package/dist/css/Callout.base.css +0 -55
- package/dist/css/Callout.colorful.css +0 -5
- package/dist/css/Callout.css +0 -2
- package/dist/css/Checkbox.base.css +0 -121
- package/dist/css/Checkbox.colorful.css +0 -17
- package/dist/css/Checkbox.css +0 -3
- package/dist/css/Checkbox.disabled.css +0 -28
- package/dist/css/ColorPicker.base.css +0 -23
- package/dist/css/ColorPicker.css +0 -1
- package/dist/css/Dialog.base.css +0 -114
- package/dist/css/Dialog.css +0 -1
- package/dist/css/Dropdown.base.css +0 -105
- package/dist/css/Dropdown.colorful.css +0 -23
- package/dist/css/Dropdown.composed.css +0 -11
- package/dist/css/Dropdown.css +0 -4
- package/dist/css/Dropdown.disabled.css +0 -32
- package/dist/css/HexColorSliders.base.css +0 -87
- package/dist/css/HexColorSliders.css +0 -1
- package/dist/css/HslColorSliders.base.css +0 -105
- package/dist/css/HslColorSliders.css +0 -1
- package/dist/css/Input.base.css +0 -72
- package/dist/css/Input.colorful.css +0 -22
- package/dist/css/Input.composed.css +0 -12
- package/dist/css/Input.css +0 -4
- package/dist/css/Input.disabled.css +0 -24
- package/dist/css/Label.base.css +0 -114
- package/dist/css/Label.boxed.colorful.css +0 -21
- package/dist/css/Label.boxed.css +0 -31
- package/dist/css/Label.colorful.css +0 -3
- package/dist/css/Label.css +0 -5
- package/dist/css/Label.disabled.css +0 -9
- package/dist/css/Link.base.css +0 -43
- package/dist/css/Link.colorful.css +0 -15
- package/dist/css/Link.css +0 -11
- package/dist/css/Link.disabled.css +0 -10
- package/dist/css/Link.ghost.colorful.css +0 -7
- package/dist/css/Link.ghost.css +0 -11
- package/dist/css/Link.text-underline.css +0 -8
- package/dist/css/Link.text-underline.ghost.css +0 -13
- package/dist/css/Link.undecorated.colorful.css +0 -8
- package/dist/css/Link.undecorated.css +0 -8
- package/dist/css/Link.undecorated.ghost.css +0 -8
- package/dist/css/Link.undecorated.underline.css +0 -8
- package/dist/css/List.base.css +0 -84
- package/dist/css/List.composed.css +0 -8
- package/dist/css/List.css +0 -3
- package/dist/css/List.disabled.css +0 -7
- package/dist/css/ListItem.base.css +0 -33
- package/dist/css/ListItem.css +0 -2
- package/dist/css/ListItem.disabled.css +0 -28
- package/dist/css/Menu.base.css +0 -21
- package/dist/css/Menu.css +0 -1
- package/dist/css/MenuBar.base.css +0 -9
- package/dist/css/MenuBar.css +0 -1
- package/dist/css/MenuButton.base.css +0 -13
- package/dist/css/MenuButton.css +0 -1
- package/dist/css/MenuItem.base.css +0 -48
- package/dist/css/MenuItem.css +0 -1
- package/dist/css/MenuItemDisplay.base.css +0 -79
- package/dist/css/MenuItemDisplay.css +0 -2
- package/dist/css/MenuItemDisplay.disabled.css +0 -28
- package/dist/css/MenuSeparator.base.css +0 -5
- package/dist/css/MenuSeparator.css +0 -1
- package/dist/css/Popover.css +0 -21
- package/dist/css/Progress.base.css +0 -85
- package/dist/css/Progress.css +0 -2
- package/dist/css/Progress.disabled.css +0 -17
- package/dist/css/Radio.base.css +0 -109
- package/dist/css/Radio.colorful.css +0 -18
- package/dist/css/Radio.css +0 -3
- package/dist/css/Radio.disabled.css +0 -28
- package/dist/css/RgbColorSliders.base.css +0 -94
- package/dist/css/RgbColorSliders.css +0 -1
- package/dist/css/Select.base.css +0 -101
- package/dist/css/Select.colorful.css +0 -24
- package/dist/css/Select.composed.css +0 -12
- package/dist/css/Select.css +0 -4
- package/dist/css/Select.disabled.css +0 -28
- package/dist/css/Slider.base.css +0 -152
- package/dist/css/Slider.colorful.css +0 -11
- package/dist/css/Slider.composed.css +0 -8
- package/dist/css/Slider.css +0 -4
- package/dist/css/Slider.disabled.css +0 -30
- package/dist/css/Switch.base.css +0 -175
- package/dist/css/Switch.colorful.css +0 -45
- package/dist/css/Switch.css +0 -3
- package/dist/css/Switch.disabled.css +0 -30
- package/dist/css/Tab.base.css +0 -96
- package/dist/css/Tab.colorful.css +0 -13
- package/dist/css/Tab.css +0 -3
- package/dist/css/Tab.disabled.css +0 -36
- package/dist/css/TabList.base.css +0 -34
- package/dist/css/TabList.css +0 -1
- package/dist/css/TextArea.base.css +0 -62
- package/dist/css/TextArea.colorful.css +0 -17
- package/dist/css/TextArea.composed.css +0 -8
- package/dist/css/TextArea.css +0 -4
- package/dist/css/TextArea.disabled.css +0 -28
- package/dist/css/Tooltip.base.css +0 -6
- package/dist/css/Tooltip.css +0 -1
- package/dist/css/Tree.base.css +0 -49
- package/dist/css/Tree.composed.css +0 -8
- package/dist/css/Tree.css +0 -3
- package/dist/css/Tree.disabled.css +0 -27
- package/dist/css/TreeChevron.base.css +0 -86
- package/dist/css/TreeChevron.css +0 -1
- package/dist/css/TreeItem.base.css +0 -3
- package/dist/css/TreeItem.css +0 -1
- package/dist/css/TreeItemDisplay.base.css +0 -48
- package/dist/css/TreeItemDisplay.colorful.css +0 -9
- package/dist/css/TreeItemDisplay.css +0 -3
- package/dist/css/TreeItemDisplay.disabled.css +0 -28
- package/dist/css/dark-mode.css +0 -134
- package/dist/css/light-mode.css +0 -134
- package/dist/css/sterling.css +0 -37
- package/dist/package.json +0 -108
- /package/dist/{Button.types.js → Callout.types.js} +0 -0
package/dist/css/Menu.base.css
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
.sterling-menu {
|
|
2
|
-
background-color: var(--stsv-common__background-color);
|
|
3
|
-
border-color: var(--stsv-common__border-color);
|
|
4
|
-
border-radius: 0;
|
|
5
|
-
border-style: solid;
|
|
6
|
-
border-width: 2px;
|
|
7
|
-
box-shadow: var(--stsv-common__box-shadow);
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
display: grid;
|
|
10
|
-
grid-template-columns: 1fr;
|
|
11
|
-
grid-template-rows: 1fr;
|
|
12
|
-
height: auto;
|
|
13
|
-
padding: 0.25em;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.sterling-menu .menu-items {
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-columns: 1fr;
|
|
19
|
-
grid-template-rows: auto;
|
|
20
|
-
row-gap: calc(2 * 2px);
|
|
21
|
-
}
|
package/dist/css/Menu.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./Menu.base.css');
|
package/dist/css/MenuBar.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./MenuBar.base.css');
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
.menu-button .reference {
|
|
2
|
-
align-content: center;
|
|
3
|
-
align-items: center;
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
flex-direction: row;
|
|
7
|
-
justify-content: center;
|
|
8
|
-
justify-items: center;
|
|
9
|
-
column-gap: 0.25em;
|
|
10
|
-
overflow: hidden;
|
|
11
|
-
text-overflow: ellipsis;
|
|
12
|
-
white-space: nowrap;
|
|
13
|
-
}
|
package/dist/css/MenuButton.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./MenuButton.base.css');
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
.sterling-menu-item {
|
|
2
|
-
background-color: transparent;
|
|
3
|
-
border-color: transparent;
|
|
4
|
-
border-radius: 8px;
|
|
5
|
-
border-style: none;
|
|
6
|
-
border-width: 0;
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
color: var(--stsv-common__color);
|
|
9
|
-
cursor: pointer;
|
|
10
|
-
font: inherit;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
|
-
position: relative;
|
|
14
|
-
outline: none;
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
text-decoration: none;
|
|
17
|
-
text-overflow: ellipsis;
|
|
18
|
-
transition: background-color 250ms, color 250ms, border-color 250ms;
|
|
19
|
-
white-space: nowrap;
|
|
20
|
-
user-select: none;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.sterling-menu-item:hover {
|
|
24
|
-
background-color: var(--stsv-button__background-color--hover);
|
|
25
|
-
color: var(--stsv-button__color--hover);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.sterling-menu-item:focus {
|
|
29
|
-
outline: none;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.sterling-menu-item.using-keyboard:focus {
|
|
33
|
-
border-color: var(--stsv-button__border-color--focus);
|
|
34
|
-
outline-color: var(--stsv-common__outline-color);
|
|
35
|
-
outline-offset: 0;
|
|
36
|
-
outline-style: solid;
|
|
37
|
-
outline-width: 2px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.sterling-menu-item:focus {
|
|
41
|
-
background-color: var(--stsv-input__background-color--selected);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
@media (prefers-reduced-motion) {
|
|
45
|
-
.sterling-menu-item {
|
|
46
|
-
transition: none;
|
|
47
|
-
}
|
|
48
|
-
}
|
package/dist/css/MenuItem.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./MenuItem.base.css');
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
.sterling-menu-item-display {
|
|
2
|
-
align-items: center;
|
|
3
|
-
justify-items: flex-start;
|
|
4
|
-
display: grid;
|
|
5
|
-
grid-template-columns: 1em 1fr 1em;
|
|
6
|
-
column-gap: 0.5em;
|
|
7
|
-
padding: 0.25em;
|
|
8
|
-
position: relative;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.sterling-menu-item-display .check {
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
pointer-events: none;
|
|
14
|
-
width: 20px;
|
|
15
|
-
height: 20px;
|
|
16
|
-
position: relative;
|
|
17
|
-
transition:
|
|
18
|
-
background-color 250ms,
|
|
19
|
-
color 250ms,
|
|
20
|
-
border-color 250ms;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.sterling-menu-item-display .check.checkmark.checked::after {
|
|
24
|
-
border-color: currentColor;
|
|
25
|
-
border-style: solid;
|
|
26
|
-
border-width: 0 0.2em 0.2em 0;
|
|
27
|
-
box-sizing: border-box;
|
|
28
|
-
content: '';
|
|
29
|
-
height: 0.8em;
|
|
30
|
-
left: 45%;
|
|
31
|
-
position: absolute;
|
|
32
|
-
top: 45%;
|
|
33
|
-
transform: translate(-50%, -50%) rotate(45deg);
|
|
34
|
-
transform-origin: center;
|
|
35
|
-
transition: border-color 250ms;
|
|
36
|
-
width: 0.4em;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.sterling-menu-item-display .check.bullet.checked::after {
|
|
40
|
-
background-color: currentColor;
|
|
41
|
-
border-radius: 10000px;
|
|
42
|
-
content: '';
|
|
43
|
-
height: 0.5em;
|
|
44
|
-
left: 45%;
|
|
45
|
-
position: absolute;
|
|
46
|
-
top: 50%;
|
|
47
|
-
transform: translate(-50%, -50%);
|
|
48
|
-
transition: background-color 250ms;
|
|
49
|
-
width: 0.5em;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.sterling-menu-item-display .chevron {
|
|
53
|
-
position: relative;
|
|
54
|
-
border: none;
|
|
55
|
-
background: none;
|
|
56
|
-
height: 1em;
|
|
57
|
-
width: 1em;
|
|
58
|
-
transform-origin: 50% 50%;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.sterling-menu-item-display .chevron.has-children::after {
|
|
62
|
-
position: absolute;
|
|
63
|
-
content: '';
|
|
64
|
-
top: 50%;
|
|
65
|
-
left: 50%;
|
|
66
|
-
width: 7px;
|
|
67
|
-
height: 7px;
|
|
68
|
-
border-right: 3px solid currentColor;
|
|
69
|
-
border-top: 3px solid currentColor;
|
|
70
|
-
transform: translate(-50%, -50%) rotate(45deg);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
@media (prefers-reduced-motion) {
|
|
74
|
-
.sterling-menu-item-display::after,
|
|
75
|
-
.sterling-menu-item-display .check,
|
|
76
|
-
.sterling-menu-item-display .check::after {
|
|
77
|
-
transition: none;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
.sterling-menu-item-display.disabled {
|
|
2
|
-
cursor: not-allowed;
|
|
3
|
-
outline: none;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.sterling-menu-item-display::after {
|
|
7
|
-
background: repeating-linear-gradient(
|
|
8
|
-
var(--stsv-common--disabled__stripe-angle),
|
|
9
|
-
var(--stsv-common--disabled__stripe-color),
|
|
10
|
-
var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
|
|
11
|
-
var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
|
|
12
|
-
var(--stsv-common--disabled__stripe-color--alt)
|
|
13
|
-
calc(2 * var(--stsv-common--disabled__stripe-width))
|
|
14
|
-
);
|
|
15
|
-
bottom: 0;
|
|
16
|
-
content: '';
|
|
17
|
-
left: 0;
|
|
18
|
-
opacity: 0;
|
|
19
|
-
position: absolute;
|
|
20
|
-
right: 0;
|
|
21
|
-
top: 0;
|
|
22
|
-
pointer-events: none;
|
|
23
|
-
transition: opacity 250ms;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.sterling-menu-item-display.disabled::after {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./MenuSeparator.base.css');
|
package/dist/css/Popover.css
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
.sterling-popover-portal {
|
|
2
|
-
position: relative;
|
|
3
|
-
overflow: visible;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.sterling-popover {
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
display: none;
|
|
9
|
-
grid-template-columns: 1fr;
|
|
10
|
-
grid-template-rows: 1fr;
|
|
11
|
-
height: auto;
|
|
12
|
-
left: 0;
|
|
13
|
-
overflow: visible;
|
|
14
|
-
position: absolute;
|
|
15
|
-
top: 0;
|
|
16
|
-
width: max-content;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.sterling-popover.open {
|
|
20
|
-
display: grid;
|
|
21
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
.sterling-progress {
|
|
2
|
-
align-content: flex-start;
|
|
3
|
-
align-items: flex-start;
|
|
4
|
-
background: var(--stsv-common__background-color);
|
|
5
|
-
border-width: 2px;
|
|
6
|
-
border-style: solid;
|
|
7
|
-
border-color: var(--stsv-common__border-color);
|
|
8
|
-
border-radius: 0;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
display: block;
|
|
11
|
-
height: 1em;
|
|
12
|
-
padding: 0.25em;
|
|
13
|
-
position: relative;
|
|
14
|
-
transition:
|
|
15
|
-
background-color 250ms,
|
|
16
|
-
color 250ms,
|
|
17
|
-
border-color 250ms;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.sterling-progress .container {
|
|
21
|
-
display: flex;
|
|
22
|
-
justify-content: flex-start;
|
|
23
|
-
width: 100%;
|
|
24
|
-
height: 100%;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.sterling-progress .indicator {
|
|
28
|
-
background-color: var(--stsv-common__border-color);
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
height: 100%;
|
|
31
|
-
min-height: 1px;
|
|
32
|
-
transition:
|
|
33
|
-
background-color 250ms,
|
|
34
|
-
color 250ms,
|
|
35
|
-
border-color 250ms;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/* ----- vertical ----- */
|
|
39
|
-
|
|
40
|
-
.sterling-progress.vertical {
|
|
41
|
-
align-items: center;
|
|
42
|
-
align-content: center;
|
|
43
|
-
height: unset;
|
|
44
|
-
width: 1em;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.sterling-progress.vertical .container {
|
|
48
|
-
flex-direction: column;
|
|
49
|
-
justify-content: flex-end;
|
|
50
|
-
min-width: unset;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.sterling-progress.vertical .indicator {
|
|
54
|
-
height: unset;
|
|
55
|
-
min-height: unset;
|
|
56
|
-
min-width: 1px;
|
|
57
|
-
width: 100%;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/* ----- status ----- */
|
|
61
|
-
|
|
62
|
-
.sterling-progress.info .indicator {
|
|
63
|
-
background-color: var(--stsv-status--info__border-color);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.sterling-progress.success .indicator {
|
|
67
|
-
background-color: var(--stsv-status--success__border-color);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.sterling-progress.warning .indicator {
|
|
71
|
-
background-color: var(--stsv-status--warning__border-color);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.sterling-progress.error .indicator {
|
|
75
|
-
background-color: var(--stsv-status--danger__border-color);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* ----- prefers-reduced-motion ----- */
|
|
79
|
-
|
|
80
|
-
@media (prefers-reduced-motion) {
|
|
81
|
-
.sterling-progress,
|
|
82
|
-
.sterling-progress .indicator {
|
|
83
|
-
transition: none;
|
|
84
|
-
}
|
|
85
|
-
}
|
package/dist/css/Progress.css
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
.sterling-progress.disabled::after {
|
|
2
|
-
content: '';
|
|
3
|
-
position: absolute;
|
|
4
|
-
left: 0;
|
|
5
|
-
right: 0;
|
|
6
|
-
top: 0;
|
|
7
|
-
bottom: 0;
|
|
8
|
-
background: repeating-linear-gradient(
|
|
9
|
-
var(--stsv-common--disabled__stripe-angle),
|
|
10
|
-
var(--stsv-common--disabled__stripe-color),
|
|
11
|
-
var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
|
|
12
|
-
var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
|
|
13
|
-
var(--stsv-common--disabled__stripe-color--alt)
|
|
14
|
-
calc(2 * var(--stsv-common--disabled__stripe-width))
|
|
15
|
-
);
|
|
16
|
-
pointer-events: none;
|
|
17
|
-
}
|
package/dist/css/Radio.base.css
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
.sterling-radio {
|
|
2
|
-
align-content: center;
|
|
3
|
-
align-items: center;
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
font: inherit;
|
|
7
|
-
margin: 0;
|
|
8
|
-
outline: none;
|
|
9
|
-
padding: 0;
|
|
10
|
-
}
|
|
11
|
-
/*
|
|
12
|
-
The container
|
|
13
|
-
- allows the input to be hidden
|
|
14
|
-
- avoids input participating in layout
|
|
15
|
-
- prevents collisions with surrounding slots
|
|
16
|
-
*/
|
|
17
|
-
.sterling-radio .container {
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
position: relative;
|
|
20
|
-
font: inherit;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
margin-right: 0.25em;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/*
|
|
27
|
-
The input is hidden since the built-in browser radio cannot be customized
|
|
28
|
-
*/
|
|
29
|
-
.sterling-radio input {
|
|
30
|
-
font: inherit;
|
|
31
|
-
margin: 0;
|
|
32
|
-
padding: 0;
|
|
33
|
-
position: absolute;
|
|
34
|
-
opacity: 0;
|
|
35
|
-
height: 21px;
|
|
36
|
-
width: 21px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/*
|
|
40
|
-
The indicator handles both the radio box and circle mark.
|
|
41
|
-
The box cannot be on the container since the adjacent sibling selector is needed
|
|
42
|
-
and there is not a parent CSS selector.
|
|
43
|
-
*/
|
|
44
|
-
.sterling-radio .indicator {
|
|
45
|
-
background-color: var(--stsv-input__background-color);
|
|
46
|
-
border-color: var(--stsv-input__border-color);
|
|
47
|
-
border-style: solid;
|
|
48
|
-
border-width: 2px;
|
|
49
|
-
border-radius: 10000px;
|
|
50
|
-
box-sizing: border-box;
|
|
51
|
-
display: inline-block;
|
|
52
|
-
height: 21px;
|
|
53
|
-
position: relative;
|
|
54
|
-
pointer-events: none;
|
|
55
|
-
transition:
|
|
56
|
-
background-color 250ms,
|
|
57
|
-
color 250ms,
|
|
58
|
-
border-color 250ms;
|
|
59
|
-
width: 21px;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.sterling-radio input:checked + .indicator {
|
|
63
|
-
background-color: var(--stsv-input__background-color);
|
|
64
|
-
border-color: var(--stsv-input__border-color);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.sterling-radio:not(.disabled):hover .indicator {
|
|
68
|
-
background-color: var(--stsv-input__background-color--hover);
|
|
69
|
-
border-color: var(--stsv-input__border-color--hover);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.sterling-radio input:focus-visible + .indicator {
|
|
73
|
-
outline-color: var(--stsv-common__outline-color);
|
|
74
|
-
outline-offset: 0;
|
|
75
|
-
outline-style: solid;
|
|
76
|
-
outline-width: 2px;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.sterling-radio .indicator::after {
|
|
80
|
-
background-color: transparent;
|
|
81
|
-
border-radius: 10000px;
|
|
82
|
-
content: '';
|
|
83
|
-
height: 9px;
|
|
84
|
-
left: 50%;
|
|
85
|
-
position: absolute;
|
|
86
|
-
top: 50%;
|
|
87
|
-
transform: translate(-50%, -50%);
|
|
88
|
-
transition: background-color 250ms;
|
|
89
|
-
width: 9px;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.sterling-radio input:checked + .indicator::after {
|
|
93
|
-
background-color: var(--stsv-input__color);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.sterling-radio label {
|
|
97
|
-
color: var(--stsv-common__color);
|
|
98
|
-
transition: color 250ms;
|
|
99
|
-
font: inherit;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
@media (prefers-reduced-motion) {
|
|
103
|
-
.sterling-radio .indicator,
|
|
104
|
-
.sterling-radio .indicator::after,
|
|
105
|
-
.sterling-radio .container::after,
|
|
106
|
-
.sterling-radio label {
|
|
107
|
-
transition: none;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
.sterling-radio.colorful .indicator {
|
|
2
|
-
background-color: var(--stsv-input--colorful__background-color);
|
|
3
|
-
border-color: var(--stsv-input--colorful__border-color);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.sterling-radio.colorful input:checked + .indicator {
|
|
7
|
-
background-color: var(--stsv-input--colorful__background-color);
|
|
8
|
-
border-color: var(--stsv-input--colorful__border-color);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.sterling-radio.colorful:not(.disabled):hover .indicator {
|
|
12
|
-
background-color: var(--stsv-input--colorful__background-color--hover);
|
|
13
|
-
border-color: var(--stsv-input--colorful__border-color--hover);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.sterling-radio.colorful input:checked + .indicator::after {
|
|
17
|
-
background-color: var(--stsv-input--colorful__color);
|
|
18
|
-
}
|
package/dist/css/Radio.css
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
.sterling-radio.disabled * {
|
|
2
|
-
cursor: not-allowed;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.sterling-radio .container::after {
|
|
6
|
-
background: repeating-linear-gradient(
|
|
7
|
-
var(--stsv-common--disabled__stripe-angle),
|
|
8
|
-
var(--stsv-common--disabled__stripe-color),
|
|
9
|
-
var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
|
|
10
|
-
var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
|
|
11
|
-
var(--stsv-common--disabled__stripe-color--alt)
|
|
12
|
-
calc(2 * var(--stsv-common--disabled__stripe-width))
|
|
13
|
-
);
|
|
14
|
-
border-radius: 10000px;
|
|
15
|
-
bottom: 0;
|
|
16
|
-
content: '';
|
|
17
|
-
left: 0;
|
|
18
|
-
opacity: 0;
|
|
19
|
-
position: absolute;
|
|
20
|
-
right: 0;
|
|
21
|
-
top: 0;
|
|
22
|
-
pointer-events: none;
|
|
23
|
-
transition: opacity 250ms;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.sterling-radio.disabled .container::after {
|
|
27
|
-
opacity: 1;
|
|
28
|
-
}
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
.sterling-rgb-color-sliders {
|
|
2
|
-
align-items: center;
|
|
3
|
-
display: grid;
|
|
4
|
-
grid-template-columns: 1fr 4em;
|
|
5
|
-
column-gap: 0.5em;
|
|
6
|
-
row-gap: 0.25em;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.sterling-rgb-color-sliders .slider :global(.fill),
|
|
10
|
-
.sterling-rgb-color-sliders .slider :global(.sterling-slider.colorful .fill) {
|
|
11
|
-
background-color: transparent;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.sterling-rgb-color-sliders .slider :global(.track),
|
|
15
|
-
.sterling-rgb-color-sliders .slider :global(.sterling-slider.colorful .track) {
|
|
16
|
-
background-color: transparent;
|
|
17
|
-
background-image: linear-gradient(to right, #ffffff, #ffffff 1px, #000000 1px, #000000);
|
|
18
|
-
background-size: 2px 100%;
|
|
19
|
-
opacity: 0.1;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.sterling-rgb-color-sliders .red-slider {
|
|
23
|
-
background: linear-gradient(to right, black 0%, rgb(255, 0, 0) 100%);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.sterling-rgb-color-sliders .green-slider {
|
|
27
|
-
background: linear-gradient(to right, black 0%, rgb(0, 255, 0) 100%);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.sterling-rgb-color-sliders .blue-slider {
|
|
31
|
-
background: linear-gradient(to right, black 0%, rgb(0, 0, 255) 100%);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.sterling-rgb-color-sliders .alpha {
|
|
35
|
-
display: grid;
|
|
36
|
-
grid-template-columns: 1fr;
|
|
37
|
-
grid-template-rows: 1fr;
|
|
38
|
-
place-content: stretch;
|
|
39
|
-
place-items: stretch;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.sterling-rgb-color-sliders .alpha-gradient,
|
|
43
|
-
.sterling-rgb-color-sliders .alpha-hatch,
|
|
44
|
-
.sterling-rgb-color-sliders .alpha-slider {
|
|
45
|
-
grid-row: 1 / span 1;
|
|
46
|
-
grid-column: 1 / span 1;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.sterling-rgb-color-sliders .alpha-hatch {
|
|
50
|
-
background-color: #eee;
|
|
51
|
-
opacity: 0.1;
|
|
52
|
-
background-image: repeating-linear-gradient(
|
|
53
|
-
var(--stsv-common--disabled__stripe-angle),
|
|
54
|
-
#444 25%,
|
|
55
|
-
transparent 25%,
|
|
56
|
-
transparent 75%,
|
|
57
|
-
#444 75%,
|
|
58
|
-
#444
|
|
59
|
-
),
|
|
60
|
-
repeating-linear-gradient(
|
|
61
|
-
var(--stsv-common--disabled__stripe-angle),
|
|
62
|
-
#444 25%,
|
|
63
|
-
#eee 25%,
|
|
64
|
-
#eee 75%,
|
|
65
|
-
#444 75%,
|
|
66
|
-
#444
|
|
67
|
-
),
|
|
68
|
-
repeating-linear-gradient(
|
|
69
|
-
-var(--stsv-common--disabled__stripe-angle),
|
|
70
|
-
#444 25%,
|
|
71
|
-
transparent 25%,
|
|
72
|
-
transparent 75%,
|
|
73
|
-
#444 75%,
|
|
74
|
-
#444
|
|
75
|
-
),
|
|
76
|
-
repeating-linear-gradient(
|
|
77
|
-
-var(--stsv-common--disabled__stripe-angle),
|
|
78
|
-
#444 25%,
|
|
79
|
-
#eee 25%,
|
|
80
|
-
#eee 75%,
|
|
81
|
-
#444 75%,
|
|
82
|
-
#444
|
|
83
|
-
);
|
|
84
|
-
background-position: 0 0, 4px 4px;
|
|
85
|
-
background-size: 8px 8px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.sterling-rgb-color-sliders .alpha-gradient {
|
|
89
|
-
background: linear-gradient(
|
|
90
|
-
to right,
|
|
91
|
-
rgba(var(--red), var(--green), var(--blue), 0) 0%,
|
|
92
|
-
rgba(var(--red), var(--green), var(--blue), 100) 100%
|
|
93
|
-
);
|
|
94
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url('./RgbColorSliders.base.css');
|