@patternfly/quickstarts 2.0.1 → 2.2.1

package/dist/patternfly-nested.css

@@ -4589,6 +4589,205 @@
       @media screen and (min-width: 576px) {
         .pfext-quick-start__base .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
           --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight); } }
+  .pfext-quick-start__base .pf-c-options-menu {
+    --pf-c-options-menu__toggle--BackgroundColor: transparent;
+    --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle--MinWidth: 0;
+    --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
+    --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
+    --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
+    --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+    --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
+    --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
+    --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
+    --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+    --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
+    --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+    --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
+    --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
+    --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
+    --pf-c-options-menu--m-top__menu--Top: 0;
+    --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+    --pf-c-options-menu__menu-item--BackgroundColor: transparent;
+    --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
+    --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
+    --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
+    --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+    --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
+    --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
+    --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
+    --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
+    --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
+    --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
+    --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
+    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
+    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+    --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
+    --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
+    position: relative;
+    display: inline-block;
+    max-width: 100%; }
+    .pfext-quick-start__base .pf-c-options-menu .pf-c-divider {
+      margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
+      margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom); }
+      .pfext-quick-start__base .pf-c-options-menu .pf-c-divider:last-child {
+        --pf-c-options-menu--c-divider--MarginBottom: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: "";
+    border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
+    border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
+    border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
+    border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: var(--pf-c-options-menu__toggle--MinWidth);
+    max-width: 100%;
+    padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+    line-height: var(--pf-c-options-menu__toggle--LineHeight);
+    color: var(--pf-c-options-menu__toggle--Color);
+    background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
+    border: none; }
+    .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-text) {
+      padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
+      padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
+      padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom); }
+    .pf-c-options-menu.pf-m-expanded > .pfext-quick-start__base .pf-c-options-menu__toggle::before {
+      --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
+      border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth); }
+    .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain {
+      --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
+      --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
+      display: inline-block; }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
+        justify-content: center;
+        color: var(--pf-c-options-menu__toggle--m-plain--Color); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+        line-height: var(--pf-c-options-menu__toggle--LineHeight); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:hover, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:active, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:focus,
+      .pf-c-options-menu.pf-m-expanded > .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain {
+        --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:disabled {
+        --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color); }
+    .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled {
+      pointer-events: none; }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pfext-quick-start__base .pf-c-options-menu__toggle:disabled.pf-m-text {
+        --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled::before, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled::before {
+        border: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-button-icon {
+    position: relative; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-button {
+    padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
+    background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
+    border: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-icon {
+    margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
+    margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft); }
+    .pf-c-options-menu.pf-m-top.pf-m-expanded .pfext-quick-start__base .pf-c-options-menu__toggle-icon {
+      transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate)); }
+  .pfext-quick-start__base .pf-c-options-menu__menu {
+    position: absolute;
+    top: var(--pf-c-options-menu__menu--Top);
+    z-index: var(--pf-c-options-menu__menu--ZIndex);
+    min-width: 100%;
+    padding-top: var(--pf-c-options-menu__menu--PaddingTop);
+    padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
+    background-color: var(--pf-c-options-menu__menu--BackgroundColor);
+    background-clip: padding-box;
+    box-shadow: var(--pf-c-options-menu__menu--BoxShadow); }
+    .pfext-quick-start__base .pf-c-options-menu__menu.pf-m-align-right {
+      right: 0; }
+    .pf-c-options-menu.pf-m-top .pfext-quick-start__base .pf-c-options-menu__menu {
+      --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
+      transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY)); }
+  .pfext-quick-start__base .pf-c-options-menu__menu-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
+    font-size: var(--pf-c-options-menu__menu-item--FontSize);
+    color: var(--pf-c-options-menu__menu-item--Color);
+    white-space: nowrap;
+    background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
+    border: none; }
+    .pfext-quick-start__base .pf-c-options-menu__menu-item:hover, .pfext-quick-start__base .pf-c-options-menu__menu-item:focus {
+      text-decoration: none;
+      background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor); }
+    .pfext-quick-start__base .pf-c-options-menu__menu-item:disabled, .pfext-quick-start__base .pf-c-options-menu__menu-item.pf-m-disabled {
+      color: var(--pf-c-options-menu__menu-item--disabled--Color);
+      pointer-events: none;
+      background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor); }
+  .pfext-quick-start__base .pf-c-options-menu__menu-item-icon {
+    align-self: center;
+    width: auto;
+    padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
+    margin-left: auto;
+    font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
+    color: var(--pf-c-options-menu__menu-item-icon--Color); }
+  .pfext-quick-start__base .pf-c-options-menu__group + .pfext-quick-start__base .pf-c-options-menu__group {
+    padding-top: var(--pf-c-options-menu__group--group--PaddingTop); }
+  .pfext-quick-start__base .pf-c-options-menu__group-title {
+    padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
+    padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
+    padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
+    padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
+    font-size: var(--pf-c-options-menu__group-title--FontSize);
+    font-weight: var(--pf-c-options-menu__group-title--FontWeight);
+    color: var(--pf-c-options-menu__group-title--Color); }
   
   .pfext-quick-start__base .pf-c-page__main-wizard.pf-m-limit-width {
     display: flex;
@@ -4715,6 +4914,9 @@
         --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft); } }
     .pfext-quick-start__base .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
       margin-right: var(--pf-c-pagination--child--MarginRight); }
