@geoffcox/sterling-svelte-themes 2.0.2 → 2.0.4

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 (51) hide show
  1. package/README.md +21 -0
  2. package/css/sterling/Autocomplete.base.css +2 -2
  3. package/css/sterling/Button.base.css +2 -2
  4. package/css/sterling/Button.colors.css +36 -36
  5. package/css/sterling/Button.disabled.css +4 -20
  6. package/css/sterling/Button.secondary.colors.css +36 -36
  7. package/css/sterling/Button.tool.colors.css +24 -24
  8. package/css/sterling/Callout.base.css +4 -4
  9. package/css/sterling/Checkbox.base.css +9 -6
  10. package/css/sterling/Checkbox.disabled.css +11 -21
  11. package/css/sterling/Dialog.base.css +3 -2
  12. package/css/sterling/Dropdown.base.css +6 -6
  13. package/css/sterling/Dropdown.disabled.css +4 -25
  14. package/css/sterling/Input.base.css +1 -9
  15. package/css/sterling/Input.disabled.css +5 -34
  16. package/css/sterling/Label.base.css +12 -6
  17. package/css/sterling/Label.boxed.css +6 -2
  18. package/css/sterling/List.base.css +3 -25
  19. package/css/sterling/List.disabled.css +4 -4
  20. package/css/sterling/ListItem.disabled.css +7 -23
  21. package/css/sterling/Menu.base.css +2 -2
  22. package/css/sterling/MenuItem.base.css +3 -18
  23. package/css/sterling/MenuItem.css +1 -1
  24. package/css/sterling/MenuItem.defaultItem.css +1 -1
  25. package/css/sterling/MenuItem.disabled.css +6 -0
  26. package/css/sterling/MenuSeparator.base.css +1 -1
  27. package/css/sterling/Pagination.button.css +1 -1
  28. package/css/sterling/Pagination.input.css +3 -3
  29. package/css/sterling/Popover.css +1 -0
  30. package/css/sterling/Progress.base.css +1 -1
  31. package/css/sterling/Progress.css +0 -1
  32. package/css/sterling/Radio.base.css +2 -2
  33. package/css/sterling/Radio.disabled.css +12 -22
  34. package/css/sterling/Select.base.css +6 -6
  35. package/css/sterling/Select.disabled.css +5 -22
  36. package/css/sterling/Slider.base.css +45 -13
  37. package/css/sterling/Slider.disabled.css +8 -23
  38. package/css/sterling/Switch.base.css +15 -14
  39. package/css/sterling/Switch.disabled.css +15 -26
  40. package/css/sterling/Tab.base.css +5 -5
  41. package/css/sterling/Tab.disabled.css +5 -30
  42. package/css/sterling/TabList.base.css +1 -1
  43. package/css/sterling/TextArea.base.css +4 -4
  44. package/css/sterling/TextArea.disabled.css +5 -26
  45. package/css/sterling/Tree.base.css +4 -4
  46. package/css/sterling/Tree.disabled.css +5 -26
  47. package/css/sterling/TreeItem.disabled.css +4 -29
  48. package/css/sterling/vars.css +53 -46
  49. package/package.json +1 -1
  50. package/css/sterling/MenuItem.defaultItem.disabled.css +0 -28
  51. package/css/sterling/Progress.disabled.css +0 -17
package/README.md CHANGED
@@ -22,6 +22,27 @@ https://github.com/GeoffCox/sterling-svelte-themes
22
22
 
23
23
  ## Change Log
24
24
 
