|
$color-primary: #fff; |
|
$color-primary-background: #E86EA4; |
|
|
|
.btn { |
|
display: block; |
|
width: 100%; |
|
padding: 0.8em 1em; |
|
margin-bottom: 0.8em; |
|
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial; |
|
font-size: 1.2em; |
|
border-width: 1px; |
|
border-style: solid; |
|
|
|
&:after { |
|
content: attr(class); |
|
margin-left: 6px; |
|
font-style: italic; |
|
opacity: 0.5; |
|
} |
|
} |
|
|
|
.btn--primary { |
|
//arguably, all the styles in here are theme related |
|
color: $color-primary; |
|
background-color: $color-primary-background; |
|
border: 1px solid darken($color-primary-background, 10); |
|
|
|
&:hover { |
|
color: $color-primary; |
|
background-color: lighten($color-primary-background, 10); |
|
} |
|
} |
|
|
|
/** |
|
Themes are all stored in a map data-structure which gives flexibilty |
|
when traversing based on keys and also looking up values based on strings |
|
*/ |
|
|
|
$themes: ( |
|
sassmeister: ( |
|
foreground: #fff, |
|
background: #E86EA4, |
|
border: darken(#E86EA4, 10), |
|
emphasis: darken(#FFFFFF, 10), |
|
subtle: lighten(#E86EA4, 10), |
|
highlight: lighten(#E86EA4, 10), |
|
radius: 0 |
|
), |
|
sassmeister-dark: ( |
|
foreground: #E86EA4, |
|
background: #fff, |
|
border: darken(#fff, 10), |
|
emphasis: darken(#E86EA4, 10), |
|
subtle: lighten(#E86EA4, 10), |
|
highlight: darken(#fff, 10), |
|
radius: 0 |
|
), |
|
codepen: ( |
|
foreground: #CCCCCC, |
|
background: #1D1F20, |
|
border: #000000, |
|
emphasis: darken(#999999, 10), |
|
subtle: lighten(#999999, 10), |
|
highlight: lighten(#1D1F20, 10), |
|
radius: 3px |
|
), |
|
codepen-light: ( |
|
foreground: #1D1F20, |
|
background: #F2F2F2, |
|
border: darken(#F2F2F2, 15), |
|
emphasis: lighten(#1D1F20, 10), |
|
subtle: darken(#1D1F20, 10), |
|
highlight: darken(#F2F2F2, 10), |
|
radius: 3px |
|
), |
|
info: ( |
|
foreground: #FFFFFF, |
|
background: #809BBD, |
|
border: darken(#809BBD, 15), |
|
subtle: darken(#FFFFFF, 10), |
|
highlight: lighten(#809BBD, 10), |
|
radius: 6px, |
|
font-style: italic |
|
) |
|
); |
|
|
|
@function get-theme($name) { |
|
@return map-get($themes, $name); |
|
} |
|
|
|
/** |
|
* This function should warn if a theme requirement isn't met, |
|
* helping to catch any issues at compile time in development |
|
*/ |
|
@function requires($themeName, $props) { |
|
$theme: get-theme($themeName); |
|
@each $key in $props { |
|
@if (map-has-key($theme, $key) == false) { |
|
@warn "To use this theme requires #{$key} to be set in the map"; |
|
@return false; |
|
} |
|
} |
|
@return true; |
|
} |
|
|
|
.note { |
|
padding: 2em; |
|
|
|
font-size: 1.2rem; |
|
font-weight: 300; |
|
|
|
margin: 2em 0 2em 4em; |
|
width: 50%; |
|
} |
|
|
|
.note--small { |
|
font-size: 0.8rem; |
|
padding: 0.5em 1em; |
|
margin: 1em 0; |
|
} |
|
|
|
.note--inline { |
|
display: inline-block; |
|
} |
|
|
|
.rule { |
|
border: 0; |
|
margin: 2em 0; |
|
width: 100%; |
|
height: 1px; |
|
|
|
background-color: #ccc; |
|
} |
|
|
|
a{ |
|
font-weight: bold; |
|
} |
|
|
|
@mixin link-theme($name) { |
|
$theme: get-theme($name); |
|
|
|
.link-t-#{$name} { |
|
color: map-get($theme, foreground); |
|
|
|
&:hover, &:active { |
|
color: map-get($theme, emphasis); |
|
} |
|
} |
|
} |
|
|
|
$link-requirements: foreground emphasis; |
|
|
|
@mixin button-theme($name) { |
|
$theme: map-get($themes, $name); |
|
|
|
.btn-t-#{$name} { |
|
color: map-get($theme, "foreground"); |
|
background-color: map-get($theme, "background"); |
|
border-color: map-get($theme, "border"); |
|
border-radius: map-get($theme, "radius"); |
|
|
|
&:hover { |
|
background-color: map-get($theme, "highlight"); |
|
} |
|
} |
|
} |
|
|
|
$button-requirements: foreground background border radius highlight; |
|
|
|
@mixin note-theme($name) { |
|
$theme: map-get($themes, $name); |
|
|
|
.note-t-#{$name} { |
|
background: map-get($theme, "background"); |
|
color: map-get($theme, "foreground"); |
|
@if map-has-key($theme, "font-style") { |
|
font-style: map-get($theme, "font-style"); |
|
} |
|
} |
|
} |
|
|
|
$note-requirements: background foreground; // font-style is optional |
|
|
|
@mixin rule-theme($name) { |
|
$theme: map-get($themes, $name); |
|
|
|
.rule-t-#{$name}{ |
|
background-color: map-get($theme, "background"); |
|
} |
|
} |
|
|
|
$rule-requirements: background; |
|
|
|
@each $themeName in map-keys($themes) { |
|
@if (requires($themeName, $button-requirements)) { |
|
@include button-theme($themeName); |
|
} |
|
|
|
@if (requires($themeName, $note-requirements)) { |
|
@include note-theme($themeName); |
|
} |
|
|
|
@if (requires($themeName, $rule-requirements)) { |
|
@include rule-theme($themeName); |
|
} |
|
|
|
@if (requires($themeName, $link-requirements)) { |
|
@include link-theme($themeName); |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Boilerplate code to get the pen setup |
|
|
|
body { |
|
line-height: 1.5; |
|
padding: 2% 10%; |
|
color: #5B5B5B; |
|
} |