@patternfly/patternfly 4.155.0 → 4.156.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.
Files changed (12) hide show
  1. package/components/Card/card.css +18 -9
  2. package/components/Card/card.scss +15 -5
  3. package/components/LogViewer/log-viewer.css +15 -11
  4. package/components/LogViewer/log-viewer.scss +4 -11
  5. package/docs/components/Card/examples/Card.md +15 -0
  6. package/docs/demos/CardView/examples/CardView.md +18 -11
  7. package/docs/demos/Tabs/examples/Tabs.md +18 -11
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +24 -21
  10. package/patternfly.css +24 -21
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -55,6 +55,10 @@
55
55
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
56
56
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
57
57
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
58
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
59
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
60
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
61
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
58
62
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
59
63
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
60
64
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -112,10 +116,10 @@
112
116
  content: "";
113
117
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
114
118
  }
115
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
119
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
116
120
  position: relative;
117
121
  }
118
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
122
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
119
123
  position: absolute;
120
124
  right: var(--pf-c-card--m-selectable-raised--before--Right);
121
125
  bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -133,12 +137,6 @@
133
137
  }
134
138
  .pf-c-card.pf-m-selectable-raised {
135
139
  cursor: pointer;
136
- /*
137
- &:active {
138
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
139
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
140
- }
141
- */
142
140
  }
143
141
  .pf-c-card.pf-m-selectable-raised:hover {
144
142
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -148,7 +146,11 @@
148
146
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
149
147
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
150
148
  }
151
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
149
+ .pf-c-card.pf-m-selectable-raised:active {
150
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
151
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
152
+ }
153
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
152
154
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
153
155
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
154
156
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -157,6 +159,13 @@
157
159
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
158
160
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
159
161
  }
162
+ .pf-c-card.pf-m-non-selectable-raised {
163
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
164
+ --pf-c-card--BoxShadow: none;
165
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
166
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
167
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
168
+ }
160
169
  .pf-c-card.pf-m-compact {
161
170
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
162
171
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
package/components/Card/card.scss CHANGED
@@ -61,6 +61,10 @@
61
61
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
62
62
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
63
63
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
64
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
65
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
66
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
67
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
64
68
 
65
69
  // Compact
66
70
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
@@ -143,7 +147,8 @@
143
147
  }
144
148
 
145
149
  &.pf-m-hoverable-raised,
