psychic-ui/src/psychic-paper.styl

the working mans css framework

$grid-columns = 12
$grid-gutter = 0

$border-radius = 5px
$bright-text-lightness = 90%
$bright-border-lightness = 99%

$breakpoints = {
  sm: 32em
  md: 48em
  lg: 64em
  xl: 80em
}

$brands = {
    white: #ffffff
    black: #000000
    default: #c3c3c3
    primary: #2196f3
    success: #4caf50
    info: #9c27b0
    warning: #ff9800
    danger: #e51c23
}

$colors = {
    link: #0079ad
}

$button = {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4)
}

$alert = {
    border-radius: $border-radius
}

$dropdown = {
    border: 1px solid $brands['default']
}

$table = {
    padding: 10px
}

$navbar = {
    border-width: 1px
    border-color: $brands['default']
}

$nav = {
    border-width: 3px
    border-color: $brands['primary']
}

$popover = {
    border-radius: $border-radius
}

$progress = {
    border: 1px solid $brands['default']
    background-color: $brands['primary']
    padding: 5px
    height: 10px
    font-size: 9px
}

$list = {
    border: 1px solid $brands['default']
    border-radius: $border-radius
}

$badge = {
    padding: 5px
    border-radius: 100px
}

$callout = {
    padding: 15px
    border-color: #eee
}

@import 'utils/normalize.css'
@import 'helper/helper.styl'
@import 'typography/typography.styl'
@import 'grid/grid.styl'
@import 'table/table.styl'
@import 'navbar/navbar.styl'
@import 'nav/nav.styl'
@import 'nav-tab/nav-tab.styl'
@import 'spinner/spinner.styl'
@import 'button/button.styl'
@import 'popover/popover.styl'
@import 'progress/progress.styl'
@import 'list/list.styl'
@import 'dropdown/dropdown.styl'
@import 'modal/modal.styl'
@import 'panel/panel.styl'
@import 'badge/badge.styl'
@import 'icon/icon.styl'
@import 'alert/alert.styl'
@import 'callout/callout.styl'