mozaik
Version:
Mozaik dashboard composition tool
60 lines (47 loc) • 2.2 kB
text/stylus
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:100,300|Open+Sans:400italic,400,300,700");
// GENERIC
$main-bg-color = rgb(40, 18, 18)
$main-txt-color = hsl(6, 26%, 67%)
$main-margin = 4vmin
$main-font = normal normal 400 unquote("2vmin/3vmin") "Open sans", sans-serif
$card-bg-color = rgb(69, 23, 23)
// DASHBOARD
$dashboard-header-height = 6vmin
$dashboard-header-txt-color = hsl(0, 52%, 60%)
$dashboard-header-font = normal normal 300 unquote("2.6vmin/6vmin") "Roboto Slab", sans-serif
// WIDGET
$widget-spacing = 0.4vmin
// WIDGET — header
$widget-header-txt-color = hsl(10, 60%, 90%)
$widget-header-icon-color = hsl(0, 52%, 60%)
$widget-header-border-bottom = 1px solid $main-bg-color
$widget-header-font = normal normal 100 2.5vmin "Roboto Slab", sans-serif
// COUNT
$count-bg-color = lighten($card-bg-color, 4)
$count-txt-color = hsl(0, 52%, 60%)
$count-border-radius = 2px
// WIDGET — header count
$widget-header-count-bg-color = $main-bg-color
// LABEL
$label-bg-color = lighten($card-bg-color, 5)
$label-txt-color = $widget-header-txt-color
$label-addon-bg-color = $main-bg-color
$label-addon-txt-color = $widget-header-icon-color
$label-border-radius = 2px
$notifications-bg-color = lighten($card-bg-color, 7)
// TABLE
$table-border-h = 1px solid $main-bg-color
// Meaningful colors
$unknown-color = #7e706d;
$success-color = #50a3b2;
$failure-color = #a31c12;
// CHARTS
$histogram-bar-bg-color = lighten($card-bg-color, 4)
$chart-axis-txt-color = $main-txt-color
$pie-chart-outline-stroke = darken($card-bg-color, 7)
$pie-chart-outline-stroke-width = 6px
$pie-gauge-needle-color = darken($main-bg-color, 7)
$pie-svg-legend-bg-color = lighten($card-bg-color, 5)
// PROPS
$prop-key-txt-color = $main-txt-color
$prop-value-txt-color = lighten($main-txt-color, 13)