@patternfly/quickstarts 1.2.3 → 1.4.1-rc.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.
@@ -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);
@@ -508,6 +604,14 @@
508
604
  z-index: var(--pf-global--ZIndex--xs); }
509
605
  .pfext-quick-start-panel-content__header__shadow {
510
606
  box-shadow: var(--pf-global--BoxShadow--sm-bottom); }
607
+ .pfext-quick-start-panel-content__header--blue-white {
608
+ background-color: var(--pf-global--palette--blue-400); }
609
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title {
610
+ color: var(--pf-global--Color--light-100); }
611
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
612
+ color: var(--pf-global--Color--light-200); }
613
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button {
614
+ color: var(--pf-global--Color--light-100) !important; }
511
615
 
512
616
  .pfext-quick-start-panel-content__body {
513
617
  display: flex;
@@ -522,7 +626,7 @@
522
626
 
523
627
  .pfext-quick-start-panel-content__duration {
524
628
  display: inline-block;
525
- font-size: 65%;
629
+ font-size: var(--pf-global--FontSize--md);
526
630
  font-weight: 400;
527
631
  line-height: 1;
528
632
  color: #9c9c9c; }
@@ -536,13 +640,15 @@
536
640
  .pfext-quick-start-catalog__gallery-item {
537
641
  display: inherit !important; }
538
642
 
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; }
643
+ .pfext-quick-start-tile-header__status {
644
+ margin: var(--pf-global--spacer--sm) 0; }
645
+
646
+ .pfext-quick-start-tile-header--margin {
647
+ margin-right: var(--pf-global--spacer--sm);
648
+ margin-bottom: var(--pf-global--spacer--sm); }
649
+
650
+ .pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type) {
651
+ margin-right: var(--pf-global--spacer--sm); }
546
652
 
547
653
  .pfext-quick-start-tile-description {
548
654
  display: -webkit-box;
@@ -569,15 +675,13 @@
569
675
  .pfext-quick-start-tile-prerequisites-list {
570
676
  padding-left: 20px; }
571
677
 
572
- .pfext-quick-start-tile-header__status {
573
- margin: var(--pf-global--spacer--sm) 0; }
574
-
575
- .pfext-quick-start-tile-header--margin {
576
- margin-right: var(--pf-global--spacer--sm);
577
- margin-bottom: var(--pf-global--spacer--sm); }
578
-
579
- .pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type) {
580
- margin-right: var(--pf-global--spacer--sm); }
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; }
581
685
 
582
686
  .pfext-quick-start-catalog-filter__input {
583
687
  flex-grow: 1;
@@ -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
 
@@ -630,6 +734,27 @@
630
734
  .pfext-markdown-view th {
631
735
  padding-top: 0; }
632
736
 
737
+ .pfext-quick-start-intro__prereq {
738
+ margin-bottom: var(--pf-global--spacer--md); }
739
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__content {
740
+ margin-top: var(--pf-global--spacer--sm); }
741
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle {
742
+ padding-top: 0;
743
+ padding-bottom: 0; }
744
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-text {
745
+ margin-left: var(--pf-global--spacer--sm); }
746
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon {
747
+ color: var(--pf-c-expandable-section__toggle--Color); }
748
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:focus, .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:hover {
749
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color); }
750
+ .pfext-quick-start-intro__prereq-list {
751
+ padding-left: 20px; }
752
+ .pfext-quick-start-intro__prereq-list__item::marker {
753
+ font-size: 0.8rem; }
754
+ .pfext-quick-start-intro__prereq-list__item-content {
755
+ position: relative;
756
+ left: 2px; }
757
+
633
758
  .pfext-quick-start-tasks__list button::before {
634
759
  content: none; }
635
760
 
@@ -640,6 +765,55 @@
640
765
  align-items: center;
641
766
  margin-bottom: var(--pf-global--spacer--xs); }
642
767
 
