GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:31:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update styles in a11y addon

Browse Source
This commit is contained in:
domyen 2019-02-07 11:36:30 -05:00
parent df6ee503f8
commit 153e6e05c2
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
addons/a11y/src/components/Report/Item.js
View File

@ -10,6 +10,16 @@ import Elements from './Elements';
const Wrapper = styled.div(); const Wrapper = styled.div();
const Icon = styled(Icons)(({ theme }) => ({
height: 10,
width: 10,
color: theme.color.mediumdark,
marginRight: '10px',
transition: 'transform 0.1s ease-in-out',
alignSelf: 'center',
display: 'inline-flex',
}));
const HeaderBar = styled.button(({ theme }) => ({ const HeaderBar = styled.button(({ theme }) => ({
padding: theme.layoutMargin, padding: theme.layoutMargin,
paddingLeft: theme.layoutMargin - 3, paddingLeft: theme.layoutMargin - 3,
@ -53,14 +63,12 @@ class Item extends Component {
return ( return (
<Wrapper> <Wrapper>
<HeaderBar onClick={this.onToggle}> <HeaderBar onClick={this.onToggle}>
<Icons <Icon
icon="chevrondown" icon="chevrondown"
size={10} size={10}
color="#9DA5AB" color="#9DA5AB"
style={{ style={{
marginRight: '10px',
transform: `rotate(${open ? 0 : -90}deg)`, transform: `rotate(${open ? 0 : -90}deg)`,
transition: 'transform 0.1s ease-in-out',
}} }}
/> />
{item.description} {item.description}

18
addons/a11y/src/components/Tabs.js
View File

@ -10,32 +10,32 @@ const Container = styled.div({
}); });
const List = styled.div(({ theme }) => ({ const List = styled.div(({ theme }) => ({
borderBottom: theme.mainBorder, boxShadow: `${theme.color.border} 0 -1px 0 0 inset`,
background: '#f8f8fc',
flexWrap: 'wrap', flexWrap: 'wrap',
display: 'flex', display: 'flex',
})); }));
const Item = styled.button( const Item = styled.button(
({ active }) => ({ active, theme }) =>
active active
? { ? {
opacity: 1, opacity: 1,
fontWeight: 600, borderBottom: `3px solid ${theme.color.secondary}`,
} }
: {}, : {},
({ theme }) => ({ ({ theme }) => ({
textDecoration: 'none', textDecoration: 'none',
textTransform: 'uppercase',
padding: '10px 15px', padding: '10px 15px',
letterSpacing: '1px',
cursor: 'pointer', cursor: 'pointer',
fontWeight: 500, fontWeight: `${theme.typography.weight.bold}`,
opacity: 0.7, fontSize: `${theme.typography.size.s2 - 1}px`,
lineHeight: 1,
height: 40,
border: 'none', border: 'none',
borderTop: '3px solid transparent', borderTop: '3px solid transparent',
borderBottom: '3px solid transparent', borderBottom: '3px solid transparent',
background: 'none', background: 'transparent',
flex: 1,
'&:focus': { '&:focus': {
outline: '0 none', outline: '0 none',