@patternfly/quickstarts 1.2.2 → 1.4.1-rc.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.
@@ -1,40 +1,44 @@
1
- .pfext-quick-start-panel-content dl {
1
+ .pfext-quick-start-panel-content__body dl {
2
2
  margin: 0px; }
3
3
 
4
- .pfext-quick-start-panel-content dt {
4
+ .pfext-quick-start-panel-content__body dt {
5
5
  font-weight: var(--pf-global--FontWeight--bold); }
6
6
 
7
- .pfext-quick-start-panel-content dd {
7
+ .pfext-quick-start-panel-content__body dd {
8
8
  margin-bottom: 20px; }
9
9
 
10
- .pfext-quick-start-panel-content dd:last-child {
10
+ .pfext-quick-start-panel-content__body dd:last-child {
11
11
  margin-bottom: 0px; }
12
12
 
13
- .pfext-quick-start-panel-content input[type="number"] {
13
+ .pfext-quick-start-panel-content__body input[type="number"] {
14
14
  -webkit-appearance: textfield;
15
15
  appearance: textfield;
16
16
  max-width: 100px; }
17
- .pfext-quick-start-panel-content input[type="number"]::-webkit-inner-spin-button, .pfext-quick-start-panel-content input[type="number"]::-webkit-outer-spin-button {
17
+ .pfext-quick-start-panel-content__body input[type="number"]::-webkit-inner-spin-button, .pfext-quick-start-panel-content__body input[type="number"]::-webkit-outer-spin-button {
18
18
  -webkit-appearance: none; }
19
19
 
20
- .pfext-quick-start-panel-content input[type="radio"] {
20
+ .pfext-quick-start-panel-content__body input[type="radio"] {
21
21
  margin-right: 7px; }
22
22
 
23
- .pfext-quick-start-panel-content,
23
+ .pfext-quick-start-panel-content__header,
24
+ .pfext-quick-start-panel-content__body,
24
25
  .pfext-page-layout__content,
25
- .pfext-page-layout__base {
26
+ .pfext-popover__base {
26
27
  --pf-global--FontSize--md: 14px;
27
28
  --pf-global--FontSize--sm: 13px; }
28
- .pfext-quick-start-panel-content ul,
29
+ .pfext-quick-start-panel-content__header ul,
30
+ .pfext-quick-start-panel-content__body ul,
29
31
  .pfext-page-layout__content ul,
30
- .pfext-page-layout__base ul {
32
+ .pfext-popover__base ul {
31
33
  list-style-type: disc; }
32
- .pfext-quick-start-panel-content input[type='radio'],
33
- .pfext-quick-start-panel-content input[type='checkbox'],
34
+ .pfext-quick-start-panel-content__header input[type='radio'],
35
+ .pfext-quick-start-panel-content__header input[type='checkbox'],
36
+ .pfext-quick-start-panel-content__body input[type='radio'],
37
+ .pfext-quick-start-panel-content__body input[type='checkbox'],
34
38
  .pfext-page-layout__content input[type='radio'],
35
39
  .pfext-page-layout__content input[type='checkbox'],
36
- .pfext-page-layout__base input[type='radio'],
37
- .pfext-page-layout__base input[type='checkbox'] {
40
+ .pfext-popover__base input[type='radio'],
41
+ .pfext-popover__base input[type='checkbox'] {
38
42
  margin-top: 1px !important; }
39
43
 
40
44
  .pfext-icon-and-text {
@@ -47,6 +51,23 @@
47
51
  flex-shrink: 0;
48
52
  margin-right: 5px; }
49
53
 
54
+ .pfext-markdown-view.is-empty {
55
+ color: #999; }
56
+
57
+ .pfext-markdown-view table {
58
+ display: block;
59
+ margin-bottom: 11.5px;
60
+ overflow-x: auto; }
61
+
62
+ .pfext-markdown-view td,
63
+ .pfext-markdown-view th {
64
+ border-bottom: 1px solid #ededed;
65
+ padding: 10px;
66
+ vertical-align: top; }
67
+
68
+ .pfext-markdown-view th {
69
+ padding-top: 0; }
70
+
50
71
  .catalog-item-header-pf-subtitle {
51
72
  font-size: 13px; }
52
73
 
@@ -348,6 +369,7 @@
348
369
  background: var(--pf-global--palette--black-150); }
349
370
 
350
371
  .pfext-page-layout__header {
372
+ padding-top: 1px;
351
373
  background-color: var(--pf-global--BackgroundColor--light-100); }
352
374
 
353
375
  .pfext-page-layout__hint {
@@ -366,6 +388,80 @@
366
388
  font-weight: var(--pf-global--FontWeight--normal);
367
389
  line-height: 1.1; }
368
390
 
391
+ .pfext-markdown-view .pfext-code-block__pre {
392
+ /* override the styles applied by showdown while parsing <pre /> */
393
+ display: flex;
394
+ border: none;
395
+ border-radius: none;
396
+ background-color: transparent;
397
+ margin: 0;
398
+ padding: 0; }
399
+
400
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button > i.fa-check {
401
+ display: none; }
402
+
403
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button > i.fa-play {
404
+ display: inline; }
405
+
406
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-check {
407
+ display: inline; }
408
+
409
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
410
+ display: none; }
411
+
412
+ .pfext-modal {
413
+ position: absolute !important; }
414
+
415
+ @keyframes pfext-spotlight-expand {
416
+ 0% {
417
+ outline-offset: -4px;
418
+ outline-width: 4px;
419
+ opacity: 1; }
420
+ 100% {
421
+ outline-offset: 21px;
422
+ outline-width: 12px;
423
+ opacity: 0; } }
424
+
425
+ @keyframes pfext-spotlight-fade-in {
426
+ 0% {
427
+ opacity: 0; }
428
+ 100% {
429
+ opacity: 1; } }
430
+
431
+ @keyframes pfext-spotlight-fade-out {
432
+ 0% {
433
+ opacity: 1; }
434
+ 100% {
435
+ opacity: 0; } }
436
+
437
+ .pfext-spotlight {
438
+ pointer-events: none;
439
+ position: absolute; }
440
+ .pfext-spotlight__with-backdrop {
441
+ mix-blend-mode: hard-light; }
442
+ .pfext-spotlight__element-highlight-noanimate {
443
+ border: var(--pf-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);
444
+ background-color: var(--pf-global--palette--black-500);
445
+ z-index: 9999; }
446
+ .pfext-spotlight__element-highlight-animate {
447
+ pointer-events: none;
448
+ position: absolute;
449
+ box-shadow: inset 0px 0px 0px 4px var(--pf-global--palette--blue-200);
450
+ opacity: 0;
451
+ animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
452
+ animation-fill-mode: forwards; }
453
+ .pfext-spotlight__element-highlight-animate::after {
454
+ content: '';
455
+ position: absolute;
456
+ left: 0;
457
+ right: 0;
458
+ top: 0;
459
+ bottom: 0;
460
+ animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
461
+ animation-fill-mode: forwards;
462
+ outline: 4px solid var(--pf-global--palette--blue-200);
463
+ outline-offset: -4px; }
464
+
369
465
  .pfext-markdown-view h1, .pfext-markdown-view h2, .pfext-markdown-view h3, .pfext-markdown-view h4, .pfext-markdown-view h5, .pfext-markdown-view h6,
370
466
  .pfext-markdown-view .h1, .pfext-markdown-view .h2, .pfext-markdown-view .h3, .pfext-markdown-view .h4, .pfext-markdown-view .h5, .pfext-markdown-view .h6 {
371
467
  font-family: var(--pf-global--FontFamily--heading--sans-serif);
@@ -492,15 +588,6 @@
492
588
  .pfext-markdown-view th {
493
589
  text-align: left; }
494
590
 
495
- .pfext-quick-start-drawer__body {
496
- display: flex;
497
- flex-direction: column;
498
- z-index: 0;
499
- position: relative; }
500
-
501
- .pfext-quick-start-drawer__modal > .pf-c-modal-box__footer {
502
- display: block; }
503
-
504
591
  .pfext-quick-start-panel-content__header {
505
592
  position: sticky;
506
593
  top: 0px;
@@ -508,6 +595,14 @@
508
595
  z-index: var(--pf-global--ZIndex--xs); }
509
596
  .pfext-quick-start-panel-content__header__shadow {
510
597
  box-shadow: var(--pf-global--BoxShadow--sm-bottom); }
598
+ .pfext-quick-start-panel-content__header--blue-white {
599
+ background-color: var(--pf-global--palette--blue-400); }
600
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title {
601
+ color: var(--pf-global--Color--light-100); }
602
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
603
+ color: var(--pf-global--Color--light-200); }
604
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button {
605
+ color: var(--pf-global--Color--light-100) !important; }
511
606
 
512
607
  .pfext-quick-start-panel-content__body {
513
608
  display: flex;
@@ -522,7 +617,7 @@
522
617
 
523
618
  .pfext-quick-start-panel-content__duration {
524
619
  display: inline-block;
525
- font-size: 65%;
620
+ font-size: var(--pf-global--FontSize--md);
526
621
  font-weight: 400;
527
622
  line-height: 1;
528
623
  color: #9c9c9c; }
@@ -530,19 +625,14 @@
530
625
  .pfext-quick-start-panel-content__footer__shadow {
531
626
  box-shadow: var(--pf-global--BoxShadow--sm-top); }
532
627
 
533
- .pfext-quick-start-catalog__gallery {
534
- --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important; }
535
-
536
- .pfext-quick-start-catalog__gallery-item {
537
- display: inherit !important; }
628
+ .pfext-quick-start-drawer__body {
629
+ display: flex;
630
+ flex-direction: column;
631
+ z-index: 0;
632
+ position: relative; }
538
633
 
539
- .pfext-quick-start-tile {
540
- height: 100%; }
541
- .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
542
- display: block;
543
- -webkit-line-clamp: unset; }
544
- .pfext-quick-start-tile .catalog-tile-pf-icon {
545
- display: flex; }
634
+ .pfext-quick-start-drawer__modal > .pf-c-modal-box__footer {
635
+ display: block; }
546
636
 
547
637
  .pfext-quick-start-tile-description {
548
638
  display: -webkit-box;
@@ -579,6 +669,20 @@
579
669
  .pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type) {
580
670
  margin-right: var(--pf-global--spacer--sm); }
581
671
 
672
+ .pfext-quick-start-catalog__gallery {
673
+ --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important; }
674
+
675
+ .pfext-quick-start-catalog__gallery-item {
676
+ display: inherit !important; }
677
+
678
+ .pfext-quick-start-tile {
679
+ height: 100%; }
680
+ .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
681
+ display: block;
682
+ -webkit-line-clamp: unset; }
683
+ .pfext-quick-start-tile .catalog-tile-pf-icon {
684
+ display: flex; }
685
+
582
686
  .pfext-quick-start-catalog-filter__input {
583
687
  flex-grow: 1;
584
688
  max-width: 500px; }
@@ -596,14 +700,6 @@
596
700
  .pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-check {
597
701
  --pf-c-check__label--FontSize: 14px; }
598
702
 
599
- .pfext-quick-start-content {
600
- flex: 1 1 0;
601
- overflow: auto;
602
- padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
603
- font-size: 14px; }
604
- .pfext-quick-start-content .pf-c-alert__description p {
605
- font-size: 13px; }
606
-
607
703
  .pfext-quick-start-footer {
608
704
  background-color: var(--pf-global--Color--light-100);
609
705
  flex: 0 0 auto;
@@ -613,6 +709,14 @@
613
709
  .pfext-quick-start-footer__restartbtn {
614
710
  float: right; }
615
711
 
712
+ .pfext-quick-start-content {
713
+ flex: 1 1 0;
714
+ overflow: auto;
715
+ padding: var(--pf-global--spacer--lg);
716
+ font-size: 16px; }
717
+ .pfext-quick-start-content .pf-c-alert__description p {
718
+ font-size: 13px; }
719
+
616
720
  .pfext-markdown-view.is-empty {
617
721
  color: #999; }
618
722
 
@@ -640,34 +744,97 @@
640
744
  align-items: center;
641
745
  margin-bottom: var(--pf-global--spacer--xs); }
642
746
 
643
- .pfext-quick-start-task-header__list {
644
- padding: 0 !important; }
645
- .pfext-quick-start-task-header__list button::before {
646
- content: none; }
647
- .pfext-quick-start-task-header__list li {
648
- list-style-type: none;
649
- display: flex;
650
- flex-wrap: wrap;
651
- align-items: center;
652
- margin-bottom: var(--pf-global--spacer--xs); }
747
+ .pfext-quick-start-tasks__list .pfext-quick-start-task__content {
748
+ margin-left: var(--pf-global--spacer--lg);
749
+ margin-bottom: var(--pf-global--spacer--md); }
750
+
751
+ .pfext-quick-start-tasks__list .task-pflist-title {
752
+ font-size: 14px !important;
753
+ margin-bottom: 6px; }
754
+
755
+ .pfext-quick-start-tasks__list .task-pflist-subtitle {
756
+ color: var(--pf-global--Color--200);
757
+ font-size: 16px; }
758
+
759
+ .pfext-quick-start-tasks__list .task-pflist-list {
760
+ font-size: 16px; }
761
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq {
762
+ padding-left: var(--pf-global--spacer--lg); }
763
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq li + li {
764
+ margin-top: 4px; }
765
+ .pfext-quick-start-tasks__list .task-pflist-list--proc {
766
+ padding-left: 10px; }
767
+ .pfext-quick-start-tasks__list .task-pflist-list--proc li + li {
768
+ margin-top: 16px; }
769
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker {
770
+ font-size: 0.8rem; }
771
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content {
772
+ position: relative;
773
+ left: 2px; }
774
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc {
775
+ font-size: 14px; }
776
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content {
777
+ position: relative;
778
+ left: 4px; }
779
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert {
780
+ margin: var(--pf-global--spacer--md) 0; }
781
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title {
782
+ margin-top: 0;
783
+ margin-bottom: 0;
784
+ font-weight: var(--pf-c-alert__title--FontWeight);
785
+ font-family: inherit;
786
+ line-height: inherit;
787
+ color: var(--pf-c-alert__title--Color);
788
+ word-break: break-word; }
789
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note {
790
+ background-color: var(--pf-global--palette--blue-50);
791
+ border-color: var(--pf-global--active-color--200);
792
+ margin: var(--pf-global--spacer--md) 0; }
793
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body {
794
+ font-size: 14px; }
795
+
796
+ .pfext-quick-start-intro__prereq {
797
+ margin-bottom: var(--pf-global--spacer--md); }
798
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__content {
799
+ margin-top: var(--pf-global--spacer--sm); }
800
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle {
801
+ padding-top: 0;
802
+ padding-bottom: 0; }
803
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-text {
804
+ margin-left: var(--pf-global--spacer--sm); }
805
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon {
806
+ color: var(--pf-c-expandable-section__toggle--Color); }
807
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:focus, .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:hover {
808
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color); }
809
+ .pfext-quick-start-intro__prereq-list {
810
+ padding-left: 20px; }
811
+ .pfext-quick-start-intro__prereq-list__item::marker {
812
+ font-size: 0.8rem; }
813
+ .pfext-quick-start-intro__prereq-list__item-content {
814
+ position: relative;
815
+ left: 2px; }
653
816
 
654
817
  .pfext-quick-start-task-header {
655
- display: flex;
656
- flex-wrap: wrap;
657
- align-items: center;
658
- margin-bottom: var(--pf-global--spacer--xs); }
818
+ margin-bottom: var(--pf-global--spacer--sm);
819
+ display: grid;
820
+ grid-template-columns: min-content auto;
821
+ font-size: var(--pf-global--FontSize--md); }
659
822
  .pfext-quick-start-task-header button::before {
660
823
  content: none; }
661
824
  .pfext-quick-start-task-header__title {
662
825
  color: var(--pf-global--primary-color--100) !important;
663
826
  margin-right: var(--pf-global--spacer--md) !important; }
664
827
  .pfext-quick-start-task-header__subtitle {
665
- display: inline-block;
666
- font-size: var(--pf-global--FontSize--sm); }
828
+ font-size: var(--pf-global--FontSize--sm);
829
+ color: var(--pf-global--Color--400) !important; }
830
+ .pfext-quick-start-task-header__tryagain {
831
+ display: block;
832
+ font-size: var(--pf-global--FontSize--md);
833
+ color: var(--pf-global--Color--300) !important; }
667
834
  .pfext-quick-start-task-header__title-success {
668
835
  color: var(--pf-global--palette--green-500) !important; }
669
836
  .pfext-quick-start-task-header__title-failed {
670
- color: var(--pf-chart-global--danger--Color--100) !important; }
837
+ color: var(--pf-global--danger-color--100) !important; }
671
838
  .pfext-quick-start-task-header__task-icon-init {
672
839
  background-color: var(--pf-global--palette--blue-400);
673
840
  border-radius: var(--pf-global--BorderRadius--lg);
@@ -678,6 +845,13 @@
678
845
  width: 1.5em; }
679
846
  .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
680
847
  vertical-align: middle !important; }
848
+ .pfext-quick-start-task-header__task-icon-success {
849
+ color: var(--pf-global--palette--green-500) !important; }
850
+ .pfext-quick-start-task-header__task-icon-failed {
851
+ color: var(--pf-global--danger-color--100) !important; }
852
+
853
+ .pfext-quick-start-task-review-alert {
854
+ margin: var(--pf-global--spacer--lg) 0; }
681
855
 
682
856
  .pfext-quick-start-task-review {
683
857
  font-size: var(--pf-global--FontSize--md);
@@ -697,8 +871,16 @@
697
871
  .pfext-quick-start-task-review--failed {
698
872
  color: var(--pf-chart-global--danger--Color--100); }
699
873
 
700
- .pfext-modal {
701
- position: absolute !important; }
874
+ .pfext-quick-start-task-header__list {
875
+ padding: 0 !important; }
876
+ .pfext-quick-start-task-header__list button::before {
877
+ content: none; }
878
+ .pfext-quick-start-task-header__list li {
879
+ list-style-type: none;
880
+ display: flex;
881
+ flex-wrap: wrap;
882
+ align-items: center;
883
+ margin-bottom: var(--pf-global--spacer--xs); }
702
884
 
703
885
  .pfext-markdown-view .pfext-code-block__pre {
704
886
  /* override the styles applied by showdown while parsing <pre /> */
@@ -721,6 +903,9 @@
721
903
  .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
722
904
  display: none; }
723
905
 
906
+ .pfext-modal {
907
+ position: absolute !important; }
908
+
724
909
  @keyframes pfext-spotlight-expand {
725
910
  0% {
726
911
  outline-offset: -4px;