1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 06:00:06 +02:00

feat(cp-frontend,ui-toolkit): style inheritance using .extend (#458)

styled-components@2 exposes a new `.extend`[1] API. It is less problematic than
styled(Parent).

[1]: https://www.styled-components.com/docs/basics#extending-styles
This commit is contained in:
Sérgio Ramos 2017-05-25 15:59:58 +01:00 committed by Wyatt Preul
parent 91381bfe80
commit f3e531dbd8
28 changed files with 35 additions and 35 deletions

View File

@ -3,7 +3,7 @@ import { Grid } from 'react-styled-flexboxgrid';
import { breakpoints } from 'joyent-ui-toolkit';
export default styled(Grid)`
export default Grid.extend`
padding: 2rem;
${breakpoints.large`

View File

@ -14,7 +14,7 @@ const StyledDiv = styled.div`
margin-bottom: ${remcalc(18)};
`;
const StyledH2 = styled(H2)`
const StyledH2 = H2.extend`
color: ${props => props.theme.primary};
margin: 0;
`;

View File

@ -13,7 +13,7 @@ const StyledHeader = styled.div`
padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)};
`;
const StyledLogo = styled(Img)`
const StyledLogo = Img.extend`
width: ${remcalc(87)};
height: ${remcalc(25)};
`;

View File

@ -9,11 +9,11 @@ import remcalc from 'remcalc';
import { breakpoints, Ul, Li } from 'joyent-ui-toolkit';
import { LayoutContainer } from '@components/layout';
const StyledHorizontalList = styled(Ul)`
const StyledHorizontalList = Ul.extend`
padding: 0;
`;
const StyledHorizontalListItem = styled(Li)`
const StyledHorizontalListItem = Li.extend`
${breakpoints.smallOnly`
display: block;
`}

View File

@ -20,17 +20,17 @@ import {
// import { servicesForTopologySelector } from '@state/selectors';
const StyledLegend = styled(Legend)`
const StyledLegend = Legend.extend`
float: left;
padding-top: ${unitcalc(2)};
margin-right: ${unitcalc(1.5)};
`;
const PaddedRow = styled(Row)`
const PaddedRow = Row.extend`
margin-bottom: ${remcalc(18)}
`;
const StyledForm = styled(FormGroup)`
const StyledForm = FormGroup.extend`
width: 60%;
float: left;
margin: 0;

View File

@ -15,7 +15,7 @@ const style = css`
`}
`;
const StyledAnchor = styled(A)`
const StyledAnchor = A.extend`
${style}
`;

View File

@ -28,6 +28,6 @@ const unitsFromProps = props =>
)
.join(';\n');
export default Component => styled(Component)`
${unitsFromProps}
`;
export default Component => Component.extend
? Component.extend`${unitsFromProps}`
: styled(Component)`${unitsFromProps}`;

View File

@ -148,7 +148,7 @@ const style = css`
`}
`;
const StyledButton = styled(NButton)`
const StyledButton = NButton.extend`
min-width: ${remcalc(120)};
${style}
@ -157,7 +157,7 @@ const StyledButton = styled(NButton)`
}
`;
const StyledAnchor = styled(A)`
const StyledAnchor = A.extend`
display: inline-block;
${style}
`;

View File

@ -9,7 +9,7 @@ import { Row } from 'react-styled-flexboxgrid';
import PropTypes from 'prop-types';
import React from 'react';
const StyledCard = styled(Row)`
const StyledCard = Row.extend`
position: relative;
height: auto;
min-height: ${remcalc(126)};

View File

@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
import Title from './title';
import React from 'react';
const StyledTitle = styled(Title)`
const StyledTitle = Title.extend`
${typography.fontFamily};
${typography.normal};

View File

@ -4,7 +4,7 @@ import Baseline from '../baseline';
import View from './view';
import React from 'react';
const StyledView = styled(View)`
const StyledView = View.extend`
display: block;
padding: ${remcalc(62, 23, 5, 23)};
background-color: ${props => props.grey};

View File

@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
import Baseline from '../baseline';
import Card from './card';
const StyledCard = styled(Card)`
const StyledCard = Card.extend`
position: absolute;
background-color: ${props => props.theme.primary};

