@patternfly/patternfly 4.198.1 → 4.200.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/base/_variables.scss +7 -0
- package/base/patternfly-variables.css +5 -0
- package/components/DescriptionList/description-list.css +36 -2
- package/components/DescriptionList/description-list.scss +31 -2
- package/components/Page/page.css +154 -24
- package/components/Page/page.scss +23 -14
- package/components/ProgressStepper/progress-stepper.css +1 -0
- package/components/ProgressStepper/progress-stepper.scss +1 -0
- package/components/Tabs/tabs.css +30 -0
- package/components/Tabs/tabs.scss +37 -0
- package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +7 -13
- package/docs/components/Tabs/examples/Tabs.md +214 -0
- package/docs/demos/Page/examples/Page.md +1044 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -0
- package/patternfly-base.css +5 -0
- package/patternfly-no-reset.css +226 -26
- package/patternfly.css +226 -26
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +37 -1
- package/sass-utilities/mixins.scss +75 -7
- package/sass-utilities/scss-variables.scss +16 -0
|
@@ -118,7 +118,7 @@ cssPrefix: pf-c-description-list
|
|
|
118
118
|
|
|
119
119
|
```
|
|
120
120
|
|
|
121
|
-
### Default
|
|
121
|
+
### Default, two column
|
|
122
122
|
|
|
123
123
|
```html
|
|
124
124
|
<dl class="pf-c-description-list pf-m-2-col">
|
|
@@ -177,7 +177,7 @@ cssPrefix: pf-c-description-list
|
|
|
177
177
|
|
|
178
178
|
```
|
|
179
179
|
|
|
180
|
-
### Default
|
|
180
|
+
### Default, three column on lg breakpoint
|
|
181
181
|
|
|
182
182
|
```html
|
|
183
183
|
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
|
@@ -291,7 +291,7 @@ cssPrefix: pf-c-description-list
|
|
|
291
291
|
|
|
292
292
|
```
|
|
293
293
|
|
|
294
|
-
### Horizontal
|
|
294
|
+
### Horizontal, two column
|
|
295
295
|
|
|
296
296
|
```html
|
|
297
297
|
<dl class="pf-c-description-list pf-m-horizontal pf-m-2-col">
|
|
@@ -348,7 +348,7 @@ cssPrefix: pf-c-description-list
|
|
|
348
348
|
|
|
349
349
|
```
|
|
350
350
|
|
|
351
|
-
### Horizontal
|
|
351
|
+
### Horizontal, three column on lg breakpoint
|
|
352
352
|
|
|
353
353
|
```html
|
|
354
354
|
<dl class="pf-c-description-list pf-m-horizontal pf-m-3-col-on-lg">
|
|
@@ -696,7 +696,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
696
696
|
|
|
697
697
|
```
|
|
698
698
|
|
|
699
|
-
### Auto-fit, min width modified grid template columns
|
|
699
|
+
### Auto-fit, min width modified, grid template columns
|
|
700
700
|
|
|
701
701
|
```html
|
|
702
702
|
<dl
|
|
@@ -818,7 +818,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
818
818
|
|
|
819
819
|
## Responsive column definitions
|
|
820
820
|
|
|
821
|
-
### Default responsive columns
|
|
821
|
+
### Default, responsive columns
|
|
822
822
|
|
|
823
823
|
```html
|
|
824
824
|
<dl class="pf-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl">
|
|
@@ -875,7 +875,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
875
875
|
|
|
876
876
|
```
|
|
877
877
|
|
|
878
|
-
### Horizontal responsive columns
|
|
878
|
+
### Horizontal, responsive columns
|
|
879
879
|
|
|
880
880
|
```html
|
|
881
881
|
<dl
|
|
@@ -934,7 +934,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
934
934
|
|
|
935
935
|
```
|
|
936
936
|
|
|
937
|
-
### Responsive horizontal, vertical group layout
|
|
937
|
+
### Responsive, horizontal, vertical group layout
|
|
938
938
|
|
|
939
939
|
```html
|
|
940
940
|
<dl
|
|
@@ -995,7 +995,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
995
995
|
|
|
996
996
|
## Auto-column-width
|
|
997
997
|
|
|
998
|
-
### Default auto columns width
|
|
998
|
+
### Default, auto columns width
|
|
999
999
|
|
|
1000
1000
|
```html
|
|
1001
1001
|
<dl class="pf-c-description-list pf-m-auto-column-widths pf-m-3-col">
|
|
@@ -1052,7 +1052,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1052
1052
|
|
|
1053
1053
|
```
|
|
1054
1054
|
|
|
1055
|
-
### Horizontal auto column width
|
|
1055
|
+
### Horizontal, auto column width
|
|
1056
1056
|
|
|
1057
1057
|
```html
|
|
1058
1058
|
<dl
|
|
@@ -1113,7 +1113,7 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1113
1113
|
|
|
1114
1114
|
## Inline grid
|
|
1115
1115
|
|
|
1116
|
-
### Default inline grid
|
|
1116
|
+
### Default, inline grid
|
|
1117
1117
|
|
|
1118
1118
|
```html
|
|
1119
1119
|
<dl class="pf-c-description-list pf-m-3-col pf-m-inline-grid">
|
|
@@ -1170,6 +1170,309 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1170
1170
|
|
|
1171
1171
|
```
|
|
1172
1172
|
|
|
1173
|
+
### Display variant
|
|
1174
|
+
|
|
1175
|
+
```html
|
|
1176
|
+
<dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
|
|
1177
|
+
<div class="pf-c-description-list__group">
|
|
1178
|
+
<dt class="pf-c-description-list__term">
|
|
1179
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1180
|
+
</dt>
|
|
1181
|
+
<dd class="pf-c-description-list__description">
|
|
1182
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1183
|
+
</dd>
|
|
1184
|
+
</div>
|
|
1185
|
+
<div class="pf-c-description-list__group">
|
|
1186
|
+
<dt class="pf-c-description-list__term">
|
|
1187
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1188
|
+
</dt>
|
|
1189
|
+
<dd class="pf-c-description-list__description">
|
|
1190
|
+
<div class="pf-c-description-list__text">
|
|
1191
|
+
<a href="#">mary-test</a>
|
|
1192
|
+
</div>
|
|
1193
|
+
</dd>
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="pf-c-description-list__group">
|
|
1196
|
+
<dt class="pf-c-description-list__term">
|
|
1197
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1198
|
+
</dt>
|
|
1199
|
+
<dd class="pf-c-description-list__description">
|
|
1200
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1201
|
+
</dd>
|
|
1202
|
+
</div>
|
|
1203
|
+
<div class="pf-c-description-list__group">
|
|
1204
|
+
<dt class="pf-c-description-list__term">
|
|
1205
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1206
|
+
</dt>
|
|
1207
|
+
<dd class="pf-c-description-list__description">
|
|
1208
|
+
<div class="pf-c-description-list__text">
|
|
1209
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1210
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1211
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1212
|
+
</span>
|
|
1213
|
+
app=MyApp
|
|
1214
|
+
</button>
|
|
1215
|
+
</div>
|
|
1216
|
+
</dd>
|
|
1217
|
+
</div>
|
|
1218
|
+
<div class="pf-c-description-list__group">
|
|
1219
|
+
<dt class="pf-c-description-list__term">
|
|
1220
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1221
|
+
</dt>
|
|
1222
|
+
<dd class="pf-c-description-list__description">
|
|
1223
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1224
|
+
</dd>
|
|
1225
|
+
</div>
|
|
1226
|
+
</dl>
|
|
1227
|
+
|
|
1228
|
+
```
|
|
1229
|
+
|
|
1230
|
+
## Card variants
|
|
1231
|
+
|
|
1232
|
+
Cards can be used as [description list group wrappers](../card#description-list-group-wrapper-card-variant). Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
|
|
1233
|
+
|
|
1234
|
+
### Description list group wrapper as card
|
|
1235
|
+
|
|
1236
|
+
```html
|
|
1237
|
+
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
|
1238
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1239
|
+
<dt class="pf-c-description-list__term">
|
|
1240
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1241
|
+
</dt>
|
|
1242
|
+
<dd class="pf-c-description-list__description">
|
|
1243
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1244
|
+
</dd>
|
|
1245
|
+
</div>
|
|
1246
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1247
|
+
<dt class="pf-c-description-list__term">
|
|
1248
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1249
|
+
</dt>
|
|
1250
|
+
<dd class="pf-c-description-list__description">
|
|
1251
|
+
<div class="pf-c-description-list__text">
|
|
1252
|
+
<a href="#">mary-test</a>
|
|
1253
|
+
</div>
|
|
1254
|
+
</dd>
|
|
1255
|
+
</div>
|
|
1256
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1257
|
+
<dt class="pf-c-description-list__term">
|
|
1258
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1259
|
+
</dt>
|
|
1260
|
+
<dd class="pf-c-description-list__description">
|
|
1261
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1262
|
+
</dd>
|
|
1263
|
+
</div>
|
|
1264
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1265
|
+
<dt class="pf-c-description-list__term">
|
|
1266
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1267
|
+
</dt>
|
|
1268
|
+
<dd class="pf-c-description-list__description">
|
|
1269
|
+
<div class="pf-c-description-list__text">
|
|
1270
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1271
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1272
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1273
|
+
</span>
|
|
1274
|
+
app=MyApp
|
|
1275
|
+
</button>
|
|
1276
|
+
</div>
|
|
1277
|
+
</dd>
|
|
1278
|
+
</div>
|
|
1279
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1280
|
+
<dt class="pf-c-description-list__term">
|
|
1281
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1282
|
+
</dt>
|
|
1283
|
+
<dd class="pf-c-description-list__description">
|
|
1284
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1285
|
+
</dd>
|
|
1286
|
+
</div>
|
|
1287
|
+
</dl>
|
|
1288
|
+
|
|
1289
|
+
```
|
|
1290
|
+
|
|
1291
|
+
### Display lg and card variant
|
|
1292
|
+
|
|
1293
|
+
```html
|
|
1294
|
+
<dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
|
|
1295
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1296
|
+
<dt class="pf-c-description-list__term">
|
|
1297
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1298
|
+
</dt>
|
|
1299
|
+
<dd class="pf-c-description-list__description">
|
|
1300
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1301
|
+
</dd>
|
|
1302
|
+
</div>
|
|
1303
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1304
|
+
<dt class="pf-c-description-list__term">
|
|
1305
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1306
|
+
</dt>
|
|
1307
|
+
<dd class="pf-c-description-list__description">
|
|
1308
|
+
<div class="pf-c-description-list__text">
|
|
1309
|
+
<a href="#">mary-test</a>
|
|
1310
|
+
</div>
|
|
1311
|
+
</dd>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1314
|
+
<dt class="pf-c-description-list__term">
|
|
1315
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1316
|
+
</dt>
|
|
1317
|
+
<dd class="pf-c-description-list__description">
|
|
1318
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1319
|
+
</dd>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1322
|
+
<dt class="pf-c-description-list__term">
|
|
1323
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1324
|
+
</dt>
|
|
1325
|
+
<dd class="pf-c-description-list__description">
|
|
1326
|
+
<div class="pf-c-description-list__text">
|
|
1327
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1328
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1329
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1330
|
+
</span>
|
|
1331
|
+
app=MyApp
|
|
1332
|
+
</button>
|
|
1333
|
+
</div>
|
|
1334
|
+
</dd>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1337
|
+
<dt class="pf-c-description-list__term">
|
|
1338
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1339
|
+
</dt>
|
|
1340
|
+
<dd class="pf-c-description-list__description">
|
|
1341
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1342
|
+
</dd>
|
|
1343
|
+
</div>
|
|
1344
|
+
</dl>
|
|
1345
|
+
|
|
1346
|
+
```
|
|
1347
|
+
|
|
1348
|
+
### Display 2xl and card variant
|
|
1349
|
+
|
|
1350
|
+
```html
|
|
1351
|
+
<dl class="pf-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
|
|
1352
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1353
|
+
<dt class="pf-c-description-list__term">
|
|
1354
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1355
|
+
</dt>
|
|
1356
|
+
<dd class="pf-c-description-list__description">
|
|
1357
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1358
|
+
</dd>
|
|
1359
|
+
</div>
|
|
1360
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1361
|
+
<dt class="pf-c-description-list__term">
|
|
1362
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1363
|
+
</dt>
|
|
1364
|
+
<dd class="pf-c-description-list__description">
|
|
1365
|
+
<div class="pf-c-description-list__text">
|
|
1366
|
+
<a href="#">mary-test</a>
|
|
1367
|
+
</div>
|
|
1368
|
+
</dd>
|
|
1369
|
+
</div>
|
|
1370
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1371
|
+
<dt class="pf-c-description-list__term">
|
|
1372
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1373
|
+
</dt>
|
|
1374
|
+
<dd class="pf-c-description-list__description">
|
|
1375
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1376
|
+
</dd>
|
|
1377
|
+
</div>
|
|
1378
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1379
|
+
<dt class="pf-c-description-list__term">
|
|
1380
|
+
<span class="pf-c-description-list__text">Pod selector</span>
|
|
1381
|
+
</dt>
|
|
1382
|
+
<dd class="pf-c-description-list__description">
|
|
1383
|
+
<div class="pf-c-description-list__text">
|
|
1384
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">
|
|
1385
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
1386
|
+
<i class="fas fa-plus-circle" aria-hidden="true"></i>
|
|
1387
|
+
</span>
|
|
1388
|
+
app=MyApp
|
|
1389
|
+
</button>
|
|
1390
|
+
</div>
|
|
1391
|
+
</dd>
|
|
1392
|
+
</div>
|
|
1393
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1394
|
+
<dt class="pf-c-description-list__term">
|
|
1395
|
+
<span class="pf-c-description-list__text">Annotation</span>
|
|
1396
|
+
</dt>
|
|
1397
|
+
<dd class="pf-c-description-list__description">
|
|
1398
|
+
<div class="pf-c-description-list__text">2 Annotations</div>
|
|
1399
|
+
</dd>
|
|
1400
|
+
</div>
|
|
1401
|
+
</dl>
|
|
1402
|
+
|
|
1403
|
+
```
|
|
1404
|
+
|
|
1405
|
+
### Display and card variant, three column on lg breakpoint
|
|
1406
|
+
|
|
1407
|
+
```html
|
|
1408
|
+
<dl class="pf-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
|
|
1409
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1410
|
+
<dt class="pf-c-description-list__term">
|
|
1411
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1412
|
+
</dt>
|
|
1413
|
+
<dd class="pf-c-description-list__description">
|
|
1414
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1415
|
+
</dd>
|
|
1416
|
+
</div>
|
|
1417
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1418
|
+
<dt class="pf-c-description-list__term">
|
|
1419
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1420
|
+
</dt>
|
|
1421
|
+
<dd class="pf-c-description-list__description">
|
|
1422
|
+
<div class="pf-c-description-list__text">
|
|
1423
|
+
<a href="#">mary-test</a>
|
|
1424
|
+
</div>
|
|
1425
|
+
</dd>
|
|
1426
|
+
</div>
|
|
1427
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1428
|
+
<dt class="pf-c-description-list__term">
|
|
1429
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1430
|
+
</dt>
|
|
1431
|
+
<dd class="pf-c-description-list__description">
|
|
1432
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1433
|
+
</dd>
|
|
1434
|
+
</div>
|
|
1435
|
+
</dl>
|
|
1436
|
+
|
|
1437
|
+
```
|
|
1438
|
+
|
|
1439
|
+
### Display and card variant, horizontal, modified term width
|
|
1440
|
+
|
|
1441
|
+
```html
|
|
1442
|
+
<dl
|
|
1443
|
+
class="pf-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
|
|
1444
|
+
style="--pf-c-description-list__term--width: 10ch;"
|
|
1445
|
+
>
|
|
1446
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1447
|
+
<dt class="pf-c-description-list__term">
|
|
1448
|
+
<span class="pf-c-description-list__text">Name</span>
|
|
1449
|
+
</dt>
|
|
1450
|
+
<dd class="pf-c-description-list__description">
|
|
1451
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1452
|
+
</dd>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1455
|
+
<dt class="pf-c-description-list__term">
|
|
1456
|
+
<span class="pf-c-description-list__text">Namespace</span>
|
|
1457
|
+
</dt>
|
|
1458
|
+
<dd class="pf-c-description-list__description">
|
|
1459
|
+
<div class="pf-c-description-list__text">
|
|
1460
|
+
<a href="#">mary-test</a>
|
|
1461
|
+
</div>
|
|
1462
|
+
</dd>
|
|
1463
|
+
</div>
|
|
1464
|
+
<div class="pf-c-card pf-m-description-list-group">
|
|
1465
|
+
<dt class="pf-c-description-list__term">
|
|
1466
|
+
<span class="pf-c-description-list__text">Labels</span>
|
|
1467
|
+
</dt>
|
|
1468
|
+
<dd class="pf-c-description-list__description">
|
|
1469
|
+
<div class="pf-c-description-list__text">example</div>
|
|
1470
|
+
</dd>
|
|
1471
|
+
</div>
|
|
1472
|
+
</dl>
|
|
1473
|
+
|
|
1474
|
+
```
|
|
1475
|
+
|
|
1173
1476
|
<!-- ## Auto term with is only supported in FF currently
|
|
1174
1477
|
|
|
1175
1478
|
### Horizontal 2 col auto term width
|
|
@@ -1273,6 +1576,8 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1273
1576
|
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
|
|
1274
1577
|
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
|
|
1275
1578
|
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
|
|
1579
|
+
| `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
|
|
1580
|
+
| `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
|
|
1276
1581
|
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
|
|
1277
1582
|
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1278
1583
|
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
@@ -224,8 +224,8 @@ This component provides the basic chrome for a page, including sidebar, header,
|
|
|
224
224
|
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
225
225
|
| `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
|
|
226
226
|
| `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
|
|
227
|
-
| `.pf-m-sticky-top`
|
|
228
|
-
| `.pf-m-sticky-bottom`
|
|
227
|
+
| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
|
|
228
|
+
| `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
|
|
229
229
|
| `.pf-m-shadow-bottom` | `.pf-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
|
|
230
230
|
| `.pf-m-shadow-top` | `.pf-c-page__main-*` | Modifies a section/group to have a top shadow. |
|
|
231
231
|
| `.pf-m-overflow-scroll` | `.pf-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |
|
|
@@ -470,12 +470,10 @@ cssPrefix: pf-c-progress-stepper
|
|
|
470
470
|
</span>
|
|
471
471
|
</div>
|
|
472
472
|
<div class="pf-c-progress-stepper__step-main">
|
|
473
|
-
<
|
|
473
|
+
<button
|
|
474
474
|
class="pf-c-progress-stepper__step-title pf-m-help-text"
|
|
475
|
-
role="button"
|
|
476
475
|
type="button"
|
|
477
|
-
|
|
478
|
-
>First step</span>
|
|
476
|
+
>First step</button>
|
|
479
477
|
</div>
|
|
480
478
|
</li>
|
|
481
479
|
<li
|
|
@@ -488,12 +486,10 @@ cssPrefix: pf-c-progress-stepper
|
|
|
488
486
|
</span>
|
|
489
487
|
</div>
|
|
490
488
|
<div class="pf-c-progress-stepper__step-main">
|
|
491
|
-
<
|
|
489
|
+
<button
|
|
492
490
|
class="pf-c-progress-stepper__step-title pf-m-help-text"
|
|
493
|
-
role="button"
|
|
494
491
|
type="button"
|
|
495
|
-
|
|
496
|
-
>Second step</span>
|
|
492
|
+
>Second step</button>
|
|
497
493
|
</div>
|
|
498
494
|
</li>
|
|
499
495
|
<li
|
|
@@ -506,12 +502,10 @@ cssPrefix: pf-c-progress-stepper
|
|
|
506
502
|
</span>
|
|
507
503
|
</div>
|
|
508
504
|
<div class="pf-c-progress-stepper__step-main">
|
|
509
|
-
<
|
|
505
|
+
<button
|
|
510
506
|
class="pf-c-progress-stepper__step-title pf-m-help-text"
|
|
511
|
-
role="button"
|
|
512
507
|
type="button"
|
|
513
|
-
|
|
514
|
-
>Third step</span>
|
|
508
|
+
>Third step</button>
|
|
515
509
|
</div>
|
|
516
510
|
</li>
|
|
517
511
|
<li
|
|
@@ -555,7 +549,7 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
|
|
|
555
549
|
| `.progress-stepper__step-connector` | `<div>` | Creates the connecting line between steps **Required** |
|
|
556
550
|
| `.progress-stepper__step-icon` | `<span>` | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
|
|
557
551
|
| `.progress-stepper__step-main` | `<div>` | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required** |
|
|
558
|
-
| `.progress-stepper__step-title` | `<div>`
|
|
552
|
+
| `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
|
|
559
553
|
| `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
|
|
560
554
|
| `.pf-m-center` | `.pf-c-progress-stepper` | Modifies to center each step. |
|
|
561
555
|
| `.pf-m-vertical` | `.pf-c-progress-stepper` | Modifies for vertical orientation. |
|