@geoffcox/sterling-svelte-themes 2.0.9 → 2.0.11

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 (6) hide show
  1. package/README.md +10 -1
  2. package/css/sterling/Checkbox.base.css +4 -4
  3. package/css/sterling/Checkbox.button.css +12 -16
  4. package/css/sterling/Radio.base.css +2 -2
  5. package/css/sterling/Radio.button.css +13 -14
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -22,9 +22,18 @@ https://github.com/GeoffCox/sterling-svelte-themes
22
22
 
23
23
  ## Change Log
24
24
 
25
+ ### 2.0.11
26
+
27
+ - Fix put 1px transparent border on checkbox and radio button variants to match
28
+ Button layout and size.
29
+
30
+ ### 2.0.10
31
+
32
+ - Fix to sizing of checkbox and radio button variant inputs
33
+
25
34
  ### 2.0.9
26
35
 
27
- - Small specificity bug fix in radio button hover style
36
+ - Fix in radio button hover style
28
37
 
29
38
  ### 2.0.8
30
39
 
package/css/sterling/Checkbox.base.css CHANGED
@@ -109,7 +109,7 @@ The checkmark is a rotated L centered in the box.
109
109
  border-color: var(--stsv-input__color--hover);
110
110
  }
111
111
 
112
- .sterling-checkbox > label {
112
+ .sterling-checkbox label {
113
113
  color: var(--stsv-common__color);
114
114
  transition: color 250ms;
115
115
  font: inherit;
@@ -117,7 +117,7 @@ The checkmark is a rotated L centered in the box.
117
117
 
118
118
  .sterling-checkbox.disabled,
119
119
  .sterling-checkbox.disabled input,
120
- .sterling-checkbox.disabled > label {
120
+ .sterling-checkbox.disabled label {
121
121
  cursor: not-allowed;
122
122
  }
123
123
 
@@ -130,7 +130,7 @@ The checkmark is a rotated L centered in the box.
130
130
  border-color: var(--stsv-input__color--disabled);
131
131
  }
132
132
 
133
- .sterling-checkbox.disabled > label {
133
+ .sterling-checkbox.disabled label {
134
134
  color: var(--stsv-common__color--disabled);
135
135
  }
136
136
 
@@ -138,7 +138,7 @@ The checkmark is a rotated L centered in the box.
138
138
  .sterling-checkbox .indicator,
139
139
  .sterling-checkbox .indicator::after,
140
140
  .sterling-checkbox .container::after,
141
- .sterling-checkbox > label {
141
+ .sterling-checkbox label {
142
142
  transition: none;
143
143
  }
144
144
  }
package/css/sterling/Checkbox.button.css CHANGED
@@ -4,6 +4,7 @@
4
4
  grid-template-rows: 1fr;
5
5
  justify-content: center;
6
6
  justify-items: center;
7
+ border: 1px solid transparent;
7
8
  }
8
9
 
9
10
  .sterling-checkbox.button:not(.disabled):hover {
@@ -12,16 +13,13 @@
12
13
 
13
14
  .sterling-checkbox.button:not(.disabled):not(.checked):active {
14
15
  background-color: var(--stsv-button__background-color--active);
15
- border-color: transparent;
16
16
  }
17
17
 
18
18
  .sterling-checkbox.button:not(.disabled).checked {
19
19
  background-color: var(--stsv-input__background-color--selected);
20
- border-color: transparent;
21
20
  }
22
21
 
23
22
  .sterling-checkbox.button.using-keyboard:focus-within {
24
- border-color: var(--stsv-button__border-color--focus);
25
23
  outline-color: var(--stsv-common__outline-color);
26
24
  outline-offset: 0;
27
25
  outline-style: solid;
@@ -35,35 +33,33 @@
35
33
  }
36
34
 
37
35
  .sterling-checkbox.button .container {
36
+ display: block;
38
37
  justify-self: stretch;
39
38
  align-self: stretch;
40
39
  margin-right: unset;
41
40
  }
42
41
 
43
42
  .sterling-checkbox.button input {
44
- appearance: initial;
43
+ left: 0;
44
+ top: 0;
45
+ right: 0;
46
+ bottom: 0;
47
+ width: unset;
48
+ height: unset;
49
+ }
50
+
51
+ .sterling-radio.button label {
45
52
  display: block;
46
- box-sizing: border-box;
47
- opacity: 0;
48
- width:100%;
49
- height: 100%;
50
- position: relative;
51
- justify-self: stretch;
52
- align-self: stretch;
53
53
  }
54
54
 
55
55
  .sterling-checkbox.button .indicator {
56
56
  display: none;
57
57
  }
58
58
 
59
-
60
59
  .sterling-checkbox.button.disabled {
61
60
  background-color: var(--stsv-input__background-color--disabled);
62
- border-color: transparent;
63
61
  }
64
62
 
65
- .sterling-radio.button.disabled > label {
63
+ .sterling-checkbox.button.disabled label {
66
64
  color: var(--stsv-common__color--disabled);
67
65
  }
68
-
69
-
package/css/sterling/Radio.base.css CHANGED
@@ -102,7 +102,7 @@
102
102
 
103
103
  .sterling-radio.disabled,
104
104
  .sterling-radio.disabled input,
105
- .sterling-radio.disabled > label {
105
+ .sterling-radio.disabled label {
106
106
  cursor: not-allowed;
107
107
  }
108
108
 
@@ -115,7 +115,7 @@
115
115
  border-color: var(--stsv-input__color--disabled);
116
116
  }
117
117
 
118
- .sterling-radio.disabled > label {
118
+ .sterling-radio.disabled label {
119
119
  color: var(--stsv-common__color--disabled);
120
120
  }
121
121
 
package/css/sterling/Radio.button.css CHANGED
@@ -4,6 +4,7 @@
4
4
  grid-template-rows: 1fr;
5
5
  justify-content: center;
6
6
  justify-items: center;
7
+ border: 1px solid transparent;
7
8
  }
8
9
 
9
10
  .sterling-radio.button:not(.disabled):hover {
@@ -12,16 +13,13 @@
12
13
 
13
14
  .sterling-radio.button:not(.disabled):not(.checked):active {
14
15
  background-color: var(--stsv-button__background-color--active);
15
- border-color: transparent;
16
16
  }
17
17
 
18
18
  .sterling-radio.button:not(.disabled).checked {
19
19
  background-color: var(--stsv-input__background-color--selected);
20
- border-color: transparent;
21
20
  }
22
21
 
23
22
  .sterling-radio.button.using-keyboard:focus-within {
24
- border-color: var(--stsv-button__border-color--focus);
25
23
  outline-color: var(--stsv-common__outline-color);
26
24
  outline-offset: 0;
27
25
  outline-style: solid;
@@ -35,21 +33,23 @@
35
33
  }
36
34
 
37
35
  .sterling-radio.button .container {
36
+ display: block;
38
37
  justify-self: stretch;
39
38
  align-self: stretch;
40
39
  margin-right: unset;
41
40
  }
42
41
 
43
- .sterling-radio.button input {
44
- appearance: initial;
42
+ .sterling-radio.button label {
45
43
  display: block;
46
- box-sizing: border-box;
47
- opacity: 0;
48
- width:100%;
49
- height: 100%;
50
- position: relative;
51
- justify-self: stretch;
52
- align-self: stretch;
44
+ }
45
+
46
+ .sterling-radio.button input {
47
+ left: 0;
48
+ top: 0;
49
+ right: 0;
50
+ bottom: 0;
51
+ width: unset;
52
+ height: unset;
53
53
  }
54
54
 
55
55
  .sterling-radio.button .indicator {
@@ -59,9 +59,8 @@
59
59
 
60
60
  .sterling-radio.button.disabled {
61
61
  background-color: var(--stsv-input__background-color--disabled);
62
- border-color: transparent;
63
62
  }
64
63
 
65
- .sterling-radio.button.disabled > label {
64
+ .sterling-radio.button.disabled label {
66
65
  color: var(--stsv-common__color--disabled);
67
66
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoffcox/sterling-svelte-themes",
3
- "version": "2.0.9",
3
+ "version": "2.0.11",
4
4
  "author": "Geoff Cox",
5
5
  "description": "A modern theme for the sterling-svelte component library.",
6
6
  "license": "MIT",