768
+ .pfext-quick-start-tasks__list .pfext-quick-start-task__content {
769
+ margin-left: var(--pf-global--spacer--lg);
770
+ margin-bottom: var(--pf-global--spacer--md); }
771
+
772
+ .pfext-quick-start-tasks__list .task-pflist-title {
773
+ font-size: 14px !important;
774
+ margin-bottom: 6px; }
775
+
776
+ .pfext-quick-start-tasks__list .task-pflist-subtitle {
777
+ color: var(--pf-global--Color--200);
778
+ font-size: 16px; }
779
+
780
+ .pfext-quick-start-tasks__list .task-pflist-list {
781
+ font-size: 16px; }
782
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq {
783
+ padding-left: var(--pf-global--spacer--lg); }
784
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq li + li {
785
+ margin-top: 4px; }
786
+ .pfext-quick-start-tasks__list .task-pflist-list--proc {
787
+ padding-left: 10px; }
788
+ .pfext-quick-start-tasks__list .task-pflist-list--proc li + li {
789
+ margin-top: 16px; }
790
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker {
791
+ font-size: 0.8rem; }
792
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content {
793
+ position: relative;
794
+ left: 2px; }
795
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc {
796
+ font-size: 14px; }
797
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content {
798
+ position: relative;
799
+ left: 4px; }
800
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert {
801
+ margin: var(--pf-global--spacer--md) 0; }
802
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title {
803
+ margin-top: 0;
804
+ margin-bottom: 0;
805
+ font-weight: var(--pf-c-alert__title--FontWeight);
806
+ font-family: inherit;
807
+ line-height: inherit;
808
+ color: var(--pf-c-alert__title--Color);
809
+ word-break: break-word; }
810
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note {
811
+ background-color: var(--pf-global--palette--blue-50);
812
+ border-color: var(--pf-global--active-color--200);
813
+ margin: var(--pf-global--spacer--md) 0; }
814
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body {
815
+ font-size: 14px; }
816
+
643
817
  .pfext-quick-start-task-header__list {
644
818
  padding: 0 !important; }
645
819
  .pfext-quick-start-task-header__list button::before {
@@ -652,22 +826,26 @@
652
826
  margin-bottom: var(--pf-global--spacer--xs); }
653
827
 
654
828
  .pfext-quick-start-task-header {
655
- display: flex;
656
- flex-wrap: wrap;
657
- align-items: center;
658
- margin-bottom: var(--pf-global--spacer--xs); }
829
+ margin-bottom: var(--pf-global--spacer--sm);
830
+ display: grid;
831
+ grid-template-columns: min-content auto;
832
+ font-size: var(--pf-global--FontSize--md); }
659
833
  .pfext-quick-start-task-header button::before {
660
834
  content: none; }
661
835
  .pfext-quick-start-task-header__title {
662
836
  color: var(--pf-global--primary-color--100) !important;
663
837
  margin-right: var(--pf-global--spacer--md) !important; }
664
838
  .pfext-quick-start-task-header__subtitle {
665
- display: inline-block;
666
- font-size: var(--pf-global--FontSize--sm); }
839
+ font-size: var(--pf-global--FontSize--sm);
840
+ color: var(--pf-global--Color--400) !important; }
841
+ .pfext-quick-start-task-header__tryagain {
842
+ display: block;
843
+ font-size: var(--pf-global--FontSize--md);
844
+ color: var(--pf-global--Color--300) !important; }
667
845
  .pfext-quick-start-task-header__title-success {
668
846
  color: var(--pf-global--palette--green-500) !important; }
669
847
  .pfext-quick-start-task-header__title-failed {
670
- color: var(--pf-chart-global--danger--Color--100) !important; }
848
+ color: var(--pf-global--danger-color--100) !important; }
671
849
  .pfext-quick-start-task-header__task-icon-init {
672
850
  background-color: var(--pf-global--palette--blue-400);
673
851
  border-radius: var(--pf-global--BorderRadius--lg);
@@ -678,6 +856,13 @@
678
856
  width: 1.5em; }
679
857
  .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
680
858
  vertical-align: middle !important; }
859
+ .pfext-quick-start-task-header__task-icon-success {
860
+ color: var(--pf-global--palette--green-500) !important; }
861
+ .pfext-quick-start-task-header__task-icon-failed {
862
+ color: var(--pf-global--danger-color--100) !important; }
863
+
864
+ .pfext-quick-start-task-review-alert {
865
+ margin: var(--pf-global--spacer--lg) 0; }
681
866
 
682
867
  .pfext-quick-start-task-review {
683
868
  font-size: var(--pf-global--FontSize--md);