@patternfly/patternfly 5.0.0-alpha.7 → 5.0.0-alpha.9
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/Popover/popover.css +1 -6
- package/components/Popover/themes/dark/popover.scss +1 -7
- package/components/Tooltip/themes/dark/tooltip.scss +3 -6
- package/components/Tooltip/tooltip.css +2 -5
- package/docs/components/Card/examples/Card.md +61 -44
- package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
- package/docs/demos/Card/examples/Card.md +141 -106
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +0 -10
- package/patternfly-base.css +0 -10
- package/patternfly-no-reset.css +12 -33
- package/patternfly.css +12 -33
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +0 -1
package/base/_common.scss
CHANGED
|
@@ -1,26 +1,4 @@
|
|
|
1
1
|
// Set common reset styles for patternfly components
|
|
2
|
-
// remove in breaking change. this should come from globals, and can be opted out
|
|
3
|
-
[class*="pf-c-"] {
|
|
4
|
-
&,
|
|
5
|
-
&::before,
|
|
6
|
-
&::after {
|
|
7
|
-
padding: 0;
|
|
8
|
-
margin: 0;
|
|
9
|
-
background-color: transparent;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// remove in breaking change
|
|
14
|
-
@if $pf-global--unset-root-font-size {
|
|
15
|
-
// Since PF3 sets root font size to 10px, we need to unset it.
|
|
16
|
-
// This doesn't affect PF3.
|
|
17
|
-
// https://github.com/twbs/bootstrap/blob/v3.4.0/less/scaffolding.less#L23
|
|
18
|
-
// stylelint-disable
|
|
19
|
-
html {
|
|
20
|
-
font-size: var(--pf-global--root--FontSize, unset) !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
|
|
21
|
-
}
|
|
22
|
-
// stylelint-enable
|
|
23
|
-
}
|
|
24
2
|
|
|
25
3
|
.pf-screen-reader {
|
|
26
4
|
@include pf-u-screen-reader; // for use with assistive technologies
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
[class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
|
|
2
|
-
padding: 0;
|
|
3
|
-
margin: 0;
|
|
4
|
-
background-color: transparent;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
html {
|
|
8
|
-
font-size: var(--pf-global--root--FontSize, unset) !important;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
1
|
.pf-screen-reader {
|
|
12
2
|
position: fixed;
|
|
13
3
|
top: 0;
|
package/components/Card/card.css
CHANGED
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
--pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
|
|
14
14
|
--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
|
|
15
15
|
--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
|
|
16
|
-
--pf-c-card__actions--
|
|
16
|
+
--pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
|
|
17
|
+
--pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
18
|
+
--pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
|
17
19
|
--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
18
20
|
--pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
|
|
19
21
|
--pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
|
@@ -84,7 +86,6 @@
|
|
|
84
86
|
--pf-c-card--m-plain--BackgroundColor: transparent;
|
|
85
87
|
--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
|
|
86
88
|
--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
|
|
87
|
-
--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
|
|
88
89
|
--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
89
90
|
--pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
|
|
90
91
|
display: flex;
|
|
@@ -230,13 +231,11 @@
|
|
|
230
231
|
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
|
|
231
232
|
--pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
|
|
232
233
|
}
|
|
233
|
-
.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
|
|
234
|
-
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
|
|
235
|
-
}
|
|
236
234
|
.pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
|
|
237
235
|
order: 2;
|
|
238
236
|
}
|
|
239
|
-
|
|
237
|
+
|
|
238
|
+
.pf-c-card__header-main {
|
|
240
239
|
flex: 1;
|
|
241
240
|
}
|
|
242
241
|
|
|
@@ -262,10 +261,8 @@
|
|
|
262
261
|
align-self: flex-start;
|
|
263
262
|
order: 1;
|
|
264
263
|
padding-left: var(--pf-c-card__actions--PaddingLeft);
|
|
265
|
-
margin: var(--pf-c-
|
|
266
|
-
|
|
267
|
-
.pf-c-card__actions > * + * {
|
|
268
|
-
margin-left: var(--pf-c-card__actions--child--MarginLeft);
|
|
264
|
+
margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
|
|
265
|
+
gap: var(--pf-c-card__actions--Gap);
|
|
269
266
|
}
|
|
270
267
|
.pf-c-card__actions + .pf-c-card__title,
|
|
271
268
|
.pf-c-card__actions + .pf-c-card__body,
|
|
@@ -273,8 +270,8 @@
|
|
|
273
270
|
padding: 0;
|
|
274
271
|
}
|
|
275
272
|
.pf-c-card__actions.pf-m-no-offset {
|
|
276
|
-
--pf-c-
|
|
277
|
-
--pf-c-
|
|
273
|
+
--pf-c-card__actions--MarginTop: 0;
|
|
274
|
+
--pf-c-card__actions--MarginBottom: 0;
|
|
278
275
|
}
|
|
279
276
|
|
|
280
277
|
.pf-c-card__header,
|
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
--pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
|
|
14
14
|
--pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
|
|
15
15
|
--pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
|
|
16
|
-
--pf-c-card__actions--
|
|
16
|
+
--pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
|
|
17
|
+
--pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
18
|
+
--pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
|
|
17
19
|
|
|
18
20
|
// Expandable
|
|
19
21
|
--pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
|
|
@@ -104,7 +106,6 @@
|
|
|
104
106
|
// Toggle right
|
|
105
107
|
--pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
|
|
106
108
|
--pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
|
|
107
|
-
--pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
|
|
108
109
|
|
|
109
110
|
// Card input
|
|
110
111
|
--pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
|
|
@@ -295,20 +296,16 @@
|
|
|
295
296
|
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
|
|
296
297
|
--pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
|
|
297
298
|
|
|
298
|
-
.pf-c-card__actions {
|
|
299
|
-
--pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
299
|
.pf-c-card__header-toggle {
|
|
303
300
|
order: 2;
|
|
304
301
|
}
|
|
305
|
-
|
|
306
|
-
.pf-c-card__title {
|
|
307
|
-
flex: 1;
|
|
308
|
-
}
|
|
309
302
|
}
|
|
310
303
|
}
|
|
311
304
|
|
|
305
|
+
.pf-c-card__header-main {
|
|
306
|
+
flex: 1;
|
|
307
|
+
}
|
|
308
|
+
|
|
312
309
|
.pf-c-card__header-toggle {
|
|
313
310
|
align-self: flex-start;
|
|
314
311
|
margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
|
|
@@ -331,11 +328,8 @@
|
|
|
331
328
|
align-self: flex-start;
|
|
332
329
|
order: 1;
|
|
333
330
|
padding-left: var(--pf-c-card__actions--PaddingLeft);
|
|
334
|
-
margin: var(--pf-c-
|
|
335
|
-
|
|
336
|
-
> * + * {
|
|
337
|
-
margin-left: var(--pf-c-card__actions--child--MarginLeft);
|
|
338
|
-
}
|
|
331
|
+
margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
|
|
332
|
+
gap: var(--pf-c-card__actions--Gap);
|
|
339
333
|
|
|
340
334
|
+ .pf-c-card__title,
|
|
341
335
|
+ .pf-c-card__body,
|
|
@@ -344,8 +338,8 @@
|
|
|
344
338
|
}
|
|
345
339
|
|
|
346
340
|
&.pf-m-no-offset {
|
|
347
|
-
--pf-c-
|
|
348
|
-
--pf-c-
|
|
341
|
+
--pf-c-card__actions--MarginTop: 0;
|
|
342
|
+
--pf-c-card__actions--MarginBottom: 0;
|
|
349
343
|
}
|
|
350
344
|
}
|
|
351
345
|
|
|
@@ -172,14 +172,9 @@
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
:where(.pf-theme-dark) .pf-c-popover {
|
|
175
|
-
--pf-c-
|
|
176
|
-
--pf-c-popover__arrow--BoxShadow: none;
|
|
175
|
+
--pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
177
176
|
--pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
|
|
178
177
|
--pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
|
|
179
178
|
--pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
|
|
180
179
|
--pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
|
|
181
|
-
}
|
|
182
|
-
:where(.pf-theme-dark) .pf-c-popover,
|
|
183
|
-
:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
|
|
184
|
-
border: 4px solid var(--pf-global--BorderColor--400);
|
|
185
180
|
}
|
|
@@ -2,16 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
@mixin pf-theme-dark-popover() {
|
|
4
4
|
.pf-c-popover {
|
|
5
|
-
--pf-c-
|
|
6
|
-
--pf-c-popover__arrow--BoxShadow: none;
|
|
5
|
+
--pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
7
6
|
--pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
|
|
8
7
|
--pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
|
|
9
8
|
--pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
|
|
10
9
|
--pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
|
|
11
|
-
|
|
12
|
-
&,
|
|
13
|
-
.pf-c-popover__arrow {
|
|
14
|
-
border: 4px solid var(--pf-global--BorderColor--400);
|
|
15
|
-
}
|
|
16
10
|
}
|
|
17
11
|
}
|
|
@@ -2,17 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
@mixin pf-theme-dark-tooltip() {
|
|
4
4
|
.pf-c-tooltip {
|
|
5
|
-
--pf-c-tooltip--BoxShadow: none;
|
|
6
5
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.pf-c-tooltip,
|
|
10
|
-
.pf-c-tooltip__arrow {
|
|
11
|
-
border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
|
|
6
|
+
--pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
12
7
|
}
|
|
13
8
|
|
|
14
9
|
.pf-c-tooltip__arrow {
|
|
15
10
|
--pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
|
|
16
11
|
--pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
|
|
12
|
+
|
|
13
|
+
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
17
14
|
}
|
|
18
15
|
}
|
|
@@ -83,14 +83,11 @@
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
:where(.pf-theme-dark) .pf-c-tooltip {
|
|
86
|
-
--pf-c-tooltip--BoxShadow: none;
|
|
87
86
|
--pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
|
|
88
|
-
|
|
89
|
-
:where(.pf-theme-dark) .pf-c-tooltip,
|
|
90
|
-
:where(.pf-theme-dark) .pf-c-tooltip__arrow {
|
|
91
|
-
border: var(--pf-global--BorderWidth--lg) solid var(--pf-global--BorderColor--300);
|
|
87
|
+
--pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
|
|
92
88
|
}
|
|
93
89
|
:where(.pf-theme-dark) .pf-c-tooltip__arrow {
|
|
94
90
|
--pf-c-tooltip__arrow--Width: 0.9375rem;
|
|
95
91
|
--pf-c-tooltip__arrow--Height: 0.9375rem;
|
|
92
|
+
box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
|
|
96
93
|
}
|
|
@@ -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. |
|
|
@@ -172,9 +172,9 @@ name: azure-sample-repo<div
|
|
|
172
172
|
| Class | Applied to | Outcome |
|
|
173
173
|
| -------------------------------- | ---------- | ------------------------------------------------------- |
|
|
174
174
|
| `.pf-c-code-block` | `<div>` | Initiates the code block component. **Required** |
|
|
175
|
-
| `.pf-c-
|
|
176
|
-
| `.pf-c-
|
|
177
|
-
| `.pf-c-
|
|
178
|
-
| `.pf-c-
|
|
179
|
-
| `.pf-c-
|
|
180
|
-
| `.pf-c-
|
|
175
|
+
| `.pf-c-code-block__header` | `<div>` | Initiates the code block header. |
|
|
176
|
+
| `.pf-c-code-block__actions` | `<div>` | Initiates the code block actions. |
|
|
177
|
+
| `.pf-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
|
|
178
|
+
| `.pf-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
|
|
179
|
+
| `.pf-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
|
|
180
|
+
| `.pf-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
|