@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.8
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/_common.scss +0 -22
- package/base/patternfly-common.css +0 -10
- package/components/Card/card.css +9 -12
- package/components/Card/card.scss +11 -17
- package/components/ChipGroup/chip-group.css +29 -17
- package/components/ChipGroup/chip-group.scss +39 -22
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/docs/components/Card/examples/Card.md +61 -44
- package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
- package/docs/components/EmptyState/examples/EmptyState.md +127 -79
- package/docs/components/Wizard/examples/Wizard.md +4 -7
- package/docs/demos/Card/examples/Card.md +141 -106
- package/docs/demos/CardView/examples/CardView.md +1 -3
- package/docs/demos/Table/examples/Table.md +7 -10
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +0 -10
- package/patternfly-base.css +0 -10
- package/patternfly-no-reset.css +84 -91
- package/patternfly.css +84 -91
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +0 -1
|
@@ -3,38 +3,51 @@
|
|
|
3
3
|
--pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
|
|
4
4
|
--pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
|
|
5
5
|
--pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
|
|
6
|
+
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
|
7
|
+
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
|
8
|
+
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
|
9
|
+
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
|
10
|
+
|
|
11
|
+
// Content
|
|
6
12
|
--pf-c-empty-state__content--MaxWidth: none;
|
|
13
|
+
--pf-c-empty-state--m-xs__content--MaxWidth: #{pf-size-prem(350px)};
|
|
14
|
+
--pf-c-empty-state--m-sm__content--MaxWidth: #{pf-size-prem(400px)};
|
|
15
|
+
--pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
|
|
16
|
+
|
|
17
|
+
// Icon
|
|
7
18
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
|
|
8
19
|
--pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
|
9
20
|
--pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
|
|
10
|
-
--pf-c-empty-
|
|
21
|
+
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
|
22
|
+
--pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
|
|
23
|
+
--pf-c-empty-state--m-xl__icon--FontSize: #{pf-size-prem(100px)};
|
|
24
|
+
|
|
25
|
+
// Title text
|
|
26
|
+
--pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
|
|
27
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
|
|
28
|
+
--pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
|
|
29
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
|
|
30
|
+
--pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
|
|
31
|
+
--pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
|
|
32
|
+
--pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
|
|
33
|
+
|
|
34
|
+
// Body
|
|
11
35
|
--pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
|
|
12
36
|
--pf-c-empty-state__body--Color: var(--pf-global--Color--200);
|
|
13
|
-
--pf-c-empty-
|
|
14
|
-
--pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
|
|
15
|
-
--pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
|
|
16
|
-
--pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
|
17
|
-
--pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
|
|
18
|
-
--pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
|
|
19
|
-
--pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
|
|
20
|
-
--pf-c-empty-state--m-xs__content--MaxWidth: #{pf-size-prem(350px)};
|
|
37
|
+
--pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
|
|
21
38
|
--pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
|
|
22
|
-
--pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
|
|
23
|
-
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
|
24
|
-
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
|
25
|
-
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
|
26
|
-
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
|
27
|
-
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
|
28
39
|
--pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
|
|
29
|
-
--pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
|
|
30
|
-
--pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
|
|
31
|
-
--pf-c-empty-state--m-sm__content--MaxWidth: #{pf-size-prem(400px)};
|
|
32
|
-
--pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
|
|
33
40
|
--pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
|
|
34
41
|
--pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
--pf-c-empty-
|
|
42
|
+
|
|
43
|
+
// Footer
|
|
44
|
+
--pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
|
|
45
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
|
|
46
|
+
--pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
|
|
47
|
+
|
|
48
|
+
// Actions
|
|
49
|
+
--pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
|
|
50
|
+
--pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
|
|
38
51
|
|
|
39
52
|
display: flex;
|
|
40
53
|
align-items: center;
|
|
@@ -47,19 +60,12 @@
|
|
|
47
60
|
--pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
|
|
48
61
|
--pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
|
|
49
62
|
--pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
|
|
63
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
|
|
50
64
|
--pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
|
|
51
65
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
|
|
52
66
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
|
|
53
|
-
--pf-c-empty-
|
|
54
|
-
--pf-c-empty-
|
|
55
|
-
|
|
56
|
-
.pf-c-empty-state__body {
|
|
57
|
-
font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.pf-c-button {
|
|
61
|
-
--pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
|
|
62
|
-
}
|
|
67
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
|
|
68
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
|
|
63
69
|
}
|
|
64
70
|
|
|
65
71
|
&.pf-m-sm {
|
|
@@ -72,13 +78,11 @@
|
|
|
72
78
|
|
|
73
79
|
&.pf-m-xl {
|
|
74
80
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
|
|
81
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
|
|
75
82
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
|
|
76
83
|
--pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
|
|
77
|
-
--pf-c-empty-
|
|
78
|
-
|
|
79
|
-
.pf-c-empty-state__body {
|
|
80
|
-
font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
|
|
81
|
-
}
|
|
84
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
|
|
85
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
|
|
82
86
|
}
|
|
83
87
|
|
|
84
88
|
&.pf-m-full-height {
|
|
@@ -88,42 +92,39 @@
|
|
|
88
92
|
|
|
89
93
|
.pf-c-empty-state__content {
|
|
90
94
|
max-width: var(--pf-c-empty-state__content--MaxWidth);
|
|
91
|
-
|
|
92
|
-
> .pf-c-title.pf-m-lg {
|
|
93
|
-
font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
|
|
94
|
-
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.pf-c-empty-state__icon {
|
|
98
98
|
margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
|
|
99
99
|
font-size: var(--pf-c-empty-state__icon--FontSize);
|
|
100
|
+
line-height: 1;
|
|
100
101
|
color: var(--pf-c-empty-state__icon--Color);
|
|
101
102
|
}
|
|
102
103
|
|
|
104
|
+
.pf-c-empty-state__title-text {
|
|
105
|
+
font-family: var(--pf-c-empty-state__title-text--FontFamily);
|
|
106
|
+
font-size: var(--pf-c-empty-state__title-text--FontSize);
|
|
107
|
+
font-weight: var(--pf-c-empty-state__title-text--FontWeight);
|
|
108
|
+
line-height: var(--pf-c-empty-state__title-text--LineHeight);
|
|
109
|
+
}
|
|
110
|
+
|
|
103
111
|
.pf-c-empty-state__body {
|
|
104
112
|
margin-top: var(--pf-c-empty-state__body--MarginTop);
|
|
113
|
+
font-size: var(--pf-c-empty-state--body--FontSize);
|
|
105
114
|
color: var(--pf-c-empty-state__body--Color);
|
|
106
115
|
}
|
|
107
116
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
117
|
+
.pf-c-empty-state__footer {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
align-items: center;
|
|
121
|
+
row-gap: var(--pf-c-empty-state__footer--RowGap);
|
|
122
|
+
margin-top: var(--pf-c-empty-state__footer--MarginTop);
|
|
115
123
|
}
|
|
116
124
|
|
|
117
|
-
.pf-c-empty-
|
|
125
|
+
.pf-c-empty-state__actions {
|
|
118
126
|
display: flex;
|
|
119
127
|
flex-wrap: wrap;
|
|
120
128
|
justify-content: center;
|
|
121
|
-
|
|
122
|
-
margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
|
|
123
|
-
|
|
124
|
-
> * {
|
|
125
|
-
margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
|
|
126
|
-
margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
|
|
127
|
-
margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
|
|
128
|
-
}
|
|
129
|
+
gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
|
|
129
130
|
}
|
|
@@ -144,10 +144,12 @@ cssPrefix: pf-c-card
|
|
|
144
144
|
/>
|
|
145
145
|
</div>
|
|
146
146
|
</div>
|
|
147
|
-
<div
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
147
|
+
<div class="pf-c-card__header-main">
|
|
148
|
+
<div
|
|
149
|
+
class="pf-c-card__title"
|
|
150
|
+
id="card-action-example-2-check-label"
|
|
151
|
+
>This is a really really really really really really really really really really long title</div>
|
|
152
|
+
</div>
|
|
151
153
|
</div>
|
|
152
154
|
<div class="pf-c-card__body">Body</div>
|
|
153
155
|
<div class="pf-c-card__footer">Footer</div>
|
|
@@ -230,10 +232,12 @@ cssPrefix: pf-c-card
|
|
|
230
232
|
<div class="pf-c-card__actions pf-m-no-offset">
|
|
231
233
|
<button class="pf-c-button pf-m-primary" type="button">Action</button>
|
|
232
234
|
</div>
|
|
233
|
-
<
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
<div class="pf-c-card__header-main">
|
|
236
|
+
<h1
|
|
237
|
+
class="pf-c-title pf-m-2xl"
|
|
238
|
+
id="card-action-no-offset-check-label"
|
|
239
|
+
>This is a card title</h1>
|
|
240
|
+
</div>
|
|
237
241
|
</div>
|
|
238
242
|
<div class="pf-c-card__body">Body</div>
|
|
239
243
|
<div class="pf-c-card__footer">Footer</div>
|
|
@@ -555,7 +559,9 @@ cssPrefix: pf-c-card
|
|
|
555
559
|
/>
|
|
556
560
|
</div>
|
|
557
561
|
</div>
|
|
558
|
-
<div class="pf-c-
|
|
562
|
+
<div class="pf-c-card__header-main">
|
|
563
|
+
<div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
|
|
564
|
+
</div>
|
|
559
565
|
</div>
|
|
560
566
|
</div>
|
|
561
567
|
|
|
@@ -579,11 +585,13 @@ cssPrefix: pf-c-card
|
|
|
579
585
|
</span>
|
|
580
586
|
</button>
|
|
581
587
|
</div>
|
|
582
|
-
<
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
588
|
+
<div class="pf-c-card__header-main">
|
|
589
|
+
<img
|
|
590
|
+
src="/assets/images/pf-logo-small.svg"
|
|
591
|
+
alt="PatternFly logo"
|
|
592
|
+
width="27px"
|
|
593
|
+
/>
|
|
594
|
+
</div>
|
|
587
595
|
<div class="pf-c-card__actions">
|
|
588
596
|
<div class="pf-c-dropdown">
|
|
589
597
|
<button
|
|
@@ -713,7 +721,9 @@ cssPrefix: pf-c-card
|
|
|
713
721
|
/>
|
|
714
722
|
</div>
|
|
715
723
|
</div>
|
|
716
|
-
<div class="pf-c-
|
|
724
|
+
<div class="pf-c-card__header-main">
|
|
725
|
+
<div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
|
|
726
|
+
</div>
|
|
717
727
|
</div>
|
|
718
728
|
<div class="pf-c-card__expandable-content">
|
|
719
729
|
<div class="pf-c-card__body">Body</div>
|
|
@@ -781,7 +791,9 @@ cssPrefix: pf-c-card
|
|
|
781
791
|
/>
|
|
782
792
|
</div>
|
|
783
793
|
</div>
|
|
784
|
-
<div class="pf-c-
|
|
794
|
+
<div class="pf-c-card__header-main">
|
|
795
|
+
<div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
|
|
796
|
+
</div>
|
|
785
797
|
</div>
|
|
786
798
|
<div class="pf-c-card__body">Body</div>
|
|
787
799
|
<div class="pf-c-card__footer">Footer</div>
|
|
@@ -847,7 +859,12 @@ cssPrefix: pf-c-card
|
|
|
847
859
|
/>
|
|
848
860
|
</div>
|
|
849
861
|
</div>
|
|
850
|
-
<div class="pf-c-
|
|
862
|
+
<div class="pf-c-card__header-main">
|
|
863
|
+
<div
|
|
864
|
+
class="pf-c-card__title"
|
|
865
|
+
id="card-toggle-on-right-example-title"
|
|
866
|
+
>Title</div>
|
|
867
|
+
</div>
|
|
851
868
|
<div class="pf-c-card__header-toggle">
|
|
852
869
|
<button
|
|
853
870
|
class="pf-c-button pf-m-plain"
|
|
@@ -889,30 +906,30 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
889
906
|
|
|
890
907
|
### Usage
|
|
891
908
|
|
|
892
|
-
| Class | Applied | Outcome
|
|
893
|
-
| -------------------------------- | ----------------------------------- |
|
|
894
|
-
| `.pf-c-card` | `<div>` | Creates a card component. **Required**
|
|
895
|
-
| `.pf-c-card__title` | `<div>` | Creates the title of a card.
|
|
896
|
-
| `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements.
|
|
897
|
-
| `.pf-c-card__footer` | `<div>` | Creates the footer of a card.
|
|
898
|
-
| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go.
|
|
899
|
-
| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle.
|
|
900
|
-
| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon.
|
|
901
|
-
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header.
|
|
902
|
-
| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text.
|
|
903
|
-
| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content.
|
|
904
|
-
| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused.
|
|
905
|
-
| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred.
|
|
906
|
-
| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.
|
|
907
|
-
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies.
|
|
908
|
-
| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`.
|
|
909
|
-
| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable.
|
|
910
|
-
| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state.
|
|
911
|
-
| `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable.
|
|
912
|
-
| `.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.
|
|
913
|
-
| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners.
|
|
914
|
-
| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color.
|
|
915
|
-
| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state.
|
|
916
|
-
| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end.
|
|
917
|
-
| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent.
|
|
918
|
-
| `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title.
|
|
909
|
+
| Class | Applied | Outcome |
|
|
910
|
+
| -------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
911
|
+
| `.pf-c-card` | `<div>` | Creates a card component. **Required** |
|
|
912
|
+
| `.pf-c-card__title` | `<div>` | Creates the title of a card. |
|
|
913
|
+
| `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
|
|
914
|
+
| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
|
|
915
|
+
| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
|
|
916
|
+
| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
|
|
917
|
+
| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
|
|
918
|
+
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
|
|
919
|
+
| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
|
|
920
|
+
| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
|
|
921
|
+
| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
|
|
922
|
+
| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
|
|
923
|
+
| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
|
|
924
|
+
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
|
|
925
|
+
| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
|
|
926
|
+
| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
|
|
927
|
+
| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
|
|
928
|
+
| `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
|
|
929
|
+
| `.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. |
|
|
930
|
+
| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
|
|
931
|
+
| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
|
|
932
|
+
| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
|
|
933
|
+
| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
|
|
934
|
+
| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
|
|
935
|
+
| `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
|
|
@@ -123,9 +123,7 @@ cssPrefix: pf-c-code-editor
|
|
|
123
123
|
class="pf-c-empty-state__body"
|
|
124
124
|
>Drag a file here or browse to upload.</div>
|
|
125
125
|
<button class="pf-c-button pf-m-primary" type="button">Browse</button>
|
|
126
|
-
<
|
|
127
|
-
<button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
|
|
128
|
-
</div>
|
|
126
|
+
<button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
|
|
129
127
|
</div>
|
|
130
128
|
</div>
|
|
131
129
|
</div>
|
|
@@ -157,9 +155,7 @@ cssPrefix: pf-c-code-editor
|
|
|
157
155
|
class="pf-c-empty-state__body"
|
|
158
156
|
>Drag a file here or browse to upload.</div>
|
|
159
157
|
<button class="pf-c-button pf-m-primary" type="button">Browse</button>
|
|
160
|
-
<
|
|
161
|
-
<button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
|
|
162
|
-
</div>
|
|
158
|
+
<button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
|
|
163
159
|
</div>
|
|
164
160
|
</div>
|
|
165
161
|
</div>
|