25
+ ### 2.0.4
26
+
27
+ - Standardized disabled styles: Removed no-step diagonal stripes in favor of traditional background, border, and color.
28
+ - Removed progress disabled styling (progress is not interactive)
29
+ - Fixed MenuItem disabled styling selector issue
30
+ - Improved layout of Label to help content/input responsd to width changes
31
+ - Improved layout of Label with boxed style to display message across the bottom.
32
+ - Fixed modifies of button colors to separate multiple modifiers with multiple double dashes (e.g. --blue-hover => --blue--hover)
33
+ - Fixed Switch hover, active, selected background colors for better contrast
34
+ - Improved focus styles of Slider, Switch to focus on button/thumb element
35
+ - Added border width variables for common, button, and input.
36
+ - Fixed missing use of outline border width variable across all styles.
37
+ - Reduced border and outline width from 2px to 1px to avoid heaviness with border styles
38
+ - Fixed bug in Pagination missing input:hover style
39
+ - Updated drop shadows to be consistent for Callout, Dialog, Dropdown, Menu, Select, and Tooltip.
40
+
41
+
42
+ ### 2.0.3
43
+
44
+ - Slider - support for reverse direction of slider
45
+
25
46
  ### 2.0.2
26
47
 
27
48
  - Autocomplete - added styles
package/css/sterling/Autocomplete.base.css CHANGED
@@ -9,9 +9,9 @@
9
9
  border-color: var(--stsv-common__border-color);
10
10
  border-radius: 0;
11
11
  border-style: solid;
12
- border-width: 2px;
13
- box-shadow: var(--stsv-common__box-shadow);
12
+ border-width: var(--stsv-common__border-width);
14
13
  color: var(--stsv-common__color);
14
+ filter: var(--stsv-common__drop-shadow);
15
15
  display: grid;
16
16
  grid-template-columns: 1fr;
17
17
  grid-template-rows: 1fr;
package/css/sterling/Button.base.css CHANGED
@@ -6,7 +6,7 @@
6
6
  border-color: var(--stsv-button__border-color);
7
7
  border-radius: 8px;
8
8
  border-style: solid;
9
- border-width: 2px;
9
+ border-width: var(--stsv-button__border-width);
10
10
  box-sizing: border-box;
11
11
  color: var(--stsv-button__color);
12
12
  cursor: pointer;
@@ -45,7 +45,7 @@
45
45
  outline-color: var(--stsv-common__outline-color);
46
46
  outline-offset: 0;
47
47
  outline-style: solid;
48
- outline-width: 2px;
48
+ outline-width: var(--stsv-common__outline-width);
49
49
  }
50
50
 
51
51
  @media (prefers-reduced-motion) {
package/css/sterling/Button.colors.css CHANGED
@@ -6,21 +6,21 @@
6
6
  }
7
7
 
8
8
  .sterling-button.blue:hover {
9
- background-color: var(--stsv-button__background-color--blue-hover);
10
- border-color: var(--stsv-button__border-color--blue-hover);
11
- color: var(--stsv-button__color--blue-hover);
9
+ background-color: var(--stsv-button__background-color--blue--hover);
10
+ border-color: var(--stsv-button__border-color--blue--hover);
11
+ color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
14
  .sterling-button.blue:focus {
15
- background-color: var(--stsv-button__background-color--blue-focus);
16
- border-color: var(--stsv-button__border-color--blue-focus);
17
- color: var(--stsv-button__color--blue-focus);
15
+ background-color: var(--stsv-button__background-color--blue--focus);
16
+ border-color: var(--stsv-button__border-color--blue--focus);
17
+ color: var(--stsv-button__color--blue--focus);
18
18
  }
19
19
 
20
20
  .sterling-button.blue:active {
21
- background-color: var(--stsv-button__background-color--blue-active);
22
- border-color: var(--stsv-button__border-color--blue-active);
23
- color: var(--stsv-button__color--blue-active);
21
+ background-color: var(--stsv-button__background-color--blue--active);
22
+ border-color: var(--stsv-button__border-color--blue--active);
23
+ color: var(--stsv-button__color--blue--active);
24
24
  }
25
25
 
26
26
  /* ----- green ----- */
@@ -32,21 +32,21 @@
32
32
  }
33
33
 
34
34
  .sterling-button.green:hover {
35
- background-color: var(--stsv-button__background-color--green-hover);
36
- border-color: var(--stsv-button__border-color--green-hover);
37
- color: var(--stsv-button__color--green-hover);
35
+ background-color: var(--stsv-button__background-color--green--hover);
36
+ border-color: var(--stsv-button__border-color--green--hover);
37
+ color: var(--stsv-button__color--green--hover);
38
38
  }
