diff --git a/src/pages/Organizations/components/OrganizationDetail.jsx b/src/pages/Organizations/components/OrganizationDetail.jsx
index 88ffca54ec..458ae73736 100644
--- a/src/pages/Organizations/components/OrganizationDetail.jsx
+++ b/src/pages/Organizations/components/OrganizationDetail.jsx
@@ -6,10 +6,7 @@ import {
CardHeader,
CardBody,
PageSection,
- PageSectionVariants,
- ToolbarGroup,
- ToolbarItem,
- ToolbarSection,
+ PageSectionVariants
} from '@patternfly/react-core';
import {
Switch,
@@ -23,9 +20,9 @@ import '../tabs.scss';
const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
const tabClasses = () => {
- let classes = 'at-c-tabs__tab';
+ let classes = 'pf-c-tabs__item';
if (tab === currentTab) {
- classes += ' at-m-selected';
+ classes += ' pf-m-current';
}
return classes;
@@ -43,11 +40,14 @@ const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) =
};
return (
-
-
- {children}
-
-
+
+
+ {children}
+
+
);
};
@@ -96,8 +96,8 @@ const OrganizationDetail = ({
const detailTabs = (tabs) => (
{({ i18n }) => (
-
-
+
+
{tabs.map(tab => (
))}
-
-
+
+
)}
);
diff --git a/src/pages/Organizations/tabs.scss b/src/pages/Organizations/tabs.scss
index 324bdb1c89..b6877022ff 100644
--- a/src/pages/Organizations/tabs.scss
+++ b/src/pages/Organizations/tabs.scss
@@ -1,22 +1,50 @@
-.at-c-tabs {
- padding: 0 5px !important;
- margin: 0 -10px !important;
-
- .at-c-tabs__tab {
- margin: 0 5px;
- }
-
- .at-c-tabs__tab.at-m-selected {
- text-decoration: underline;
- }
-}
-
.at-c-orgPane {
a {
display: block;
}
}
+.pf-c-card__header {
+ --pf-c-card__header--PaddingBottom: 0;
+ --pf-c-card__header--PaddingLeft: 0;
+ --pf-c-card__header--PaddingRight: 0;
+ --pf-c-card__header--PaddingTop: 0;
+}
+
+.pf-c-tabs {
+ --pf-global--link--Color: #484848;
+ --pf-global--link--Color--hover: #484848;
+ --pf-global--link--TextDecoration--hover: none;
+
+ &:before {
+ border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
+ border-top: 1px solid var(--pf-c-tabs__item--BorderColor);
+ bottom: 0;
+ content: " ";
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+
+ .pf-c-tabs__button {
+ --pf-c-tabs__button--PaddingLeft: 20px;
+ --pf-c-tabs__button--PaddingRight: 20px;
+ }
+
+ .pf-c-tabs__item.pf-m-current
+ .pf-c-tabs__button::after {
+ border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
+ border-top: none;
+ }
+
+ .pf-c-tabs__item:not(.pf-m-current):hover
+ .pf-c-tabs__button::after {
+ border-bottom: 3px solid var(--pf-global--Color--dark-200);
+ border-top: none;
+ }
+}
+
.pf-c-breadcrumb__item.heading {
flex: 100%;
font-size: 20px;