@patternfly/quickstarts 1.3.0 → 2.0.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
 
@@ -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; }
@@ -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,24 +825,26 @@
652
825
  margin-bottom: var(--pf-global--spacer--xs); }
653
826
 
654
827
  .pfext-quick-start-task-header {
655
- 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); }
656
832
  .pfext-quick-start-task-header button::before {
657
833
  content: none; }
658
834
  .pfext-quick-start-task-header__title {
659
835
  color: var(--pf-global--primary-color--100) !important;
660
836
  margin-right: var(--pf-global--spacer--md) !important; }
661
837
  .pfext-quick-start-task-header__subtitle {
662
- display: inline-block;
663
838
  font-size: var(--pf-global--FontSize--sm);
664
839
  color: var(--pf-global--Color--400) !important; }
665
840
  .pfext-quick-start-task-header__tryagain {
666
841
  display: block;
667
- font-size: var(--pf-global--FontSize--sm);
842
+ font-size: var(--pf-global--FontSize--md);
668
843
  color: var(--pf-global--Color--300) !important; }
669
844
  .pfext-quick-start-task-header__title-success {
670
845
  color: var(--pf-global--palette--green-500) !important; }
671
846
  .pfext-quick-start-task-header__title-failed {
672
- color: var(--pf-chart-global--danger--Color--100) !important; }
847
+ color: var(--pf-global--danger-color--100) !important; }
673
848
  .pfext-quick-start-task-header__task-icon-init {
674
849
  background-color: var(--pf-global--palette--blue-400);
675
850
  border-radius: var(--pf-global--BorderRadius--lg);
@@ -680,6 +855,13 @@
680
855
  width: 1.5em; }
681
856
  .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
682
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; }
683
865
 
684
866
  .pfext-quick-start-task-review {
685
867
  font-size: var(--pf-global--FontSize--md);