39
39
 
40
40
  .sterling-button.green:focus {
41
- background-color: var(--stsv-button__background-color--green-focus);
42
- border-color: var(--stsv-button__border-color--green-focus);
43
- color: var(--stsv-button__color--green-focus);
41
+ background-color: var(--stsv-button__background-color--green--focus);
42
+ border-color: var(--stsv-button__border-color--green--focus);
43
+ color: var(--stsv-button__color--green--focus);
44
44
  }
45
45
 
46
46
  .sterling-button.green:active {
47
- background-color: var(--stsv-button__background-color--green-active);
48
- border-color: var(--stsv-button__border-color--green-active);
49
- color: var(--stsv-button__color--green-active);
47
+ background-color: var(--stsv-button__background-color--green--active);
48
+ border-color: var(--stsv-button__border-color--green--active);
49
+ color: var(--stsv-button__color--green--active);
50
50
  }
51
51
 
52
52
  /* ----- orange ----- */
@@ -57,21 +57,21 @@
57
57
  }
58
58
 
59
59
  .sterling-button.orange:hover {
60
- background-color: var(--stsv-button__background-color--orange-hover);
61
- border-color: var(--stsv-button__border-color--orange-hover);
62
- color: var(--stsv-button__color--orange-hover);
60
+ background-color: var(--stsv-button__background-color--orange--hover);
61
+ border-color: var(--stsv-button__border-color--orange--hover);
62
+ color: var(--stsv-button__color--orange--hover);
63
63
  }
64
64
 
65
65
  .sterling-button.orange:focus {
66
- background-color: var(--stsv-button__background-color--orange-focus);
67
- border-color: var(--stsv-button__border-color--orange-focus);
68
- color: var(--stsv-button__color--orange-focus);
66
+ background-color: var(--stsv-button__background-color--orange--focus);
67
+ border-color: var(--stsv-button__border-color--orange--focus);
68
+ color: var(--stsv-button__color--orange--focus);
69
69
  }
70
70
 
71
71
  .sterling-button.orange:active {
72
- background-color: var(--stsv-button__background-color--orange-active);
73
- border-color: var(--stsv-button__border-color--orange-active);
74
- color: var(--stsv-button__color--orange-active);
72
+ background-color: var(--stsv-button__background-color--orange--active);
73
+ border-color: var(--stsv-button__border-color--orange--active);
74
+ color: var(--stsv-button__color--orange--active);
75
75
  }
76
76
 
77
77
  /* ----- red ----- */
@@ -82,19 +82,19 @@
82
82
  }
83
83
 
84
84
  .sterling-button.red:hover {
85
- background-color: var(--stsv-button__background-color--red-hover);
86
- border-color: var(--stsv-button__border-color--red-hover);
87
- color: var(--stsv-button__color--red-hover);
85
+ background-color: var(--stsv-button__background-color--red--hover);
86
+ border-color: var(--stsv-button__border-color--red--hover);
87
+ color: var(--stsv-button__color--red--hover);
88
88
  }
89
89
 
90
90
  .sterling-button.red:focus {
91
- background-color: var(--stsv-button__background-color--red-focus);
92
- border-color: var(--stsv-button__border-color--red-focus);
93
- color: var(--stsv-button__color--red-focus);
91
+ background-color: var(--stsv-button__background-color--red--focus);
92
+ border-color: var(--stsv-button__border-color--red--focus);
93
+ color: var(--stsv-button__color--red--focus);
94
94
  }
95
95
 
96
96
  .sterling-button.red:active {
97
- background-color: var(--stsv-button__background-color--red-active);
98
- border-color: var(--stsv-button__border-color--red-active);
99
- color: var(--stsv-button__color--red-active);
97
+ background-color: var(--stsv-button__background-color--red--active);
98
+ border-color: var(--stsv-button__border-color--red--active);
99
+ color: var(--stsv-button__color--red--active);
100
100
  }
