awx/src/app.scss

// https://github.com/patternfly/patternfly-react/issues/1294
#app {
  height: 100%;
}

//
// masthead overrides
//

.pf-c-page__header-brand {
  max-width: 255px;
}

.pf-c-page__header-brand-link {
  max-width: 85px;
}

.pf-c-page__header-brand-link img {
  transform: scale(1.1, 1.1);
  position: relative;
}

.pf-c-page__header-tools .pf-l-toolbar__item {
  margin-left: 20px;
}

.pf-c-page__header-tools .pf-c-dropdown__toggle:before {
  --pf-c-dropdown__toggle--BorderBottomColor: var(
    --pf-global--BackgroundColor--light-100
  );
  --pf-c-dropdown__toggle--hover--BorderBottomColor: var(
    --pf-global--BackgroundColor--light-100
  );
  --pf-c-dropdown__toggle--expanded--BorderBottomColor: var(
    --pf-global--BackgroundColor--light-100
  );
}

.pf-c-page__header {
  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-icon {
    --pf-c-dropdown__toggle-icon--MarginLeft: 10px;
  }
}

//
// sidebar overrides
//

.pf-c-page__sidebar {
  --pf-c-page__sidebar--md--Width: 255px;

  .pf-c-nav {
    overflow-y: auto;

    .pf-c-nav__section {
      --pf-c-nav__section--MarginTop: 8px;
    }

    .pf-c-nav__section + .pf-c-nav__section {
      --pf-c-nav__section--MarginTop: 8px;
    }

    .pf-c-nav__simple-list .pf-c-nav__link {
      --pf-c-nav__simple-list-link--PaddingBottom: 6px;
      --pf-c-nav__simple-list-link--PaddingTop: 6px;
    }

    .pf-c-nav__section-title {
      --pf-c-nav__section-title--PaddingLeft: 24px;
    }

    .pf-c-nav__link {
      display: flex;
      align-items: center;
      padding-right: 64px;
    }
  }
}

//
// page header overrides
//

.pf-c-page__main-section.pf-m-condensed {
  padding-top: 10px;
  padding-bottom: 10px;
}

//
// data list overrides
//

.pf-c-data-list {
  --pf-global--target-size--MinHeight: 32px;
  --pf-global--target-size--MinWidth: 32px;
  --pf-global--FontSize--md: 14px;

  .pf-c-badge:not(:last-child),
  .pf-c-switch:not(:last-child) {
    margin-right: 18px;
  }
}

.pf-c-data-list__item-row {
  --pf-c-data-list__item-row--PaddingRight: 20px;
  --pf-c-data-list__item-row--PaddingLeft: 20px;
}

.pf-c-data-list__item-content {
  --pf-c-data-list__item-content--PaddingBottom: 16px;

  min-height: 59px;
  align-items: center;
}

.pf-c-data-list__item-control {
  --pf-c-data-list__item-control--PaddingTop: 16px;
  --pf-c-data-list__item-control--MarginRight: 8px;
  --pf-c-data-list__item-control--PaddingBottom: 16px;
}

.pf-c-data-list__item {
  --pf-c-data-list__item--PaddingLeft: 20px;
  --pf-c-data-list__item--PaddingRight: 20px;
}

.pf-c-data-list__cell {
  --pf-c-data-list__cell--PaddingTop: 16px;
  --pf-c-data-list__cell-cell--PaddingTop: 16px;


  &.pf-c-data-list__cell--divider {
    --pf-c-data-list__cell-cell--MarginRight: 0;
    --pf-c-data-list__cell--PaddingTop: 12px;
    flex-grow: 0;
  }
}

//
// switch overrides
// https://github.com/patternfly/patternfly-next/issues/915
//

.pf-c-switch {
  .pf-c-switch__label::before {
    display: none;
  }
}

//
// about modal overrides
//

.pf-c-backdrop .pf-c-about-modal-box {
  --pf-c-about-modal-box--MaxHeight: 40rem;
  --pf-c-about-modal-box--MaxWidth: 63rem;
}

.pf-c-list {
  li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}

//
// pf modal overrides
//

.awx-c-modal.pf-c-modal-box {
  margin: 0;
  padding: 24px;
  width: 600px;

  .pf-c-modal-box__body {
    overflow: visible;
  }

  .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
    margin-right: 20px;
  }
}

.pf-c-modal-box__footer {
  --pf-c-modal-box__footer--PaddingTop: 20px;
  --pf-c-modal-box__footer--PaddingRight: 20px;
  --pf-c-modal-box__footer--PaddingBottom: 20px;
  --pf-c-modal-box__footer--PaddingLeft: 20px;
  justify-content: flex-end;
}

