joyent-portal/packages/styled-is
Sérgio Ramos e2c0845145 chore: publish
- 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
2017-05-25 16:07:31 +01:00
..
src chore: initial lerna setup 2017-05-25 10:56:50 +01:00
test chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.eslintignore chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.eslintrc chore: initial lerna setup 2017-05-25 10:56:50 +01:00
.tern-project chore: initial lerna setup 2017-05-25 10:56:50 +01:00
CHANGELOG.md chore: publish 2017-05-25 16:07:31 +01:00
package.json chore: publish 2017-05-25 16:07:31 +01:00
README.md chore: initial lerna setup 2017-05-25 10:56:50 +01:00
yarn.lock chore: update dependencies 2017-05-25 13:47:44 +01:00

styled-is

License: MPL 2.0 npm standard-readme compliant

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