package/css/sterling/Button.disabled.css CHANGED
@@ -1,22 +1,6 @@
1
1
  .sterling-button:disabled {
2
2
  cursor: not-allowed;
3
- position: relative;
4
- }
5
-
6
- .sterling-button:disabled::after {
7
- content: '';
8
- position: absolute;
9
- left: 0;
10
- right: 0;
11
- top: 0;
12
- bottom: 0;
13
- background: repeating-linear-gradient(
14
- var(--stsv-common--disabled__stripe-angle),
15
- var(--stsv-common--disabled__stripe-color),
16
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
17
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
18
- var(--stsv-common--disabled__stripe-color--alt)
19
- calc(2 * var(--stsv-common--disabled__stripe-width))
20
- );
21
- pointer-events: none;
22
- }
3
+ background-color: var(--stsv-button__background-color--disabled);
4
+ border-color: var(--stsv-button__border-color--disabled);
5
+ color: var(--stsv-button__color--disabled);
6
+ }
package/css/sterling/Button.secondary.colors.css CHANGED
@@ -7,21 +7,21 @@
7
7
  }
8
8
 
9
9
  .sterling-button.secondary.blue:hover {
10
- background-color: var(--stsv-button__background-color--blue-hover);
11
- border-color: var(--stsv-button__border-color--blue-hover);
12
- color: var(--stsv-button__color--blue-hover);
10
+ background-color: var(--stsv-button__background-color--blue--hover);
11
+ border-color: var(--stsv-button__border-color--blue--hover);
12
+ color: var(--stsv-button__color--blue--hover);
13
13
  }
14
14
 
15
15
  .sterling-button.secondary.blue:focus {
16
- background-color: var(--stsv-button__background-color--blue-focus);
17
- border-color: var(--stsv-button__border-color--blue-focus);
18
- color: var(--stsv-button__color--blue-focus);
16
+ background-color: var(--stsv-button__background-color--blue--focus);
17
+ border-color: var(--stsv-button__border-color--blue--focus);
18
+ color: var(--stsv-button__color--blue--focus);
19
19
  }
20
20
 
21
21
  .sterling-button.secondary.blue:active {
22
- background-color: var(--stsv-button__background-color--blue-active);
23
- border-color: var(--stsv-button__border-color--blue-active);
24
- color: var(--stsv-button__color--blue-active);
22
+ background-color: var(--stsv-button__background-color--blue--active);
23
+ border-color: var(--stsv-button__border-color--blue--active);
24
+ color: var(--stsv-button__color--blue--active);
25
25
  }
26
26
 
27
27
  /* ----- green ----- */
@@ -33,21 +33,21 @@
33
33
  }
34
34
 
35
35
  .sterling-button.secondary.green:hover {
36
- background-color: var(--stsv-button__background-color--green-hover);
37
- border-color: var(--stsv-button__border-color--green-hover);
38
- color: var(--stsv-button__color--green-hover);
36
+ background-color: var(--stsv-button__background-color--green--hover);
37
+ border-color: var(--stsv-button__border-color--green--hover);
38
+ color: var(--stsv-button__color--green--hover);
39
39
  }
40
40
 
41
41
  .sterling-button.secondary.green:focus {
42
- background-color: var(--stsv-button__background-color--green-focus);
43
- border-color: var(--stsv-button__border-color--green-focus);
44
- color: var(--stsv-button__color--green-focus);
42
+ background-color: var(--stsv-button__background-color--green--focus);
43
+ border-color: var(--stsv-button__border-color--green--focus);
44
+ color: var(--stsv-button__color--green--focus);
45
45
  }
46
46
 
47
47
  .sterling-button.secondary.green:active {
48
- background-color: var(--stsv-button__background-color--green-active);
49
- border-color: var(--stsv-button__border-color--green-active);
50
- color: var(--stsv-button__color--green-active);
48
+ background-color: var(--stsv-button__background-color--green--active);
49
+ border-color: var(--stsv-button__border-color--green--active);
50
+ color: var(--stsv-button__color--green--active);
51
51
  }
52
52
 
53
53
  /* ----- orange ----- */
@@ -59,21 +59,21 @@
59
59
  }
60
60
 
