@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.
Files changed (219) hide show
  1. package/dist/Button.svelte +8 -46
  2. package/dist/Button.svelte.d.ts +9 -65
  3. package/dist/Callout.svelte +47 -72
  4. package/dist/Callout.svelte.d.ts +14 -55
  5. package/dist/Callout.types.d.ts +11 -0
  6. package/dist/Checkbox.svelte +12 -48
  7. package/dist/Checkbox.svelte.d.ts +9 -62
  8. package/dist/Dialog.svelte +30 -38
  9. package/dist/Dialog.svelte.d.ts +13 -36
  10. package/dist/Dropdown.svelte +39 -71
  11. package/dist/Dropdown.svelte.d.ts +17 -76
  12. package/dist/Input.svelte +16 -50
  13. package/dist/Input.svelte.d.ts +12 -74
  14. package/dist/Label.svelte +55 -161
  15. package/dist/Label.svelte.d.ts +16 -81
  16. package/dist/Link.svelte +9 -41
  17. package/dist/Link.svelte.d.ts +11 -64
  18. package/dist/List.svelte +35 -85
  19. package/dist/List.svelte.d.ts +19 -74
  20. package/dist/List.types.d.ts +3 -11
  21. package/dist/ListItem.svelte +27 -56
  22. package/dist/ListItem.svelte.d.ts +12 -66
  23. package/dist/Menu.svelte +18 -45
  24. package/dist/Menu.svelte.d.ts +13 -63
  25. package/dist/MenuBar.svelte +36 -78
  26. package/dist/MenuBar.svelte.d.ts +12 -57
  27. package/dist/MenuButton.svelte +56 -85
  28. package/dist/MenuButton.svelte.d.ts +19 -70
  29. package/dist/MenuItem.svelte +107 -151
  30. package/dist/MenuItem.svelte.d.ts +21 -82
  31. package/dist/MenuItem.types.d.ts +1 -9
  32. package/dist/MenuSeparator.svelte +9 -7
  33. package/dist/MenuSeparator.svelte.d.ts +6 -20
  34. package/dist/Popover.svelte +45 -64
  35. package/dist/Popover.svelte.d.ts +14 -58
  36. package/dist/Progress.constants.d.ts +1 -1
  37. package/dist/Progress.constants.js +1 -1
  38. package/dist/Progress.svelte +24 -71
  39. package/dist/Progress.svelte.d.ts +11 -60
  40. package/dist/Progress.types.d.ts +3 -3
  41. package/dist/Radio.svelte +19 -92
  42. package/dist/Radio.svelte.d.ts +11 -63
  43. package/dist/Select.svelte +55 -94
  44. package/dist/Select.svelte.d.ts +19 -82
  45. package/dist/Slider.svelte +41 -98
  46. package/dist/Slider.svelte.d.ts +18 -65
  47. package/dist/Switch.svelte +29 -78
  48. package/dist/Switch.svelte.d.ts +20 -73
  49. package/dist/Tab.svelte +23 -66
  50. package/dist/Tab.svelte.d.ts +11 -70
  51. package/dist/TabList.svelte +50 -76
  52. package/dist/TabList.svelte.d.ts +17 -69
  53. package/dist/TabList.types.d.ts +3 -11
  54. package/dist/TextArea.svelte +17 -59
  55. package/dist/TextArea.svelte.d.ts +18 -68
  56. package/dist/Tooltip.svelte +23 -66
  57. package/dist/Tooltip.svelte.d.ts +9 -69
  58. package/dist/Tree.svelte +32 -83
  59. package/dist/Tree.svelte.d.ts +14 -66
  60. package/dist/Tree.types.d.ts +3 -11
  61. package/dist/TreeChevron.svelte +10 -49
  62. package/dist/TreeChevron.svelte.d.ts +8 -52
  63. package/dist/TreeItem.svelte +105 -159
  64. package/dist/TreeItem.svelte.d.ts +21 -100
  65. package/dist/TreeItem.types.d.ts +2 -12
  66. package/dist/actions/clickOutside.d.ts +1 -0
  67. package/dist/actions/clickOutside.js +1 -0
  68. package/dist/actions/extraClass.d.ts +8 -0
  69. package/dist/actions/extraClass.js +14 -0
  70. package/dist/index.d.ts +4 -12
  71. package/dist/index.js +3 -9
  72. package/package.json +20 -22
  73. package/dist/Button.constants.d.ts +0 -2
  74. package/dist/Button.constants.js +0 -2
  75. package/dist/Button.types.d.ts +0 -6
  76. package/dist/ColorPicker.constants.d.ts +0 -1
  77. package/dist/ColorPicker.constants.js +0 -1
  78. package/dist/ColorPicker.svelte +0 -287
  79. package/dist/ColorPicker.svelte.d.ts +0 -52
  80. package/dist/ColorPicker.types.d.ts +0 -4
  81. package/dist/ColorPicker.types.js +0 -1
  82. package/dist/HexColorSliders.svelte +0 -103
  83. package/dist/HexColorSliders.svelte.d.ts +0 -51
  84. package/dist/HslColorSliders.svelte +0 -128
  85. package/dist/HslColorSliders.svelte.d.ts +0 -51
  86. package/dist/Label.types.d.ts +0 -6
  87. package/dist/Label.types.js +0 -1
  88. package/dist/MenuItemDisplay.svelte +0 -32
  89. package/dist/MenuItemDisplay.svelte.d.ts +0 -39
  90. package/dist/RgbColorSliders.svelte +0 -93
  91. package/dist/RgbColorSliders.svelte.d.ts +0 -24
  92. package/dist/TreeItemDisplay.svelte +0 -74
  93. package/dist/TreeItemDisplay.svelte.d.ts +0 -73
  94. package/dist/css/Button.base.css +0 -54
  95. package/dist/css/Button.colorful.css +0 -17
  96. package/dist/css/Button.css +0 -8
  97. package/dist/css/Button.disabled.css +0 -22
  98. package/dist/css/Button.secondary.colorful.css +0 -15
  99. package/dist/css/Button.secondary.css +0 -11
  100. package/dist/css/Button.shapes.css +0 -14
  101. package/dist/css/Button.tool.colorful.css +0 -13
  102. package/dist/css/Button.tool.css +0 -18
  103. package/dist/css/Callout.base.css +0 -55
  104. package/dist/css/Callout.colorful.css +0 -5
  105. package/dist/css/Callout.css +0 -2
  106. package/dist/css/Checkbox.base.css +0 -121
  107. package/dist/css/Checkbox.colorful.css +0 -17
  108. package/dist/css/Checkbox.css +0 -3
  109. package/dist/css/Checkbox.disabled.css +0 -28
  110. package/dist/css/ColorPicker.base.css +0 -23
  111. package/dist/css/ColorPicker.css +0 -1
  112. package/dist/css/Dialog.base.css +0 -114
  113. package/dist/css/Dialog.css +0 -1
  114. package/dist/css/Dropdown.base.css +0 -105
  115. package/dist/css/Dropdown.colorful.css +0 -23
  116. package/dist/css/Dropdown.composed.css +0 -11
  117. package/dist/css/Dropdown.css +0 -4
  118. package/dist/css/Dropdown.disabled.css +0 -32
  119. package/dist/css/HexColorSliders.base.css +0 -87
  120. package/dist/css/HexColorSliders.css +0 -1
  121. package/dist/css/HslColorSliders.base.css +0 -105
  122. package/dist/css/HslColorSliders.css +0 -1
  123. package/dist/css/Input.base.css +0 -72
  124. package/dist/css/Input.colorful.css +0 -22
  125. package/dist/css/Input.composed.css +0 -12
  126. package/dist/css/Input.css +0 -4
  127. package/dist/css/Input.disabled.css +0 -24
  128. package/dist/css/Label.base.css +0 -114
  129. package/dist/css/Label.boxed.colorful.css +0 -21
  130. package/dist/css/Label.boxed.css +0 -31
  131. package/dist/css/Label.colorful.css +0 -3
  132. package/dist/css/Label.css +0 -5
  133. package/dist/css/Label.disabled.css +0 -9
  134. package/dist/css/Link.base.css +0 -43
  135. package/dist/css/Link.colorful.css +0 -15
  136. package/dist/css/Link.css +0 -11
  137. package/dist/css/Link.disabled.css +0 -10
  138. package/dist/css/Link.ghost.colorful.css +0 -7
  139. package/dist/css/Link.ghost.css +0 -11
  140. package/dist/css/Link.text-underline.css +0 -8
  141. package/dist/css/Link.text-underline.ghost.css +0 -13
  142. package/dist/css/Link.undecorated.colorful.css +0 -8
  143. package/dist/css/Link.undecorated.css +0 -8
  144. package/dist/css/Link.undecorated.ghost.css +0 -8
  145. package/dist/css/Link.undecorated.underline.css +0 -8
  146. package/dist/css/List.base.css +0 -84
  147. package/dist/css/List.composed.css +0 -8
  148. package/dist/css/List.css +0 -3
  149. package/dist/css/List.disabled.css +0 -7
  150. package/dist/css/ListItem.base.css +0 -33
  151. package/dist/css/ListItem.css +0 -2
  152. package/dist/css/ListItem.disabled.css +0 -28
  153. package/dist/css/Menu.base.css +0 -21
  154. package/dist/css/Menu.css +0 -1
  155. package/dist/css/MenuBar.base.css +0 -9
  156. package/dist/css/MenuBar.css +0 -1
  157. package/dist/css/MenuButton.base.css +0 -13
  158. package/dist/css/MenuButton.css +0 -1
  159. package/dist/css/MenuItem.base.css +0 -48
  160. package/dist/css/MenuItem.css +0 -1
  161. package/dist/css/MenuItemDisplay.base.css +0 -79
  162. package/dist/css/MenuItemDisplay.css +0 -2
  163. package/dist/css/MenuItemDisplay.disabled.css +0 -28
  164. package/dist/css/MenuSeparator.base.css +0 -5
  165. package/dist/css/MenuSeparator.css +0 -1
  166. package/dist/css/Popover.css +0 -21
  167. package/dist/css/Progress.base.css +0 -85
  168. package/dist/css/Progress.css +0 -2
  169. package/dist/css/Progress.disabled.css +0 -17
  170. package/dist/css/Radio.base.css +0 -109
  171. package/dist/css/Radio.colorful.css +0 -18
  172. package/dist/css/Radio.css +0 -3
  173. package/dist/css/Radio.disabled.css +0 -28
  174. package/dist/css/RgbColorSliders.base.css +0 -94
  175. package/dist/css/RgbColorSliders.css +0 -1
  176. package/dist/css/Select.base.css +0 -101
  177. package/dist/css/Select.colorful.css +0 -24
  178. package/dist/css/Select.composed.css +0 -12
  179. package/dist/css/Select.css +0 -4
  180. package/dist/css/Select.disabled.css +0 -28
  181. package/dist/css/Slider.base.css +0 -152
  182. package/dist/css/Slider.colorful.css +0 -11
  183. package/dist/css/Slider.composed.css +0 -8
  184. package/dist/css/Slider.css +0 -4
  185. package/dist/css/Slider.disabled.css +0 -30
  186. package/dist/css/Switch.base.css +0 -175
  187. package/dist/css/Switch.colorful.css +0 -45
  188. package/dist/css/Switch.css +0 -3
  189. package/dist/css/Switch.disabled.css +0 -30
  190. package/dist/css/Tab.base.css +0 -96
  191. package/dist/css/Tab.colorful.css +0 -13
  192. package/dist/css/Tab.css +0 -3
  193. package/dist/css/Tab.disabled.css +0 -36
  194. package/dist/css/TabList.base.css +0 -34
  195. package/dist/css/TabList.css +0 -1
  196. package/dist/css/TextArea.base.css +0 -62
  197. package/dist/css/TextArea.colorful.css +0 -17
  198. package/dist/css/TextArea.composed.css +0 -8
  199. package/dist/css/TextArea.css +0 -4
  200. package/dist/css/TextArea.disabled.css +0 -28
  201. package/dist/css/Tooltip.base.css +0 -6
  202. package/dist/css/Tooltip.css +0 -1
  203. package/dist/css/Tree.base.css +0 -49
  204. package/dist/css/Tree.composed.css +0 -8
  205. package/dist/css/Tree.css +0 -3
  206. package/dist/css/Tree.disabled.css +0 -27
  207. package/dist/css/TreeChevron.base.css +0 -86
  208. package/dist/css/TreeChevron.css +0 -1
  209. package/dist/css/TreeItem.base.css +0 -3
  210. package/dist/css/TreeItem.css +0 -1
  211. package/dist/css/TreeItemDisplay.base.css +0 -48
  212. package/dist/css/TreeItemDisplay.colorful.css +0 -9
  213. package/dist/css/TreeItemDisplay.css +0 -3
  214. package/dist/css/TreeItemDisplay.disabled.css +0 -28
  215. package/dist/css/dark-mode.css +0 -134
  216. package/dist/css/light-mode.css +0 -134
  217. package/dist/css/sterling.css +0 -37
  218. package/dist/package.json +0 -108
  219. /package/dist/{Button.types.js → Callout.types.js} +0 -0
@@ -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');
@@ -1,9 +0,0 @@
1
- .sterling-menu-bar {
2
- background-color: transparent;
3
- align-items: center;
4
- align-content: stretch;
5
- display: flex;
6
- gap: 1em;
7
- justify-content: flex-start;
8
- justify-items: flex-start;
9
- }
@@ -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
- }
@@ -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
- }
@@ -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,2 +0,0 @@
1
- @import url('./MenuItemDisplay.base.css');
2
- @import url('./MenuItemDisplay.disabled.css');
@@ -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,5 +0,0 @@
1
- .sterling-menu-separator {
2
- height: 2px;
3
- background-color: var(--stsv-common__border-color);
4
- margin: 0.1em 0;
5
- }
@@ -1 +0,0 @@
1
- @import url('./MenuSeparator.base.css');
@@ -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
- }
@@ -1,2 +0,0 @@
1
- @import url('./Progress.base.css');
2
- @import url('./Progress.disabled.css');
@@ -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
- }
@@ -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
- }
@@ -1,3 +0,0 @@
1
- @import url('./Radio.base.css');
2
- @import url('./Radio.colorful.css');
3
- @import url('./Radio.disabled.css');
@@ -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');