@patternfly/patternfly 6.1.0-prerelease.8 → 6.1.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/components/Button/button.css +18 -2
- package/components/Button/button.scss +19 -3
- package/components/Label/label.css +4 -1
- package/components/Label/label.scss +4 -1
- package/components/MenuToggle/menu-toggle.css +24 -4
- package/components/MenuToggle/menu-toggle.scss +21 -9
- package/components/Table/table.css +3 -0
- package/components/Table/table.scss +4 -0
- package/components/_index.css +49 -7
- package/docs/components/Button/examples/Button.md +1 -1
- package/docs/components/Label/examples/Label.md +35 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +137 -18
- package/package.json +1 -1
- package/patternfly-no-globals.css +49 -7
- package/patternfly.css +49 -7
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/_index.css
CHANGED
|
@@ -1471,6 +1471,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1471
1471
|
--pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
|
|
1472
1472
|
--pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
1473
1473
|
--pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
|
|
1474
|
+
--pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
1475
|
+
--pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
1474
1476
|
--pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
|
|
1475
1477
|
--pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
1476
1478
|
--pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
|
|
@@ -1520,6 +1522,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1520
1522
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
|
|
1521
1523
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
|
|
1522
1524
|
--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
|
|
1525
|
+
--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
|
|
1526
|
+
--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
|
|
1523
1527
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
1524
1528
|
--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
|
|
1525
1529
|
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
@@ -1544,9 +1548,13 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1544
1548
|
--pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
1545
1549
|
--pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
1546
1550
|
--pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
1551
|
+
--pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
1552
|
+
--pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
1547
1553
|
--pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
1548
1554
|
--pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
1549
1555
|
--pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
1556
|
+
--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
1557
|
+
--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
1550
1558
|
--pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
1551
1559
|
--pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
|
|
1552
1560
|
--pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
@@ -1734,6 +1742,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
1734
1742
|
--pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
|
|
1735
1743
|
--pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
|
|
1736
1744
|
--pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
|
|
1745
|
+
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
|
|
1746
|
+
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
|
|
1737
1747
|
}
|
|
1738
1748
|
.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
1739
1749
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
|
|
@@ -1821,11 +1831,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
1821
1831
|
--pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
|
|
1822
1832
|
--pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
|
|
1823
1833
|
--pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
|
|
1834
|
+
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
|
|
1835
|
+
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
|
|
1824
1836
|
}
|
|
1825
1837
|
.pf-v6-c-button.pf-m-stateful {
|
|
1826
1838
|
--pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
|
|
1827
1839
|
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
|
|
1828
1840
|
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
|
|
1841
|
+
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
|
|
1842
|
+
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
|
|
1829
1843
|
}
|
|
1830
1844
|
.pf-v6-c-button.pf-m-read {
|
|
1831
1845
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
|
|
@@ -1882,8 +1896,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
1882
1896
|
--pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
|
|
1883
1897
|
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
|
|
1884
1898
|
--pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
|
|
1885
|
-
--pf-v6-c-button--
|
|
1886
|
-
--pf-v6-c-button--
|
|
1899
|
+
--pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
|
|
1900
|
+
--pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
|
|
1901
|
+
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
|
|
1902
|
+
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
|
|
1887
1903
|
min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
|
|
1888
1904
|
}
|
|
1889
1905
|
.pf-v6-c-button.pf-m-block {
|
|
@@ -7866,7 +7882,7 @@ label.pf-v6-c-input-group__text {
|
|
|
7866
7882
|
--pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
7867
7883
|
--pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
7868
7884
|
--pf-v6-c-label--MaxWidth: 100%;
|
|
7869
|
-
--pf-v6-c-label--MinWidth:
|
|
7885
|
+
--pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
|
|
7870
7886
|
--pf-v6-c-label--BorderWidth: 0;
|
|
7871
7887
|
--pf-v6-c-label--BorderColor: transparent;
|
|
7872
7888
|
--pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
@@ -8023,6 +8039,7 @@ label.pf-v6-c-input-group__text {
|
|
|
8023
8039
|
--pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
8024
8040
|
--pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
8025
8041
|
--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
|
|
8042
|
+
--pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
|
|
8026
8043
|
--pf-v6-c-label__content--MaxWidth: 100%;
|
|
8027
8044
|
--pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
|
|
8028
8045
|
--pf-v6-c-label__content--Cursor: initial;
|
|
@@ -8215,6 +8232,7 @@ label.pf-v6-c-input-group__text {
|
|
|
8215
8232
|
--pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
|
|
8216
8233
|
--pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
|
|
8217
8234
|
--pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
|
|
8235
|
+
--pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
|
|
8218
8236
|
--pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
|
|
8219
8237
|
}
|
|
8220
8238
|
.pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
|
|
@@ -8303,6 +8321,7 @@ label.pf-v6-c-input-group__text {
|
|
|
8303
8321
|
.pf-v6-c-label__content {
|
|
8304
8322
|
display: inline-flex;
|
|
8305
8323
|
align-items: center;
|
|
8324
|
+
justify-content: center;
|
|
8306
8325
|
}
|
|
8307
8326
|
|
|
8308
8327
|
.pf-v6-c-label__text {
|
|
@@ -9998,6 +10017,8 @@ ul.pf-v6-c-list {
|
|
|
9998
10017
|
--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
|
|
9999
10018
|
--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
|
|
10000
10019
|
--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
|
|
10020
|
+
--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
|
|
10021
|
+
--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
|
|
10001
10022
|
--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
|
|
10002
10023
|
--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
|
|
10003
10024
|
--pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
|
|
@@ -10012,6 +10033,8 @@ ul.pf-v6-c-list {
|
|
|
10012
10033
|
--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
|
|
10013
10034
|
--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
|
|
10014
10035
|
--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
|
|
10036
|
+
--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
|
|
10037
|
+
--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
|
|
10015
10038
|
--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
|
|
10016
10039
|
--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
|
|
10017
10040
|
--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
@@ -10022,6 +10045,8 @@ ul.pf-v6-c-list {
|
|
|
10022
10045
|
--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
|
|
10023
10046
|
--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
|
|
10024
10047
|
--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
|
|
10048
|
+
--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10049
|
+
--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10025
10050
|
--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
10026
10051
|
--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
|
|
10027
10052
|
--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
|
|
@@ -10036,6 +10061,8 @@ ul.pf-v6-c-list {
|
|
|
10036
10061
|
--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
10037
10062
|
--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
10038
10063
|
--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
10064
|
+
--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10065
|
+
--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
|
|
10039
10066
|
--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
10040
10067
|
--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
|
|
10041
10068
|
--pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
|
|
@@ -10047,6 +10074,8 @@ ul.pf-v6-c-list {
|
|
|
10047
10074
|
--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
10048
10075
|
--pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
|
|
10049
10076
|
--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
|
|
10077
|
+
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
10078
|
+
--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
|
|
10050
10079
|
--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
|
|
10051
10080
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
|
|
10052
10081
|
--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
|
|
@@ -10116,6 +10145,8 @@ ul.pf-v6-c-list {
|
|
|
10116
10145
|
--pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
|
|
10117
10146
|
--pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
|
|
10118
10147
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
|
|
10148
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
|
|
10149
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
|
|
10119
10150
|
}
|
|
10120
10151
|
.pf-v6-c-menu-toggle.pf-m-secondary {
|
|
10121
10152
|
--pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
|
|
@@ -10131,6 +10162,8 @@ ul.pf-v6-c-list {
|
|
|
10131
10162
|
--pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
|
|
10132
10163
|
--pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
|
|
10133
10164
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
|
|
10165
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
|
|
10166
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
|
|
10134
10167
|
}
|
|
10135
10168
|
.pf-v6-c-menu-toggle.pf-m-full-height {
|
|
10136
10169
|
--pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
|
|
@@ -10155,6 +10188,8 @@ ul.pf-v6-c-list {
|
|
|
10155
10188
|
--pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
|
|
10156
10189
|
--pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
|
|
10157
10190
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
|
|
10191
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
|
|
10192
|
+
--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
|
|
10158
10193
|
}
|
|
10159
10194
|
.pf-v6-c-menu-toggle.pf-m-plain::before {
|
|
10160
10195
|
border: none;
|
|
@@ -10181,6 +10216,10 @@ ul.pf-v6-c-list {
|
|
|
10181
10216
|
--pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
|
|
10182
10217
|
--pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
|
|
10183
10218
|
--pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
|
|
10219
|
+
--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
|
|
10220
|
+
--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
|
|
10221
|
+
--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
|
|
10222
|
+
--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
|
|
10184
10223
|
}
|
|
10185
10224
|
.pf-v6-c-menu-toggle.pf-m-success {
|
|
10186
10225
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
|
|
@@ -10259,13 +10298,13 @@ ul.pf-v6-c-list {
|
|
|
10259
10298
|
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
|
|
10260
10299
|
--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
|
|
10261
10300
|
}
|
|
10262
|
-
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-
|
|
10263
|
-
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-
|
|
10301
|
+
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
|
|
10302
|
+
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
|
|
10264
10303
|
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
|
|
10265
10304
|
padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
|
|
10266
10305
|
}
|
|
10267
|
-
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-
|
|
10268
|
-
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-
|
|
10306
|
+
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
|
|
10307
|
+
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
|
|
10269
10308
|
.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
|
|
10270
10309
|
padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
|
|
10271
10310
|
}
|
|
@@ -16496,6 +16535,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
16496
16535
|
--pf-v6-c-table--cell--TextOverflow: ellipsis;
|
|
16497
16536
|
--pf-v6-c-table--cell--WhiteSpace: nowrap;
|
|
16498
16537
|
}
|
|
16538
|
+
.pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
|
|
16539
|
+
margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
|
|
16540
|
+
}
|
|
16499
16541
|
.pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
|
|
16500
16542
|
outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
|
|
16501
16543
|
}
|
|
@@ -2046,7 +2046,7 @@ Semantic buttons and links are important for usability as well as accessibility.
|
|
|
2046
2046
|
| `.pf-m-start` | `.pf-v6-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
|
|
2047
2047
|
| `.pf-m-end` | `.pf-v6-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
|
|
2048
2048
|
| `.pf-m-active` | `.pf-v6-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
|
|
2049
|
-
| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button
|
|
2049
|
+
| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button for small/compact styles. |
|
|
2050
2050
|
| `.pf-m-aria-disabled` | `.pf-v6-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
|
|
2051
2051
|
| `.pf-m-display-lg` | `.pf-v6-c-button`, `pf-v6-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
|
|
2052
2052
|
| `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
|
|
@@ -6582,6 +6582,41 @@ Use a label group to display multiple labels at once.
|
|
|
6582
6582
|
</div>
|
|
6583
6583
|
</div>
|
|
6584
6584
|
|
|
6585
|
+
<br />
|
|
6586
|
+
<br />
|
|
6587
|
+
|
|
6588
|
+
<div class="pf-v6-c-label-group">
|
|
6589
|
+
<div class="pf-v6-c-label-group__main">
|
|
6590
|
+
<ul
|
|
6591
|
+
class="pf-v6-c-label-group__list"
|
|
6592
|
+
role="list"
|
|
6593
|
+
aria-label="Group of labels"
|
|
6594
|
+
>
|
|
6595
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
6596
|
+
<span class="pf-v6-c-label">
|
|
6597
|
+
<span class="pf-v6-c-label__content">
|
|
6598
|
+
<span class="pf-v6-c-label__text">A</span>
|
|
6599
|
+
</span>
|
|
6600
|
+
</span>
|
|
6601
|
+
</li>
|
|
6602
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
6603
|
+
<span class="pf-v6-c-label pf-m-blue">
|
|
6604
|
+
<span class="pf-v6-c-label__content">
|
|
6605
|
+
<span class="pf-v6-c-label__text">T</span>
|
|
6606
|
+
</span>
|
|
6607
|
+
</span>
|
|
6608
|
+
</li>
|
|
6609
|
+
<li class="pf-v6-c-label-group__list-item">
|
|
6610
|
+
<span class="pf-v6-c-label pf-m-green">
|
|
6611
|
+
<span class="pf-v6-c-label__content">
|
|
6612
|
+
<span class="pf-v6-c-label__text">I</span>
|
|
6613
|
+
</span>
|
|
6614
|
+
</span>
|
|
6615
|
+
</li>
|
|
6616
|
+
</ul>
|
|
6617
|
+
</div>
|
|
6618
|
+
</div>
|
|
6619
|
+
|
|
6585
6620
|
```
|
|
6586
6621
|
|
|
6587
6622
|
### Label group with overflow
|
|
@@ -316,44 +316,128 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
316
316
|
|
|
317
317
|
```html
|
|
318
318
|
<button
|
|
319
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
319
|
+
class="pf-v6-c-menu-toggle pf-m-small"
|
|
320
320
|
type="button"
|
|
321
321
|
aria-expanded="false"
|
|
322
|
-
aria-label="Actions"
|
|
323
322
|
>
|
|
324
|
-
<span class="pf-v6-c-menu-
|
|
325
|
-
|
|
323
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
324
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
326
328
|
</span>
|
|
327
329
|
</button>
|
|
328
330
|
|
|
329
331
|
<button
|
|
330
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
332
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-expanded"
|
|
331
333
|
type="button"
|
|
332
334
|
aria-expanded="true"
|
|
333
|
-
aria-label="Actions"
|
|
334
335
|
>
|
|
335
|
-
<span class="pf-v6-c-menu-
|
|
336
|
-
|
|
336
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
337
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
338
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
339
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
340
|
+
</span>
|
|
337
341
|
</span>
|
|
338
342
|
</button>
|
|
339
343
|
|
|
340
344
|
<button
|
|
341
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
345
|
+
class="pf-v6-c-menu-toggle pf-m-small pf-m-disabled"
|
|
342
346
|
type="button"
|
|
343
347
|
aria-expanded="false"
|
|
344
348
|
disabled
|
|
345
|
-
aria-label="Actions"
|
|
346
349
|
>
|
|
347
|
-
<span class="pf-v6-c-menu-
|
|
348
|
-
|
|
350
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
351
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
352
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
353
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
354
|
+
</span>
|
|
349
355
|
</span>
|
|
350
356
|
</button>
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
+
<br />
|
|
358
|
+
<br />
|
|
359
|
+
<button
|
|
360
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-small"
|
|
361
|
+
type="button"
|
|
362
|
+
aria-expanded="false"
|
|
363
|
+
>
|
|
364
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
365
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
366
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
367
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
368
|
+
</span>
|
|
369
|
+
</span>
|
|
370
|
+
</button>
|
|
371
|
+
|
|
372
|
+
<button
|
|
373
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-small pf-m-expanded"
|
|
374
|
+
type="button"
|
|
375
|
+
aria-expanded="true"
|
|
376
|
+
>
|
|
377
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
378
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
379
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
380
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
381
|
+
</span>
|
|
382
|
+
</span>
|
|
383
|
+
</button>
|
|
384
|
+
|
|
385
|
+
<button
|
|
386
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-small pf-m-disabled"
|
|
387
|
+
type="button"
|
|
388
|
+
aria-expanded="false"
|
|
389
|
+
disabled
|
|
390
|
+
>
|
|
391
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
392
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
393
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
394
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
395
|
+
</span>
|
|
396
|
+
</span>
|
|
397
|
+
</button>
|
|
398
|
+
<br />
|
|
399
|
+
<br />
|
|
400
|
+
<button
|
|
401
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-small"
|
|
402
|
+
type="button"
|
|
403
|
+
aria-expanded="false"
|
|
404
|
+
>
|
|
405
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
406
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
407
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
408
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
409
|
+
</span>
|
|
410
|
+
</span>
|
|
411
|
+
</button>
|
|
412
|
+
|
|
413
|
+
<button
|
|
414
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-small pf-m-expanded"
|
|
415
|
+
type="button"
|
|
416
|
+
aria-expanded="true"
|
|
417
|
+
>
|
|
418
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
419
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
420
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
421
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
422
|
+
</span>
|
|
423
|
+
</span>
|
|
424
|
+
</button>
|
|
425
|
+
|
|
426
|
+
<button
|
|
427
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-small pf-m-disabled"
|
|
428
|
+
type="button"
|
|
429
|
+
aria-expanded="false"
|
|
430
|
+
disabled
|
|
431
|
+
>
|
|
432
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
433
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
434
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
435
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
436
|
+
</span>
|
|
437
|
+
</span>
|
|
438
|
+
</button>
|
|
439
|
+
<br />
|
|
440
|
+
<br />
|
|
357
441
|
<button
|
|
358
442
|
class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
|
|
359
443
|
type="button"
|
|
@@ -393,6 +477,41 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
393
477
|
</span>
|
|
394
478
|
</span>
|
|
395
479
|
</button>
|
|
480
|
+
<br />
|
|
481
|
+
<br />
|
|
482
|
+
<button
|
|
483
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
|
|
484
|
+
type="button"
|
|
485
|
+
aria-expanded="false"
|
|
486
|
+
aria-label="Actions"
|
|
487
|
+
>
|
|
488
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
489
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
490
|
+
</span>
|
|
491
|
+
</button>
|
|
492
|
+
|
|
493
|
+
<button
|
|
494
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-expanded"
|
|
495
|
+
type="button"
|
|
496
|
+
aria-expanded="true"
|
|
497
|
+
aria-label="Actions"
|
|
498
|
+
>
|
|
499
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
500
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
501
|
+
</span>
|
|
502
|
+
</button>
|
|
503
|
+
|
|
504
|
+
<button
|
|
505
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-disabled"
|
|
506
|
+
type="button"
|
|
507
|
+
aria-expanded="false"
|
|
508
|
+
disabled
|
|
509
|
+
aria-label="Actions"
|
|
510
|
+
>
|
|
511
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
512
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
513
|
+
</span>
|
|
514
|
+
</button>
|
|
396
515
|
|
|
397
516
|
```
|
|
398
517
|
|