/* basic styling */
body {
background-color: #ECEFF1;
color: darkSlateGray;
}
h1 {
font-size: 1.5em;
margin: 2em 0 1em;
&:first-child {
margin-top: 0;
}
}
h2 {
font-size: 1.2em;
margin: 2em 0 1em;
}
a {
color: rgb(204, 175, 106);
}
.wrapper {
background-color: #fff;
border: 1px solid #CFD8DC;
margin: 2em auto;
max-width: 600px;
padding: 2em;
}
.icon {
background-repeat: no-repeat;
background-position: 0 50%;
padding: 1em 0 1em 44px;
}
.u-margin-top-none {
margin-top: 0;
}
.u-margin-bottom-none {
margin-bottom: 0;
}
.u-text-small {
font-size: 0.875em;
}
/* ------------------------------------------------- */
/* ==from http://codepen.io/jakob-e/pen/doMoML */
/* ------------------------------------------------- */
@function svg-url($svg){
//
// Chunk up string in order to avoid
// "stack level too deep" error
//
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
//
// Encode (may need a few extra replacements)
//
$chunk: str-replace($chunk,'"','\'');
$chunk: str-replace($chunk,'<','%3C');
$chunk: str-replace($chunk,'>','%3E');
$chunk: str-replace($chunk,'&','%26');
$chunk: str-replace($chunk,'#','%23');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}
// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index +
str-length($search)), $search, $replace);
}
@return $string;
}
/* ------------- */
/* ==end */
/* ------------- */
/* custom mixin to replace a defined fill color with another one */
@function svg-url-with-replaced-fill($svg, $fill-to-replace, $new-fill) {
$replaced-svg: str-replace($svg, $fill-to-replace, $new-fill);
$replaced-svg-url: svg-url('#{$replaced-svg}');
@return $replaced-svg-url;
}
// Custom CSS
/* variables */
$icon-color: #B03032;
// insert the svg code in a variable, make sure the svg only contains double quotes and surround the whole code with simple quotes
$svg-icon-code: '';
/* svg used as background image via data URI */
/* do not work in IE and Firefox as is */
.icon-zoom {
background-image: url('data:image/svg+xml;utf8,');
}
/* custom CSS using mixin */
.svg-fill-replaced {
background-image: svg-url-with-replaced-fill($svg-icon-code, '#000000', $icon-color);
}
.svg-with-mixin-from-jakob {
background-image: svg-url($svg-icon-code);
}