+    .pfext-quick-start__base .pf-c-pagination .pf-c-options-menu {
+      display: var(--pf-c-pagination--c-options-menu--Display);
+      visibility: var(--pf-c-pagination--c-options-menu--Visibility); }
     .pfext-quick-start__base .pf-c-pagination.pf-m-bottom {
       --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
       --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
@@ -4731,6 +4933,10 @@
         --pf-c-pagination--m-bottom--BorderTopWidth: 0;
         position: relative;
         box-shadow: none; }
+      .pfext-quick-start__base .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+        position: absolute;
+        display: block;
+        visibility: visible; }
       @media screen and (min-width: 768px) {
         .pfext-quick-start__base .pf-c-pagination.pf-m-bottom {
           --pf-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -4738,7 +4944,11 @@
           --pf-c-pagination--m-bottom--Bottom: auto;
           position: relative;
           justify-content: flex-end;
-          padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft); } }
+          padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft); }
+          .pfext-quick-start__base .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+            position: relative; } }
+    .pfext-quick-start__base .pf-c-pagination .pf-c-options-menu__toggle {
+      font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize); }
     .pfext-quick-start__base .pf-c-pagination.pf-m-compact {
       --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight); }
   .pfext-quick-start__base .pf-c-popover {

package/dist/quickstarts-base.css

@@ -20,6 +20,9 @@
 .pfext-quick-start-panel-content__body input[type="radio"] {
   margin-right: 7px; }
 
+.pfext-quick-start-panel-content__body .pf-c-list {
+  --pf-c-list--PaddingLeft: 20px; }
+
 .pfext-quick-start-panel-content__header,
 .pfext-quick-start-panel-content__body,
 .pfext-page-layout__content,
@@ -369,6 +372,7 @@
     background: var(--pf-global--palette--black-150); }
 
 .pfext-page-layout__header {
+  padding-top: 1px;
   background-color: var(--pf-global--BackgroundColor--light-100); }
 
 .pfext-page-layout__hint {
@@ -408,6 +412,17 @@
 .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
   display: none; }
 
+.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert {
+  margin: var(--pf-global--spacer--md) 0; }
+  .pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: var(--pf-c-alert__title--FontWeight);
+    font-family: inherit;
+    line-height: inherit;
+    color: var(--pf-c-alert__title--Color);
+    word-break: break-word; }
+
 .pfext-modal {
   position: absolute !important; }
 
@@ -615,8 +630,6 @@
 .pfext-quick-start-panel-content__body {
   display: flex;
   flex-direction: column; }
-  .pfext-quick-start-panel-content__body ul, .pfext-quick-start-panel-content__body ol {
-    padding-left: 20px; }
 
 .pfext-quick-start-panel-content__title {
   display: flex;
@@ -765,7 +778,6 @@
   margin-bottom: var(--pf-global--spacer--xs); }
 
 .pfext-quick-start-tasks__list .pfext-quick-start-task__content {
-  margin-left: var(--pf-global--spacer--lg);
   margin-bottom: var(--pf-global--spacer--md); }
 
 .pfext-quick-start-tasks__list .task-pflist-title {
@@ -836,7 +848,7 @@
     margin-right: var(--pf-global--spacer--md) !important; }
   .pfext-quick-start-task-header__subtitle {
     font-size: var(--pf-global--FontSize--sm);
-    color: var(--pf-global--Color--400) !important; }
+    color: var(--pf-global--Color--dark-200) !important; }
   .pfext-quick-start-task-header__tryagain {
     display: block;
     font-size: var(--pf-global--FontSize--md);
@@ -905,6 +917,17 @@
 .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
   display: none; }
 
+.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert {
+  margin: var(--pf-global--spacer--md) 0; }
+  .pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: var(--pf-c-alert__title--FontWeight);
+    font-family: inherit;
+    line-height: inherit;
+    color: var(--pf-c-alert__title--Color);
+    word-break: break-word; }
+
 @keyframes pfext-spotlight-expand {
   0% {
     outline-offset: -4px;