@patternfly/patternfly 4.145.0 → 4.147.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AppLauncher/app-launcher.css +5 -1
- package/components/AppLauncher/app-launcher.scss +7 -3
- package/components/Card/card.css +97 -18
- package/components/Card/card.scss +127 -19
- package/components/Menu/menu.css +4 -2
- package/components/Menu/menu.scss +5 -2
- package/components/Select/select.css +21 -5
- package/components/Select/select.scss +25 -7
- package/components/Tile/tile.css +53 -29
- package/components/Tile/tile.scss +72 -34
- package/docs/components/Card/examples/Card.md +70 -29
- package/docs/components/DragDrop/examples/DragDrop.md +1 -1
- package/docs/components/Form/examples/Form.md +103 -56
- package/docs/components/Tile/examples/Tile.md +2 -2
- package/docs/demos/Form/examples/BasicForms.md +20 -4
- package/package.json +1 -1
- package/patternfly-no-reset.css +180 -55
- package/patternfly.css +180 -55
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Tile/tile.css
CHANGED
|
@@ -4,33 +4,42 @@
|
|
|
4
4
|
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
|
|
5
5
|
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
|
|
6
6
|
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
7
|
+
--pf-c-tile--Transition: none;
|
|
8
|
+
--pf-c-tile--TranslateY: 0;
|
|
7
9
|
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
8
10
|
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
9
|
-
--pf-c-tile--
|
|
10
|
-
--pf-c-tile--
|
|
11
|
-
--pf-c-tile--
|
|
12
|
-
--pf-c-tile--
|
|
13
|
-
--pf-c-tile--
|
|
14
|
-
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
|
|
15
|
-
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
16
|
-
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
17
|
-
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
18
|
-
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
19
|
-
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
20
|
-
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
11
|
+
--pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
|
|
12
|
+
--pf-c-tile--after--BackgroundColor: transparent;
|
|
13
|
+
--pf-c-tile--after--Transition: none;
|
|
14
|
+
--pf-c-tile--after--ScaleY: 1;
|
|
15
|
+
--pf-c-tile--after--TranslateY: 0;
|
|
21
16
|
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
|
|
22
17
|
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
|
|
23
18
|
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
|
|
19
|
+
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
20
|
+
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
21
|
+
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
22
|
+
--pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
24
23
|
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
|
|
24
|
+
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
25
|
+
--pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
26
|
+
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
|
|
27
|
+
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
28
|
+
--pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
|
|
29
|
+
--pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
|
|
30
|
+
--pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
|
|
31
|
+
--pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
|
|
32
|
+
--pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
|
|
33
|
+
--pf-c-tile--m-selected--after--ScaleY: 2;
|
|
25
34
|
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
|
|
35
|
+
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
36
|
+
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
26
37
|
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
|
|
27
|
-
--pf-c-tile--
|
|
38
|
+
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
39
|
+
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
28
40
|
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
|
|
29
41
|
--pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
|
|
30
42
|
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
|
31
|
-
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
32
|
-
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
33
|
-
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
34
43
|
position: relative;
|
|
35
44
|
display: inline-grid;
|
|
36
45
|
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
|
|
@@ -38,34 +47,49 @@
|
|
|
38
47
|
cursor: pointer;
|
|
39
48
|
background-color: var(--pf-c-tile--BackgroundColor);
|
|
40
49
|
grid-template-rows: min-content;
|
|
50
|
+
transition: var(--pf-c-tile--Transition);
|
|
51
|
+
transform: translateY(var(--pf-c-tile--TranslateY));
|
|
41
52
|
}
|
|
42
|
-
.pf-c-tile::before {
|
|
53
|
+
.pf-c-tile::before, .pf-c-tile::after {
|
|
43
54
|
position: absolute;
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
content: "";
|
|
57
|
+
}
|
|
58
|
+
.pf-c-tile::before {
|
|
44
59
|
top: 0;
|
|
45
60
|
right: 0;
|
|
46
61
|
bottom: 0;
|
|
47
62
|
left: 0;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
content: "";
|
|
50
63
|
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
|
|
51
|
-
|
|
64
|
+
}
|
|
65
|
+
.pf-c-tile::after {
|
|
66
|
+
right: 0;
|
|
67
|
+
bottom: 0;
|
|
68
|
+
left: 0;
|
|
69
|
+
height: var(--pf-c-tile--after--Height);
|
|
70
|
+
background-color: var(--pf-c-tile--after--BackgroundColor);
|
|
71
|
+
transition: var(--pf-c-tile--after--Transition);
|
|
72
|
+
transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
|
|
52
73
|
}
|
|
53
74
|
.pf-c-tile:hover {
|
|
54
75
|
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
|
|
55
76
|
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
|
|
56
|
-
--pf-c-tile--
|
|
57
|
-
}
|
|
58
|
-
.pf-c-tile.pf-m-selected {
|
|
59
|
-
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
60
|
-
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
61
|
-
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
|
|
62
|
-
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
|
|
77
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
|
|
63
78
|
}
|
|
64
79
|
.pf-c-tile:focus {
|
|
65
80
|
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
|
|
66
81
|
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
|
|
67
|
-
--pf-c-tile--
|
|
68
|
-
|
|
82
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
|
|
83
|
+
}
|
|
84
|
+
.pf-c-tile:active, .pf-c-tile.pf-m-selected {
|
|
85
|
+
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
86
|
+
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
87
|
+
--pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
|
|
88
|
+
--pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
|
|
89
|
+
--pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
|
|
90
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
|
|
91
|
+
--pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
|
|
92
|
+
--pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
|
|
69
93
|
}
|
|
70
94
|
.pf-c-tile.pf-m-disabled {
|
|
71
95
|
--pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
|
|
@@ -4,31 +4,55 @@
|
|
|
4
4
|
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
|
|
5
5
|
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
|
|
6
6
|
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
7
|
+
--pf-c-tile--Transition: none;
|
|
8
|
+
--pf-c-tile--TranslateY: 0;
|
|
9
|
+
|
|
10
|
+
// borders
|
|
7
11
|
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
|
|
8
12
|
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
9
|
-
--pf-c-tile--
|
|
10
|
-
--pf-c-tile--
|
|
11
|
-
--pf-c-tile--
|
|
12
|
-
--pf-c-tile--
|
|
13
|
-
--pf-c-tile--
|
|
14
|
-
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
|
|
15
|
-
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
16
|
-
|
|
17
|
-
// title
|
|
18
|
-
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
19
|
-
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
20
|
-
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
21
|
-
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
22
|
-
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
13
|
+
--pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
|
|
14
|
+
--pf-c-tile--after--BackgroundColor: transparent;
|
|
15
|
+
--pf-c-tile--after--Transition: none;
|
|
16
|
+
--pf-c-tile--after--ScaleY: 1;
|
|
17
|
+
--pf-c-tile--after--TranslateY: 0;
|
|
23
18
|
|
|
24
19
|
// icon
|
|
25
20
|
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
|
|
26
21
|
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
|
|
27
22
|
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
|
|
23
|
+
|
|
24
|
+
// title
|
|
25
|
+
--pf-c-tile__title--Color: var(--pf-global--Color--100);
|
|
26
|
+
|
|
27
|
+
// body
|
|
28
|
+
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
29
|
+
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
30
|
+
|
|
31
|
+
// hover
|
|
32
|
+
--pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
28
33
|
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
|
|
34
|
+
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
|
|
35
|
+
|
|
36
|
+
// focus
|
|
37
|
+
--pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
|
|
38
|
+
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
|
|
39
|
+
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
|
|
40
|
+
|
|
41
|
+
// selected
|
|
42
|
+
--pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
|
|
43
|
+
--pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
|
|
44
|
+
--pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
|
|
45
|
+
--pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
|
|
46
|
+
--pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
|
|
47
|
+
--pf-c-tile--m-selected--after--ScaleY: 2;
|
|
29
48
|
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
|
|
49
|
+
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
|
|
50
|
+
|
|
51
|
+
// disabled
|
|
52
|
+
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
|
30
53
|
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
|
|
31
|
-
--pf-c-tile--
|
|
54
|
+
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
|
|
55
|
+
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
32
56
|
|
|
33
57
|
// Stacked variatiion
|
|
34
58
|
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
|
|
@@ -37,11 +61,6 @@
|
|
|
37
61
|
// large variation
|
|
38
62
|
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
|
39
63
|
|
|
40
|
-
// body
|
|
41
|
-
--pf-c-tile__body--Color: var(--pf-global--Color--100);
|
|
42
|
-
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
|
|
43
|
-
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
|
|
44
|
-
|
|
45
64
|
position: relative;
|
|
46
65
|
display: inline-grid;
|
|
47
66
|
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
|
|
@@ -49,37 +68,56 @@
|
|
|
49
68
|
cursor: pointer;
|
|
50
69
|
background-color: var(--pf-c-tile--BackgroundColor);
|
|
51
70
|
grid-template-rows: min-content;
|
|
71
|
+
transition: var(--pf-c-tile--Transition);
|
|
72
|
+
transform: translateY(var(--pf-c-tile--TranslateY));
|
|
52
73
|
|
|
53
|
-
&::before
|
|
74
|
+
&::before,
|
|
75
|
+
&::after {
|
|
54
76
|
position: absolute;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
content: "";
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&::before {
|
|
55
82
|
top: 0;
|
|
56
83
|
right: 0;
|
|
57
84
|
bottom: 0;
|
|
58
85
|
left: 0;
|
|
59
|
-
pointer-events: none;
|
|
60
|
-
content: "";
|
|
61
86
|
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
|
|
62
|
-
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&::after {
|
|
90
|
+
right: 0;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
left: 0;
|
|
93
|
+
height: var(--pf-c-tile--after--Height);
|
|
94
|
+
background-color: var(--pf-c-tile--after--BackgroundColor);
|
|
95
|
+
transition: var(--pf-c-tile--after--Transition);
|
|
96
|
+
transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
|
|
63
97
|
}
|
|
64
98
|
|
|
65
99
|
&:hover {
|
|
66
100
|
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
|
|
67
101
|
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
|
|
68
|
-
--pf-c-tile--
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&.pf-m-selected {
|
|
72
|
-
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
73
|
-
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
74
|
-
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
|
|
75
|
-
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
|
|
102
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
|
|
76
103
|
}
|
|
77
104
|
|
|
78
105
|
&:focus {
|
|
79
106
|
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
|
|
80
107
|
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
|
|
81
|
-
--pf-c-tile--
|
|
82
|
-
|
|
108
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:active, // for demo purposes - will remove
|
|
112
|
+
&.pf-m-selected {
|
|
113
|
+
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
|
|
114
|
+
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
|
|
115
|
+
--pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
|
|
116
|
+
--pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
|
|
117
|
+
--pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
|
|
118
|
+
--pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
|
|
119
|
+
--pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
|
|
120
|
+
--pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
|
|
83
121
|
}
|
|
84
122
|
|
|
85
123
|
&.pf-m-disabled {
|
|
@@ -334,10 +334,10 @@ cssPrefix: pf-c-card
|
|
|
334
334
|
|
|
335
335
|
```
|
|
336
336
|
|
|
337
|
-
###
|
|
337
|
+
### Hoverable
|
|
338
338
|
|
|
339
339
|
```html
|
|
340
|
-
<div class="pf-c-card pf-m-hoverable" id="card-
|
|
340
|
+
<div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
|
|
341
341
|
<div class="pf-c-card__title">Title</div>
|
|
342
342
|
<div class="pf-c-card__body">Body</div>
|
|
343
343
|
<div class="pf-c-card__footer">Footer</div>
|
|
@@ -349,7 +349,7 @@ cssPrefix: pf-c-card
|
|
|
349
349
|
|
|
350
350
|
```html
|
|
351
351
|
<div
|
|
352
|
-
class="pf-c-card pf-m-selectable"
|
|
352
|
+
class="pf-c-card pf-m-selectable-raised"
|
|
353
353
|
tabindex="0"
|
|
354
354
|
id="card-selectable-example"
|
|
355
355
|
>
|
|
@@ -364,7 +364,7 @@ cssPrefix: pf-c-card
|
|
|
364
364
|
|
|
365
365
|
```html
|
|
366
366
|
<div
|
|
367
|
-
class="pf-c-card pf-m-selectable pf-m-selected"
|
|
367
|
+
class="pf-c-card pf-m-selectable-raised pf-m-selected-raised"
|
|
368
368
|
tabindex="0"
|
|
369
369
|
id="card-selected-example"
|
|
370
370
|
>
|
|
@@ -375,6 +375,47 @@ cssPrefix: pf-c-card
|
|
|
375
375
|
|
|
376
376
|
```
|
|
377
377
|
|
|
378
|
+
### Hoverable (legacy)
|
|
379
|
+
|
|
380
|
+
```html
|
|
381
|
+
<div class="pf-c-card pf-m-hoverable" id="card-hoverable-legacy-example">
|
|
382
|
+
<div class="pf-c-card__title">Title</div>
|
|
383
|
+
<div class="pf-c-card__body">Body</div>
|
|
384
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
### Selectable (legacy)
|
|
390
|
+
|
|
391
|
+
```html
|
|
392
|
+
<div
|
|
393
|
+
class="pf-c-card pf-m-selectable"
|
|
394
|
+
tabindex="0"
|
|
395
|
+
id="card-selectable-legacy-example"
|
|
396
|
+
>
|
|
397
|
+
<div class="pf-c-card__title">Title</div>
|
|
398
|
+
<div class="pf-c-card__body">Body</div>
|
|
399
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
### Selected (legacy)
|
|
405
|
+
|
|
406
|
+
```html
|
|
407
|
+
<div
|
|
408
|
+
class="pf-c-card pf-m-selectable pf-m-selected"
|
|
409
|
+
tabindex="0"
|
|
410
|
+
id="card-selected-legacy-example"
|
|
411
|
+
>
|
|
412
|
+
<div class="pf-c-card__title">Title</div>
|
|
413
|
+
<div class="pf-c-card__body">Body</div>
|
|
414
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
```
|
|
418
|
+
|
|
378
419
|
### Flat
|
|
379
420
|
|
|
380
421
|
```html
|
|
@@ -819,28 +860,28 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
819
860
|
|
|
820
861
|
### Usage
|
|
821
862
|
|
|
822
|
-
| Class | Applied
|
|
823
|
-
| -------------------------------- |
|
|
824
|
-
| `.pf-c-card` | `<div>`
|
|
825
|
-
| `.pf-c-card__title` | `<div>`
|
|
826
|
-
| `.pf-c-card__body` | `<div>`
|
|
827
|
-
| `.pf-c-card__footer` | `<div>`
|
|
828
|
-
| `.pf-c-card__header` | `<div>`
|
|
829
|
-
| `.pf-c-card__header-toggle` | `<div>`
|
|
830
|
-
| `.pf-c-card__header-toggle-icon` | `<span>`
|
|
831
|
-
| `.pf-c-card__actions` | `<div>`
|
|
832
|
-
| `.pf-c-card__header-main` | `<div>`
|
|
833
|
-
| `.pf-c-card__expandable-content` | `<div>`
|
|
834
|
-
| `.pf-m-compact` | `.pf-c-card`
|
|
835
|
-
| `.pf-m-display-lg` | `.pf-c-card`
|
|
836
|
-
| `.pf-m-no-fill` | `.pf-c-card__body`
|
|
837
|
-
| `.pf-m-hoverable`
|
|
838
|
-
| `.pf-m-selectable`
|
|
839
|
-
| `.pf-m-selected`
|
|
840
|
-
| `.pf-m-flat` | `.pf-c-card`
|
|
841
|
-
| `.pf-m-rounded` | `.pf-c-card`
|
|
842
|
-
| `.pf-m-plain` | `.pf-c-card`
|
|
843
|
-
| `.pf-m-expanded` | `.pf-c-card`
|
|
844
|
-
| `.pf-m-toggle-right` | `.pf-c-card__header`
|
|
845
|
-
| `.pf-m-full-height` | `.pf-c-card`
|
|
846
|
-
| `.pf-m-no-offset` | `.pf-c-card__actions`
|
|
863
|
+
| Class | Applied | Outcome |
|
|
864
|
+
| -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
865
|
+
| `.pf-c-card` | `<div>` | Creates a card component. **Required** |
|
|
866
|
+
| `.pf-c-card__title` | `<div>` | Creates the title of a card. |
|
|
867
|
+
| `.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. |
|
|
868
|
+
| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
|
|
869
|
+
| `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
|
|
870
|
+
| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
|
|
871
|
+
| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
|
|
872
|
+
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
|
|
873
|
+
| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
|
|
874
|
+
| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
|
|
875
|
+
| `.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. |
|
|
876
|
+
| `.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. |
|
|
877
|
+
| `.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. |
|
|
878
|
+
| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
|
|
879
|
+
| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
|
|
880
|
+
| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
|
|
881
|
+
| `.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
|
+
| `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
|
|
883
|
+
| `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
|
|
884
|
+
| `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
|
|
885
|
+
| `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
|
|
886
|
+
| `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
|
|
887
|
+
| `.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. |
|