61
61
  .sterling-button.secondary.orange:hover {
62
- background-color: var(--stsv-button__background-color--orange-hover);
63
- border-color: var(--stsv-button__border-color--orange-hover);
64
- color: var(--stsv-button__color--orange-hover);
62
+ background-color: var(--stsv-button__background-color--orange--hover);
63
+ border-color: var(--stsv-button__border-color--orange--hover);
64
+ color: var(--stsv-button__color--orange--hover);
65
65
  }
66
66
 
67
67
  .sterling-button.secondary.orange:focus {
68
- background-color: var(--stsv-button__background-color--orange-focus);
69
- border-color: var(--stsv-button__border-color--orange-focus);
70
- color: var(--stsv-button__color--orange-focus);
68
+ background-color: var(--stsv-button__background-color--orange--focus);
69
+ border-color: var(--stsv-button__border-color--orange--focus);
70
+ color: var(--stsv-button__color--orange--focus);
71
71
  }
72
72
 
73
73
  .sterling-button.secondary.orange:active {
74
- background-color: var(--stsv-button__background-color--orange-active);
75
- border-color: var(--stsv-button__border-color--orange-active);
76
- color: var(--stsv-button__color--orange-active);
74
+ background-color: var(--stsv-button__background-color--orange--active);
75
+ border-color: var(--stsv-button__border-color--orange--active);
76
+ color: var(--stsv-button__color--orange--active);
77
77
  }
78
78
 
79
79
  /* ----- red ----- */
@@ -85,19 +85,19 @@
85
85
  }
86
86
 
87
87
  .sterling-button.secondary.red:hover {
88
- background-color: var(--stsv-button__background-color--red-hover);
89
- border-color: var(--stsv-button__border-color--red-hover);
90
- color: var(--stsv-button__color--red-hover);
88
+ background-color: var(--stsv-button__background-color--red--hover);
89
+ border-color: var(--stsv-button__border-color--red--hover);
90
+ color: var(--stsv-button__color--red--hover);
91
91
  }
92
92
 
93
93
  .sterling-button.secondary.red:focus {
94
- background-color: var(--stsv-button__background-color--red-focus);
95
- border-color: var(--stsv-button__border-color--red-focus);
96
- color: var(--stsv-button__color--red-focus);
94
+ background-color: var(--stsv-button__background-color--red--focus);
95
+ border-color: var(--stsv-button__border-color--red--focus);
96
+ color: var(--stsv-button__color--red--focus);
97
97
  }
98
98
 
99
99
  .sterling-button.secondary.red:active {
100
- background-color: var(--stsv-button__background-color--red-active);
101
- border-color: var(--stsv-button__border-color--red-active);
102
- color: var(--stsv-button__color--red-active);
100
+ background-color: var(--stsv-button__background-color--red--active);
101
+ border-color: var(--stsv-button__border-color--red--active);
102
+ color: var(--stsv-button__color--red--active);
103
103
  }
package/css/sterling/Button.tool.colors.css CHANGED
@@ -7,18 +7,18 @@
7
7
  }
8
8
 
9
9
  .sterling-button.tool.blue:hover {
10
- background-color: var(--stsv-button__background-color--blue-hover);
11
- color: var(--stsv-button__color--blue-hover);
10
+ background-color: var(--stsv-button__background-color--blue--hover);
11
+ color: var(--stsv-button__color--blue--hover);
12
12
  }
13
13
 
14
14
  .sterling-button.tool.blue:focus {
15
- background-color: var(--stsv-button__background-color--blue-focus);
16
- color: var(--stsv-button__color--blue-focus);
15
+ background-color: var(--stsv-button__background-color--blue--focus);
16
+ color: var(--stsv-button__color--blue--focus);
17
17
  }
18
18
 
19
19
  .sterling-button.tool.blue:active {
20
- background-color: var(--stsv-button__background-color--blue-active);
21
- color: var(--stsv-button__color--blue-active);
20
+ background-color: var(--stsv-button__background-color--blue--active);
21
+ color: var(--stsv-button__color--blue--active);
22
22
  }
23
23
 
24
24
  /* ----- green ----- */
