@patternfly/patternfly 4.168.0 → 4.169.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Dropdown/dropdown.css +5 -0
- package/components/Dropdown/dropdown.scss +5 -0
- package/components/Masthead/masthead.css +3 -0
- package/components/Masthead/masthead.scss +4 -0
- package/components/Toolbar/toolbar.css +6 -0
- package/components/Toolbar/toolbar.scss +9 -0
- package/docs/components/BackToTop/examples/BackToTop.md +0 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +0 -1
- package/docs/components/Toolbar/examples/Toolbar.md +1 -0
- package/docs/demos/BackToTop/examples/BackToTop.md +0 -1
- package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -1
- package/docs/demos/Masthead/examples/Masthead.md +865 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +14 -0
- package/patternfly.css +14 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -370,6 +370,10 @@
|
|
|
370
370
|
white-space: nowrap;
|
|
371
371
|
}
|
|
372
372
|
|
|
373
|
+
.pf-c-dropdown__toggle-text {
|
|
374
|
+
flex: 0 1 auto;
|
|
375
|
+
}
|
|
376
|
+
|
|
373
377
|
.pf-c-dropdown__toggle-icon {
|
|
374
378
|
margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
|
|
375
379
|
margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
|
|
@@ -381,6 +385,7 @@
|
|
|
381
385
|
|
|
382
386
|
.pf-c-dropdown__toggle-image {
|
|
383
387
|
display: inline-flex;
|
|
388
|
+
flex-shrink: 0;
|
|
384
389
|
margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
|
|
385
390
|
margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
|
|
386
391
|
margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
|
|
@@ -511,6 +511,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
511
511
|
}
|
|
512
512
|
}
|
|
513
513
|
|
|
514
|
+
.pf-c-dropdown__toggle-text {
|
|
515
|
+
flex: 0 1 auto;
|
|
516
|
+
}
|
|
517
|
+
|
|
514
518
|
.pf-c-dropdown__toggle-icon {
|
|
515
519
|
margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
|
|
516
520
|
margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
|
|
@@ -525,6 +529,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
|
|
|
525
529
|
// Toggle image
|
|
526
530
|
.pf-c-dropdown__toggle-image {
|
|
527
531
|
display: inline-flex;
|
|
532
|
+
flex-shrink: 0;
|
|
528
533
|
margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
|
|
529
534
|
margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
|
|
530
535
|
margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
|
|
@@ -230,6 +230,9 @@
|
|
|
230
230
|
--pf-c-dropdown__toggle--before--BorderRightColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor);
|
|
231
231
|
--pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
|
|
232
232
|
}
|
|
233
|
+
.pf-c-masthead .pf-c-nav {
|
|
234
|
+
align-self: stretch;
|
|
235
|
+
}
|
|
233
236
|
|
|
234
237
|
.pf-c-masthead__main {
|
|
235
238
|
position: relative;
|
|
@@ -242,6 +242,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
242
242
|
--pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
+
|
|
246
|
+
.pf-c-nav {
|
|
247
|
+
align-self: stretch;
|
|
248
|
+
}
|
|
245
249
|
}
|
|
246
250
|
|
|
247
251
|
// Main
|
|
@@ -324,6 +324,12 @@
|
|
|
324
324
|
--pf-c-toolbar--spacer: 0;
|
|
325
325
|
}
|
|
326
326
|
|
|
327
|
+
.pf-c-toolbar__group.pf-m-overflow-container,
|
|
328
|
+
.pf-c-toolbar__item.pf-m-overflow-container {
|
|
329
|
+
flex: 1;
|
|
330
|
+
overflow: hidden;
|
|
331
|
+
}
|
|
332
|
+
|
|
327
333
|
.pf-c-toolbar__expand-all-icon {
|
|
328
334
|
display: inline-block;
|
|
329
335
|
transition: var(--pf-c-toolbar__expand-all-icon--Transition);
|
|
@@ -322,6 +322,15 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
|
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
+
.pf-c-toolbar__group,
|
|
326
|
+
.pf-c-toolbar__item {
|
|
327
|
+
&.pf-m-overflow-container {
|
|
328
|
+
flex: 1;
|
|
329
|
+
overflow: hidden;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
|
|
325
334
|
.pf-c-toolbar__expand-all-icon {
|
|
326
335
|
display: inline-block;
|
|
327
336
|
transition: var(--pf-c-toolbar__expand-all-icon--Transition);
|
|
@@ -4100,6 +4100,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4100
4100
|
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
|
|
4101
4101
|
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4102
4102
|
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4103
|
+
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
4103
4104
|
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
4104
4105
|
| `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
|
|
4105
4106
|
| `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
|