.pf-c-modal-box__header {
  --pf-c-modal-box__header--PaddingTop: 10px;
  --pf-c-modal-box__header--PaddingRight: 0;
  --pf-c-modal-box__header--PaddingBottom: 0;
  --pf-c-modal-box__header--PaddingLeft: 20px;
}

.pf-c-modal-box__body {
  --pf-c-modal-box__body--PaddingLeft: 20px;
  --pf-c-modal-box__body--PaddingRight: 20px;
  --pf-c-modal-box__body--PaddingBottom: 5px;
}

//
// pf card overrides
//

// specificity hack to override PatternFly
.pf-c-card.pf-c-card {
  --pf-c-card--child--PaddingRight: 20px;
  --pf-c-card--child--PaddingBottom: 24px;
  --pf-c-card--child--PaddingLeft: 20px;

  display: flex;
  position: relative;
}

.pf-c-card__close {
  position: absolute;
  top: 5px;
  right: 4px;
  color: var(--pf-c-button--m-plain--Color);

  &.pf-c-button {
    position: absolute;
  }
}

.pf-c-card__header {
  padding: 0;
}

.pf-c-card__body {
  --pf-c-card__body--PaddingTop: 24px;
}

//
// pf tooltip overrides
//

.pf-c-tooltip__content {
  --pf-c-tooltip__content--PaddingTop: 0.71rem;
  --pf-c-tooltip__content--PaddingRight: 0.71rem;
  --pf-c-tooltip__content--PaddingBottom: 0.71rem;
  --pf-c-tooltip__content--PaddingLeft: 0.71rem;
}
// higher specificity needed to override PF styles added dynamically to page
.pf-c-tooltip .pf-c-tooltip__content {
  text-align: left;
}

//
// pf empty state overrides
//

.pf-c-empty-state {
  align-self: center;
}

//
// assorted custom component styles
// note that these should be given a consistent prefix
// and bem style, as well as moved into component-based scss files
//

.awx-lookup .pf-c-form-control {
  --pf-c-form-control--Height: 90px;
  overflow-y: auto;
}

.at-c-listCardBody {
  --pf-c-card__footer--PaddingX: 0;
  --pf-c-card__footer--PaddingY: 0;
  --pf-c-card__body--PaddingX: 0;
  --pf-c-card__body--PaddingY: 0;
}

.awx-c-card {
  position: relative;
}

//
// PF Alert notification component overrides
//

.pf-c-alert__title {
  --pf-c-alert__title--PaddingTop: 20px;
  --pf-c-alert__title--PaddingRight: 20px;
  --pf-c-alert__title--PaddingBottom: 20px;
  --pf-c-alert__title--PaddingLeft: 20px;
}

.pf-c-alert__description {
  --pf-c-alert__description--PaddingRight: 20px;
  --pf-c-alert__description--PaddingBottom: 20px;
  --pf-c-alert__description--PaddingLeft: 20px;
}

.pf-c-alert {
  position: absolute;
  width: 100%;
  z-index: 20;
}

.pf-c-alert__icon {
  --pf-c-alert__icon--Color: white;
}

.at-u-textRight {
  text-align: right;
}

.awx-c-chip {
  padding: 3px 0;
  height: 24px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.awx-orgTabs-container{
  display: flex
}

.awx-orgTabs__bottom-border{
  flex-grow: 1;
  border-bottom: 1px solid #d2d2d2
}

//
// AlertModal styles
//

.at-c-alertModal.pf-c-modal-box {
  border: 0;
  border-left: 56px solid black;

  .at-c-alertModal__icon {
    position: absolute;
    font-size: 23px;
    top: 28px;
    left: -39px;
  }
}

.at-c-alertModal--warning.pf-c-modal-box {
  border-color: var(--pf-global--warning-color--100);

  .pf-c-title {
    color: var(--pf-global--warning-color--200);
  }

  .at-c-alertModal__icon {
    color: var(--pf-global--warning-color--200);
  }
}

.at-c-alertModal--danger.pf-c-modal-box {
  border-color: var(--pf-global--danger-color--100);

  .pf-c-title {
    color: var(--pf-global--danger-color--200);
  }

  .at-c-alertModal__icon {
    color: white;
  }
}

.at-c-alertModal--info.pf-c-modal-box {
  border-color: var(--pf-global--info-color--100);

  .pf-c-title {
    color: var(--pf-global--info-color--200);
  }

  .at-c-alertModal__icon {
    color: var(--pf-global--info-color--200);
  }
}

.at-c-alertModal--success.pf-c-modal-box {
  border-color: var(--pf-global--success-color--100);

  .pf-c-title {
    color: var(--pf-global--success-color--200);
  }

  .at-c-alertModal__icon {
    color: var(--pf-global--success-color--200);
  }
}

//
// LoginModal overrides
//

.pf-m-error p.pf-c-form__helper-text {
  color: var(--pf-global--danger-color--100);
}