@@ -30,18 +30,18 @@
30
30
  }
31
31
 
32
32
  .sterling-button.tool.green:hover {
33
- background-color: var(--stsv-button__background-color--green-hover);
34
- color: var(--stsv-button__color--green-hover);
33
+ background-color: var(--stsv-button__background-color--green--hover);
34
+ color: var(--stsv-button__color--green--hover);
35
35
  }
36
36
 
37
37
  .sterling-button.tool.green:focus {
38
- background-color: var(--stsv-button__background-color--green-focus);
39
- color: var(--stsv-button__color--green-focus);
38
+ background-color: var(--stsv-button__background-color--green--focus);
39
+ color: var(--stsv-button__color--green--focus);
40
40
  }
41
41
 
42
42
  .sterling-button.tool.green:active {
43
- background-color: var(--stsv-button__background-color--green-active);
44
- color: var(--stsv-button__color--green-active);
43
+ background-color: var(--stsv-button__background-color--green--active);
44
+ color: var(--stsv-button__color--green--active);
45
45
  }
46
46
 
47
47
  /* ----- orange ----- */
@@ -53,18 +53,18 @@
53
53
  }
54
54
 
55
55
  .sterling-button.tool.orange:hover {
56
- background-color: var(--stsv-button__background-color--orange-hover);
57
- color: var(--stsv-button__color--orange-hover);
56
+ background-color: var(--stsv-button__background-color--orange--hover);
57
+ color: var(--stsv-button__color--orange--hover);
58
58
  }
59
59
 
60
60
  .sterling-button.tool.orange:focus {
61
- background-color: var(--stsv-button__background-color--orange-focus);
62
- color: var(--stsv-button__color--orange-focus);
61
+ background-color: var(--stsv-button__background-color--orange--focus);
62
+ color: var(--stsv-button__color--orange--focus);
63
63
  }
64
64
 
65
65
  .sterling-button.tool.orange:active {
66
- background-color: var(--stsv-button__background-color--orange-active);
67
- color: var(--stsv-button__color--orange-active);
66
+ background-color: var(--stsv-button__background-color--orange--active);
67
+ color: var(--stsv-button__color--orange--active);
68
68
  }
69
69
 
70
70
  /* ----- red ----- */
@@ -76,16 +76,16 @@
76
76
  }
77
77
 
78
78
  .sterling-button.tool.red:hover {
79
- background-color: var(--stsv-button__background-color--red-hover);
80
- color: var(--stsv-button__color--red-hover);
79
+ background-color: var(--stsv-button__background-color--red--hover);
80
+ color: var(--stsv-button__color--red--hover);
81
81
  }
82
82
 
83
83
  .sterling-button.tool.red:focus {
84
- background-color: var(--stsv-button__background-color--red-focus);
85
- color: var(--stsv-button__color--red-focus);
84
+ background-color: var(--stsv-button__background-color--red--focus);
85
+ color: var(--stsv-button__color--red--focus);
86
86
  }
87
87
 
88
88
  .sterling-button.tool.red:active {
89
- background-color: var(--stsv-button__background-color--red-active);
90
- color: var(--stsv-button__color--red-active);
89
+ background-color: var(--stsv-button__background-color--red--active);
90
+ color: var(--stsv-button__color--red--active);
91
91
  }
package/css/sterling/Callout.base.css CHANGED
@@ -8,11 +8,11 @@
8
8
  border-color: var(--stsv-common__border-color);
9
9
  border-radius: 0;
10
10
  border-style: solid;
11
- border-width: 2px;
12
- box-shadow: var(--stsv-common__box-shadow);
11
+ border-width: var(--stsv-common__border-width);
13
12
  box-sizing: border-box;
14
13
  color: var(--stsv-common__color);
15
14
  display: none;
15
+ filter: var(--stsv-common__drop-shadow);
16
16
  grid-template-columns: 1fr;
17
17
  grid-template-rows: 1fr;
18
18
  height: auto;
@@ -45,13 +45,13 @@
45
45
  .sterling-callout.top-start .arrow,
46
46
  .sterling-callout.top .arrow,
