mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40: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:
parent
91381bfe80
commit
f3e531dbd8
@ -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`
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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)};
|
||||
`;
|
||||
|
@ -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;
|
||||
`}
|
||||
|
@ -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;
|
||||
|
@ -15,7 +15,7 @@ const style = css`
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledAnchor = styled(A)`
|
||||
const StyledAnchor = A.extend`
|
||||
${style}
|
||||
`;
|
||||
|
||||
|
@ -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}`;
|
||||
|
@ -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}
|
||||
`;
|
||||
|
@ -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)};
|
||||
|
@ -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};
|
||||
|
||||
|
@ -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};
|
||||
|
@ -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};
|
||||
|
@ -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%;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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};
|
||||
|
||||
|
@ -29,7 +29,7 @@ const Span = styled.span`
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledTitle = styled(Title)`
|
||||
const StyledTitle = Title.extend`
|
||||
display: inline-block;
|
||||
padding: 0 ${remcalc(18)};
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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)};
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
`;
|
||||
|
@ -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;
|
||||
`};
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
`;
|
||||
|
||||
|
@ -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};
|
||||
|
||||
|
@ -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};
|
||||
|
||||
|
@ -31,7 +31,7 @@ const Preview = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Paragraph = styled(P)`
|
||||
const Paragraph = P.extend`
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user