@patternfly/quickstarts 6.0.0-alpha.2 → 6.0.0-alpha.4

package/src/ConsoleInternal/components/catalog/_catalog.scss

@@ -1,392 +0,0 @@
-@use 'sass:math';
-
-// frontend/public/style/_vars.scss
-$font-size-base: 14px;
-$pfext-m-catalog-tile-height: 100%;
-$pfext-m-catalog-tile-width: 260px;
-
-$catalog-capability-level-icon-left: -20px;
-$catalog-capability-level-icon-top: 4px;
-$catalog-capability-level-inactive-color: var(--pf-t--global--text--color--disabled);
-$catalog-item-icon-size-lg: 40px;
-$catalog-item-icon-size-sm: 24px;
-$pfext-modal-ignore-warning-icon-width: 30px;
-$catalog-tile-width: $pfext-m-catalog-tile-width;
-
-// reset font size back to 13px since console h5 font size is 14px
-.catalog-item-header-pf-subtitle {
-  font-size: 13px;
-}
-
-.catalog-tile-pf-body .catalog-tile-pf-subtitle {
-  font-size: ($font-size-base - 1);
-}
-
-.pfext-catalog {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  min-width: 515px; // in order to accommodate filters and tiles at mobile
-}
-
-.pfext-catalog-tile-view {
-  display: flex;
-  flex-wrap: wrap;
-  --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, 260px) !important;
-}
-
-.pfext-catalog__body {
-  min-width: 575px; // Minimum shrinkable width of .pfext-catalog child elements => 15 + ((220 + 15) + (30 + 250 + 30)) + 15
-  @media (min-width: $screen-sm-min) {
-    min-width: 590px; // Left margin 30 instead of 15
-  }
-}
-
-.pfext-catalog-item-details {
-  display: flex;
-  margin: 0 0 10px;
-
-  &__description {
-    white-space: pre-wrap;
-  }
-
-  &__kind-label {
-    font-weight: var(--pf-t--global--font--weight--body--bold);
-  }
-
-  &__name {
-    margin-bottom: 10px;
-  }
-
-  &__provider,
-  &__tags {
-    margin-bottom: 5px;
-  }
-
-  &__tag {
-    color: $color-pf-black-600;
-    font-size: ($font-size-base - 1);
-    margin-right: 5px;
-    text-transform: uppercase;
-  }
-}
-
-.pfext-catalog-item-icon {
-  padding-right: 10px;
-
-  &__icon {
-    font-size: $catalog-item-icon-size-sm;
-
-    &--large {
-      font-size: $catalog-item-icon-size-lg;
-    }
-  }
-
-  &__img {
-    max-height: $catalog-item-icon-size-sm;
-    max-width: $catalog-item-icon-size-sm;
-
-    &[src$='.svg'] {
-      width: $catalog-item-icon-size-sm;
-    }
-
-    &--large {
-      max-height: $catalog-item-icon-size-lg;
-      max-width: $catalog-item-icon-size-lg;
-
-      &[src$='.svg'] {
-        width: $catalog-item-icon-size-lg;
-      }
-    }
-  }
-}
-
-.pfext-catalog-page {
-  background: $color-pf-white;
-  border: 1px solid var(--pf-t--global--border--color--default);
-  display: flex;
-  flex: 1;
-  padding-top: math.div($grid-gutter-width, 2);
-
-  &--with-sidebar {
-    margin: 0 math.div($grid-gutter-width, 2);
-    padding-bottom: math.div($grid-gutter-width, 2);
-  }
-
-  &__btn-group__group-by {
-    display: inline;
-    margin-left: var(--pf-t--global--spacer--md);
-  }
-
-  &__content {
-    flex: 1 1 auto;
-    overflow: hidden;
-  }
-
-  &__description {
-    margin-top: -10px;
-    padding: 0 math.div($grid-gutter-width, 2) 10px;
-    @media (min-width: $grid-float-breakpoint) {
-      padding-left: $grid-gutter-width;
-      padding-right: $grid-gutter-width;
-    }
-  }
-
-  &__filter {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__filter-toggle {
-    margin-top: 5px;
-  }
-
-  &__grid {
-    background-color: $color-pf-black-150;
-  }
-
-  &__grouped-items {
-    margin-bottom: var(--pf-t--global--spacer--md);
-  }
-
-  &__group-title {
-    margin-bottom: var(--pf-t--global--spacer--sm);
-  }
-
-  &__header {
-    margin: 0 $grid-gutter-width 0 0;
-  }
-
-  &__heading {
-    font-size: 16px;
-    margin: 0 0 20px 30px;
-  }
-
-  &__hint {
-    margin: 0 0 var(--pf-t--global--spacer--md) 0;
-  }
-
-  &__input {
-    display: inline-flex !important;
-    margin: 0 0 20px 30px;
-    width: auto !important;
-  }
-
-  &__sort {
-    display: inline;
-    margin-left: var(--pf-t--global--spacer--md);
-  }
-
-  &__num-items {
-    font-weight: var(--pf-t--global--font--weight--body--bold);
-    padding: 0 0 20px;
-  }
-
-  &__info-icon {
-    vertical-align: middle;
-    color: #6a6e73;
-    &:hover {
-      color: #151515;
-    }
-  }
-
-  // Enable scrolling on the modal
-  &__overlay {
-    border: 0 !important; // Collapse default PF4 modal border-width
-
-    .modal-body .pfext-hint-block {
-      margin-bottom: 10px;
-    }
-
-    .properties-side-panel-pf {
-      flex: 0 0 auto;
-    }
-  }
-
-  &__overlay--right {
-    bottom: 0;
-    padding: 0 !important;
-    right: 0;
-    top: 4.75rem; // --pf-v6-c-page__header--MinHeight
-
-    .pf-v6-c-modal-box__body {
-      // Required to position scroll shadows correctly on Chrome
-      display: flex;
-      flex-direction: column;
-      margin: 0 !important;
-      padding: 0;
-    }
-
-    .modal-body-inner-shadow-covers {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-    }
-
-    h1 {
-      white-space: normal;
-    }
-  }
-
-  &__overlay-action {
-    align-items: baseline;
-    display: inline-flex !important;
-    margin: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) 0 0;
-    overflow-x: hidden;
-  }
-
-  &__overlay-action-icon {
-    flex-shrink: 0;
-    font-size: $font-size-base;
-    margin-left: 6px;
-  }
-
-  &__overlay-action-label {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &__overlay-actions {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: var(--pf-t--global--spacer--md);
-    white-space: normal;
-  }
-
-  &__overlay-header {
-    margin-bottom: var(--pf-t--global--spacer--md);
-  }
-
-  &__overlay-body {
-    margin: 0;
-    padding-left: var(--pf-t--global--spacer--lg);
-    padding-right: var(--pf-t--global--spacer--lg);
-    padding-top: var(--pf-t--global--spacer--md);
-    @media (min-width: $screen-sm-min) {
-      display: flex;
-    }
-  }
-
-  &__overlay-description {
-    margin: 20px 0 0;
-    white-space: pre-wrap;
-    // TODO: find fix for urls that don't wrap
-    // fix below causes undesirable wrapping on non-urls
-    // word-break: break-all;
-    h1,
-    h2,
-    h3 {
-      color: #333; // same color as styles hardcoded in markdown text component
-    }
-
-    h2 {
-      font-size: 20px;
-    }
-
-    p,
-    li,
-    ol {
-      color: #333; // same color as styles hardcoded in markdown text component
-      font-size: $font-size-base !important;
-    }
-
-    @media (min-width: $screen-sm-min) {
-      flex: 1 1 auto;
-      margin-left: 20px;
-      margin-top: 0;
-    }
-  }
-
-  &__tabs {
-    flex: 0 0 220px;
-    margin: 0 math.div($grid-gutter-width, 2) 0 0;
-  }
-}
-
-@media screen and (min-width: $screen-sm) {
-  .pf-v6-c-modal-box.pfext-catalog-page__overlay {
-    width: 600px;
-  }
-}
-
-@media screen and (min-width: $screen-md) {
-  .pf-v6-c-modal-box.pfext-catalog-page__overlay {
-    width: 900px;
-  }
-}
-
-.pfext-catalog-tab__empty {
-  color: $color-pf-black-600;
-}
-
-.pfext-modal-ignore-warning {
-  height: initial;
-
-  &__checkbox.checkbox {
-    margin-bottom: 0;
-    padding-top: 15px;
-  }
-  &__content {
-    display: flex;
-  }
-  &__icon {
-    font-size: $pfext-modal-ignore-warning-icon-width;
-    margin-right: 15px;
-    // Avoid the dialog shifting when the icon loads.
-    min-width: $pfext-modal-ignore-warning-icon-width;
-  }
-  &__link {
-    display: block;
-    margin: 10px 0;
-  }
-}
-
-.properties-side-panel-pf-property-label {
-  font-size: ($font-size-base - 1);
-}
-
-.properties-side-panel-pf-property-value__capability-level {
-  color: $catalog-capability-level-inactive-color;
-  margin-bottom: 5px;
-  position: relative;
-
-  &--active {
-    color: inherit;
-
-    &::before {
-      display: none; // hide empty circle since icon is present
-    }
-  }
-
-  &::before {
-    // empty circle
-    border: 1px solid $catalog-capability-level-inactive-color;
-    border-radius: 10px;
-    content: '';
-    height: 14px;
-    left: $catalog-capability-level-icon-left;
-    position: absolute;
-    top: $catalog-capability-level-icon-top;
-    width: 14px;
-  }
-
-  &:not(:last-child)::after {
-    // pipe after circle
-    background: $catalog-capability-level-inactive-color;
-    content: '';
-    height: 6px;
-    left: -13px;
-    position: absolute;
-    top: 21px;
-    width: 1px;
-  }
-}
-
-.properties-side-panel-pf-property-value__capability-level-icon {
-  left: $catalog-capability-level-icon-left;
-  position: absolute;
-  top: $catalog-capability-level-icon-top;
-}
-
-.properties-side-panel-pf-property-value__capability-levels {
-  list-style: none;
-}

package/src/ConsoleInternal/components/utils/_status-box.scss

@@ -1,58 +0,0 @@
-.pfext-status-box {
-  padding: 40px 20px;
-
-  &__loading-message {
-    margin-top: var(--pf-t--global--spacer--sm);
-  }
-}
-
-.pfext-status-box--loading {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  min-height: 50px;
-  width: 100%;
-  flex-direction: column;
-}
-
-.pfext-m-loader {
-  min-width: 18px;
-}
-
-.pfext-m-loader-dot__one,
-.pfext-m-loader-dot__two,
-.pfext-m-loader-dot__three {
-  animation-delay: 0;
-  animation-direction: normal;
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: bouncedelay;
-  animation-play-state: running;
-  animation-timing-function: ease-in-out;
-  background: #419eda;
-  border-radius: 100%;
-  display: inline-block;
-  height: 6px;
-  width: 6px;
-}
-
-.pfext-m-loader-dot__one {
-  animation-delay: -0.32s;
-}
-
-.pfext-m-loader-dot__two {
-  animation-delay: -0.16s;
-}
-
-@keyframes bouncedelay {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.25, 0.25);
-  }
-  40% {
-    transform: scale(1, 1);
-  }
-}

