@patternfly/patternfly 4.198.2 → 4.200.1
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/Tabs/tabs.css +30 -0
- package/components/Tabs/tabs.scss +37 -0
- package/components/Wizard/wizard.css +2 -1
- package/components/Wizard/wizard.scss +3 -1
- package/docs/components/DescriptionList/examples/DescriptionList.md +316 -11
- package/docs/components/Page/examples/Page.md +2 -2
- package/docs/components/Tabs/examples/Tabs.md +214 -0
- package/docs/components/Wizard/examples/Wizard.md +59 -57
- package/docs/demos/Page/examples/Page.md +1044 -0
- package/docs/demos/Wizard/examples/Wizard.md +2581 -275
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -0
- package/patternfly-base.css +5 -0
- package/patternfly-no-reset.css +227 -27
- package/patternfly.css +227 -27
- 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. |
|
|
@@ -193,6 +193,217 @@ cssPrefix: pf-c-tabs
|
|
|
193
193
|
| `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
|
|
194
194
|
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
195
195
|
|
|
196
|
+
### Horizontal overflow
|
|
197
|
+
|
|
198
|
+
```html isBeta
|
|
199
|
+
<div class="pf-c-tabs" id="horizontal-overflow-example">
|
|
200
|
+
<ul class="pf-c-tabs__list">
|
|
201
|
+
<li class="pf-c-tabs__item">
|
|
202
|
+
<button
|
|
203
|
+
class="pf-c-tabs__link"
|
|
204
|
+
id="horizontal-overflow-example-users-link"
|
|
205
|
+
>
|
|
206
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
207
|
+
</button>
|
|
208
|
+
</li>
|
|
209
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
210
|
+
<button
|
|
211
|
+
class="pf-c-tabs__link"
|
|
212
|
+
id="horizontal-overflow-example-containers-link"
|
|
213
|
+
>
|
|
214
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
215
|
+
</button>
|
|
216
|
+
</li>
|
|
217
|
+
<li class="pf-c-tabs__item">
|
|
218
|
+
<button
|
|
219
|
+
class="pf-c-tabs__link"
|
|
220
|
+
id="horizontal-overflow-example-database-link"
|
|
221
|
+
>
|
|
222
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
223
|
+
</button>
|
|
224
|
+
</li>
|
|
225
|
+
|
|
226
|
+
<li class="pf-c-tabs__item">
|
|
227
|
+
<button
|
|
228
|
+
class="pf-c-tabs__link"
|
|
229
|
+
id="horizontal-overflow-example-server-link"
|
|
230
|
+
>
|
|
231
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
232
|
+
</button>
|
|
233
|
+
</li>
|
|
234
|
+
<li class="pf-c-tabs__item">
|
|
235
|
+
<button
|
|
236
|
+
class="pf-c-tabs__link"
|
|
237
|
+
id="horizontal-overflow-example-system-link"
|
|
238
|
+
>
|
|
239
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
240
|
+
</button>
|
|
241
|
+
</li>
|
|
242
|
+
<li class="pf-c-tabs__item">
|
|
243
|
+
<button
|
|
244
|
+
class="pf-c-tabs__link"
|
|
245
|
+
id="horizontal-overflow-example-network-wired-link"
|
|
246
|
+
>
|
|
247
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
248
|
+
</button>
|
|
249
|
+
</li>
|
|
250
|
+
<li class="pf-c-tabs__item pf-m-overflow">
|
|
251
|
+
<button
|
|
252
|
+
class="pf-c-tabs__link"
|
|
253
|
+
id="horizontal-overflow-example-more-link"
|
|
254
|
+
>
|
|
255
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
256
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
257
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
258
|
+
</span>
|
|
259
|
+
</button>
|
|
260
|
+
</li>
|
|
261
|
+
</ul>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
### Horizontal overflow expanded
|
|
267
|
+
|
|
268
|
+
```html isBeta
|
|
269
|
+
<div class="pf-c-tabs" id="horizontal-overflow-expanded-example">
|
|
270
|
+
<ul class="pf-c-tabs__list">
|
|
271
|
+
<li class="pf-c-tabs__item">
|
|
272
|
+
<button
|
|
273
|
+
class="pf-c-tabs__link"
|
|
274
|
+
id="horizontal-overflow-expanded-example-users-link"
|
|
275
|
+
>
|
|
276
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
277
|
+
</button>
|
|
278
|
+
</li>
|
|
279
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
280
|
+
<button
|
|
281
|
+
class="pf-c-tabs__link"
|
|
282
|
+
id="horizontal-overflow-expanded-example-containers-link"
|
|
283
|
+
>
|
|
284
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
285
|
+
</button>
|
|
286
|
+
</li>
|
|
287
|
+
<li class="pf-c-tabs__item">
|
|
288
|
+
<button
|
|
289
|
+
class="pf-c-tabs__link"
|
|
290
|
+
id="horizontal-overflow-expanded-example-database-link"
|
|
291
|
+
>
|
|
292
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
293
|
+
</button>
|
|
294
|
+
</li>
|
|
295
|
+
|
|
296
|
+
<li class="pf-c-tabs__item">
|
|
297
|
+
<button
|
|
298
|
+
class="pf-c-tabs__link"
|
|
299
|
+
id="horizontal-overflow-expanded-example-server-link"
|
|
300
|
+
>
|
|
301
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
302
|
+
</button>
|
|
303
|
+
</li>
|
|
304
|
+
<li class="pf-c-tabs__item">
|
|
305
|
+
<button
|
|
306
|
+
class="pf-c-tabs__link"
|
|
307
|
+
id="horizontal-overflow-expanded-example-system-link"
|
|
308
|
+
>
|
|
309
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
310
|
+
</button>
|
|
311
|
+
</li>
|
|
312
|
+
<li class="pf-c-tabs__item">
|
|
313
|
+
<button
|
|
314
|
+
class="pf-c-tabs__link"
|
|
315
|
+
id="horizontal-overflow-expanded-example-network-wired-link"
|
|
316
|
+
>
|
|
317
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
318
|
+
</button>
|
|
319
|
+
</li>
|
|
320
|
+
<li class="pf-c-tabs__item pf-m-overflow">
|
|
321
|
+
<button
|
|
322
|
+
class="pf-c-tabs__link pf-m-expanded"
|
|
323
|
+
aria-expanded="true"
|
|
324
|
+
id="horizontal-overflow-expanded-example-more-link"
|
|
325
|
+
>
|
|
326
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
327
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
328
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
329
|
+
</span>
|
|
330
|
+
</button>
|
|
331
|
+
</li>
|
|
332
|
+
</ul>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
### Horizontal overflow selected
|
|
338
|
+
|
|
339
|
+
```html isBeta
|
|
340
|
+
<div class="pf-c-tabs" id="horizontal-overflow-selected-example">
|
|
341
|
+
<ul class="pf-c-tabs__list">
|
|
342
|
+
<li class="pf-c-tabs__item">
|
|
343
|
+
<button
|
|
344
|
+
class="pf-c-tabs__link"
|
|
345
|
+
id="horizontal-overflow-selected-example-users-link"
|
|
346
|
+
>
|
|
347
|
+
<span class="pf-c-tabs__item-text">Users</span>
|
|
348
|
+
</button>
|
|
349
|
+
</li>
|
|
350
|
+
<li class="pf-c-tabs__item">
|
|
351
|
+
<button
|
|
352
|
+
class="pf-c-tabs__link"
|
|
353
|
+
id="horizontal-overflow-selected-example-containers-link"
|
|
354
|
+
>
|
|
355
|
+
<span class="pf-c-tabs__item-text">Containers</span>
|
|
356
|
+
</button>
|
|
357
|
+
</li>
|
|
358
|
+
<li class="pf-c-tabs__item">
|
|
359
|
+
<button
|
|
360
|
+
class="pf-c-tabs__link"
|
|
361
|
+
id="horizontal-overflow-selected-example-database-link"
|
|
362
|
+
>
|
|
363
|
+
<span class="pf-c-tabs__item-text">Database</span>
|
|
364
|
+
</button>
|
|
365
|
+
</li>
|
|
366
|
+
|
|
367
|
+
<li class="pf-c-tabs__item">
|
|
368
|
+
<button
|
|
369
|
+
class="pf-c-tabs__link"
|
|
370
|
+
id="horizontal-overflow-selected-example-server-link"
|
|
371
|
+
>
|
|
372
|
+
<span class="pf-c-tabs__item-text">Server</span>
|
|
373
|
+
</button>
|
|
374
|
+
</li>
|
|
375
|
+
<li class="pf-c-tabs__item">
|
|
376
|
+
<button
|
|
377
|
+
class="pf-c-tabs__link"
|
|
378
|
+
id="horizontal-overflow-selected-example-system-link"
|
|
379
|
+
>
|
|
380
|
+
<span class="pf-c-tabs__item-text">System</span>
|
|
381
|
+
</button>
|
|
382
|
+
</li>
|
|
383
|
+
<li class="pf-c-tabs__item">
|
|
384
|
+
<button
|
|
385
|
+
class="pf-c-tabs__link"
|
|
386
|
+
id="horizontal-overflow-selected-example-network-wired-link"
|
|
387
|
+
>
|
|
388
|
+
<span class="pf-c-tabs__item-text">Network</span>
|
|
389
|
+
</button>
|
|
390
|
+
</li>
|
|
391
|
+
<li class="pf-c-tabs__item pf-m-current pf-m-overflow">
|
|
392
|
+
<button
|
|
393
|
+
class="pf-c-tabs__link"
|
|
394
|
+
id="horizontal-overflow-selected-example-more-link"
|
|
395
|
+
>
|
|
396
|
+
<span class="pf-c-tabs__item-text">More</span>
|
|
397
|
+
<span class="pf-c-tabs__link-toggle-icon">
|
|
398
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
399
|
+
</span>
|
|
400
|
+
</button>
|
|
401
|
+
</li>
|
|
402
|
+
</ul>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
```
|
|
406
|
+
|
|
196
407
|
### Vertical
|
|
197
408
|
|
|
198
409
|
```html
|
|
@@ -3463,6 +3674,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
3463
3674
|
| `disabled` | `button.pf-c-tabs__link` | Indicates that a tabs link is disabled. **Required when disabled** |
|
|
3464
3675
|
| `aria-disabled="true"` | `a.pf-c-tabs__link.pf-m-disabled`, `.pf-c-tabs__link.pf-m-aria-disabled` | Indicates to assistive technology that a tabs link is disabled. **Required when disabled** |
|
|
3465
3676
|
| `disabled` | `.pf-c-tabs__scroll-button` | Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. **Required** |
|
|
3677
|
+
| `aria-expanded="true"` | `.pf-c-tabs__item` | Indicates that the overflow menu tab is expanded. **Required when expanded** |
|
|
3466
3678
|
|
|
3467
3679
|
### Usage
|
|
3468
3680
|
|
|
@@ -3490,6 +3702,8 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
3490
3702
|
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
3491
3703
|
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
3492
3704
|
| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
|
|
3705
|
+
| `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
|
|
3706
|
+
| `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
|
|
3493
3707
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
3494
3708
|
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
3495
3709
|
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|