App Card

_borders.css

/* BORDERS */
@import '_colors';

/*
  Base:
  bw = border-width
  br = border-radius

  Modifiers:
  0 = 0 width border
  1 = 1st step in scale
  2 = 2nd step in scale
  3 = 3rd step in scale
  4 = 4th step in scale
  5 = 5th step in scale
*/

/* Border Base */
.ba {
  border-style: solid;
  border-width: 1px;
}

.bt {
  border-top-style: solid;
  border-top-width: 1px;
}

.br {
  border-right-style: solid;
  border-right-width: 1px;
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.bl {
  border-left-style: solid;
  border-left-width: 1px;
}

.bn {
  border-style: none;
  border-width: 0;
}

.b-solid {
  border-style: solid;
}

/* Border Width */
.bw0 { border-width: 0; }
.bw1 { border-width: 0.0625rem; }
.bw2 { border-width: 0.125rem; }
.bw3 { border-width: 0.25rem; }
.bw4 { border-width: 0.375rem; }
.bw5 { border-width: 0.5rem; }
.bw6 { border-width: 1rem; }

.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }

/* Border Radii */
.br0 { border-radius: 0; }
.br1 { border-radius: 0.125rem; }
.br2 { border-radius: 0.25rem; }
.br-100 { border-radius: 100%; }

.br--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.br--top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.br--right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.br--left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Border Colors */
.b-porcelain { border-color: var(--porcelain); }

.b-iron,
.b-disabled-hover-iron:disabled:hover { border-color: var(--iron); }

.b-hover-regent:hover { border-color: var(--regent); }
.b-hover-river-dark:hover { border-color: var(--river-dark); }

.b-focus-mako:focus { border-color: var(--mako); }

.b-active-slate:active { border-color: var(--slate); }

.b-river-light { border-color: var(--river-light); }
.b-emerald { border-color: var(--emerald); }
.b-amaranth { border-color: var(--amaranth); }
.b-dandelion { border-color: var(--dandelion); }

.b-transparent { border-color: var(--transparent); }

/* Single-Direction Border Colors */
.br-regent { border-right-color: var(--regent); }

.br-river { border-right-color: var(--river); }

/* Outlines */
.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }

.shadow-border-1-iron { box-shadow: inset 0 0 0 1px var(--iron); }

app-card.css

.item {
  lost-column: 1/3;
  composes: mb4 from '_spacing';
}

.card {
  composes: ba br2 bw2 b-iron b-hover-regent b-active-slate from '_borders';
  composes: flex from '_flexbox';
  composes: relative from '_position';
  composes: pa3 from '_spacing';
  composes: transition-s-cubic from '_transitions';
}

.icon {
  composes: mr3 from '_spacing';
  composes: w4 h4 from '_sizing';
}

.name {
  composes: body from '_typography';
  composes: mb0 from '_spacing';
}

.tagline { composes: legal t-regent from '_typography'; }

.type {
  composes: absolute from '_position';
  composes: top-2 right-2 from '_position';
}

app-card.js

import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import Icon from 'components/icon';
import CSSModules from 'react-css-modules';
import styles from './app-card.pcss';
import { idSlug } from 'core/utils';

const AppCard = ({ appIcon, displayName, id, name, tagline, type }) => {
  return (
    <li styleName="item">
      <Link styleName="card" to={`/apps/${idSlug(id, name)}`}>
        <img alt={displayName} src={appIcon} styleName="icon" />
        <div>
          <p styleName="name">{displayName}</p>
          <p styleName="tagline">{tagline}</p>
        </div>
        <div styleName="type">
          <Icon color="regent" icon={type} />
        </div>
      </Link>
    </li>);
};

AppCard.propTypes = {
  appIcon: PropTypes.string,
  displayName: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  tagline: PropTypes.string,
  type: PropTypes.oneOf(['app', 'setting', 'os'])
};

export default CSSModules(AppCard, styles);