@patternfly/quickstarts 1.2.3 → 2.0.1-rc.2

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
 
@@ -366,6 +387,80 @@
366
387
  font-weight: var(--pf-global--FontWeight--normal);
367
388
  line-height: 1.1; }
368
389
 
390
+ .pfext-markdown-view .pfext-code-block__pre {
391
+ /* override the styles applied by showdown while parsing <pre /> */
392
+ display: flex;
393
+ border: none;
394
+ border-radius: none;
395
+ background-color: transparent;
396
+ margin: 0;
397
+ padding: 0; }
398
+
399
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button > i.fa-check {
400
+ display: none; }
401
+
402
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button > i.fa-play {
403
+ display: inline; }
404
+
405
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-check {
406
+ display: inline; }
407
+
408
+ .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
409
+ display: none; }
410
+
411
+ .pfext-modal {
412
+ position: absolute !important; }
413
+
414
+ @keyframes pfext-spotlight-expand {
415
+ 0% {
416
+ outline-offset: -4px;
417
+ outline-width: 4px;
418
+ opacity: 1; }
419
+ 100% {
420
+ outline-offset: 21px;
421
+ outline-width: 12px;
422
+ opacity: 0; } }
423
+
424
+ @keyframes pfext-spotlight-fade-in {
425
+ 0% {
426
+ opacity: 0; }
427
+ 100% {
428
+ opacity: 1; } }
429
+
430
+ @keyframes pfext-spotlight-fade-out {
431
+ 0% {
432
+ opacity: 1; }
433
+ 100% {
434
+ opacity: 0; } }
435
+
436
+ .pfext-spotlight {
437
+ pointer-events: none;
438
+ position: absolute; }
439
+ .pfext-spotlight__with-backdrop {
440
+ mix-blend-mode: hard-light; }
441
+ .pfext-spotlight__element-highlight-noanimate {
442
+ border: var(--pf-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);
443
+ background-color: var(--pf-global--palette--black-500);
444
+ z-index: 9999; }
445
+ .pfext-spotlight__element-highlight-animate {
446
+ pointer-events: none;
447
+ position: absolute;
448
+ box-shadow: inset 0px 0px 0px 4px var(--pf-global--palette--blue-200);
449
+ opacity: 0;
450
+ animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
451
+ animation-fill-mode: forwards; }
452
+ .pfext-spotlight__element-highlight-animate::after {
453
+ content: '';
454
+ position: absolute;
455
+ left: 0;
456
+ right: 0;
457
+ top: 0;
458
+ bottom: 0;
459
+ animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
460
+ animation-fill-mode: forwards;
461
+ outline: 4px solid var(--pf-global--palette--blue-200);
462
+ outline-offset: -4px; }
463
+
369
464
  .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
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 {
371
466
  font-family: var(--pf-global--FontFamily--heading--sans-serif);
@@ -508,6 +603,14 @@
508
603
  z-index: var(--pf-global--ZIndex--xs); }
509
604
  .pfext-quick-start-panel-content__header__shadow {
510
605
  box-shadow: var(--pf-global--BoxShadow--sm-bottom); }
606
+ .pfext-quick-start-panel-content__header--blue-white {
607
+ background-color: var(--pf-global--palette--blue-400); }
608
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title {
609
+ color: var(--pf-global--Color--light-100); }
610
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
611
+ color: var(--pf-global--Color--light-200); }
612
+ .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button {
613
+ color: var(--pf-global--Color--light-100) !important; }
511
614
 
