@patternfly/patternfly 4.164.4 → 4.166.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/_base.scss +2 -0
- package/base/_fa-icons.scss +2 -0
- package/base/_fonts.scss +2 -2
- package/components/Button/button.css +14 -2
- package/components/Button/button.scss +19 -3
- package/components/ExpandableSection/expandable-section.css +6 -0
- package/components/ExpandableSection/expandable-section.scss +9 -0
- package/components/LogViewer/log-viewer.css +17 -15
- package/components/LogViewer/log-viewer.scss +17 -20
- package/components/Login/login.css +1 -0
- package/components/Login/login.scss +1 -0
- package/docs/components/Button/examples/Button.md +24 -1
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +22 -0
- package/docs/components/NotificationBadge/examples/NotificationBadge.css +3 -0
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +132 -108
- package/layouts/_all.scss +7 -7
- package/package.json +1 -1
- package/patternfly-no-reset.css +38 -17
- package/patternfly.css +38 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/bs-variables.scss +2 -3
- package/sass-utilities/functions.scss +0 -1
- package/sass-utilities/mixins.scss +5 -5
- package/sass-utilities/scss-variables.scss +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
|
|
package/layouts/_all.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@import "./Bullseye/bullseye
|
|
2
|
-
@import "./Flex/flex
|
|
3
|
-
@import "./Gallery/gallery
|
|
4
|
-
@import "./Grid/grid
|
|
5
|
-
@import "./Level/level
|
|
6
|
-
@import "./Split/split
|
|
7
|
-
@import "./Stack/stack
|
|
1
|
+
@import "./Bullseye/bullseye";
|
|
2
|
+
@import "./Flex/flex";
|
|
3
|
+
@import "./Gallery/gallery";
|
|
4
|
+
@import "./Grid/grid";
|
|
5
|
+
@import "./Level/level";
|
|
6
|
+
@import "./Split/split";
|
|
7
|
+
@import "./Stack/stack";
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
|
|
2
|
+
.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
|
|
3
|
+
.pf-c-log-viewer__footer, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
|
|
3
4
|
--pf-global--Color--100: var(--pf-global--Color--dark-100);
|
|
4
5
|
--pf-global--Color--200: var(--pf-global--Color--dark-200);
|
|
5
6
|
--pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
|
|
@@ -6791,6 +6792,7 @@ button.pf-c-breadcrumb__link {
|
|
|
6791
6792
|
--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
|
|
6792
6793
|
--pf-c-button__progress--Opacity: 0;
|
|
6793
6794
|
--pf-c-button__progress--TranslateY: -50%;
|
|
6795
|
+
--pf-c-button__progress--TranslateX: 0;
|
|
6794
6796
|
--pf-c-button__progress--Top: 50%;
|
|
6795
6797
|
--pf-c-button__progress--Left: var(--pf-global--spacer--md);
|
|
6796
6798
|
--pf-c-button--m-progress--TransitionProperty: padding;
|
|
@@ -6799,6 +6801,9 @@ button.pf-c-breadcrumb__link {
|
|
|
6799
6801
|
--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
|
|
6800
6802
|
--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
|
|
6801
6803
|
--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
|
|
6804
|
+
--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
|
|
6805
|
+
--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
|
6806
|
+
--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
6802
6807
|
position: relative;
|
|
6803
6808
|
display: inline-block;
|
|
6804
6809
|
padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
|
|
@@ -7084,10 +7089,18 @@ button.pf-c-breadcrumb__link {
|
|
|
7084
7089
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
|
|
7085
7090
|
transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
|
|
7086
7091
|
}
|
|
7087
|
-
.pf-c-button.pf-m-in-progress {
|
|
7092
|
+
.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
|
|
7088
7093
|
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
7089
7094
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
7090
7095
|
}
|
|
7096
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain {
|
|
7097
|
+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
|
|
7098
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
|
|
7099
|
+
--pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
|
|
7100
|
+
}
|
|
7101
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
|
|
7102
|
+
opacity: 0;
|
|
7103
|
+
}
|
|
7091
7104
|
|
|
7092
7105
|
.pf-c-button__icon.pf-m-start {
|
|
7093
7106
|
margin-right: var(--pf-c-button__icon--m-start--MarginRight);
|
|
@@ -7101,7 +7114,7 @@ button.pf-c-breadcrumb__link {
|
|
|
7101
7114
|
top: var(--pf-c-button__progress--Top);
|
|
7102
7115
|
left: var(--pf-c-button__progress--Left);
|
|
7103
7116
|
line-height: 1;
|
|
7104
|
-
transform:
|
|
7117
|
+
transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
|
|
7105
7118
|
}
|
|
7106
7119
|
.pf-c-button__progress .pf-c-spinner {
|
|
7107
7120
|
--pf-c-spinner--Color: currentColor;
|
|
@@ -12935,6 +12948,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12935
12948
|
--pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
|
|
12936
12949
|
--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
|
|
12937
12950
|
--pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
|
|
12951
|
+
--pf-c-expandable-section__toggle-icon--MinWidth: 1em;
|
|
12938
12952
|
--pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
|
|
12939
12953
|
--pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
|
|
12940
12954
|
--pf-c-expandable-section__toggle-icon--Rotate: 0;
|
|
@@ -12957,6 +12971,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12957
12971
|
--pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
|
|
12958
12972
|
--pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
|
|
12959
12973
|
--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
|
|
12974
|
+
--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
12975
|
}
|
|
12961
12976
|
.pf-c-expandable-section.pf-m-expanded {
|
|
12962
12977
|
--pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
|
|
@@ -12991,6 +13006,9 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
12991
13006
|
content: "";
|
|
12992
13007
|
background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
|
|
12993
13008
|
}
|
|
13009
|
+
.pf-c-expandable-section.pf-m-indented {
|
|
13010
|
+
--pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
|
|
13011
|
+
}
|
|
12994
13012
|
|
|
12995
13013
|
.pf-c-expandable-section__toggle {
|
|
12996
13014
|
display: flex;
|
|
@@ -13009,6 +13027,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13009
13027
|
}
|
|
13010
13028
|
|
|
13011
13029
|
.pf-c-expandable-section__toggle-icon {
|
|
13030
|
+
min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
|
|
13012
13031
|
color: var(--pf-c-expandable-section__toggle-icon--Color);
|
|
13013
13032
|
transition: var(--pf-c-expandable-section__toggle-icon--Transition);
|
|
13014
13033
|
transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
|
|
@@ -15085,7 +15104,15 @@ ul.pf-c-list {
|
|
|
15085
15104
|
position: absolute;
|
|
15086
15105
|
right: 0;
|
|
15087
15106
|
left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
|
|
15088
|
-
|
|
15107
|
+
}
|
|
15108
|
+
.pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
|
|
15109
|
+
position: absolute;
|
|
15110
|
+
top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
|
|
15111
|
+
bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
|
|
15112
|
+
left: 0;
|
|
15113
|
+
width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
|
|
15114
|
+
content: "";
|
|
15115
|
+
background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
|
|
15089
15116
|
}
|
|
15090
15117
|
.pf-c-log-viewer .pf-c-toolbar {
|
|
15091
15118
|
--pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
|
|
@@ -15103,10 +15130,14 @@ ul.pf-c-list {
|
|
|
15103
15130
|
}
|
|
15104
15131
|
|
|
15105
15132
|
.pf-c-log-viewer__header {
|
|
15106
|
-
color: var(--pf-global--Color--100);
|
|
15107
15133
|
margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
|
|
15108
15134
|
}
|
|
15109
15135
|
|
|
15136
|
+
.pf-c-log-viewer__header,
|
|
15137
|
+
.pf-c-log-viewer__footer {
|
|
15138
|
+
color: var(--pf-global--Color--100);
|
|
15139
|
+
}
|
|
15140
|
+
|
|
15110
15141
|
.pf-c-log-viewer__main {
|
|
15111
15142
|
display: flex;
|
|
15112
15143
|
flex-direction: column;
|
|
@@ -15114,18 +15145,6 @@ ul.pf-c-list {
|
|
|
15114
15145
|
background-color: var(--pf-c-log-viewer__main--BackgroundColor);
|
|
15115
15146
|
border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
|
|
15116
15147
|
}
|
|
15117
|
-
.pf-m-line-numbers .pf-c-log-viewer__main {
|
|
15118
|
-
position: relative;
|
|
15119
|
-
}
|
|
15120
|
-
.pf-m-line-numbers .pf-c-log-viewer__main::before {
|
|
15121
|
-
position: absolute;
|
|
15122
|
-
top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
|
|
15123
|
-
bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
|
|
15124
|
-
left: var(--pf-c-log-viewer__index--Width);
|
|
15125
|
-
width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
|
|
15126
|
-
content: "";
|
|
15127
|
-
background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
|
|
15128
|
-
}
|
|
15129
15148
|
|
|
15130
15149
|
.pf-c-log-viewer__scroll-container {
|
|
15131
15150
|
position: relative;
|
|
@@ -15166,6 +15185,7 @@ ul.pf-c-list {
|
|
|
15166
15185
|
font-family: var(--pf-c-log-viewer__index--FontFamily);
|
|
15167
15186
|
font-size: var(--pf-c-log-viewer__index--FontSize);
|
|
15168
15187
|
color: var(--pf-c-log-viewer__index--Color);
|
|
15188
|
+
user-select: none;
|
|
15169
15189
|
background-color: var(--pf-c-log-viewer__index--BackgroundColor);
|
|
15170
15190
|
}
|
|
15171
15191
|
|
|
@@ -15338,6 +15358,7 @@ ul.pf-c-list {
|
|
|
15338
15358
|
}
|
|
15339
15359
|
|
|
15340
15360
|
.pf-c-login__main {
|
|
15361
|
+
align-self: start;
|
|
15341
15362
|
margin-bottom: var(--pf-c-login__main--MarginBottom);
|
|
15342
15363
|
background-color: var(--pf-c-login__main--BackgroundColor);
|
|
15343
15364
|
grid-area: main;
|
package/patternfly.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
|
|
2
|
+
.pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-log-viewer__header,
|
|
3
|
+
.pf-c-log-viewer__footer, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
|
|
3
4
|
--pf-global--Color--100: var(--pf-global--Color--dark-100);
|
|
4
5
|
--pf-global--Color--200: var(--pf-global--Color--dark-200);
|
|
5
6
|
--pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
|
|
@@ -6913,6 +6914,7 @@ button.pf-c-breadcrumb__link {
|
|
|
6913
6914
|
--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
|
|
6914
6915
|
--pf-c-button__progress--Opacity: 0;
|
|
6915
6916
|
--pf-c-button__progress--TranslateY: -50%;
|
|
6917
|
+
--pf-c-button__progress--TranslateX: 0;
|
|
6916
6918
|
--pf-c-button__progress--Top: 50%;
|
|
6917
6919
|
--pf-c-button__progress--Left: var(--pf-global--spacer--md);
|
|
6918
6920
|
--pf-c-button--m-progress--TransitionProperty: padding;
|
|
@@ -6921,6 +6923,9 @@ button.pf-c-breadcrumb__link {
|
|
|
6921
6923
|
--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
|
|
6922
6924
|
--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
|
|
6923
6925
|
--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
|
|
6926
|
+
--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
|
|
6927
|
+
--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
|
|
6928
|
+
--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
6924
6929
|
position: relative;
|
|
6925
6930
|
display: inline-block;
|
|
6926
6931
|
padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
|
|
@@ -7206,10 +7211,18 @@ button.pf-c-breadcrumb__link {
|
|
|
7206
7211
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
|
|
7207
7212
|
transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
|
|
7208
7213
|
}
|
|
7209
|
-
.pf-c-button.pf-m-in-progress {
|
|
7214
|
+
.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
|
|
7210
7215
|
--pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
|
|
7211
7216
|
--pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
|
|
7212
7217
|
}
|
|
7218
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain {
|
|
7219
|
+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
|
|
7220
|
+
--pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
|
|
7221
|
+
--pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
|
|
7222
|
+
}
|
|
7223
|
+
.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
|
|
7224
|
+
opacity: 0;
|
|
7225
|
+
}
|
|
7213
7226
|
|
|
7214
7227
|
.pf-c-button__icon.pf-m-start {
|
|
7215
7228
|
margin-right: var(--pf-c-button__icon--m-start--MarginRight);
|
|
@@ -7223,7 +7236,7 @@ button.pf-c-breadcrumb__link {
|
|
|
7223
7236
|
top: var(--pf-c-button__progress--Top);
|
|
7224
7237
|
left: var(--pf-c-button__progress--Left);
|
|
7225
7238
|
line-height: 1;
|
|
7226
|
-
transform:
|
|
7239
|
+
transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
|
|
7227
7240
|
}
|
|
7228
7241
|
.pf-c-button__progress .pf-c-spinner {
|
|
7229
7242
|
--pf-c-spinner--Color: currentColor;
|
|
@@ -13057,6 +13070,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13057
13070
|
--pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
|
|
13058
13071
|
--pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
|
|
13059
13072
|
--pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
|
|
13073
|
+
--pf-c-expandable-section__toggle-icon--MinWidth: 1em;
|
|
13060
13074
|
--pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
|
|
13061
13075
|
--pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
|
|
13062
13076
|
--pf-c-expandable-section__toggle-icon--Rotate: 0;
|
|
@@ -13079,6 +13093,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13079
13093
|
--pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
|
|
13080
13094
|
--pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
|
|
13081
13095
|
--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
|
|
13096
|
+
--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));
|
|
13082
13097
|
}
|
|
13083
13098
|
.pf-c-expandable-section.pf-m-expanded {
|
|
13084
13099
|
--pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
|
|
@@ -13113,6 +13128,9 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13113
13128
|
content: "";
|
|
13114
13129
|
background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
|
|
13115
13130
|
}
|
|
13131
|
+
.pf-c-expandable-section.pf-m-indented {
|
|
13132
|
+
--pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
|
|
13133
|
+
}
|
|
13116
13134
|
|
|
13117
13135
|
.pf-c-expandable-section__toggle {
|
|
13118
13136
|
display: flex;
|
|
@@ -13131,6 +13149,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
13131
13149
|
}
|
|
13132
13150
|
|
|
13133
13151
|
.pf-c-expandable-section__toggle-icon {
|
|
13152
|
+
min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
|
|
13134
13153
|
color: var(--pf-c-expandable-section__toggle-icon--Color);
|
|
13135
13154
|
transition: var(--pf-c-expandable-section__toggle-icon--Transition);
|
|
13136
13155
|
transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
|
|
@@ -15207,7 +15226,15 @@ ul.pf-c-list {
|
|
|
15207
15226
|
position: absolute;
|
|
15208
15227
|
right: 0;
|
|
15209
15228
|
left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
|
|
15210
|
-
|
|
15229
|
+
}
|
|
15230
|
+
.pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
|
|
15231
|
+
position: absolute;
|
|
15232
|
+
top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
|
|
15233
|
+
bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
|
|
15234
|
+
left: 0;
|
|
15235
|
+
width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
|
|
15236
|
+
content: "";
|
|
15237
|
+
background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
|
|
15211
15238
|
}
|
|
15212
15239
|
.pf-c-log-viewer .pf-c-toolbar {
|
|
15213
15240
|
--pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
|
|
@@ -15225,10 +15252,14 @@ ul.pf-c-list {
|
|
|
15225
15252
|
}
|
|
15226
15253
|
|
|
15227
15254
|
.pf-c-log-viewer__header {
|
|
15228
|
-
color: var(--pf-global--Color--100);
|
|
15229
15255
|
margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
|
|
15230
15256
|
}
|
|
15231
15257
|
|
|
15258
|
+
.pf-c-log-viewer__header,
|
|
15259
|
+
.pf-c-log-viewer__footer {
|
|
15260
|
+
color: var(--pf-global--Color--100);
|
|
15261
|
+
}
|
|
15262
|
+
|
|
15232
15263
|
.pf-c-log-viewer__main {
|
|
15233
15264
|
display: flex;
|
|
15234
15265
|
flex-direction: column;
|
|
@@ -15236,18 +15267,6 @@ ul.pf-c-list {
|
|
|
15236
15267
|
background-color: var(--pf-c-log-viewer__main--BackgroundColor);
|
|
15237
15268
|
border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
|
|
15238
15269
|
}
|
|
15239
|
-
.pf-m-line-numbers .pf-c-log-viewer__main {
|
|
15240
|
-
position: relative;
|
|
15241
|
-
}
|
|
15242
|
-
.pf-m-line-numbers .pf-c-log-viewer__main::before {
|
|
15243
|
-
position: absolute;
|
|
15244
|
-
top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
|
|
15245
|
-
bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
|
|
15246
|
-
left: var(--pf-c-log-viewer__index--Width);
|
|
15247
|
-
width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
|
|
15248
|
-
content: "";
|
|
15249
|
-
background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
|
|
15250
|
-
}
|
|
15251
15270
|
|
|
15252
15271
|
.pf-c-log-viewer__scroll-container {
|
|
15253
15272
|
position: relative;
|
|
@@ -15288,6 +15307,7 @@ ul.pf-c-list {
|
|
|
15288
15307
|
font-family: var(--pf-c-log-viewer__index--FontFamily);
|
|
15289
15308
|
font-size: var(--pf-c-log-viewer__index--FontSize);
|
|
15290
15309
|
color: var(--pf-c-log-viewer__index--Color);
|
|
15310
|
+
user-select: none;
|
|
15291
15311
|
background-color: var(--pf-c-log-viewer__index--BackgroundColor);
|
|
15292
15312
|
}
|
|
15293
15313
|
|
|
@@ -15460,6 +15480,7 @@ ul.pf-c-list {
|
|
|
15460
15480
|
}
|
|
15461
15481
|
|
|
15462
15482
|
.pf-c-login__main {
|
|
15483
|
+
align-self: start;
|
|
15463
15484
|
margin-bottom: var(--pf-c-login__main--MarginBottom);
|
|
15464
15485
|
background-color: var(--pf-c-login__main--BackgroundColor);
|
|
15465
15486
|
grid-area: main;
|