aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Tabs.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Tabs.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx44
1 files changed, 17 insertions, 27 deletions
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index ece0db866..0a62fa334 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -15,6 +15,7 @@ const StyledTabList = styled(TabList)`
`;
const StyledTab = styled(Tab)`
+ background-color: ${props => props.theme.colors.secondary};
height: 2.5rem;
padding-left: 1rem;
padding-right: 1rem;
@@ -25,41 +26,30 @@ const StyledTab = styled(Tab)`
&:not(:first-of-type) {
margin-left: 0.25rem;
}
-`;
-
-const Root =
- styled.div <
- { colors: any } >
- `
- ${StyledTab} {
- background-color: ${props => props.theme.colors.secondary};
- &[aria-selected="true"] {
- background-color: ${colors.gray};
- }
+ &[aria-selected='true'] {
+ background-color: ${colors.gray};
+ }
- &[aria-selected="false"]:focus,
- &[aria-selected="false"]:hover {
- background-color: ${props => props.theme.colors.secondary_alt};
- cursor: pointer;
- }
+ &[aria-selected='false']:focus,
+ &[aria-selected='false']:hover {
+ background-color: ${props => props.theme.colors.secondary_alt};
+ cursor: pointer;
}
`;
const Tabs: React.StatelessComponent<{}> = props => (
<Breakout>
- <Root>
- <ReactTabs>
- <StyledTabList>
- {React.Children.map(props.children, child => {
- const { title } = React.cloneElement(child as React.ReactElement<any>).props;
- return <StyledTab>{title}</StyledTab>;
- })}
- </StyledTabList>
+ <ReactTabs>
+ <StyledTabList>
+ {React.Children.map(props.children, child => {
+ const { title } = React.cloneElement(child as React.ReactElement<any>).props;
+ return <StyledTab>{title}</StyledTab>;
+ })}
+ </StyledTabList>
- {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
- </ReactTabs>
- </Root>
+ {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+ </ReactTabs>
</Breakout>
);