512
615
  .pfext-quick-start-panel-content__body {
513
616
  display: flex;
@@ -522,7 +625,7 @@
522
625
 
523
626
  .pfext-quick-start-panel-content__duration {
524
627
  display: inline-block;
525
- font-size: 65%;
628
+ font-size: var(--pf-global--FontSize--md);
526
629
  font-weight: 400;
527
630
  line-height: 1;
528
631
  color: #9c9c9c; }
@@ -536,14 +639,6 @@
536
639
  .pfext-quick-start-catalog__gallery-item {
537
640
  display: inherit !important; }
538
641
 
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; }
546
-
547
642
  .pfext-quick-start-tile-description {
548
643
  display: -webkit-box;
549
644
  overflow: hidden;
@@ -569,6 +664,14 @@
569
664
  .pfext-quick-start-tile-prerequisites-list {
570
665
  padding-left: 20px; }
571
666
 
667
+ .pfext-quick-start-tile {
668
+ height: 100%; }
669
+ .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
670
+ display: block;
671
+ -webkit-line-clamp: unset; }
672
+ .pfext-quick-start-tile .catalog-tile-pf-icon {
673
+ display: flex; }
674
+
572
675
  .pfext-quick-start-tile-header__status {
573
676
  margin: var(--pf-global--spacer--sm) 0; }
574
677
 
@@ -599,8 +702,8 @@
599
702
  .pfext-quick-start-content {
600
703
  flex: 1 1 0;
601
704
  overflow: auto;
602
- padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
603
- font-size: 14px; }
705
+ padding: var(--pf-global--spacer--lg);
706
+ font-size: 16px; }
604
707
  .pfext-quick-start-content .pf-c-alert__description p {
605
708
  font-size: 13px; }
606
709
 
@@ -630,6 +733,27 @@
630
733
  .pfext-markdown-view th {
631
734
  padding-top: 0; }
632
735
 
736
+ .pfext-quick-start-intro__prereq {
737
+ margin-bottom: var(--pf-global--spacer--md); }
738
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__content {
739
+ margin-top: var(--pf-global--spacer--sm); }
740
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle {
741
+ padding-top: 0;
742
+ padding-bottom: 0; }
743
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-text {
744
+ margin-left: var(--pf-global--spacer--sm); }
745
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon {
746
+ color: var(--pf-c-expandable-section__toggle--Color); }
747
+ .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:focus, .pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:hover {
748
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color); }
749
+ .pfext-quick-start-intro__prereq-list {
750
+ padding-left: 20px; }
751
+ .pfext-quick-start-intro__prereq-list__item::marker {
752
+ font-size: 0.8rem; }
753
+ .pfext-quick-start-intro__prereq-list__item-content {
754
+ position: relative;
755
+ left: 2px; }
756
+
633
757
  .pfext-quick-start-tasks__list button::before {
634
758
  content: none; }
635
759
 
@@ -640,6 +764,55 @@
640
764
  align-items: center;
641
765
  margin-bottom: var(--pf-global--spacer--xs); }
642
766
 
767
+ .pfext-quick-start-tasks__list .pfext-quick-start-task__content {
768
+ margin-left: var(--pf-global--spacer--lg);
769
+ margin-bottom: var(--pf-global--spacer--md); }
770
+
771
+ .pfext-quick-start-tasks__list .task-pflist-title {
772
+ font-size: 14px !important;
773
+ margin-bottom: 6px; }
774
+
775
+ .pfext-quick-start-tasks__list .task-pflist-subtitle {
776
+ color: var(--pf-global--Color--200);
777
+ font-size: 16px; }
778
+
779
+ .pfext-quick-start-tasks__list .task-pflist-list {
780
+ font-size: 16px; }
781
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq {
782
+ padding-left: var(--pf-global--spacer--lg); }
783
+ .pfext-quick-start-tasks__list .task-pflist-list--prereq li + li {
784
+ margin-top: 4px; }
785
+ .pfext-quick-start-tasks__list .task-pflist-list--proc {
786
+ padding-left: 10px; }
787
+ .pfext-quick-start-tasks__list .task-pflist-list--proc li + li {
788
+ margin-top: 16px; }
789
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker {
790
+ font-size: 0.8rem; }
791
+ .pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content {
792
+ position: relative;
793
+ left: 2px; }
794
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc {
795
+ font-size: 14px; }
796
+ .pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content {
797
+ position: relative;
798
+ left: 4px; }
799
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert {
800
+ margin: var(--pf-global--spacer--md) 0; }
801
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title {
802
+ margin-top: 0;
803
+ margin-bottom: 0;
804
+ font-weight: var(--pf-c-alert__title--FontWeight);
805
+ font-family: inherit;
806
+ line-height: inherit;
807
+ color: var(--pf-c-alert__title--Color);
808
+ word-break: break-word; }
809
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note {
810
+ background-color: var(--pf-global--palette--blue-50);
811
+ border-color: var(--pf-global--active-color--200);
812
+ margin: var(--pf-global--spacer--md) 0; }
813
+ .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body {
814
+ font-size: 14px; }
815
+
643
816
  .pfext-quick-start-task-header__list {
644
817
  padding: 0 !important; }
