e2c0845145
- cloudapi-gql@1.0.4 - joyent-cp-frontend@1.1.0 - joyent-cp-gql-mock-server@1.0.4 - joyent-cp-gql-schema@1.0.4 - joyent-cp-rdb-bootstrap@1.0.4 - normalized-styled-components@1.0.5 - pseudo-json-ast@1.0.6 - pseudo-yaml-ast@1.0.6 - remcalc@1.0.5 - rnd-id@1.0.5 - styled-is@1.0.7 - joyent-ui-toolkit@1.1.0 - unitcalc@1.0.5 |
||
|---|---|---|
| .. | ||
| src | ||
| test | ||
| .eslintignore | ||
| .eslintrc | ||
| .tern-project | ||
| CHANGELOG.md | ||
| package.json | ||
| README.md | ||
| yarn.lock | ||
styled-is
Flag utility for styled-components.
Table of Contents
Install
yarn add --dev styled-is
Usage
import is, { isNot, isOr, isSomeNot } from 'styled-is';
import styled from 'styled-components';
const Div = styled.div`
display: block;
opacity: 0;
${is('red')`
background-color: red;
`};
${is('blue')`
background-color: blue;
`};
${is('red', 'blue')`
opacity: 1;
`};
${is('left')`
float: left;
`};
${is('right')`
float: right;
`};
${isNot('left', 'right')`
float: center;
`};
${isOr('left', 'right')`
position: relative;
`};
${isSomeNot('red', 'left')`
wat: 1;
`};
`;
// display: block;
// opacity: 0;
// float: center;
// wat: 1;
<Div>
// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: center;
// wat: 1;
<Div red>
// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: left;
// position: relative;
<Div red left>
License
MPL-2.0