app/css/_theme.scss
// Theme: replaceable skin, colors, font family etc.
@function ggi-contrast-color($color, $key: false) {
@return if($key, map-get($ggi-colors, $key), contrast-color($color));
}
@mixin ggi-color-gradient($bg-key, $fg-key: false, $a-key: false) {
$bg-color: map-get($ggi-colors, $bg-key);
@include ggi-color($bg-key, $fg-key: false, $a-key: false);
@include background-image(linear-gradient(top, $bg-color, lighten($bg-color, 15%)));
}
@mixin ggi-color($bg-key, $fg-key: false, $a-key: false) {
$bg-color: map-get($ggi-colors, $bg-key);
$fg-color: ggi-contrast-color($bg-color, $fg-key);
$a-color: if($a-key, map-get($ggi-colors, $a-key), $fg-color);
background-color: $bg-color;
color: $fg-color;
@include ggi-color-links($a-color, $a-color, $a-color, $a-color);
}
@mixin ggi-color-input($bg-key, $fg-key: false) {
$bg-color: map-get($ggi-colors, $bg-key);
$fg-color: ggi-contrast-color($bg-color, $fg-key);
border-color: darken($bg-color, 30%) darken($bg-color, 20%) darken($bg-color, 15%);
@include background-image(linear-gradient(darken($bg-color, 5%), $bg-color));
color: $fg-color;
}
@mixin ggi-color-button($bg-key, $fg-key: false) {
$bg-color: map-get($ggi-colors, $bg-key);
$fg-color: ggi-contrast-color($bg-color, $fg-key);
@include transition-property(background);
@include transition-duration(.3s);
border-color: lighten($bg-color, 10%) darken($bg-color, 8%) darken($bg-color, 5%);
background-color: $bg-color;
color: $fg-color;
&:hover {
background: darken($bg-color, 10%);
}
&:active {
@include transition-duration(0s);
background: desaturate($bg-color, 20%);
color: darken($fg-color, 20%);
}
}
@mixin ggi-color-links($link, $visited: false, $hover: false, $active: false) {
a {
&:link {
color: $link;
}
&:visited {
color: if($visited, $visited, $link);
}
&:hover {
color: if($hover, $hover, $link);
}
&:active {
color: if($active, $active, $link);
}
}
}
@mixin ggi-emboss($background) {
$c: map-get($ggi-colors, $background);
border-top: 1px solid lighten($c, 15%);
border-bottom: 1px solid darken($c, 8%);
}
body {
@include ggi-color(lightest);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: map-get($ggi-font-weight, normal);
}
.taxon {
@include susy-breakpoint($ggi-breakpoint-large, 3) {
@include ggi-color(lighter);
$bg-color: map-get($ggi-colors, lightest);
@include background-image(linear-gradient(top, $bg-color, darken($bg-color, 16%)));
}
}
a {
abbr, abbr[title] {
border-bottom: none;
}
}
.headers {
font-weight: map-get($ggi-font-weight, light);
}
.textbox {
@include rhythm-borders(1px, 0.35);
}
.button {
@include adjust-leading-to(1.2);
padding: {
left: rhythm(0.5);
right: rhythm(0.5);
}
@include breakpoint($ggi-breakpoint-large) {
margin-bottom: rhythm(0.5);
}
text-transform: lowercase;
border-width: 1px;
border-style: solid;
}
.qualifier--good {
color: map-get($ggi-colors, good);
@include ggi-color-links(map-get($ggi-colors, good));
}
.qualifier--average {
color: map-get($ggi-colors, average);
@include ggi-color-links(map-get($ggi-colors, average));
}
.qualifier--poor {
color: map-get($ggi-colors, poor);
@include ggi-color-links(map-get($ggi-colors, poor));
}
h1 {
@extend .headers;
@include adjust-font-size-to(2em);
line-height: 1.1em;
margin: 0;
&.error {
text-align: center;
}
a {
text-decoration: none;
}
}
.subhead {
@include clearfix;
font-size: 1em;
font-style: italic;
letter-spacing: 0.7px;
color: map-get($ggi-colors, lightest);
margin: {
top: 0;
bottom: rhythm(0.25);
}
}
h2 {
@extend .headers;
}
dt {
text-transform: uppercase;
font-weight: map-get($ggi-font-weight, light);
}
figcaption {
@include breakpoint($ggi-breakpoint-large) {
@include adjust-font-size-to(0.8em);
}
}
input[type=search] {
@extend .textbox;
@include ggi-color-input(lightest);
}
input[type=submit] {
@extend .button;
@include ggi-color-button(dark);
}
thead {
@include trailing-border(1px);
border-color: map-get($ggi-colors, light);
text-transform: uppercase;
}
th {
font-weight: map-get($ggi-font-weight, light);
}
header.page__header {
border: 3px solid map-get($ggi-colors, darker);
@include ggi-color-gradient(darkest);
}
.ui-autocomplete {
background-color: darken(map-get($ggi-colors, lightest), 5%);
li {
border-color: darken(map-get($ggi-colors, lightest), 10%);
}
.ui-state-focus, .ui-state-active {
background-color: darken(map-get($ggi-colors, lightest), 30%);
}
&.ui-menu .ui-menu-item {
.ui-state-focus, .ui-state-active {
margin: 0;
}
}
}
.autocomplete-item {
&__classification, &__vernacular, &__alternate {
@include adjust-font-size-to(0.8em);
}
}
.tagline {
p {
@include adjust-font-size-to(1.25em);
font-weight: map-get($ggi-font-weight, light);
font-style: italic;
margin: 0;
}
}
.tree__wrapper {
border-color: map-get($ggi-colors, light);
ul {
@include no-bullet;
}
width: 100%;
overflow: auto;
@include rhythm-borders(1px, 0.5);
@include breakpoint($ggi-breakpoint-large) {
height: rhythm(17);
}
}
.tree__item {
&--poor {
@extend .qualifier--poor;
}
&--average {
@extend .qualifier--average;
}
&--good {
@extend .qualifier--good;
}
&--selected {
font-weight: map-get($ggi-font-weight, bold);
a {
text-decoration: none;
}
}
a.name {
color: map-get($ggi-colors, darker);
}
}
.nomenclature {
&__label--reference {
text-transform:none;
}
&__datum {
&--classification,
&--common-name {
font-weight: map-get($ggi-font-weight, light);
}
}
dd {
margin-bottom: rhythm(0.5);
}
}
.assessment_summary {
font-size: 1.75em;
width: 13em;
margin: rhythm(1) 0;
@include breakpoint($ggi-breakpoint-large) {
margin: 0 auto;
}
dt span {
display: inline-block;
width: 9em;
}
dd span {
display: inline-block;
width: 3em;
text-align: right;
}
&__label {
&--family_count {
text-transform: none;
margin: {
top: rhythm(1);
bottom: rhythm(1);
}
}
&--score {
font-weight: map-get($ggi-font-weight, bold);
}
&--poor {
@extend .qualifier--poor;
}
&--average {
@extend .qualifier--average;
}
&--good {
@extend .qualifier--good;
}
}
&__datum {
&--score {
font-weight: map-get($ggi-font-weight, bold);
}
&--poor {
@extend .qualifier--poor;
}
&--average {
@extend .qualifier--average;
}
&--good {
@extend .qualifier--good;
}
&--family_count {
margin: {
top: rhythm(1);
bottom: rhythm(1);
}
}
}
p {
font-size: 0.75em;
}
}
.assessment__measurement {
&--poor {
@extend .qualifier--poor;
}
&--average {
@extend .qualifier--average;
}
&--good {
@extend .qualifier--good;
}
}
.legend {
font-size: 0.9em;
padding: rhythm(1);
@include rhythm-borders(1.1px, 0.5);
border-top: 0; // there is already one there.
border-color: map-get($ggi-colors, light);
.legend__header {
h3 {
margin-top: 0;
}
@include span(1 at 1 of 3);
}
.legend__list {
@include span(2 at 2 of 3);
dt {
text-align: right;
width: 6em;
}
dd {
text-align: left;
}
}
p {
clear: both;
margin: 0;
a {
width: 14px;
height: 14px;
background-size: 14px 14px;
}
}
}
.legend__label, .legend__definition {
&--poor {
@extend .qualifier--poor;
}
&--average {
@extend .qualifier--average;
}
&--good {
@extend .qualifier--good;
}
}
footer.page__footer {
@include ggi-color-gradient(dark);
}
a.info {
width: 25px;
height: 25px;
display: inline-block;
@include replace-text("info-icon.svg");
background-size: 25px 25px;
}
a.external {
width: 22px;
height: 22px;
display: inline-block;
@include replace-text("external-icon.svg");
background-size: 22px 22px;
}
.downloads {
list-style-type: none;
text-align: left;
width: 18em;
margin: rhythm(1) auto;
li {
margin-bottom: rhythm(1);
div {
padding: {
top: 6px;
left: 52px;
}
height: 40px;
}
span {
border: 1px solid map-get($ggi-colors, mid);
}
.excel {
@include background(image-url("excel.svg"));
background-size: 40px 40px;
background-repeat: no-repeat;
}
.pdf {
@include background(image-url("pdf.svg"));
background-size: 40px 40px;
background-repeat: no-repeat;
}
.word {
@include background(image-url("word.svg"));
background-size: 40px 40px;
background-repeat: no-repeat;
}
}
}