// Geomicons theme
$blue: #3ad;
$light-gray: #f9fcff;
$mid-gray: #a9acac;
$dark-gray: #30393f;
//$red: #f43;
$red: #f54;
$purple: #f49;
$slate: #769;
.bg-red { background-color: $red; }
.bg-purple { background-color: $purple; }
.bg-slate { background-color: $slate; }
.white { color: #fff; }
.blue { color: $blue; }
.light-gray { color: $light-gray; }
.mid-gray { color: $mid-gray; }
.dark-gray { color: $dark-gray; }
.red { color: $red; }
.bg-white { background-color: #fff; }
.bg-blue { background-color: $blue; }
.bg-light-gray { background-color: $light-gray; }
.bg-mid-gray { background-color: $mid-gray; }
.bg-dark-gray { background-color: $dark-gray; }
.fill-white { fill: #fff; }
.fill-blue { fill: $blue; }
.fill-light-gray { fill: $light-gray; }
.fill-mid-gray { fill: $mid-gray; }
.fill-dark-gray { fill: $dark-gray; }
.fill-white-alpha { fill: rgba(#fff, .8); }
.stroke-mid-gray { stroke: $mid-gray; }
.stroke-light-gray { stroke: $light-gray; }
// Base theme styles
body {
color: $dark-gray;
background-color: $light-gray;
}
a {
color: #fff;
&:hover {
color: rgba(#000,.6);
}
}
// Buttons
.button {
border-radius: .25rem;
transition-duration: .2s;
transition-timing-function: ease;
transition-property: box-shadow , background-color;
&:focus {
outline: none;
}
}
.button-box-white {
color: #fff;
fill: #fff;
box-shadow: inset 0 0 0 2px #fff;
&:focus,
&:hover {
color: $red;
fill: $red;
background-color: #fff;
}
}
.button-box-blue {
color: $blue;
fill: $blue;
box-shadow: inset 0 0 0 2px $blue;
&:focus,
&:hover {
color: #fff;
fill: #fff;
background-color: $blue;
}
}
/*
.button-box-gray {
color: $dark-gray;
fill: $dark-gray;
box-shadow: inset 0 0 0 2px $dark-gray;
&:focus,
&:hover {
color: $blue;
fill: $blue;
background-color: $dark-gray;
}
}
*/
// Utilities
.rounded { border-radius: .25rem; }
.gradient {
background-image: linear-gradient( to bottom left, rgba(#f60,.05), rgba(#06f,.05) );
}
.gradient-grid {
background-image: url(../site/grid.svg), linear-gradient( to bottom left, rgba(#f60,.1), rgba(#06f,.1) );
background-position: top center;
}
// Dev styles
.bg-grid { background-image: url(../dev/bg-grid.svg); }
.bg-grid-big { background-size: 16rem 16rem; background-position: top center; }
/*
@media (min-width: 57em) {
.bg-grid-big { background-size: 24rem 24rem; }
}
*/
.bg-cover { background-size: cover; }
.geomicon { width: 1em; height: 1em; vertical-align: -0.125em; }