package/src/ConsoleShared/src/components/layout/PageLayout.scss

@@ -1,29 +0,0 @@
-.pfext-page-layout {
-  &__content {
-    padding: var(--pf-t--global--spacer--lg);
-    flex: 1;
-  }
-
-  &__header {
-    padding-top: 1px;
-    background-color: var(--pf-t--global--background--color--primary--default);
-  }
-
-  &__hint {
-    padding-left: var(--pf-t--global--spacer--lg);
-    padding-right: var(--pf-t--global--spacer--lg);
-    padding-bottom: var(--pf-t--global--spacer--md);
-    font-size: 14px;
-  }
-
-  &__title {
-    padding-left: var(--pf-t--global--spacer--lg);
-    padding-right: var(--pf-t--global--spacer--lg);
-    font-size: var(--pf-t--global--font--size--heading--h1);
-    margin-top: 23px;
-    margin-bottom: 11.5px;
-    font-family: var(--pf-t--global--font--family--heading);
-    font-weight: var(--pf-t--global--font--weight--heading);
-    line-height: 1.1;
-  }
-}

package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss

@@ -1,52 +0,0 @@
-.pfext-markdown-view {
-  .pfext-code-block__pre {
-    /* override the styles applied by showdown while parsing <pre /> */
-    display: flex;
-    border: none;
-    border-radius: none;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-  }
-  
-  .pfext-markdown-execute-snippet {
-  
-    &__button {
-      & > i.fa-check {
-        display: none;
-      }
-  
-      & > i.fa-play {
-        display: inline;
-      }
-  
-      &[data-executed] {
-        & > i.fa-check {
-          display: inline;
-        }
-  
-        & > i.fa-play {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .pfext-markdown-admonition {
-    &.pf-v6-c-alert {
-      // add margins to match design
-      margin: var(--pf-t--global--spacer--md) 0;
-      .pf-v6-c-alert__title {
-        // remove margins from markdown css
-        margin-top: 0;
-        margin-bottom: 0;
-        // lift PF style specificity to override markdown css
-        font-weight: var(--pf-v6-c-alert__title--FontWeight);
-        font-family: inherit;
-        line-height: inherit;
-        color: var(--pf-v6-c-alert__title--Color);
-        word-break: break-word;
-      }
-    }
-  }
-}

package/src/ConsoleShared/src/components/modal/Modal.scss

@@ -1,3 +0,0 @@
-.pfext-modal {
-  position: absolute !important;
-}

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -1,63 +0,0 @@
-@keyframes pfext-spotlight-expand {
-  0% {
-    outline-offset: -4px;
-    outline-width: 4px;
-    opacity: 1;
-  }
-  100% {
-    outline-offset: 21px;
-    outline-width: 12px;
-    opacity: 0;
-  }
-}
-
-@keyframes pfext-spotlight-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes pfext-spotlight-fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.pfext-spotlight {
-  pointer-events: none;
-  position: absolute;
-  &__with-backdrop {
-    mix-blend-mode: hard-light;
-  }
-  &__element-highlight-noanimate {
-    border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);
-    background-color: var(--pf-t--color--gray--40);
-    z-index: 9999;
-  }
-  &__element-highlight-animate {
-    pointer-events: none;
-    position: absolute;
-    box-shadow: inset 0px 0px 0px 4px var(--pf-t--global--color--brand--default);
-    opacity: 0;
-    animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
-    animation-fill-mode: forwards;
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
-      animation-fill-mode: forwards;
-      outline: 4px solid var(--pf-t--global--color--brand--default);
-      outline-offset: -4px;
-    }
-  }
-}

package/src/QuickStartDrawer.scss

@@ -1,11 +0,0 @@
-.pfext-quick-start-drawer {
-  &__body {
-    display: flex;
-    flex-direction: column;
-    z-index: 0;
-    position: relative;
-  }
-  &__modal > .pf-v6-c-modal-box__footer {
-    display: block;
-  }
-}

package/src/catalog/QuickStartCatalog.scss

@@ -1,8 +0,0 @@
-.pfext-quick-start-catalog {
-  &__gallery {
-    --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
-  }
-  &__gallery-item {
-    display: inherit !important;
-  }
-}

package/src/catalog/QuickStartTileDescription.scss

@@ -1,29 +0,0 @@
-.pfext-quick-start-tile {
-  &-description {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-
-    p {
-      margin: 0 0 11.5px;
-    }
-  }
-
-  &-prerequisites {
-    display: inline-flex;
-    &__text {
-      margin-right: var(--pf-t--global--spacer--sm);
-      font-size: var(--pf-t--global--font--size--md);
-      margin-top: 11.5px;
-      margin-bottom: 11.5px;
-      font-family: var(--pf-t--global--font--family--heading);
-      font-weight: var(--pf-t--global--font--weight--heading);
-      line-height: 1.1;
-    }
-
-    &-list {
-      padding-left: 20px;
-    }
-  }
-}

package/src/catalog/QuickStartTileHeader.scss

@@ -1,16 +0,0 @@
-.pfext-quick-start-tile-header {
-  &__status {
-    margin: var(--pf-t--global--spacer--sm) 0;
-  }
-  &--margin {
-    margin-right: var(--pf-t--global--spacer--sm);
-    margin-bottom: var(--pf-t--global--spacer--sm);
-  }
-  & .pf-v6-c-badge:not(:last-of-type) {
-    margin-right: var(--pf-t--global--spacer--sm);
-  }
-
-  h3 {
-    flex: 1;
-  }
-}

package/src/catalog/Toolbar/QuickStartCatalogFilter.scss

@@ -1,25 +0,0 @@
-.pfext-quick-start-catalog-filter {
-  &__input {
-    flex-grow: 1;
-    max-width: 500px;
-  }
-
-  &__count {
-    font-weight: var(--pf-t--global--font--weight--body--bold);
-  }
-}
-
-.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex {
-  --pf-v6-c-toolbar--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toolbar--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toolbar--RowGap: 0;
-  font-size: 14px;
-
-  .pf-v6-c-select {
-    --pf-v6-c-select__toggle--FontSize: 14px;
-  }
-
-  .pf-v6-c-check {
-    --pf-v6-c-check__label--FontSize: 14px;
-  }
-}