@patternfly/patternfly 4.146.2 → 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.
Files changed (8) hide show
  1. package/components/Card/card.css +97 -18
  2. package/components/Card/card.scss +127 -19
  3. package/docs/components/Card/examples/Card.md +70 -29
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +97 -18
  6. package/patternfly.css +97 -18
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -1,6 +1,24 @@
1
1
  .pf-c-card {
2
2
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
3
3
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
4
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
5
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
6
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
12
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
13
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
14
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
15
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
16
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
17
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
18
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
19
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
20
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
21
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
4
22
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
5
23
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
6
24
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -8,6 +26,35 @@
8
26
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
9
27
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
10
28
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
29
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
30
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
31
+ --pf-c-card--m-selectable-raised--before--Right: 0;
32
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
33
+ --pf-c-card--m-selectable-raised--before--Left: 0;
34
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
35
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
36
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
37
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
38
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
39
+ --pf-c-card--m-selectable-raised--before--Transition: none;
40
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
41
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
42
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
43
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
44
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
45
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
46
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
47
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
48
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
49
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
50
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
51
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
52
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
53
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
54
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
55
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
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
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
11
58
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
12
59
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
13
60
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -26,25 +73,7 @@
26
73
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
27
74
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
28
75
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
29
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
30
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
31
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
32
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
33
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
34
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
35
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
36
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
37
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
38
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
39
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
40
76
  --pf-c-card--m-full-height--Height: 100%;
41
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
42
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
43
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
44
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
45
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
46
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
47
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
48
77
  --pf-c-card--m-plain--BoxShadow: none;
49
78
  --pf-c-card--m-plain--BackgroundColor: transparent;
50
79
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
@@ -83,6 +112,51 @@
83
112
  content: "";
84
113
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
85
114
  }
115
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
116
+ position: relative;
117
+ }
118
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
119
+ position: absolute;
120
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
121
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
122
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
123
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
124
+ content: "";
125
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
126
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
127
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
128
+ transform-origin: center bottom;
129
+ }
130
+ .pf-c-card.pf-m-hoverable-raised:hover {
131
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
132
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
133
+ }
134
+ .pf-c-card.pf-m-selectable-raised {
135
+ 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
+ }
143
+ .pf-c-card.pf-m-selectable-raised:hover {
144
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
145
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
146
+ }
147
+ .pf-c-card.pf-m-selectable-raised:focus {
148
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
149
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
150
+ }
151
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
152
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
153
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
154
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
155
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
156
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
157
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
158
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
159
+ }
86
160
  .pf-c-card.pf-m-compact {
87
161
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
88
162
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -104,6 +178,10 @@
104
178
  }
105
179
  .pf-c-card.pf-m-flat {
106
180
  --pf-c-card--BoxShadow: none;
181
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
182
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
183
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
184
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
107
185
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
108
186
  }
109
187
  .pf-c-card.pf-m-plain {
@@ -111,6 +189,7 @@
111
189
  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
112
190
  }
113
191
  .pf-c-card.pf-m-rounded {
192
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
114
193
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
115
194
  }
116
195
  .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
