awx/src/app.scss

//
// 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);
}

//
// 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--PaddingLeft: 24px;
      --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;
}

//
// toolbar overrides
//

.pf-l-toolbar {
  align-self: center;
  height: 60px;
}


//
// 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-data-list__item--PaddingTop: 16px;
  --pf-c-data-list__item--PaddingBottom: 16px;

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

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

.pf-c-data-list__check {
  --pf-c-data-list__check--MarginRight: 0;
}

.pf-c-data-list__check:after {
  content: "";
  background-color: #d7d7d7;
  width: 1px;
  height: 25px;
  display: block;
  margin-left: 20px;
  margin-right: 20px;
}

.pf-c-data-list__cell a {
  margin-right: 8px;
}

//
// 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-c-input-group__text {
  &:hover {
    cursor: pointer;
  }
}

//
// data list overrides
//

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

//
// pf modal overrides
//

.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
//

.pf-c-card {
  display: flex;
}

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

//
// 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 {
  min-height: 36px;
}

.awx-c-modal {
  width: 550px;
  margin: 0;
}

.awx-c-icon--remove {
  padding-left: 10px;
  &:hover {
    cursor: pointer;
  }
}

.awx-c-list {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}

.awx-c-tag--pill {
  color: var(--pf-global--BackgroundColor--light-100);
  background-color: rgb(0, 123, 186);
  border-radius: 3px;
  margin: 1px 2px;
  padding: 0 10px;
  display: inline-block;
}

.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;
}