Created
October 22, 2014 15:23
-
-
Save ravenwilde/e8070de9ad543a05b0f4 to your computer and use it in GitHub Desktop.
Sass files to style the interface that displays the data layout created by the javascript in my charts.js gist
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
$font-family-sans-serif : 'Ubuntu', Arial, sans-serif; | |
$font-family-numbers : 'Ubuntu Mono', Arial, sans-serif; | |
/* COLORS */ | |
$white : #FFFFFF; | |
$ghost : #FAFAFA; | |
$jet : #222222; | |
$black : #000000; | |
$mh-blue : #204985; | |
$mh-green : #48BD08; | |
// Google Chart Colors | |
$google-blue : #3366cc; | |
$google-red : #dc3912; | |
$google-orange : #ff9900; | |
$google-green : #109618; | |
$google-purple : #990099; | |
$google-teal : #0099c6; | |
$google-pink : #dd4477; | |
$google-lime : #66aa00; | |
$google-dark-red : #b82e2e; | |
$google-charts : ( | |
$google-blue, | |
$google-red, | |
$google-orange, | |
$google-green, | |
$google-purple, | |
$google-teal, | |
$google-pink, | |
$google-lime, | |
$google-dark-red | |
); | |
$background-color-body : mix($jet, $mh-blue, 45%); | |
$background-color-container : mix($jet, $mh-blue, 30%); | |
$base-font-color: transparentize($ghost, .1); | |
/* TYPOGRAPHY */ | |
// base typography styles generated with gridlover.net | |
$base-font-size : 16px; | |
$base-line-height : 26px; | |
$measure : 1080px; | |
$h1-font-size : 68px; | |
$h1-line : 26px; | |
$h1-lines : 3; | |
$h1-line-height : $h1-line * $h1-lines; | |
$h1-margin-top : 2 * $h1-line; | |
$h1-margin-bottom : 1 * $h1-line; | |
$h2-font-size : 42px; | |
$h2-line : 26px; | |
$h2-lines : 2; | |
$h2-line-height : $h2-line * $h2-lines; | |
$h2-margin-top : 2 * $h2-line; | |
$h2-margin-bottom : 1 * $h2-line; | |
$h3-font-size : 26px; | |
$h3-line : 26px; | |
$h3-lines : 1; | |
$h3-line-height : $h3-line * $h3-lines; | |
$h3-margin-top : 1 * $h3-line; | |
$h3-margin-bottom : 1 * $h3-line; | |
$h4-font-size : 16px; | |
$h4-line : 26px; | |
$h4-lines : 1; | |
$h4-line-height : $h4-line * $h4-lines; | |
$h4-margin-top : 1 * $h4-line; | |
$h4-margin-bottom : 1 * $h4-line; | |
$headers : ( | |
h1 : ( | |
font-size : $h1-font-size, | |
line-height : $h1-line-height, | |
margin-top : $h1-margin-top, | |
margin-bottom : $h1-margin-bottom, | |
), | |
h2 : ( | |
font-size : $h2-font-size, | |
line-height : $h2-line-height, | |
margin-top : $h2-margin-top, | |
margin-bottom : $h2-margin-bottom, | |
), | |
h3 : ( | |
font-size : $h3-font-size, | |
line-height : $h3-line-height, | |
margin-top : $h3-margin-top, | |
margin-bottom : $h3-margin-bottom, | |
), | |
h4 : ( | |
font-size : $h4-font-size, | |
line-height : $h4-line-height, | |
margin-top : $h4-margin-top, | |
margin-bottom : $h4-margin-bottom, | |
), | |
) |
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
/* MIXINS */ | |
@mixin chart-keys($color-list) { | |
@each $color in $color-list { | |
$i: index($color-list, $color); | |
&:nth-child(#{$i}) .key-color { | |
background-color: $color; | |
border: 1px solid darken($color, 2%); | |
width: rem(35px); | |
height: rem(35px); | |
border-radius: 100%; | |
} | |
} | |
} | |
/* PARTIALS */ | |
%header { | |
font-weight: 300; | |
font-family: $font-family-sans-serif; | |
} | |
%numbers { | |
font-family: $font-family-sans-serif; | |
} | |
%large-number { | |
display: block; | |
font-weight: 700; | |
margin: 0; | |
line-height: .75em; | |
text-align: center; | |
} | |
%container { | |
background-color: $background-color-container; | |
padding: golden-ratio(300px, -5); | |
border-radius: 5px; | |
box-shadow: | |
0px 5px 0px darken($background-color-container, 5%), | |
2px 5px 0px darken($background-color-container, 5%), | |
-2px 5px 0px darken($background-color-container, 5%), | |
2px -1px 0px darken($background-color-container, 5%), | |
-2px -1px 0px darken($background-color-container, 5%); | |
} | |
/* BASE STYLES */ | |
body { | |
background-color: $background-color-body; | |
font-family: $font-family-sans-serif; | |
color: $base-font-color; | |
margin: 0; | |
padding: 0; | |
} | |
/* TYPOGRAPHY */ | |
@each $header, $value in $headers { | |
#{$header} { | |
@extend %header; | |
font-size: map-get($value, font-size); | |
line-height: map-get($value, line-height); | |
margin-top: map-get($value, margin-top); | |
margin-bottom: map-get($value, margin-bottom); | |
} | |
} | |
table { | |
font-size: 1.7rem; | |
} | |
/* BASIC LAYOUT */ | |
header { | |
background-color: $white; | |
opacity: .95; | |
box-shadow: 0px 10px 0px darken($background-color-container, 2%); | |
section { | |
margin-top: 0; | |
} | |
img { | |
@include span-columns(4); | |
margin-top: map-get(map-get($headers, h1), margin-top); | |
margin-bottom: map-get(map-get($headers, h1), margin-bottom); | |
} | |
} | |
section { | |
@include outer-container; | |
position: relative; | |
margin-top: map-get(map-get($headers, h1), margin-top); | |
margin-bottom: map-get(map-get($headers, h1), margin-bottom); | |
} | |
.numberCallout { | |
@include span-columns(4); | |
&#unassignedTickets { | |
@include shift(1); | |
} | |
&#openTickets { | |
@include shift(2); | |
} | |
} | |
#responseLabel { | |
@include span-columns(5); | |
@include shift(1); | |
display: block; | |
margin-top: (map-get(map-get($headers, h1), margin-bottom) * 1.75); | |
} | |
#responseAverage { | |
@include span-columns(5); | |
@include omega; | |
margin-top: map-get(map-get($headers, h1), margin-bottom); | |
margin-bottom: map-get(map-get($headers, h1), margin-bottom); | |
} | |
#staffChart, | |
#bugChart { | |
@include span-columns(6); | |
} | |
#staffTable, | |
#bugTable { | |
@include span-columns(5); | |
@include shift(1); | |
@include omega; | |
} | |
/* MODULES */ | |
.numberCallout { | |
position: relative; | |
@extend %container; | |
padding: golden-ratio(300px, -5); | |
text-align: center; | |
.number { | |
@extend %numbers; | |
@extend %large-number; | |
font-size: golden-ratio($h1-font-size,2); | |
} | |
} | |
#responseStats { | |
@extend %container; | |
.number { | |
@extend %numbers; | |
@extend %large-number; | |
font-size: golden-ratio($h2-font-size,2); | |
} | |
.label { | |
font-weight: 400; | |
width: 100%; | |
} | |
} | |
.label { | |
font-size: $h2-font-size; | |
text-align: center; | |
font-weight: 400; | |
width: em(90px); | |
margin-right: auto; | |
margin-left: auto; | |
margin-bottom: 0; | |
margin-top: golden-ratio($h2-font-size,-2); | |
} | |
.large-label { | |
font-size: $h2-font-size; | |
margin: 0; | |
} | |
#tickets, | |
#bugs { | |
@extend %container; | |
h2 { | |
margin-top: 0; | |
text-align: center; | |
font-size: $h2-font-size; | |
font-weight: 400; | |
} | |
} | |
.stats-table { | |
border-spacing: rem(10px); | |
border-collapse: separate; | |
margin-right: golden-ratio(16px,1); | |
th { | |
padding-bottom: golden-ratio(16px, -1); | |
} | |
th:first-child { | |
width: rem(100px); | |
text-align:right; | |
padding-right: golden-ratio(16px,1); | |
} | |
td { | |
} | |
td:first-child { | |
text-align: right; | |
padding-right: golden-ratio(16px,1); | |
} | |
tr { | |
@include chart-keys($google-charts); | |
} | |
} |
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 url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:300,400,500,700); | |
@import "bourbon/bourbon"; | |
@import "grid-settings"; | |
@import "neat/neat"; | |
@import "normalize"; | |
@import "settings"; | |
@import "styles"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment