@patternfly/patternfly 4.198.2 → 4.199.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/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/docs/components/Page/examples/Page.md +2 -2
- 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 +189 -24
- package/patternfly.css +189 -24
- 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
package/base/_variables.scss
CHANGED
|
@@ -198,6 +198,13 @@
|
|
|
198
198
|
--pf-global--breakpoint--xl: #{$pf-global--breakpoint--xl};
|
|
199
199
|
--pf-global--breakpoint--2xl: #{$pf-global--breakpoint--2xl};
|
|
200
200
|
|
|
201
|
+
// Vertical breakpoints
|
|
202
|
+
--pf-global--height-breakpoint--sm: #{$pf-global--height-breakpoint--sm};
|
|
203
|
+
--pf-global--height-breakpoint--md: #{$pf-global--height-breakpoint--md};
|
|
204
|
+
--pf-global--height-breakpoint--lg: #{$pf-global--height-breakpoint--lg};
|
|
205
|
+
--pf-global--height-breakpoint--xl: #{$pf-global--height-breakpoint--xl};
|
|
206
|
+
--pf-global--height-breakpoint--2xl: #{$pf-global--height-breakpoint--2xl};
|
|
207
|
+
|
|
201
208
|
// Links
|
|
202
209
|
--pf-global--link--Color: #{$pf-global--link--Color};
|
|
203
210
|
--pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
|
|
@@ -171,6 +171,11 @@
|
|
|
171
171
|
--pf-global--breakpoint--lg: 992px;
|
|
172
172
|
--pf-global--breakpoint--xl: 1200px;
|
|
173
173
|
--pf-global--breakpoint--2xl: 1450px;
|
|
174
|
+
--pf-global--height-breakpoint--sm: 0;
|
|
175
|
+
--pf-global--height-breakpoint--md: 40rem;
|
|
176
|
+
--pf-global--height-breakpoint--lg: 48rem;
|
|
177
|
+
--pf-global--height-breakpoint--xl: 60rem;
|
|
178
|
+
--pf-global--height-breakpoint--2xl: 80rem;
|
|
174
179
|
--pf-global--link--Color: #06c;
|
|
175
180
|
--pf-global--link--Color--hover: #004080;
|
|
176
181
|
--pf-global--link--Color--light: #2b9af3;
|
package/components/Page/page.css
CHANGED
|
@@ -497,30 +497,6 @@
|
|
|
497
497
|
.pf-c-page__main-subnav {
|
|
498
498
|
flex-shrink: 0;
|
|
499
499
|
}
|
|
500
|
-
.pf-c-page__main-nav.pf-m-sticky-top,
|
|
501
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-top,
|
|
502
|
-
.pf-c-page__main-tabs.pf-m-sticky-top,
|
|
503
|
-
.pf-c-page__main-section.pf-m-sticky-top,
|
|
504
|
-
.pf-c-page__main-wizard.pf-m-sticky-top,
|
|
505
|
-
.pf-c-page__main-group.pf-m-sticky-top,
|
|
506
|
-
.pf-c-page__main-subnav.pf-m-sticky-top {
|
|
507
|
-
position: sticky;
|
|
508
|
-
top: 0;
|
|
509
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
510
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
511
|
-
}
|
|
512
|
-
.pf-c-page__main-nav.pf-m-sticky-bottom,
|
|
513
|
-
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
|
|
514
|
-
.pf-c-page__main-tabs.pf-m-sticky-bottom,
|
|
515
|
-
.pf-c-page__main-section.pf-m-sticky-bottom,
|
|
516
|
-
.pf-c-page__main-wizard.pf-m-sticky-bottom,
|
|
517
|
-
.pf-c-page__main-group.pf-m-sticky-bottom,
|
|
518
|
-
.pf-c-page__main-subnav.pf-m-sticky-bottom {
|
|
519
|
-
position: sticky;
|
|
520
|
-
bottom: 0;
|
|
521
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
522
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
523
|
-
}
|
|
524
500
|
.pf-c-page__main-nav.pf-m-overflow-scroll,
|
|
525
501
|
.pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
|
|
526
502
|
.pf-c-page__main-tabs.pf-m-overflow-scroll,
|
|
@@ -552,6 +528,160 @@
|
|
|
552
528
|
z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
|
|
553
529
|
box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
|
|
554
530
|
}
|
|
531
|
+
.pf-c-page__main-nav.pf-m-sticky-top,
|
|
532
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top,
|
|
533
|
+
.pf-c-page__main-tabs.pf-m-sticky-top,
|
|
534
|
+
.pf-c-page__main-section.pf-m-sticky-top,
|
|
535
|
+
.pf-c-page__main-wizard.pf-m-sticky-top,
|
|
536
|
+
.pf-c-page__main-group.pf-m-sticky-top,
|
|
537
|
+
.pf-c-page__main-subnav.pf-m-sticky-top {
|
|
538
|
+
position: sticky;
|
|
539
|
+
top: 0;
|
|
540
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
541
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
542
|
+
}
|
|
543
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom,
|
|
544
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
|
|
545
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom,
|
|
546
|
+
.pf-c-page__main-section.pf-m-sticky-bottom,
|
|
547
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom,
|
|
548
|
+
.pf-c-page__main-group.pf-m-sticky-bottom,
|
|
549
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom {
|
|
550
|
+
position: sticky;
|
|
551
|
+
bottom: 0;
|
|
552
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
553
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
554
|
+
}
|
|
555
|
+
@media (min-height: 0) {
|
|
556
|
+
.pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
|
|
557
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
|
|
558
|
+
.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
|
|
559
|
+
.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
|
|
560
|
+
.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
|
|
561
|
+
.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
|
|
562
|
+
.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
|
|
563
|
+
position: sticky;
|
|
564
|
+
top: 0;
|
|
565
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
566
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
567
|
+
}
|
|
568
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
|
|
569
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
|
|
570
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
|
|
571
|
+
.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
|
|
572
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
|
|
573
|
+
.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
|
|
574
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
|
|
575
|
+
position: sticky;
|
|
576
|
+
bottom: 0;
|
|
577
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
578
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
@media (min-height: 40rem) {
|
|
582
|
+
.pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
|
|
583
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
|
|
584
|
+
.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
|
|
585
|
+
.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
|
|
586
|
+
.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
|
|
587
|
+
.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
|
|
588
|
+
.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
|
|
589
|
+
position: sticky;
|
|
590
|
+
top: 0;
|
|
591
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
592
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
593
|
+
}
|
|
594
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
|
|
595
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
|
|
596
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
|
|
597
|
+
.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
|
|
598
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
|
|
599
|
+
.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
|
|
600
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
|
|
601
|
+
position: sticky;
|
|
602
|
+
bottom: 0;
|
|
603
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
604
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
@media (min-height: 48rem) {
|
|
608
|
+
.pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
|
|
609
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
|
|
610
|
+
.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
|
|
611
|
+
.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
|
|
612
|
+
.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
|
|
613
|
+
.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
|
|
614
|
+
.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
|
|
615
|
+
position: sticky;
|
|
616
|
+
top: 0;
|
|
617
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
618
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
619
|
+
}
|
|
620
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
|
|
621
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
|
|
622
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
|
|
623
|
+
.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
|
|
624
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
|
|
625
|
+
.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
|
|
626
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
|
|
627
|
+
position: sticky;
|
|
628
|
+
bottom: 0;
|
|
629
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
630
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
@media (min-height: 60rem) {
|
|
634
|
+
.pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
|
|
635
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
|
|
636
|
+
.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
|
|
637
|
+
.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
|
|
638
|
+
.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
|
|
639
|
+
.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
|
|
640
|
+
.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
|
|
641
|
+
position: sticky;
|
|
642
|
+
top: 0;
|
|
643
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
644
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
645
|
+
}
|
|
646
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
|
|
647
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
|
|
648
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
|
|
649
|
+
.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
|
|
650
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
|
|
651
|
+
.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
|
|
652
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
|
|
653
|
+
position: sticky;
|
|
654
|
+
bottom: 0;
|
|
655
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
656
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
657
|
+
}
|
|
658
|
+
}
|
|
659
|
+
@media (min-height: 80rem) {
|
|
660
|
+
.pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
|
|
661
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
|
|
662
|
+
.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
|
|
663
|
+
.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
|
|
664
|
+
.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
|
|
665
|
+
.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
|
|
666
|
+
.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
|
|
667
|
+
position: sticky;
|
|
668
|
+
top: 0;
|
|
669
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
670
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
671
|
+
}
|
|
672
|
+
.pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
|
|
673
|
+
.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
|
|
674
|
+
.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
|
|
675
|
+
.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
|
|
676
|
+
.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
|
|
677
|
+
.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
|
|
678
|
+
.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
|
|
679
|
+
position: sticky;
|
|
680
|
+
bottom: 0;
|
|
681
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
682
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
555
685
|
|
|
556
686
|
.pf-c-page__main,
|
|
557
687
|
.pf-c-page__drawer {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
$pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
|
|
2
|
+
$pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
|
|
2
3
|
|
|
3
4
|
// URL.com/guidelines#layout
|
|
4
5
|
.pf-c-page {
|
|
@@ -477,20 +478,6 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
|
|
|
477
478
|
.pf-c-page__main-subnav {
|
|
478
479
|
flex-shrink: 0;
|
|
479
480
|
|
|
480
|
-
&.pf-m-sticky-top {
|
|
481
|
-
position: sticky;
|
|
482
|
-
top: 0;
|
|
483
|
-
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
484
|
-
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
&.pf-m-sticky-bottom {
|
|
488
|
-
position: sticky;
|
|
489
|
-
bottom: 0;
|
|
490
|
-
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
491
|
-
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
492
|
-
}
|
|
493
|
-
|
|
494
481
|
&.pf-m-overflow-scroll {
|
|
495
482
|
position: relative;
|
|
496
483
|
flex-shrink: 1;
|
|
@@ -506,6 +493,28 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
|
|
|
506
493
|
z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
|
|
507
494
|
box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
|
|
508
495
|
}
|
|
496
|
+
|
|
497
|
+
// Responsive height modifiers for sticky top/bottom
|
|
498
|
+
@each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
|
|
499
|
+
$breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
|
|
500
|
+
|
|
501
|
+
@include pf-apply-height-breakpoint($breakpoint) {
|
|
502
|
+
|
|
503
|
+
&.pf-m-sticky-top#{$breakpoint-name} {
|
|
504
|
+
position: sticky;
|
|
505
|
+
top: 0;
|
|
506
|
+
z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
|
|
507
|
+
box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
&.pf-m-sticky-bottom#{$breakpoint-name} {
|
|
511
|
+
position: sticky;
|
|
512
|
+
bottom: 0;
|
|
513
|
+
z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
|
|
514
|
+
box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
|
|
515
|
+
}
|
|
516
|
+
}
|
|
517
|
+
}
|
|
509
518
|
}
|
|
510
519
|
|
|
511
520
|
// Main & Drawer
|
package/components/Tabs/tabs.css
CHANGED
|
@@ -122,6 +122,15 @@
|
|
|
122
122
|
--pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
|
|
123
123
|
--pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
|
|
124
124
|
--pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
|
|
125
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
|
|
126
|
+
--pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
|
|
127
|
+
--pf-c-tabs__link-toggle-icon--Rotate: 0;
|
|
128
|
+
--pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
|
|
129
|
+
--pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
|
|
130
|
+
--pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
|
|
131
|
+
--pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
|
|
132
|
+
--pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
|
|
133
|
+
--pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
|
|
125
134
|
position: relative;
|
|
126
135
|
display: flex;
|
|
127
136
|
width: var(--pf-c-tabs--Width);
|
|
@@ -550,6 +559,15 @@
|
|
|
550
559
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
|
|
551
560
|
}
|
|
552
561
|
|
|
562
|
+
.pf-c-tabs__link:hover {
|
|
563
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
|
|
564
|
+
}
|
|
565
|
+
.pf-c-tabs__link:focus {
|
|
566
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
|
|
567
|
+
}
|
|
568
|
+
.pf-c-tabs__link:active, .pf-c-tabs__link.pf-m-active {
|
|
569
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
|
|
570
|
+
}
|
|
553
571
|
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
|
|
554
572
|
pointer-events: none;
|
|
555
573
|
}
|
|
@@ -573,6 +591,18 @@
|
|
|
573
591
|
.pf-c-tabs__link .pf-c-tabs__item-text:last-child {
|
|
574
592
|
--pf-c-tabs__link--child--MarginRight: 0;
|
|
575
593
|
}
|
|
594
|
+
.pf-c-tabs__link.pf-m-expanded {
|
|
595
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
|
|
596
|
+
--pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.pf-c-tabs__link-toggle-icon {
|
|
600
|
+
align-self: end;
|
|
601
|
+
font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
|
|
602
|
+
color: var(--pf-c-tabs__link-toggle-icon--Color);
|
|
603
|
+
transition: var(--pf-c-tabs__link-toggle-icon--Transition);
|
|
604
|
+
transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
|
|
605
|
+
}
|
|
576
606
|
|
|
577
607
|
.pf-c-tabs__item-close {
|
|
578
608
|
display: flex;
|
|
@@ -156,6 +156,17 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
|
|
|
156
156
|
--pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
|
|
157
157
|
--pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
|
|
158
158
|
|
|
159
|
+
// Overflow menu toggle icon
|
|
160
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
|
|
161
|
+
--pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
|
|
162
|
+
--pf-c-tabs__link-toggle-icon--Rotate: 0;
|
|
163
|
+
--pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
|
|
164
|
+
--pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
|
|
165
|
+
--pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
|
|
166
|
+
--pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
|
|
167
|
+
--pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
|
|
168
|
+
--pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
|
|
169
|
+
|
|
159
170
|
@media screen and (min-width: $pf-global--breakpoint--xl) {
|
|
160
171
|
--pf-c-tabs__scroll-button--Width: var(--pf-c-tabs__scroll-button--xl--Width);
|
|
161
172
|
--pf-c-tabs--m-page-insets--inset: var(--pf-c-tabs--m-page-insets--xl--inset);
|
|
@@ -628,6 +639,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
|
|
|
628
639
|
}
|
|
629
640
|
}
|
|
630
641
|
|
|
642
|
+
&:hover {
|
|
643
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
&:focus {
|
|
647
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
&:active,
|
|
651
|
+
&.pf-m-active {
|
|
652
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
|
|
653
|
+
}
|
|
654
|
+
|
|
631
655
|
&:disabled,
|
|
632
656
|
&.pf-m-disabled {
|
|
633
657
|
pointer-events: none;
|
|
@@ -658,6 +682,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
|
|
|
658
682
|
--pf-c-tabs__link--child--MarginRight: 0;
|
|
659
683
|
}
|
|
660
684
|
}
|
|
685
|
+
|
|
686
|
+
&.pf-m-expanded {
|
|
687
|
+
--pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
|
|
688
|
+
--pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.pf-c-tabs__link-toggle-icon {
|
|
693
|
+
align-self: end;
|
|
694
|
+
font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
|
|
695
|
+
color: var(--pf-c-tabs__link-toggle-icon--Color);
|
|
696
|
+
transition: var(--pf-c-tabs__link-toggle-icon--Transition);
|
|
697
|
+
transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
|
|
661
698
|
}
|
|
662
699
|
|
|
663
700
|
.pf-c-tabs__item-close {
|
|
@@ -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. |
|