Created
August 30, 2016 17:33
-
-
Save Vpr99/43c241cdc66603630f643d1dd4573e86 to your computer and use it in GitHub Desktop.
App Card
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment