mirror of
https://github.com/yldio/copilot.git
synced 2024-12-25 03:10:06 +02:00
.. | ||
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