View File

@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
import View from './view';
import React from 'react';
const InnerRow = styled(Row)`
const InnerRow = Row.extend`
display: block;
height: 100%;

View File

@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
import Button from '../button';
import React from 'react';
const StyledNav = styled(Nav)`
const StyledNav = Nav.extend`
flex: 0 0 ${remcalc(47)};
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
box-sizing: border-box;
@ -18,7 +18,7 @@ const StyledNav = styled(Nav)`
`};
`;
const StyledButton = styled(Button)`
const StyledButton = Button.extend`
position: relative;
border-width: 0;
box-shadow: none;

View File

@ -8,7 +8,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import React from 'react';
const StyledCol = styled(Col)`
const StyledCol = Col.extend`
${typography.fontFamily};
${typography.normal};

View File

@ -29,7 +29,7 @@ const Span = styled.span`
`};
`;
const StyledTitle = styled(Title)`
const StyledTitle = Title.extend`
display: inline-block;
padding: 0 ${remcalc(18)};

View File

@ -7,7 +7,7 @@ import { Row } from 'react-styled-flexboxgrid';
import PropTypes from 'prop-types';
import React from 'react';
const StyledView = styled(Row)`
const StyledView = Row.extend`
flex: 1;
margin: 0;
height: auto;

View File

@ -9,7 +9,7 @@ import unitcalc from 'unitcalc';
import is from 'styled-is';
import rndId from 'rnd-id';
const StyledInput = styled(Input)`
const StyledInput = Input.extend`
display: none;
&:checked + label::after {

View File

@ -2,7 +2,7 @@ import styled from 'styled-components';
import { Fieldset } from 'normalized-styled-components';
import Baseline from '../baseline';
const StyledFieldset = styled(Fieldset)`
const StyledFieldset = Fieldset.extend`
display: inline-block;
margin: 0;
padding: 0;

View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import remcalc from 'remcalc';
import Label from '../label';
const StyledLabel = styled(Label)`
const StyledLabel = Label.extend`
margin-right: ${remcalc(12)};
`;

View File

@ -3,7 +3,7 @@ import { Legend } from 'normalized-styled-components';
import Baseline from '../baseline';
import typography from '../typography';
const StyledLegend = styled(Legend)`
const StyledLegend = Legend.extend`
${typography.fontFamily};
${typography.semibold};
`;

View File

@ -7,7 +7,7 @@ import Label from '../label';
import PropTypes from 'prop-types';
import React from 'react';
const StyledLabel = styled(Label)`
const StyledLabel = Label.extend`
${breakpoints.medium`
text-align: right;
`};

View File

@ -11,7 +11,7 @@ import Baseline from '../baseline';
import BaseInput from './base/input';
import typography from '../typography';
const StyledInput = styled(Input)`
const StyledInput = Input.extend`
display: none;
&:checked + label {

View File

@ -3,7 +3,7 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components';
import theme from '../theme';
import Base, { global } from '../base';
const StyledBase = styled(Base)`
const StyledBase = Base.extend`
background-color: transparent;
`;

View File

@ -3,7 +3,7 @@ import { H1 as NH1 } from 'normalized-styled-components';
import remcalc from 'remcalc';
import typography from '../typography';
export const H1 = styled(NH1)`
export const H1 = NH1.extend`
${typography.fontFamily};
${typography.medium};

View File

@ -3,7 +3,7 @@ import { Small } from 'normalized-styled-components';
import remcalc from 'remcalc';
import typography from '../typography';
export default styled(Small)`
export default Small.extend`
${typography.fontFamily};
${typography.normal};

View File

@ -31,7 +31,7 @@ const Preview = styled.div`
width: 100%;
`;
const Paragraph = styled(P)`
const Paragraph = P.extend`
margin: 0;
`;

View File

@ -11,7 +11,7 @@ import TopologyLink from './link';
import TopologyLinkArrow from './link/arrow';
import { calculateLineLayout } from './link/functions';
const StyledSvg = styled(Svg)`
const StyledSvg = Svg.extend`
width: 100%;
height: 1400px;
`;