47
47
  .sterling-callout.top-end .arrow {
48
- filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
48
+ filter: var(--stsv-common__drop-shadow);
49
49
  }
50
50
 
51
51
  .sterling-callout.left-start .arrow,
52
52
  .sterling-callout.left .arrow,
53
53
  .sterling-callout.left-end .arrow {
54
- filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
54
+ filter: var(--stsv-common__drop-shadow);
55
55
  }
56
56
 
57
57
  .sterling-callout .callout-text {
package/css/sterling/Checkbox.base.css CHANGED
@@ -46,7 +46,7 @@ and there is not a parent CSS selector.
46
46
  background-color: var(--stsv-input__background-color);
47
47
  border-color: var(--stsv-input__border-color);
48
48
  border-style: solid;
49
- border-width: 2px;
49
+ border-width: var(--stsv-input__border-width);
50
50
  box-sizing: border-box;
51
51
  display: inline-block;
52
52
  height: 20px;
@@ -59,7 +59,7 @@ and there is not a parent CSS selector.
59
59
  pointer-events: none;
60
60
  }
61
61
 
62
- .sterling-checkbox input:checked + .indicator {
62
+ .sterling-checkbox:not(.disabled) input:checked + .indicator {
63
63
  background-color: var(--stsv-input__background-color);
64
64
  border-color: var(--stsv-input__border-color);
65
65
  }
@@ -73,14 +73,13 @@ and there is not a parent CSS selector.
73
73
  outline-color: var(--stsv-common__outline-color);
74
74
  outline-offset: 0;
75
75
  outline-style: solid;
76
- outline-width: 2px;
76
+ outline-width: var(--stsv-common__outline-width);
77
77
  }
78
78
 
79
79
  /*
80
80
  The checkmark is a rotated L centered in the box.
81
81
  */
82
82
  .sterling-checkbox .indicator::after {
83
- border-color: var(--stsv-input__color);
84
83
  border-style: solid;
85
84
  border-width: 0 3px 3px 0;
86
85
  box-sizing: border-box;
@@ -92,8 +91,8 @@ The checkmark is a rotated L centered in the box.
92
91
  transform: translate(-50%, -50%) rotate(45deg);
93
92
  transform-origin: center;
94
93
  transition:
95
- border-color 250ms,
96
- opacity 150ms;
94
+ border-color 250ms,
95
+ opacity 150ms;
97
96
  width: 7px;
98
97
  opacity: 0;
99
98
  }
@@ -102,6 +101,10 @@ The checkmark is a rotated L centered in the box.
102
101
  opacity: 1;
103
102
  }
104
103
 
104
+ .sterling-checkbox:not(.disabled) .indicator::after {
105
+ border-color: var(--stsv-input__color);
106
+ }
107
+
105
108
  .sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
106
109
  border-color: var(--stsv-input__color--hover);
107
110
  }
package/css/sterling/Checkbox.disabled.css CHANGED
@@ -1,28 +1,18 @@
1
1
  .sterling-checkbox.disabled,
