@patternfly/patternfly 4.164.1 → 4.165.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/RELEASE-NOTES.md +31 -0
- package/components/ExpandableSection/expandable-section.css +6 -0
- package/components/ExpandableSection/expandable-section.scss +9 -0
- package/components/Label/label.css +37 -0
- package/components/Label/label.scss +43 -0
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +22 -0
- package/docs/components/Label/examples/Label.md +102 -41
- package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +3 -0
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +132 -108
- package/docs/demos/Card/examples/Card.md +22 -0
- package/docs/demos/Tabs/examples/Tabs.md +2 -0
- package/docs/pages/contribution.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +43 -0
- package/patternfly.css +43 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2,123 +2,145 @@
|
|
|
2
2
|
id: Notification badge
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-c-notification-badge
|
|
5
|
-
|
|
5
|
+
---import './NotificationBadge.css'
|
|
6
|
+
|
|
7
|
+
## Examples
|
|
6
8
|
|
|
7
9
|
### Basic
|
|
8
10
|
|
|
9
11
|
```html
|
|
10
|
-
<
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
>
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</
|
|
59
|
-
|
|
12
|
+
<div class="pf-t-dark">
|
|
13
|
+
<button
|
|
14
|
+
class="pf-c-button pf-m-plain"
|
|
15
|
+
type="button"
|
|
16
|
+
aria-label="Notifications"
|
|
17
|
+
>
|
|
18
|
+
<span class="pf-c-notification-badge pf-m-read">
|
|
19
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
20
|
+
</span>
|
|
21
|
+
</button>
|
|
22
|
+
|
|
23
|
+
<button
|
|
24
|
+
class="pf-c-button pf-m-plain"
|
|
25
|
+
type="button"
|
|
26
|
+
aria-label="Unread notifications"
|
|
27
|
+
>
|
|
28
|
+
<span class="pf-c-notification-badge pf-m-unread">
|
|
29
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
30
|
+
</span>
|
|
31
|
+
</button>
|
|
32
|
+
|
|
33
|
+
<button
|
|
34
|
+
class="pf-c-button pf-m-plain"
|
|
35
|
+
type="button"
|
|
36
|
+
aria-label="Attention notifications"
|
|
37
|
+
>
|
|
38
|
+
<span class="pf-c-notification-badge pf-m-attention">
|
|
39
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
40
|
+
</span>
|
|
41
|
+
</button>
|
|
42
|
+
|
|
43
|
+
<br />
|
|
44
|
+
<br />
|
|
45
|
+
|
|
46
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
|
|
47
|
+
<span class="pf-c-notification-badge pf-m-read">
|
|
48
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
49
|
+
</span>
|
|
50
|
+
</button>
|
|
51
|
+
|
|
52
|
+
<button
|
|
53
|
+
class="pf-c-button pf-m-plain"
|
|
54
|
+
type="button"
|
|
55
|
+
aria-label="Unread tasks"
|
|
56
|
+
>
|
|
57
|
+
<span class="pf-c-notification-badge pf-m-unread">
|
|
58
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
59
|
+
</span>
|
|
60
|
+
</button>
|
|
61
|
+
|
|
62
|
+
<button
|
|
63
|
+
class="pf-c-button pf-m-plain"
|
|
64
|
+
type="button"
|
|
65
|
+
aria-label="Attention tasks"
|
|
66
|
+
>
|
|
67
|
+
<span class="pf-c-notification-badge pf-m-attention">
|
|
68
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
69
|
+
</span>
|
|
70
|
+
</button>
|
|
71
|
+
</div>
|
|
60
72
|
|
|
61
73
|
```
|
|
62
74
|
|
|
63
75
|
### With count
|
|
64
76
|
|
|
65
77
|
```html
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
78
|
+
<div class="pf-t-dark">
|
|
79
|
+
<button
|
|
80
|
+
class="pf-c-button pf-m-plain"
|
|
81
|
+
type="button"
|
|
82
|
+
aria-label="Notifications"
|
|
83
|
+
>
|
|
84
|
+
<span class="pf-c-notification-badge pf-m-read">
|
|
85
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
86
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
87
|
+
</span>
|
|
88
|
+
</button>
|
|
89
|
+
|
|
90
|
+
<button
|
|
91
|
+
class="pf-c-button pf-m-plain"
|
|
92
|
+
type="button"
|
|
93
|
+
aria-label="Unread notifications"
|
|
94
|
+
>
|
|
95
|
+
<span class="pf-c-notification-badge pf-m-unread">
|
|
96
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
97
|
+
<span class="pf-c-notification-badge__count">25</span>
|
|
98
|
+
</span>
|
|
99
|
+
</button>
|
|
100
|
+
|
|
101
|
+
<button
|
|
102
|
+
class="pf-c-button pf-m-plain"
|
|
103
|
+
type="button"
|
|
104
|
+
aria-label="Attention notifications"
|
|
105
|
+
>
|
|
106
|
+
<span class="pf-c-notification-badge pf-m-attention">
|
|
107
|
+
<i class="pf-icon-attention-bell" aria-hidden="true"></i>
|
|
108
|
+
<span class="pf-c-notification-badge__count">26</span>
|
|
109
|
+
</span>
|
|
110
|
+
</button>
|
|
111
|
+
|
|
112
|
+
<br />
|
|
113
|
+
<br />
|
|
114
|
+
|
|
115
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
|
|
116
|
+
<span class="pf-c-notification-badge pf-m-read">
|
|
117
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
118
|
+
<span class="pf-c-notification-badge__count">24</span>
|
|
119
|
+
</span>
|
|
120
|
+
</button>
|
|
121
|
+
|
|
122
|
+
<button
|
|
123
|
+
class="pf-c-button pf-m-plain"
|
|
124
|
+
type="button"
|
|
125
|
+
aria-label="Unread tasks"
|
|
126
|
+
>
|
|
127
|
+
<span class="pf-c-notification-badge pf-m-unread">
|
|
128
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
129
|
+
<span class="pf-c-notification-badge__count">25</span>
|
|
130
|
+
</span>
|
|
131
|
+
</button>
|
|
132
|
+
|
|
133
|
+
<button
|
|
134
|
+
class="pf-c-button pf-m-plain"
|
|
135
|
+
type="button"
|
|
136
|
+
aria-label="Attention tasks"
|
|
137
|
+
>
|
|
138
|
+
<span class="pf-c-notification-badge pf-m-attention">
|
|
139
|
+
<i class="pf-icon-task" aria-hidden="true"></i>
|
|
140
|
+
<span class="pf-c-notification-badge__count">26</span>
|
|
141
|
+
</span>
|
|
142
|
+
</button>
|
|
143
|
+
</div>
|
|
122
144
|
|
|
123
145
|
```
|
|
124
146
|
|
|
@@ -126,7 +148,9 @@ cssPrefix: pf-c-notification-badge
|
|
|
126
148
|
|
|
127
149
|
### Overview
|
|
128
150
|
|
|
129
|
-
Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own.
|
|
151
|
+
Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](../masthead).
|
|
152
|
+
|
|
153
|
+
Note: The [page component](../page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
|
|
130
154
|
|
|
131
155
|
### Accessibility
|
|
132
156
|
|
|
@@ -86,6 +86,7 @@ wrapperTag: div
|
|
|
86
86
|
<span class="pf-c-label__icon">
|
|
87
87
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
88
88
|
</span>
|
|
89
|
+
|
|
89
90
|
Set up your cluster
|
|
90
91
|
</span>
|
|
91
92
|
</span>
|
|
@@ -96,6 +97,7 @@ wrapperTag: div
|
|
|
96
97
|
<span class="pf-c-label__icon">
|
|
97
98
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
98
99
|
</span>
|
|
100
|
+
|
|
99
101
|
Guided tours
|
|
100
102
|
</span>
|
|
101
103
|
</span>
|
|
@@ -106,6 +108,7 @@ wrapperTag: div
|
|
|
106
108
|
<span class="pf-c-label__icon">
|
|
107
109
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
108
110
|
</span>
|
|
111
|
+
|
|
109
112
|
Quick starts
|
|
110
113
|
</span>
|
|
111
114
|
</span>
|
|
@@ -210,6 +213,7 @@ wrapperTag: div
|
|
|
210
213
|
<span class="pf-c-label__icon">
|
|
211
214
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
212
215
|
</span>
|
|
216
|
+
|
|
213
217
|
Set up your cluster
|
|
214
218
|
</span>
|
|
215
219
|
</span>
|
|
@@ -246,6 +250,7 @@ wrapperTag: div
|
|
|
246
250
|
<span class="pf-c-label__icon">
|
|
247
251
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
248
252
|
</span>
|
|
253
|
+
|
|
249
254
|
Guided tours
|
|
250
255
|
</span>
|
|
251
256
|
</span>
|
|
@@ -277,6 +282,7 @@ wrapperTag: div
|
|
|
277
282
|
<span class="pf-c-label__icon">
|
|
278
283
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
279
284
|
</span>
|
|
285
|
+
|
|
280
286
|
Quick starts
|
|
281
287
|
</span>
|
|
282
288
|
</span>
|
|
@@ -311,6 +317,7 @@ wrapperTag: div
|
|
|
311
317
|
<span class="pf-c-label__icon">
|
|
312
318
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
313
319
|
</span>
|
|
320
|
+
|
|
314
321
|
Learning resources
|
|
315
322
|
</span>
|
|
316
323
|
</span>
|
|
@@ -1000,6 +1007,7 @@ wrapperTag: div
|
|
|
1000
1007
|
aria-hidden="true"
|
|
1001
1008
|
></i>
|
|
1002
1009
|
</span>
|
|
1010
|
+
|
|
1003
1011
|
1
|
|
1004
1012
|
</span>
|
|
1005
1013
|
</span>
|
|
@@ -1011,6 +1019,7 @@ wrapperTag: div
|
|
|
1011
1019
|
aria-hidden="true"
|
|
1012
1020
|
></i>
|
|
1013
1021
|
</span>
|
|
1022
|
+
|
|
1014
1023
|
3
|
|
1015
1024
|
</span>
|
|
1016
1025
|
</span>
|
|
@@ -1019,6 +1028,7 @@ wrapperTag: div
|
|
|
1019
1028
|
<span class="pf-c-label__icon">
|
|
1020
1029
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1021
1030
|
</span>
|
|
1031
|
+
|
|
1022
1032
|
3
|
|
1023
1033
|
</span>
|
|
1024
1034
|
</span>
|
|
@@ -1027,6 +1037,7 @@ wrapperTag: div
|
|
|
1027
1037
|
<span class="pf-c-label__icon">
|
|
1028
1038
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1029
1039
|
</span>
|
|
1040
|
+
|
|
1030
1041
|
3
|
|
1031
1042
|
</span>
|
|
1032
1043
|
</span>
|
|
@@ -1035,6 +1046,7 @@ wrapperTag: div
|
|
|
1035
1046
|
<span class="pf-c-label__icon">
|
|
1036
1047
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1037
1048
|
</span>
|
|
1049
|
+
|
|
1038
1050
|
3
|
|
1039
1051
|
</span>
|
|
1040
1052
|
</span>
|
|
@@ -1193,6 +1205,7 @@ wrapperTag: div
|
|
|
1193
1205
|
aria-hidden="true"
|
|
1194
1206
|
></i>
|
|
1195
1207
|
</span>
|
|
1208
|
+
|
|
1196
1209
|
1
|
|
1197
1210
|
</span>
|
|
1198
1211
|
</span>
|
|
@@ -1204,6 +1217,7 @@ wrapperTag: div
|
|
|
1204
1217
|
aria-hidden="true"
|
|
1205
1218
|
></i>
|
|
1206
1219
|
</span>
|
|
1220
|
+
|
|
1207
1221
|
3
|
|
1208
1222
|
</span>
|
|
1209
1223
|
</span>
|
|
@@ -1212,6 +1226,7 @@ wrapperTag: div
|
|
|
1212
1226
|
<span class="pf-c-label__icon">
|
|
1213
1227
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1214
1228
|
</span>
|
|
1229
|
+
|
|
1215
1230
|
3
|
|
1216
1231
|
</span>
|
|
1217
1232
|
</span>
|
|
@@ -1220,6 +1235,7 @@ wrapperTag: div
|
|
|
1220
1235
|
<span class="pf-c-label__icon">
|
|
1221
1236
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1222
1237
|
</span>
|
|
1238
|
+
|
|
1223
1239
|
3
|
|
1224
1240
|
</span>
|
|
1225
1241
|
</span>
|
|
@@ -1228,6 +1244,7 @@ wrapperTag: div
|
|
|
1228
1244
|
<span class="pf-c-label__icon">
|
|
1229
1245
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1230
1246
|
</span>
|
|
1247
|
+
|
|
1231
1248
|
3
|
|
1232
1249
|
</span>
|
|
1233
1250
|
</span>
|
|
@@ -1639,6 +1656,7 @@ wrapperTag: div
|
|
|
1639
1656
|
aria-hidden="true"
|
|
1640
1657
|
></i>
|
|
1641
1658
|
</span>
|
|
1659
|
+
|
|
1642
1660
|
1
|
|
1643
1661
|
</span>
|
|
1644
1662
|
</span>
|
|
@@ -1650,6 +1668,7 @@ wrapperTag: div
|
|
|
1650
1668
|
aria-hidden="true"
|
|
1651
1669
|
></i>
|
|
1652
1670
|
</span>
|
|
1671
|
+
|
|
1653
1672
|
3
|
|
1654
1673
|
</span>
|
|
1655
1674
|
</span>
|
|
@@ -1658,6 +1677,7 @@ wrapperTag: div
|
|
|
1658
1677
|
<span class="pf-c-label__icon">
|
|
1659
1678
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
1660
1679
|
</span>
|
|
1680
|
+
|
|
1661
1681
|
3
|
|
1662
1682
|
</span>
|
|
1663
1683
|
</span>
|
|
@@ -1666,6 +1686,7 @@ wrapperTag: div
|
|
|
1666
1686
|
<span class="pf-c-label__icon">
|
|
1667
1687
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
1668
1688
|
</span>
|
|
1689
|
+
|
|
1669
1690
|
3
|
|
1670
1691
|
</span>
|
|
1671
1692
|
</span>
|
|
@@ -1674,6 +1695,7 @@ wrapperTag: div
|
|
|
1674
1695
|
<span class="pf-c-label__icon">
|
|
1675
1696
|
<i class="fas fa-fw fa-bell" aria-hidden="true"></i>
|
|
1676
1697
|
</span>
|
|
1698
|
+
|
|
1677
1699
|
3
|
|
1678
1700
|
</span>
|
|
1679
1701
|
</span>
|
|
@@ -244,6 +244,7 @@ section: components
|
|
|
244
244
|
<span class="pf-c-label__icon">
|
|
245
245
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
246
246
|
</span>
|
|
247
|
+
|
|
247
248
|
Running
|
|
248
249
|
</span>
|
|
249
250
|
</span>
|
|
@@ -792,6 +793,7 @@ section: components
|
|
|
792
793
|
<span class="pf-c-label__icon">
|
|
793
794
|
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
|
|
794
795
|
</span>
|
|
796
|
+
|
|
795
797
|
Running
|
|
796
798
|
</span>
|
|
797
799
|
</span>
|
|
@@ -106,4 +106,4 @@ Below are the steps for adding a custom icon to the [pficon icons](/icons) icon
|
|
|
106
106
|
- Edit `src/patternfly/assets/pficon/pficon.scss` and prefix the `src: url()` paths for the icon font files with the global icon font path (e.g., `url('#{$pf-global--fonticon-path}/pficon.woff2')`).
|
|
107
107
|
- Run `./scripts/iconList.sh` to update `src/site/pages/icons.md`, which serves the pficon icon preview page on the dev server served at `/icons`.
|
|
108
108
|
- Restart the dev server and verify the icons look correct on `/icons`.
|
|
109
|
-
- **Note**: This step may require clearing your cache.
|
|
109
|
+
- **Note**: This step may require clearing your cache.
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -12935,6 +12935,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12935
12935
|
--pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
|
|
12936
12936
|
--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
|
|
12937
12937
|
--pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
|
|
12938
|
+
--pf-c-expandable-section__toggle-icon--MinWidth: 1em;
|
|
12938
12939
|
--pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
|
|
12939
12940
|
--pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
|
|
12940
12941
|
--pf-c-expandable-section__toggle-icon--Rotate: 0;
|
|
@@ -12957,6 +12958,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12957
12958
|
--pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
|
|
12958
12959
|
--pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
|
|
12959
12960
|
--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
|
|
12961
|
+
--pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
|
|
12960
12962
|
}
|
|
12961
12963
|
.pf-c-expandable-section.pf-m-expanded {
|
|
12962
12964
|
--pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
|
|
@@ -12991,6 +12993,9 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12991
12993
|
content: "";
|
|
12992
12994
|
background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
|
|
12993
12995
|
}
|
|
12996
|
+
.pf-c-expandable-section.pf-m-indented {
|
|
12997
|
+
--pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
|
|
12998
|
+
}
|
|
12994
12999
|
|
|
12995
13000
|
.pf-c-expandable-section__toggle {
|
|
12996
13001
|
display: flex;
|
|
@@ -13009,6 +13014,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13009
13014
|
}
|
|
13010
13015
|
|
|
13011
13016
|
.pf-c-expandable-section__toggle-icon {
|
|
13017
|
+
min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
|
|
13012
13018
|
color: var(--pf-c-expandable-section__toggle-icon--Color);
|
|
13013
13019
|
transition: var(--pf-c-expandable-section__toggle-icon--Transition);
|
|
13014
13020
|
transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
|
|
@@ -14565,6 +14571,7 @@ label.pf-c-input-group__text {
|
|
|
14565
14571
|
--pf-c-label--m-compact--PaddingBottom: 0;
|
|
14566
14572
|
--pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
|
|
14567
14573
|
--pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
|
|
14574
|
+
--pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
|
|
14568
14575
|
--pf-c-label__content--Color: var(--pf-global--Color--100);
|
|
14569
14576
|
--pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
|
|
14570
14577
|
--pf-c-label__text--MaxWidth: 16ch;
|
|
@@ -14579,6 +14586,18 @@ label.pf-c-input-group__text {
|
|
|
14579
14586
|
--pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
|
|
14580
14587
|
--pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
|
|
14581
14588
|
--pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
14589
|
+
--pf-c-label__editable-text--MaxWidth: 16ch;
|
|
14590
|
+
--pf-c-label__editable-text--BorderWidth: 0;
|
|
14591
|
+
--pf-c-label--m-editable--Cursor: pointer;
|
|
14592
|
+
--pf-c-label--m-editable--TextDecoration: underline;
|
|
14593
|
+
--pf-c-label--m-editable--TextDecorationStyle: dashed;
|
|
14594
|
+
--pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
|
|
14595
|
+
--pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
|
|
14596
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
|
|
14597
|
+
--pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
|
|
14598
|
+
--pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
|
|
14599
|
+
--pf-c-label--m-editable--m-editable-active--Cursor: auto;
|
|
14600
|
+
--pf-c-label--m-editable--m-editable-active--TextDecoration: none;
|
|
14582
14601
|
--pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
|
|
14583
14602
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
|
|
14584
14603
|
--pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
|
|
@@ -14597,6 +14616,7 @@ label.pf-c-input-group__text {
|
|
|
14597
14616
|
--pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
|
|
14598
14617
|
--pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
|
|
14599
14618
|
--pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
|
|
14619
|
+
--pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
|
|
14600
14620
|
}
|
|
14601
14621
|
.pf-c-label.pf-m-blue {
|
|
14602
14622
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
|
|
@@ -14687,7 +14707,23 @@ label.pf-c-input-group__text {
|
|
|
14687
14707
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
|
|
14688
14708
|
}
|
|
14689
14709
|
|
|
14710
|
+
.pf-c-label.pf-m-editable {
|
|
14711
|
+
text-decoration: var(--pf-c-label--m-editable--TextDecoration);
|
|
14712
|
+
cursor: var(--pf-c-label--m-editable--Cursor);
|
|
14713
|
+
text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
|
|
14714
|
+
text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
|
|
14715
|
+
text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
|
|
14716
|
+
text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
|
|
14717
|
+
}
|
|
14718
|
+
.pf-c-label.pf-m-editable:hover {
|
|
14719
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
|
|
14720
|
+
}
|
|
14721
|
+
.pf-c-label.pf-m-editable:focus {
|
|
14722
|
+
--pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
|
|
14723
|
+
}
|
|
14690
14724
|
.pf-c-label.pf-m-editable-active {
|
|
14725
|
+
--pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
|
|
14726
|
+
--pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
|
|
14691
14727
|
--pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
|
|
14692
14728
|
--pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
|
|
14693
14729
|
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
|
|
@@ -14695,6 +14731,13 @@ label.pf-c-input-group__text {
|
|
|
14695
14731
|
.pf-c-label.pf-m-editable-active .pf-c-button {
|
|
14696
14732
|
visibility: hidden;
|
|
14697
14733
|
}
|
|
14734
|
+
.pf-c-label .pf-c-label__editable-text {
|
|
14735
|
+
overflow: hidden;
|
|
14736
|
+
text-overflow: ellipsis;
|
|
14737
|
+
white-space: nowrap;
|
|
14738
|
+
max-width: var(--pf-c-label__editable-text--MaxWidth);
|
|
14739
|
+
border-width: var(--pf-c-label__editable-text--BorderWidth);
|
|
14740
|
+
}
|
|
14698
14741
|
.pf-c-label .pf-c-button {
|
|
14699
14742
|
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
|
|
14700
14743
|
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
|