mozaik
Version:
Mozaik dashboard composition tool
79 lines (65 loc) • 2.86 kB
text/stylus
@import url("https://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Montserrat:400,700")
// GENERIC
$main-bg-color = #1e2430
$main-txt-color = #eedba5
$main-font = normal normal 400 unquote("1.6vmin/3vmin") "Raleway", sans-serif
// DASHBOARD
$dashboard-header-height = 5vmin
$dashboard-header-txt-color = #e0c671
$dashboard-header-font = normal normal 400 unquote("2.6vmin/5vmin") "Raleway", sans-serif
// WIDGET
$widget-bg-color = #2b3847
$widget-shadow = 0 1px 1px rgba(0, 0, 0, 0.35)
$widget-border-radius = 2px
$widget-border = none
// WIDGET — header
$widget-header-border = none
$widget-header-bg-color = #323f53
$widget-header-txt-color = #eedba5
$widget-header-icon-color = #e0c671
$widget-header-shadow = 0 1px 0 #495b71 inset
$widget-header-border-bottom = 1px solid #253246
$widget-header-font = normal normal 400 1.6vmin "Montserrat", sans-serif
// WIDGET — header count
$widget-header-count-bg-color = #1e2836
$widget-header-count-txt-color = #7e9ebc
$widget-header-count-shadow = 0 1px 0 rgba(0, 0, 0, 0.5) inset
$widget-header-count-txt-shadow = 0 1px 0 rgba(0, 0, 0, 0.5)
$widget-header-count-border = none
// WIDGET — body
$widget-body-border = none
$widget-body-bg-color = transparent
$widget-body-shadow = none
// TABLE
$table-border-h = 1px solid #253246
// COUNT
$count-padding = 3px 7px
$count-bg-color = #1e2836
$count-txt-color = $main-txt-color
$count-border-radius = 2px
$count-border = none
// LABEL
$label-bg-color = #212e41
$label-txt-color = $widget-header-txt-color
$label-addon-bg-color = #1e2836
$label-addon-txt-color = $widget-header-txt-color
$label-border-radius = 2px
// NOTIFICATIONS
$notifications-bg-color = lighten($widget-header-bg-color, 5)
$notifications-txt-color = $widget-header-txt-color
$notifications-shadow = 0 1px 1px rgba(0, 0, 0, 0.85)
// Meaningful color
$unknown-color = #495b71
$success-color = #4ec2b4
$warning-color = #d1be65
$failure-color = #de5029
// CHART
$chart-elements-color = lighten($widget-bg-color, 40)
$histogram-bar-bg-color = lighten($widget-bg-color, 7)
$pie-chart-outline-stroke = #27313e
$pie-chart-outline-stroke-width = 6px
$pie-gauge-needle-color = #151b26
$pie-svg-legend-bg-color = $widget-header-bg-color
// PROPS
$prop-key-txt-color = $main-txt-color
$prop-value-txt-color = lighten($main-txt-color, 10)