@patternfly/patternfly 5.0.0-prerelease.4 → 5.0.0-prerelease.5
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/components/Switch/switch.css +3 -0
- package/components/Switch/switch.scss +3 -0
- package/components/Switch/themes/dark/switch.scss +1 -0
- package/docs/components/Switch/examples/Switch.md +36 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +3 -0
- package/patternfly-theme-dark-unversioned.css +3 -0
- package/patternfly.css +3 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
|
|
7
7
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
8
8
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
9
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
|
|
9
10
|
--pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
|
|
10
11
|
--pf-v5-c-switch--Height: auto;
|
|
11
12
|
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
|
|
@@ -88,6 +89,7 @@
|
|
|
88
89
|
cursor: not-allowed;
|
|
89
90
|
}
|
|
90
91
|
.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
|
|
92
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
|
|
91
93
|
cursor: not-allowed;
|
|
92
94
|
background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
|
|
93
95
|
}
|
|
@@ -140,4 +142,5 @@
|
|
|
140
142
|
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
141
143
|
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
142
144
|
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
145
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
143
146
|
}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
--#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
|
|
12
12
|
--#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
|
|
13
13
|
--#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
|
|
14
|
+
--#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
|
|
14
15
|
|
|
15
16
|
// Switch
|
|
16
17
|
--#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
|
|
@@ -121,6 +122,8 @@
|
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
~ .#{$switch}__toggle {
|
|
125
|
+
--#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
|
|
126
|
+
|
|
124
127
|
cursor: not-allowed;
|
|
125
128
|
background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
|
|
126
129
|
|
|
@@ -6,5 +6,6 @@
|
|
|
6
6
|
--#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--Color--100);
|
|
7
7
|
--#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--disabled-color--100);
|
|
8
8
|
--#{$switch}__toggle--before--BoxShadow: none;
|
|
9
|
+
--#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
|
|
9
10
|
}
|
|
10
11
|
}
|
|
@@ -261,6 +261,42 @@ cssPrefix: pf-v5-c-switch
|
|
|
261
261
|
>Message when off</span>
|
|
262
262
|
</label>
|
|
263
263
|
|
|
264
|
+
<br />
|
|
265
|
+
<br />
|
|
266
|
+
<label class="pf-v5-c-switch" for="switch-with-icon-disabled-1">
|
|
267
|
+
<input
|
|
268
|
+
class="pf-v5-c-switch__input"
|
|
269
|
+
type="checkbox"
|
|
270
|
+
id="switch-with-icon-disabled-1"
|
|
271
|
+
aria-label="switch is off"
|
|
272
|
+
disabled
|
|
273
|
+
checked
|
|
274
|
+
/>
|
|
275
|
+
|
|
276
|
+
<span class="pf-v5-c-switch__toggle">
|
|
277
|
+
<span class="pf-v5-c-switch__toggle-icon">
|
|
278
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
279
|
+
</span>
|
|
280
|
+
</span>
|
|
281
|
+
</label>
|
|
282
|
+
|
|
283
|
+
<br />
|
|
284
|
+
<br />
|
|
285
|
+
<label class="pf-v5-c-switch" for="switch-with-icon-disabled-2">
|
|
286
|
+
<input
|
|
287
|
+
class="pf-v5-c-switch__input"
|
|
288
|
+
type="checkbox"
|
|
289
|
+
id="switch-with-icon-disabled-2"
|
|
290
|
+
aria-label="switch is off"
|
|
291
|
+
disabled
|
|
292
|
+
/>
|
|
293
|
+
<span class="pf-v5-c-switch__toggle">
|
|
294
|
+
<span class="pf-v5-c-switch__toggle-icon">
|
|
295
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
296
|
+
</span>
|
|
297
|
+
</span>
|
|
298
|
+
</label>
|
|
299
|
+
|
|
264
300
|
```
|
|
265
301
|
|
|
266
302
|
## Documentation
|
package/package.json
CHANGED
|
@@ -25041,6 +25041,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25041
25041
|
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
|
|
25042
25042
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
25043
25043
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
25044
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
|
|
25044
25045
|
--pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
|
|
25045
25046
|
--pf-v5-c-switch--Height: auto;
|
|
25046
25047
|
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
|
|
@@ -25123,6 +25124,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25123
25124
|
cursor: not-allowed;
|
|
25124
25125
|
}
|
|
25125
25126
|
.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
|
|
25127
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
|
|
25126
25128
|
cursor: not-allowed;
|
|
25127
25129
|
background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
|
|
25128
25130
|
}
|
|
@@ -25194,6 +25196,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25194
25196
|
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
25195
25197
|
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
25196
25198
|
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
25199
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
25197
25200
|
}
|
|
25198
25201
|
|
|
25199
25202
|
.pf-v5-c-tab-content {
|
|
@@ -25158,6 +25158,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25158
25158
|
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
|
|
25159
25159
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
25160
25160
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
25161
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
|
|
25161
25162
|
--pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
|
|
25162
25163
|
--pf-v5-c-switch--Height: auto;
|
|
25163
25164
|
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
|
|
@@ -25240,6 +25241,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25240
25241
|
cursor: not-allowed;
|
|
25241
25242
|
}
|
|
25242
25243
|
.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
|
|
25244
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
|
|
25243
25245
|
cursor: not-allowed;
|
|
25244
25246
|
background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
|
|
25245
25247
|
}
|
|
@@ -25311,6 +25313,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25311
25313
|
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
25312
25314
|
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
25313
25315
|
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
25316
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
25314
25317
|
}
|
|
25315
25318
|
|
|
25316
25319
|
.pf-v5-c-tab-content {
|
package/patternfly.css
CHANGED
|
@@ -25158,6 +25158,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25158
25158
|
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
|
|
25159
25159
|
--pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
|
|
25160
25160
|
--pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
|
|
25161
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
|
|
25161
25162
|
--pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
|
|
25162
25163
|
--pf-v5-c-switch--Height: auto;
|
|
25163
25164
|
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
|
|
@@ -25240,6 +25241,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25240
25241
|
cursor: not-allowed;
|
|
25241
25242
|
}
|
|
25242
25243
|
.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
|
|
25244
|
+
--pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
|
|
25243
25245
|
cursor: not-allowed;
|
|
25244
25246
|
background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
|
|
25245
25247
|
}
|
|
@@ -25311,6 +25313,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
25311
25313
|
--pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
|
|
25312
25314
|
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
|
|
25313
25315
|
--pf-v5-c-switch__toggle--before--BoxShadow: none;
|
|
25316
|
+
--pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
|
|
25314
25317
|
}
|
|
25315
25318
|
|
|
25316
25319
|
.pf-v5-c-tab-content {
|