package/components/Card/card.scss CHANGED
@@ -1,7 +1,28 @@
1
1
  .pf-c-card {
2
- // Component variables
3
2
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
3
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
4
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
5
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
6
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
8
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
9
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
10
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
11
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
12
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
13
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
14
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
15
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
16
+
17
+ // Expandable
18
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
19
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
20
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
21
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
22
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
23
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
24
+
25
+ // Hoverable/selectable
5
26
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
6
27
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7
28
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -9,6 +30,39 @@
9
30
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
10
31
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
11
32
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
33
+
34
+ // Hoverable/selectable raised
35
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
36
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
37
+ --pf-c-card--m-selectable-raised--before--Right: 0;
38
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
39
+ --pf-c-card--m-selectable-raised--before--Left: 0;
40
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
41
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
42
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
43
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
44
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
45
+ --pf-c-card--m-selectable-raised--before--Transition: none;
46
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
47
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
48
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
49
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
50
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
51
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
52
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
53
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
54
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
55
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
56
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: #{pf-size-prem(-8px)};
57
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
58
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
59
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
60
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
61
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
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
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
64
+
65
+ // Compact
12
66
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
13
67
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
14
68
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -17,6 +71,8 @@
17
71
  --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
18
72
  --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
19
73
  --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
74
+
75
+ // Display large
20
76
  --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
21
77
  --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
22
78
  --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
@@ -24,28 +80,16 @@
24
80
  --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
25
81
  --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
26
82
  --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
83
+
84
+ // Flat
27
85
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
28
86
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
87
+
88
+ // Rounded
29
89
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
30
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
31
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
32
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
33
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
34
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
35
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
36
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
37
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
38
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
39
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
40
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
90
+
91
+ // Full height
41
92
  --pf-c-card--m-full-height--Height: 100%;
42
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
43
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
44
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
45
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
46
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
47
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
48
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
49
93
 
50
94
  // No box shadow
51
95
  --pf-c-card--m-plain--BoxShadow: none;
@@ -98,6 +142,64 @@
98
142
  }
99
143
  }
100
144
 
145
+ &.pf-m-hoverable-raised,
146
+ &.pf-m-selectable-raised {
147
+ position: relative;
148
+
149
+ &::before {
150
+ position: absolute;
151
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
152
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
153
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
154
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
155
+ content: "";
156
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
157
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
158
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
159
+ transform-origin: center bottom; // used for scaleY() to make the before scale upward
160
+ }
161
+ }
162
+
163
+ &.pf-m-hoverable-raised {
164
+ &:hover {
165
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
166
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
167
+ }
168
+ }
169
+
170
+ &.pf-m-selectable-raised {
171
+ cursor: pointer;
172
+
173
+ &:hover {
174
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
175
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
176
+ }
177
+
178
+ &:focus {
179
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
180
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
181
+ }
182
+
183
+ /*
184
+ &:active {
185
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
186
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
187
+ }
188
+ */
189
+
190
+ &.pf-m-selected-raised,
191
+ &:active {
192
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
193
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
194
+ --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
195
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
196
+
197
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
198
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
199
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected
200
+ }
201
+ }
202
+
101
203
  &.pf-m-compact {
102
204
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
103
205
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -121,6 +223,10 @@
121
223
 
122
224
  &.pf-m-flat {
123
225
  --pf-c-card--BoxShadow: none;
226
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
227
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
228
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
229
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
124
230
 
125
231
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
126
232
  }
@@ -131,6 +237,8 @@
131
237
  }
132
238
 
133
239
  &.pf-m-rounded {
240
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
241
+
134
242
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
135
243
  }
136
244
 
package/docs/components/Card/examples/Card.md CHANGED
@@ -334,10 +334,10 @@ cssPrefix: pf-c-card
334
334
 
335
335
  ```
336
336
 
337
- ### Hover
337
+ ### Hoverable
338
338
 
339
339
  ```html
340
- <div class="pf-c-card pf-m-hoverable" id="card-hover-example">
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 | Outcome |
823
- | -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
824
- | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
825
- | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
826
- | `.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. |
827
- | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
828
- | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
829
- | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
830
- | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
831
- | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
832
- | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
833
- | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
834
- | `.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. |
835
- | `.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. |
836
- | `.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. |
837
- | `.pf-m-hoverable` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
838
- | `.pf-m-selectable` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
839
- | `.pf-m-selected` | `.pf-c-card.pf-m-selectable` | Modifies a selectable card for the selected state. |
840
- | `.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. |
841
- | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
842
- | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
843
- | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
844
- | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
845
- | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
846
- | `.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. |
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. |
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.146.2",
4
+ "version": "4.147.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {