Refactor styles and remove patternfly utility classes

This commit is contained in:
Marliana Lara
2019-02-17 22:58:08 -05:00
parent 09107aef1f
commit 240d07b6d4
9 changed files with 90 additions and 67 deletions

View File

@@ -9,28 +9,26 @@ import './tabs.scss';
const Tabs = ({ children, labelText, closeButton }) => (
<div
aria-label={labelText}
className="pf-c-tabs pf-u-flex-direction-row pf-u-justify-content-space-between"
className="pf-c-tabs"
>
<ul className="pf-c-tabs__list">
{children}
</ul>
{closeButton
&& (
<div className="pf-u-align-self-center">
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
</div>
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
)
}
</div>

View File

@@ -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: '';