@patternfly/patternfly 4.185.2 → 4.186.0
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/base/_globals.scss +5 -0
- package/base/patternfly-globals.css +5 -0
- package/components/Switch/switch.css +3 -3
- package/components/Switch/switch.scss +3 -3
- package/docs/components/Switch/examples/Switch.md +60 -11
- package/package.json +1 -1
- package/patternfly-base.css +5 -0
- package/patternfly-no-reset.css +3 -3
- package/patternfly.css +8 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/base/_globals.scss
CHANGED
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
--pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
|
|
14
14
|
--pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
|
|
15
15
|
--pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
|
|
16
|
-
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--
|
|
17
|
-
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--
|
|
16
|
+
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
17
|
+
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
|
|
18
18
|
--pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
|
|
19
19
|
--pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
|
|
20
20
|
--pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
|
|
21
21
|
--pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
|
|
22
|
-
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--
|
|
22
|
+
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
|
|
23
23
|
--pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
|
|
24
24
|
--pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
|
|
25
25
|
--pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
--pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
|
|
21
21
|
--pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
|
|
22
22
|
--pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
|
|
23
|
-
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--
|
|
24
|
-
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--
|
|
23
|
+
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
24
|
+
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
|
|
25
25
|
--pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
|
|
26
26
|
--pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
|
|
27
27
|
--pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
|
|
28
28
|
|
|
29
29
|
// Switch toggle
|
|
30
30
|
--pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
|
|
31
|
-
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--
|
|
31
|
+
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
|
|
32
32
|
--pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
|
|
33
33
|
--pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
|
|
34
34
|
--pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
|
|
@@ -13,7 +13,6 @@ cssPrefix: pf-c-switch
|
|
|
13
13
|
type="checkbox"
|
|
14
14
|
id="switch-with-label-1"
|
|
15
15
|
aria-labelledby="switch-with-label-1-on"
|
|
16
|
-
name="switchExample1"
|
|
17
16
|
checked
|
|
18
17
|
/>
|
|
19
18
|
|
|
@@ -40,9 +39,7 @@ cssPrefix: pf-c-switch
|
|
|
40
39
|
type="checkbox"
|
|
41
40
|
id="switch-with-label-2"
|
|
42
41
|
aria-labelledby="switch-with-label-2-on"
|
|
43
|
-
name="switchExample2"
|
|
44
42
|
/>
|
|
45
|
-
|
|
46
43
|
<span class="pf-c-switch__toggle"></span>
|
|
47
44
|
|
|
48
45
|
<span
|
|
@@ -69,7 +66,6 @@ cssPrefix: pf-c-switch
|
|
|
69
66
|
type="checkbox"
|
|
70
67
|
id="switch-reverse-1"
|
|
71
68
|
aria-labelledby="switch-reverse-1-on"
|
|
72
|
-
name="switchExample1"
|
|
73
69
|
checked
|
|
74
70
|
/>
|
|
75
71
|
|
|
@@ -96,9 +92,7 @@ cssPrefix: pf-c-switch
|
|
|
96
92
|
type="checkbox"
|
|
97
93
|
id="switch-reverse-2"
|
|
98
94
|
aria-labelledby="switch-reverse-2-on"
|
|
99
|
-
name="switchExample2"
|
|
100
95
|
/>
|
|
101
|
-
|
|
102
96
|
<span class="pf-c-switch__toggle"></span>
|
|
103
97
|
|
|
104
98
|
<span
|
|
@@ -116,6 +110,66 @@ cssPrefix: pf-c-switch
|
|
|
116
110
|
|
|
117
111
|
```
|
|
118
112
|
|
|
113
|
+
### Label and check
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<label class="pf-c-switch" for="switch-label-check-1">
|
|
117
|
+
<input
|
|
118
|
+
class="pf-c-switch__input"
|
|
119
|
+
type="checkbox"
|
|
120
|
+
id="switch-label-check-1"
|
|
121
|
+
aria-labelledby="switch-label-check-1-on"
|
|
122
|
+
checked
|
|
123
|
+
/>
|
|
124
|
+
|
|
125
|
+
<span class="pf-c-switch__toggle">
|
|
126
|
+
<span class="pf-c-switch__toggle-icon">
|
|
127
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
128
|
+
</span>
|
|
129
|
+
</span>
|
|
130
|
+
<span
|
|
131
|
+
class="pf-c-switch__label pf-m-on"
|
|
132
|
+
id="switch-label-check-1-on"
|
|
133
|
+
aria-hidden="true"
|
|
134
|
+
>Message when on</span>
|
|
135
|
+
|
|
136
|
+
<span
|
|
137
|
+
class="pf-c-switch__label pf-m-off"
|
|
138
|
+
id="switch-label-check-1-off"
|
|
139
|
+
aria-hidden="true"
|
|
140
|
+
>Message when off</span>
|
|
141
|
+
</label>
|
|
142
|
+
|
|
143
|
+
<br />
|
|
144
|
+
<br />
|
|
145
|
+
<label class="pf-c-switch" for="switch-label-check-2">
|
|
146
|
+
<input
|
|
147
|
+
class="pf-c-switch__input"
|
|
148
|
+
type="checkbox"
|
|
149
|
+
id="switch-label-check-2"
|
|
150
|
+
aria-labelledby="switch-label-check-2-off"
|
|
151
|
+
/>
|
|
152
|
+
|
|
153
|
+
<span class="pf-c-switch__toggle">
|
|
154
|
+
<span class="pf-c-switch__toggle-icon">
|
|
155
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
156
|
+
</span>
|
|
157
|
+
</span>
|
|
158
|
+
<span
|
|
159
|
+
class="pf-c-switch__label pf-m-on"
|
|
160
|
+
id="switch-label-check-2-on"
|
|
161
|
+
aria-hidden="true"
|
|
162
|
+
>Message when on</span>
|
|
163
|
+
|
|
164
|
+
<span
|
|
165
|
+
class="pf-c-switch__label pf-m-off"
|
|
166
|
+
id="switch-label-check-2-off"
|
|
167
|
+
aria-hidden="true"
|
|
168
|
+
>Message when off</span>
|
|
169
|
+
</label>
|
|
170
|
+
|
|
171
|
+
```
|
|
172
|
+
|
|
119
173
|
### Without label
|
|
120
174
|
|
|
121
175
|
```html
|
|
@@ -125,7 +179,6 @@ cssPrefix: pf-c-switch
|
|
|
125
179
|
type="checkbox"
|
|
126
180
|
id="switch-with-icon-1"
|
|
127
181
|
aria-label="switch is off"
|
|
128
|
-
name="switchExample3"
|
|
129
182
|
checked
|
|
130
183
|
/>
|
|
131
184
|
|
|
@@ -144,9 +197,7 @@ cssPrefix: pf-c-switch
|
|
|
144
197
|
type="checkbox"
|
|
145
198
|
id="switch-with-icon-2"
|
|
146
199
|
aria-label="switch is off"
|
|
147
|
-
name="switchExample4"
|
|
148
200
|
/>
|
|
149
|
-
|
|
150
201
|
<span class="pf-c-switch__toggle">
|
|
151
202
|
<span class="pf-c-switch__toggle-icon">
|
|
152
203
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
@@ -165,7 +216,6 @@ cssPrefix: pf-c-switch
|
|
|
165
216
|
type="checkbox"
|
|
166
217
|
id="switch-disabled-1"
|
|
167
218
|
aria-labelledby="switch-disabled-1-on"
|
|
168
|
-
name="switchExample5"
|
|
169
219
|
disabled
|
|
170
220
|
checked
|
|
171
221
|
/>
|
|
@@ -193,7 +243,6 @@ cssPrefix: pf-c-switch
|
|
|
193
243
|
type="checkbox"
|
|
194
244
|
id="switch-disabled-2"
|
|
195
245
|
aria-labelledby="switch-disabled-2-on"
|
|
196
|
-
name="switchExample6"
|
|
197
246
|
disabled
|
|
198
247
|
/>
|
|
199
248
|
|
package/package.json
CHANGED
package/patternfly-base.css
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -22844,13 +22844,13 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
22844
22844
|
--pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
|
|
22845
22845
|
--pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
|
|
22846
22846
|
--pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
|
|
22847
|
-
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--
|
|
22848
|
-
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--
|
|
22847
|
+
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
22848
|
+
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
|
|
22849
22849
|
--pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
|
|
22850
22850
|
--pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
|
|
22851
22851
|
--pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
|
|
22852
22852
|
--pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
|
|
22853
|
-
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--
|
|
22853
|
+
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
|
|
22854
22854
|
--pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
|
|
22855
22855
|
--pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
|
|
22856
22856
|
--pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
|
package/patternfly.css
CHANGED
|
@@ -715,6 +715,11 @@ th {
|
|
|
715
715
|
text-align: left;
|
|
716
716
|
}
|
|
717
717
|
|
|
718
|
+
code,
|
|
719
|
+
pre {
|
|
720
|
+
font-family: var(--pf-global--FontFamily--monospace);
|
|
721
|
+
}
|
|
722
|
+
|
|
718
723
|
*,
|
|
719
724
|
*::before,
|
|
720
725
|
*::after {
|
|
@@ -22966,13 +22971,13 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
22966
22971
|
--pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
|
|
22967
22972
|
--pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
|
|
22968
22973
|
--pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
|
|
22969
|
-
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--
|
|
22970
|
-
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--
|
|
22974
|
+
--pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
22975
|
+
--pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
|
|
22971
22976
|
--pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
|
|
22972
22977
|
--pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
|
|
22973
22978
|
--pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
|
|
22974
22979
|
--pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
|
|
22975
|
-
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--
|
|
22980
|
+
--pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
|
|
22976
22981
|
--pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
|
|
22977
22982
|
--pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
|
|
22978
22983
|
--pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
|