// 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); } // // 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 { --pf-c-data-list__item--PaddingLeft: 20px; --pf-c-data-list__item--PaddingRight: 20px; align-items: center; } .pf-c-data-list__cell { --pf-c-data-list__cell--PaddingTop: 16px; --pf-c-data-list__cell--PaddingBottom: 16px; --pf-c-data-list__cell-cell--PaddingTop: 16px; .awx-c-list-group { display: inline-flex; margin-right: 20px; &--badge { align-items: center; display: flex; justify-content: center; margin-left: 10px; } } } // // 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 // .pf-c-card { display: flex; } .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; } .awx-c-list { border-bottom: 1px solid #d7d7d7; } .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; } .OrgsTab-closeButton { color: black; float: right; position: relative; top: -25px; margin: 0 10px; right: 10px; } .awx-c-form-action-group { float: right; display: block; .pf-m-danger { margin-top: 20px; margin-right: 20px; } } // // 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); }