2
- .sterling-checkbox.disabled input {
2
+ .sterling-checkbox.disabled input,
3
+ .sterling-checkbox.disabled > label {
3
4
  cursor: not-allowed;
4
5
  }
5
6
 
6
- .sterling-checkbox .container::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;
7
+ .sterling-checkbox.disabled .indicator {
8
+ background-color: var(--stsv-input__background-color--disabled);
9
+ border-color: var(--stsv-input__border-color--disabled);
24
10
  }
25
11
 
26
- .sterling-checkbox.disabled .container::after {
27
- opacity: 1;
12
+ .sterling-checkbox.disabled .indicator::after {
13
+ border-color: var(--stsv-input__color--disabled);
28
14
  }
15
+
16
+ .sterling-checkbox.disabled > label {
17
+ color: var(--stsv-common__color--disabled);
18
+ }
package/css/sterling/Dialog.base.css CHANGED
@@ -3,6 +3,7 @@
3
3
  padding: 0;
4
4
  border: none;
5
5
  background: none;
6
+ filter: var(--stsv-common__drop-shadow);
6
7
  overflow: visible;
7
8
  }
8
9
 
@@ -26,7 +27,7 @@
26
27
  border-color: var(--stsv-common__border-color);
27
28
  border-radius: 0;
28
29
  border-style: solid;
29
- border-width: 2px;
30
+ border-width: var(--stsv-common__border-width);
30
31
  box-sizing: border-box;
31
32
  color: var(--stsv-common__color);
32
33
  display: grid;
@@ -98,7 +99,7 @@
98
99
 
99
100
  .sterling-dialog > form > .content > .separator {
100
101
  background-color: var(--stsv-common__background-color--secondary);
101
- height: 2px;
102
+ height: var(--stsv-common__border-width);
102
103
  margin: 0 0.25em;
103
104
  }
104
105
 
package/css/sterling/Dropdown.base.css CHANGED
@@ -5,7 +5,7 @@
5
5
  border-color: var(--stsv-input__border-color);
6
6
  border-radius: 8px;
7
7
  border-style: solid;
8
- border-width: 2px;
8
+ border-width: var(--stsv-input__border-width);
9
9
  color: var(--stsv-input__color);
10
10
  display: grid;
11
11
  grid-template-columns: 1fr auto;
@@ -20,20 +20,20 @@
20
20
  border-color 250ms;
21
21
  }
22
22
 
23
- .sterling-dropdown:hover {
23
+ .sterling-dropdown:not(.disabled):hover {
24
24
  background-color: var(--stsv-input__background-color--hover);
25
25
  border-color: var(--stsv-input__border-color--hover);
26
26
  color: var(--stsv-input__color--hover);
27
27
  }
28
28
 
29
- .sterling-dropdown:focus {
29
+ .sterling-dropdown:not(.disabled):focus {
30
30
  background-color: var(--stsv-input__background-color--focus);
31
31
  border-color: var(--stsv-input__border-color--focus);
32
32
  color: var(--stsv-input__color--focus);
33
33
  outline-color: var(--stsv-common__outline-color);
34
34
  outline-offset: 0;
35
35
  outline-style: solid;
36
- outline-width: 2px;
36
+ outline-width: var(--stsv-common__outline-width);
37
37
  }
38
38
 
39
39
  .sterling-dropdown > .value {
@@ -89,9 +89,9 @@
89
89
  border-color: var(--stsv-common__border-color);
90
90
  border-radius: 0;
91
91
  border-style: solid;
92
- border-width: 2px;
93
- box-shadow: var(--stsv-common__box-shadow);
92
+ border-width: var(--stsv-common__border-width);
94
93
  color: var(--stsv-common__color);
94
+ filter: var(--stsv-common__drop-shadow);
95
95
  padding: 0.25em;
96
96
  display: grid;
97
97
  grid-template-columns: 1fr;
package/css/sterling/Dropdown.disabled.css CHANGED
@@ -1,32 +1,11 @@
1
1
  .sterling-dropdown.disabled {
2
+ background-color: var(--stsv-input__background-color--disabled);
3
+ border-color: var(--stsv-input__border-color--disabled);
4
+ color: var(--stsv-input__color--disabled);
2
5
  cursor: not-allowed;
3
6
  outline: none;
4
7
  }
5
8
 
6
9
  .sterling-dropdown.disabled .button {
7
10
  cursor: not-allowed;
8
- }
9
-
10
- .sterling-dropdown::after {
11
- background: repeating-linear-gradient(
12
- var(--stsv-common--disabled__stripe-angle),
13
- var(--stsv-common--disabled__stripe-color),
14
- var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
15
- var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
16
- var(--stsv-common--disabled__stripe-color--alt)
17
- calc(2 * var(--stsv-common--disabled__stripe-width))
18
- );
19
- bottom: 0;
20
- content: '';
21
- left: 0;
22
- opacity: 0;
23
- position: absolute;
24
- right: 0;
25
- top: 0;
26
- pointer-events: none;
27
- transition: opacity 250ms;
28
- }
29
-
30
- .sterling-dropdown.disabled::after {
31
- opacity: 1;
32
- }
11
+ }