146
- &.pf-m-selectable-raised {
150
+ &.pf-m-selectable-raised,
151
+ &.pf-m-non-selectable-raised {
147
152
  position: relative;
148
153
 
149
154
  &::before {
@@ -180,15 +185,12 @@
180
185
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
181
186
  }
182
187
 
183
- /*
184
188
  &:active {
185
189
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
186
190
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
187
191
  }
188
- */
189
192
 
190
- &.pf-m-selected-raised,
191
- &:active {
193
+ &.pf-m-selected-raised {
192
194
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
193
195
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
194
196
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
@@ -200,6 +202,14 @@
200
202
  }
201
203
  }
202
204
 
205
+ &.pf-m-non-selectable-raised {
206
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
207
+ --pf-c-card--BoxShadow: none;
208
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
209
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
210
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
211
+ }
212
+
203
213
  &.pf-m-compact {
204
214
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
205
215
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
package/components/LogViewer/log-viewer.css CHANGED
@@ -1,4 +1,14 @@
1
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
1
+ .pf-c-log-viewer__header {
2
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
7
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
8
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
+ }
10
+
11
+ .pf-c-log-viewer.pf-m-dark {
2
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
3
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
4
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -7,10 +17,10 @@
7
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
8
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
9
19
  }
10
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
20
+ .pf-c-log-viewer.pf-m-dark .pf-c-card {
11
21
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12
22
  }
13
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
23
+ .pf-c-log-viewer.pf-m-dark .pf-c-button {
14
24
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
15
25
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
16
26
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -81,15 +91,8 @@
81
91
  max-height: var(--pf-c-log-viewer--MaxHeight);
82
92
  }
83
93
  .pf-c-log-viewer.pf-m-dark {
84
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
85
- }
86
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
87
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
88
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
89
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
90
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
91
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
92
94
  color: var(--pf-global--Color--100);
95
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
93
96
  }
94
97
  .pf-c-log-viewer.pf-m-wrap-text {
95
98
  word-break: break-all;
@@ -122,6 +125,7 @@
122
125
  }
123
126
 
124
127
  .pf-c-log-viewer__header {
128
+ color: var(--pf-global--Color--100);
125
129
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
126
130
  }
127
131
 
package/components/LogViewer/log-viewer.scss CHANGED
@@ -65,19 +65,10 @@
65
65
  // Dark theme
66
66
  --pf-c-log-viewer--m-dark__main--BorderWidth: 0;
67
67
 
68
-
69
68
  &.pf-m-dark {
70
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
71
-
72
- .pf-c-log-viewer__main {
73
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
74
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
75
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
76
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
77
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
69
+ @include pf-t-dark;
78
70
 
79
- @include pf-t-dark;
80
- }
71
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
81
72
  }
82
73
 
83
74
  display: flex;
@@ -125,6 +116,8 @@
125
116
 
126
117
  // Header
127
118
  .pf-c-log-viewer__header {
119
+ @include pf-t-light;
120
+
128
121
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
129
122
  }
130
123
 
package/docs/components/Card/examples/Card.md CHANGED
@@ -375,6 +375,20 @@ cssPrefix: pf-c-card
375
375
 
376
376
  ```
377
377
 
378
+ ### Non selectable
379
+
380
+ ```html
381
+ <div
382
+ class="pf-c-card pf-m-non-selectable-raised"
383
+ id="card-non-selectable-example"
384
+ >
385
+ <div class="pf-c-card__title">Title</div>
386
+ <div class="pf-c-card__body">Body</div>
387
+ <div class="pf-c-card__footer">Footer</div>
388
+ </div>
389
+
390
+ ```
391
+
378
392
  ### Hoverable (legacy)
379
393
 
380
394
  ```html
@@ -878,6 +892,7 @@ A card is a generic rectangular container that can be used to build other compon
878
892
  | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
879
893
  | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
880
894
  | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
895
+ | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
881
896
  | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
882
897
  | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
883
898
  | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -494,7 +494,7 @@ section: demos
494
494
  <section class="pf-c-page__main-section pf-m-fill">
495
495
  <div class="pf-l-gallery pf-m-gutter">
496
496
  <div
497
- class="pf-c-card pf-m-hoverable pf-m-compact"
497
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
498
498
  id="card-empty-state"
499
499
  >
500
500
  <div class="pf-l-bullseye">
@@ -509,7 +509,7 @@ section: demos
509
509
  </div>
510
510
  </div>
511
511
  </div>
512
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-1">
512
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-1">
513
513
  <div class="pf-c-card__header">
514
514
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
515
515
  <div class="pf-c-card__actions">
@@ -579,7 +579,7 @@ section: demos
579
579
  class="pf-c-card__body"
580
580
  >PatternFly is a community project that promotes design commonality and improves user experience.</div>
581
581
  </div>
582
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-2">
582
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-2">
583
583
  <div class="pf-c-card__header">
584
584
  <img
585
585
  src="/assets/images/activemq-core_200x150.png"
@@ -653,7 +653,7 @@ section: demos
653
653
  class="pf-c-card__body"
654
654
  >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
655
655
  </div>
656
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-3">
656
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-3">
657
657
  <div class="pf-c-card__header">
658
658
  <img
659
659
  src="/assets/images/camel-spark_200x150.png"
@@ -727,7 +727,7 @@ section: demos
727
727
  class="pf-c-card__body"
728
728
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
729
729
  </div>
730
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-4">
730
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-4">
731
731
  <div class="pf-c-card__header">
732
732
  <img
733
733
  src="/assets/images/camel-avro_200x150.png"
@@ -801,7 +801,10 @@ section: demos
801
801
  class="pf-c-card__body"
802
802
  >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
803
803
  </div>
804
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-5">
804
+ <div
805
+ class="pf-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
806
+ id="card-5"
807
+ >
805
808
  <div class="pf-c-card__header">
806
809
  <img
807
810
  src="/assets/images/FuseConnector_Icons_AzureServices.png"
@@ -875,7 +878,10 @@ section: demos
875
878
  class="pf-c-card__body"
876
879
  >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
877
880
  </div>
878
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-6">
881
+ <div
882
+ class="pf-c-card pf-m-non-selectable-raised pf-m-compact"
883
+ id="card-6"
884
+ >
879
885
  <div class="pf-c-card__header">
880
886
  <img
881
887
  src="/assets/images/camel-saxon_200x150.png"
@@ -934,6 +940,7 @@ section: demos
934
940
  type="checkbox"
935
941
  id="card-6-check"
936
942
  name="card-6-check"
943
+ disabled
937
944
  aria-labelledby="card-6-check-label"
938
945
  />
939
946
  </div>
@@ -949,7 +956,7 @@ section: demos
949
956
  class="pf-c-card__body"
950
957
  >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
951
958
  </div>
952
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-7">
959
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-7">
953
960
  <div class="pf-c-card__header">
954
961
  <img
955
962
  src="/assets/images/camel-dropbox_200x150.png"
@@ -1023,7 +1030,7 @@ section: demos
1023
1030
  class="pf-c-card__body"
1024
1031
  >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
1025
1032
  </div>
1026
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-8">
1033
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-8">
1027
1034
  <div class="pf-c-card__header">
1028
1035
  <img
1029
1036
  src="/assets/images/camel-infinispan_200x150.png"
@@ -1097,7 +1104,7 @@ section: demos
1097
1104
  class="pf-c-card__body"
1098
1105
  >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
1099
1106
  </div>
1100
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-9">
1107
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-9">
1101
1108
  <div class="pf-c-card__header">
1102
1109
  <img
1103
1110
  src="/assets/images/FuseConnector_Icons_REST.png"
@@ -1172,7 +1179,7 @@ section: demos
1172
1179
  From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
1173
1180
  </div>
1174
1181
  </div>
1175
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-10">
1182
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-10">
1176
1183
  <div class="pf-c-card__header">
1177
1184
  <img
1178
1185
  src="/assets/images/camel-swagger-java_200x150.png"
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -5696,7 +5696,7 @@ section: components
5696
5696
  <section class="pf-c-page__main-section pf-m-fill">
5697
5697
  <div class="pf-l-gallery pf-m-gutter">
5698
5698
  <div
5699
- class="pf-c-card pf-m-hoverable pf-m-compact"
5699
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
5700
5700
  id="card-empty-state"
5701
5701
  >
5702
5702
  <div class="pf-l-bullseye">
@@ -5711,7 +5711,7 @@ section: components
5711
5711
  </div>
5712
5712
  </div>
5713
5713
  </div>
5714
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-1">
5714
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-1">
5715
5715
  <div class="pf-c-card__header">
5716
5716
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
5717
5717
  <div class="pf-c-card__actions">
@@ -5781,7 +5781,7 @@ section: components
5781
5781
  class="pf-c-card__body"
5782
5782
  >PatternFly is a community project that promotes design commonality and improves user experience.</div>
5783
5783
  </div>
5784
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-2">
5784
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-2">
5785
5785
  <div class="pf-c-card__header">
5786
5786
  <img
5787
5787
  src="/assets/images/activemq-core_200x150.png"
@@ -5855,7 +5855,7 @@ section: components
5855
5855
  class="pf-c-card__body"
5856
5856
  >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
5857
5857
  </div>
5858
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-3">
5858
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-3">
5859
5859
  <div class="pf-c-card__header">
5860
5860
  <img
5861
5861
  src="/assets/images/camel-spark_200x150.png"
@@ -5929,7 +5929,7 @@ section: components
5929
5929
  class="pf-c-card__body"
5930
5930
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
5931
5931
  </div>
5932
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-4">
5932
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-4">
5933
5933
  <div class="pf-c-card__header">
5934
5934
  <img
5935
5935
  src="/assets/images/camel-avro_200x150.png"
@@ -6003,7 +6003,10 @@ section: components
6003
6003
  class="pf-c-card__body"
6004
6004
  >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
6005
6005
  </div>
6006
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-5">
6006
+ <div
6007
+ class="pf-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
6008
+ id="card-5"
6009
+ >
6007
6010
  <div class="pf-c-card__header">
6008
6011
  <img
6009
6012
  src="/assets/images/FuseConnector_Icons_AzureServices.png"
@@ -6077,7 +6080,10 @@ section: components
6077
6080
  class="pf-c-card__body"
6078
6081
  >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
6079
6082
  </div>
6080
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-6">
6083
+ <div
6084
+ class="pf-c-card pf-m-non-selectable-raised pf-m-compact"
6085
+ id="card-6"
6086
+ >
6081
6087
  <div class="pf-c-card__header">
6082
6088
  <img
6083
6089
  src="/assets/images/camel-saxon_200x150.png"
@@ -6136,6 +6142,7 @@ section: components
6136
6142
  type="checkbox"
6137
6143
  id="card-6-check"
6138
6144
  name="card-6-check"
6145
+ disabled
6139
6146
  aria-labelledby="card-6-check-label"
6140
6147
  />
6141
6148
  </div>
@@ -6151,7 +6158,7 @@ section: components
6151
6158
  class="pf-c-card__body"
6152
6159
  >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
6153
6160
  </div>
6154
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-7">
6161
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-7">
6155
6162
  <div class="pf-c-card__header">
6156
6163
  <img
6157
6164
  src="/assets/images/camel-dropbox_200x150.png"
@@ -6225,7 +6232,7 @@ section: components
6225
6232
  class="pf-c-card__body"
6226
6233
  >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
6227
6234
  </div>
6228
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-8">
6235
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-8">
6229
6236
  <div class="pf-c-card__header">
6230
6237
  <img
6231
6238
  src="/assets/images/camel-infinispan_200x150.png"
@@ -6299,7 +6306,7 @@ section: components
6299
6306
  class="pf-c-card__body"
6300
6307
  >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
6301
6308
  </div>
6302
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-9">
6309
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-9">
6303
6310
  <div class="pf-c-card__header">
6304
6311
  <img
6305
6312
  src="/assets/images/FuseConnector_Icons_REST.png"
@@ -6374,7 +6381,7 @@ section: components
6374
6381
  From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
6375
6382
  </div>
6376
6383
  </div>
6377
- <div class="pf-c-card pf-m-hoverable pf-m-compact" id="card-10">
6384
+ <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-10">
6378
6385
  <div class="pf-c-card__header">
6379
6386
  <img
6380
6387
  src="/assets/images/camel-swagger-java_200x150.png"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.155.0",
4
+ "version": "4.156.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,5 @@
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-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 {
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, .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
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -9,7 +9,7 @@
9
9
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10
10
  }
11
11
 
12
- .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
12
+ .pf-c-wizard__header, .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header, .pf-c-masthead, .pf-c-login__footer, .pf-c-login__header, .pf-c-log-viewer.pf-m-dark, .pf-c-banner, .pf-c-about-modal-box, .pf-t-dark {
13
13
  --pf-global--Color--100: var(--pf-global--Color--light-100);
14
14
  --pf-global--Color--200: var(--pf-global--Color--light-200);
15
15
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -18,10 +18,10 @@
18
18
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
19
19
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
20
20
  }
21
- .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
21
+ .pf-c-wizard__header .pf-c-card, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card, .pf-c-masthead .pf-c-card, .pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card, .pf-c-log-viewer.pf-m-dark .pf-c-card, .pf-c-banner .pf-c-card, .pf-c-about-modal-box .pf-c-card, .pf-t-dark .pf-c-card {
22
22
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
23
23
  }
24
- .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
24
+ .pf-c-wizard__header .pf-c-button, .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button, .pf-c-masthead .pf-c-button, .pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button, .pf-c-log-viewer.pf-m-dark .pf-c-button, .pf-c-banner .pf-c-button, .pf-c-about-modal-box .pf-c-button, .pf-t-dark .pf-c-button {
25
25
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
26
26
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
27
27
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -7249,6 +7249,10 @@ button.pf-c-breadcrumb__link {
7249
7249
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7250
7250
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
7251
7251
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
7252
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
7253
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
7254
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
7255
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
7252
7256
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
7253
7257
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
7254
7258
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -7306,10 +7310,10 @@ button.pf-c-breadcrumb__link {
7306
7310
  content: "";
7307
7311
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
7308
7312
  }
7309
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
7313
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
7310
7314
  position: relative;
7311
7315
  }
7312
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
7316
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
7313
7317
  position: absolute;
7314
7318
  right: var(--pf-c-card--m-selectable-raised--before--Right);
7315
7319
  bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -7327,12 +7331,6 @@ button.pf-c-breadcrumb__link {
7327
7331
  }
7328
7332
  .pf-c-card.pf-m-selectable-raised {
7329
7333
  cursor: pointer;
7330
- /*
7331
- &:active {
7332
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7333
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7334
- }
7335
- */
7336
7334
  }
7337
7335
  .pf-c-card.pf-m-selectable-raised:hover {
7338
7336
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -7342,7 +7340,11 @@ button.pf-c-breadcrumb__link {
7342
7340
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
7343
7341
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
7344
7342
  }
7345
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
7343
+ .pf-c-card.pf-m-selectable-raised:active {
7344
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7345
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7346
+ }
7347
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
7346
7348
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
7347
7349
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7348
7350
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -7351,6 +7353,13 @@ button.pf-c-breadcrumb__link {
7351
7353
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7352
7354
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
7353
7355
  }
7356
+ .pf-c-card.pf-m-non-selectable-raised {
7357
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
7358
+ --pf-c-card--BoxShadow: none;
7359
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
7360
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
7361
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
7362
+ }
7354
7363
  .pf-c-card.pf-m-compact {
7355
7364
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
7356
7365
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -14687,15 +14696,8 @@ ul.pf-c-list {
14687
14696
  max-height: var(--pf-c-log-viewer--MaxHeight);
14688
14697
  }
14689
14698
  .pf-c-log-viewer.pf-m-dark {
14690
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
14691
- }
14692
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
14693
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
14694
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
14695
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
14696
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
14697
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
14698
14699
  color: var(--pf-global--Color--100);
14700
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
14699
14701
  }
14700
14702
  .pf-c-log-viewer.pf-m-wrap-text {
14701
14703
  word-break: break-all;
@@ -14728,6 +14730,7 @@ ul.pf-c-list {
14728
14730
  }
14729
14731
 
14730
14732
  .pf-c-log-viewer__header {
14733
+ color: var(--pf-global--Color--100);
14731
14734
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
14732
14735
  }
14733
14736