diff --git a/src/app.scss b/src/app.scss index 393c1ac3f6..48e43d0421 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,3 +1,8 @@ +// https://github.com/patternfly/patternfly-react/issues/1294 +#app { + height: 100%; +} + // // masthead overrides // @@ -44,7 +49,6 @@ } .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; } @@ -70,16 +74,6 @@ padding-bottom: 10px; } -// -// toolbar overrides -// - -.pf-l-toolbar { - align-self: center; - height: 60px; -} - - // // data list overrides // @@ -99,7 +93,7 @@ .pf-c-data-list__item { --pf-c-data-list__item--PaddingLeft: 20px; - --pf-c-data-list__item--PaddingRight: 0px; + --pf-c-data-list__item--PaddingRight: 20px; } .pf-c-data-list__check { @@ -116,8 +110,24 @@ margin-right: 20px; } -.pf-c-data-list__cell a { - margin-right: 8px; +.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; + + a { + margin-right: 8px; + } +} + +// +// switch overrides +// +// https://github.com/patternfly/patternfly-next/issues/915 +.pf-c-switch { + .pf-c-switch__label::before { + display: none; + } } // @@ -143,19 +153,15 @@ } } -// -// 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 { + --pf-c-modal-box--Width: 550px; + --pf-c-modal-box--MaxWidth: 550px; +} + .pf-c-modal-box__footer { --pf-c-modal-box__footer--PaddingTop: 20px; --pf-c-modal-box__footer--PaddingRight: 20px; @@ -189,6 +195,10 @@ padding: 0; } +.pf-c-card__body { + --pf-c-card__body--PaddingTop: 24px; +} + // // pf empty state overrides // @@ -205,11 +215,10 @@ .awx-lookup { min-height: 36px; -} -.awx-c-modal { - width: 550px; - margin: 0; + .pf-c-form-control { + --pf-c-form-control--Height: auto; + } } .awx-c-icon--remove { diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss index 535d6aacaf..23ec65dba8 100644 --- a/src/components/DataListToolbar/styles.scss +++ b/src/components/DataListToolbar/styles.scss @@ -5,6 +5,7 @@ border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor); background-color: var(--awx-toolbar--BackgroundColor); + display: flex; height: 70px; padding-top: 5px; @@ -13,6 +14,10 @@ --pf-global--FontSize--md: 14px; } +.awx-toolbar .pf-l-level { + flex: 1; +} + .awx-toolbar .pf-c-button.pf-m-plain { --pf-c-button--m-plain--PaddingLeft: 0px; --pf-c-button--m-plain--PaddingRight: 0px; @@ -43,6 +48,7 @@ height: 30px; input { + height: 30px; padding: 0 10px; width: 300px; } @@ -60,6 +66,10 @@ padding: 0 10px; margin: 0px; + .pf-c-dropdown__toggle-text { + width: auto; + } + .pf-c-dropdown__toggle-icon { margin: 0px; padding-top: 3px; diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index 0dbfc59813..4ccc673d7e 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -136,7 +136,6 @@ class Lookup extends React.Component {
{this.wrapTags(value)}
{({ i18n }) => ( -
  • -
    -
    - - {name} - -
    +
  • +
    + + {name} + {notificationType}
    -
    -
    +
    {({ i18n }) => ( @@ -68,6 +71,7 @@ class PageHeaderToolbar extends Component { toggle={( @@ -99,15 +103,17 @@ class PageHeaderToolbar extends Component { toggle={( )} dropdownItems={[ - - - {i18n._(t`User Details`)} - + + {i18n._(t`User Details`)} ,
    -
    +
    {label}
    diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx index 590d171cf8..a305c7d8e3 100644 --- a/src/components/Tabs/Tabs.jsx +++ b/src/components/Tabs/Tabs.jsx @@ -9,28 +9,26 @@ import './tabs.scss'; const Tabs = ({ children, labelText, closeButton }) => (
      {children}
    {closeButton && ( -
    - - - - - -
    + + + + + ) }
    diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss index c8e9c5c96f..651be6acba 100644 --- a/src/components/Tabs/tabs.scss +++ b/src/components/Tabs/tabs.scss @@ -10,7 +10,10 @@ --pf-global--link--Color: #484848; --pf-global--link--Color--hover: #484848; --pf-global--link--TextDecoration--hover: none; - --pf-global--FontWeight--normal: 700; + + align-items: center; + flex-direction: row; + justify-content: space-between; &:before { border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor); @@ -27,6 +30,7 @@ --pf-c-tabs__button--PaddingLeft: 20px; --pf-c-tabs__button--PaddingRight: 20px; display: block; + font-weight: 700; &:after { content: ''; diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx index 9d40a0f0a7..765634403d 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx @@ -94,7 +94,7 @@ class OrganizationDetail extends Component { return ( {({ i18n }) => ( - +
    -
    +