645
818
  .pfext-quick-start-task-header__list button::before {
@@ -652,22 +825,26 @@
652
825
  margin-bottom: var(--pf-global--spacer--xs); }
653
826
 
654
827
  .pfext-quick-start-task-header {
655
- display: flex;
656
- flex-wrap: wrap;
657
- align-items: center;
658
- margin-bottom: var(--pf-global--spacer--xs); }
828
+ margin-bottom: var(--pf-global--spacer--sm);
829
+ display: grid;
830
+ grid-template-columns: min-content auto;
831
+ font-size: var(--pf-global--FontSize--md); }
659
832
  .pfext-quick-start-task-header button::before {
660
833
  content: none; }
661
834
  .pfext-quick-start-task-header__title {
662
835
  color: var(--pf-global--primary-color--100) !important;
663
836
  margin-right: var(--pf-global--spacer--md) !important; }
664
837
  .pfext-quick-start-task-header__subtitle {
665
- display: inline-block;
666
- font-size: var(--pf-global--FontSize--sm); }
838
+ font-size: var(--pf-global--FontSize--sm);
839
+ color: var(--pf-global--Color--400) !important; }
840
+ .pfext-quick-start-task-header__tryagain {
841
+ display: block;
842
+ font-size: var(--pf-global--FontSize--md);
843
+ color: var(--pf-global--Color--300) !important; }
667
844
  .pfext-quick-start-task-header__title-success {
668
845
  color: var(--pf-global--palette--green-500) !important; }
669
846
  .pfext-quick-start-task-header__title-failed {
670
- color: var(--pf-chart-global--danger--Color--100) !important; }
847
+ color: var(--pf-global--danger-color--100) !important; }
671
848
  .pfext-quick-start-task-header__task-icon-init {
672
849
  background-color: var(--pf-global--palette--blue-400);
673
850
  border-radius: var(--pf-global--BorderRadius--lg);
@@ -678,6 +855,13 @@
678
855
  width: 1.5em; }
679
856
  .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
680
857
  vertical-align: middle !important; }
858
+ .pfext-quick-start-task-header__task-icon-success {
859
+ color: var(--pf-global--palette--green-500) !important; }
860
+ .pfext-quick-start-task-header__task-icon-failed {
861
+ color: var(--pf-global--danger-color--100) !important; }
862
+
863
+ .pfext-quick-start-task-review-alert {
864
+ margin: var(--pf-global--spacer--lg) 0; }
681
865
 
682
866
  .pfext-quick-start-task-review {
683
867
  font-size: var(--pf-global--FontSize--md);
@@ -697,6 +881,9 @@
697
881
  .pfext-quick-start-task-review--failed {
698
882
  color: var(--pf-chart-global--danger--Color--100); }
699
883
 
884
+ .pfext-modal {
885
+ position: absolute !important; }
886
+
700
887
  .pfext-markdown-view .pfext-code-block__pre {
701
888
  /* override the styles applied by showdown while parsing <pre /> */
702
889
  display: flex;
@@ -718,9 +905,6 @@
718
905
  .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
719
906
  display: none; }
720
907
 
721
- .pfext-modal {
722
- position: absolute !important; }
723
-
724
908
  @keyframes pfext-spotlight-expand {
725
909
  0% {
726
910
  outline-offset: -4px;