Gapminder/vizabi

// ****************************************************************************
//
//   Common Variables
//   variables across tools & components
//
//   -> Naming convention:
//      general -> specific
//      E.g: $vzb-border-color-blue;
//
// ****************************************************************************

// ----------------------------------------------------------------------------
//   Text
// ----------------------------------------------------------------------------
$vzb-font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
$vzb-font-family-alt: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
$vzb-font-size-base: 16px;
$vzb-font-size-regular: 1em;
$vzb-font-size-tiny: 0.625em;
$vzb-font-size-small: 0.8em;
$vzb-font-size-medium: 1.24em;
$vzb-font-size-large: 1.38em;
$vzb-font-size-larger: 1.6em;
$vzb-font-size-largest: 2.1em;

// ----------------------------------------------------------------------------
//   Colors
//   -> Naming convention:
//   darkest, darker, dark, color, light, lighter, lightest
// ----------------------------------------------------------------------------
// Primary = Low saturated Blue
$vzb-color-primary: #607889;
$vzb-color-primary-darkest: #425663;
$vzb-color-primary-dark: #4b98aa;
$vzb-color-primary-strong: #4b98aa;
$vzb-color-primary-light: #9fbbc1;
$vzb-color-primary-lightest: #f2fafc;
// Grayscale
$vzb-color-white: #fff;
$vzb-color-whiteish: #fdfdfd;
$vzb-color-black: #333;
$vzb-color-grey-darkest: #444;
$vzb-color-grey-dark: #666;
$vzb-color-grey: #999;
$vzb-color-grey-light: #e3eef0;
$vzb-color-grey-lightest: #fdfdfd;
// Vizabi main colors
$vzb-color-red: #f77481;
$vzb-color-yellow: #e1ce00;
$vzb-color-green: #b4de79;
$vzb-color-blue: #62cce3;
$vzb-gapminder-main: #ffca34;
// Accents
$vzb-color-accent-orange: #fc6b38;
$vzb-color-accent-yellow: #ff0;
// Text stroke
$vzb-color-stroke: $vzb-color-white;
$vzb-stroke-opacity: 0.7;
// ----------------------------------------------------------------------------
//   Loader (spinner)
// ----------------------------------------------------------------------------
$vzb-loader-speed: 0.8s;
$vzb-loader-thickness: 4px;
$vzb-loader-size: 50px;
$vzb-loader-bgcolor: $vzb-color-white;
// ----------------------------------------------------------------------------
//   Common styles
// ----------------------------------------------------------------------------
.vzb-hidden {
  display: none !important;
}

.vzb-invisible {
  visibility: hidden !important;
}

.vzb-pointerevents-none {
  pointer-events: none !important;
}

.vzb-blur {
  filter: blur(3px);
}

.vzb-transparent {
  opacity: 0 !important;
  pointer-events: none !important;
}

%vzb-loader-spinner {
  @include size($vzb-loader-size);
  @include position(absolute, 50% null 0 50%);
  content: ' ';
  animation-timing-function: linear;
  animation-name: rotate-forever;
  animation-iteration-count: infinite;
  animation-duration: $vzb-loader-speed;
  background: url('data:image/svg+xml;content=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20338%20338%22%3E%3Cg%20id%3D%22fidget-spinner--element%22%3E%3Cpath%20class%3D%22bearing%22%20fill%3D%22%239fbbc1%22%20d%3D%22M161.6%2084.2c2.3.5%204.7.9%207.1.9%202.4%200%204.8-.3%207.2-.9%203.2-.7%206.2-1.9%209-3.5%207.5-4.3%2012.8-11.3%2015.1-19.7%202.2-8.4%201.1-17.1-3.3-24.6-5.8-10-16.5-16.2-28.1-16.2-5.7%200-11.3%201.5-16.2%204.4-15.5%209-20.7%2028.8-11.8%2044.3%204.6%207.8%2012.3%2013.3%2021%2015.3zm-2-47.2c2.8-1.6%205.9-2.4%209.1-2.4%206.4%200%2012.4%203.5%2015.7%209%202.4%204.2%203.1%209.1%201.8%2013.7-1.2%204.7-4.2%208.6-8.4%2011-.6.4-1.2.7-1.9.9-2.3%201-4.7%201.5-7.2%201.5s-4.9-.5-7.2-1.5c-3.5-1.5-6.5-4.1-8.5-7.5-5-8.6-2-19.7%206.6-24.7z%22%2F%3E%3Cpath%20class%3D%22bearing%22%20fill%3D%22%239fbbc1%22%20d%3D%22M96.3%20211.1c-1.2-2.1-2.7-4-4.3-5.8-6.1-6.5-14.6-10.4-23.7-10.4-5.7%200-11.3%201.5-16.2%204.4-7.5%204.3-12.8%2011.3-15.1%2019.7-2.2%208.4-1.1%2017.1%203.3%2024.6%205.8%2010%2016.5%2016.2%2028.1%2016.2%205.7%200%2011.3-1.5%2016.2-4.4%207.5-4.3%2012.8-11.3%2015.1-19.7%201.6-6%201.4-12.2-.4-18-.9-2.3-1.8-4.5-3-6.6zM85.7%20232c-1.2%204.7-4.2%208.6-8.4%2011-2.8%201.6-5.9%202.4-9.1%202.4-6.4%200-12.4-3.5-15.7-9-2.4-4.2-3.1-9-1.8-13.7%201.2-4.7%204.2-8.6%208.4-11%202.8-1.6%205.9-2.4%209.1-2.4%203.9%200%207.7%201.3%2010.8%203.6%202%201.4%203.6%203.3%204.9%205.4%201.3%202.2%202%204.5%202.3%206.9.2%202.3.1%204.6-.5%206.8z%22%2F%3E%3Cpath%20class%3D%22bearing%22%20fill%3D%22%239fbbc1%22%20d%3D%22M269.8%20194.6c-5.7%200-11.3%201.5-16.2%204.4-2.9%201.7-5.4%203.7-7.6%206.1-3.3%203.5-5.7%207.8-7.1%2012.4-.1.4-.3.8-.4%201.2-2.2%208.4-1.1%2017.1%203.3%2024.6%205.8%2010%2016.5%2016.1%2028.1%2016.1%205.7%200%2011.3-1.5%2016.2-4.4%207.5-4.3%2012.8-11.3%2015.1-19.7%202.2-8.4%201.1-17.1-3.3-24.6-5.8-10-16.6-16.1-28.1-16.1zm17.5%2037c-1.2%204.7-4.2%208.6-8.4%2011-2.8%201.6-5.9%202.4-9.1%202.4-6.4%200-12.4-3.5-15.7-9-2-3.4-2.7-7.3-2.3-11.1.1-.9.2-1.8.4-2.6%201.1-4%203.5-7.4%206.7-9.8.6-.4%201.1-.9%201.7-1.2%202.8-1.6%205.9-2.4%209.1-2.4%206.4%200%2012.4%203.5%2015.7%209%202.5%204.2%203.1%209.1%201.9%2013.7z%22%2F%3E%3Cpath%20class%3D%22bearing%20middle-bearing%22%20fill%3D%22%239fbbc1%22%20d%3D%22M203.2%20178.1c2.4-9.2%201.2-18.7-3.6-26.9-5.3-9.1-14.3-15.3-24.8-17.1-2.3-.4-4.2-.6-5.9-.6-1.7%200-3.7.2-6%20.6-4.3.7-8.3%202.2-11.8%204.2-15%208.7-21.5%2026.8-15.4%2043.1.8%202.1%201.6%203.8%202.5%205.4.9%201.5%202%203.1%203.5%204.9%206.8%208.2%2016.8%2012.8%2027.3%2012.8%206.2%200%2012.4-1.7%2017.8-4.8%203.6-2.1%206.8-4.8%209.6-8.1%202.6-3.1%204.6-6.6%205.9-10.3.3-1.1.6-2.1.9-3.2z%22%2F%3E%3Cpath%20fill%3D%22%239fbbc1%22%20d%3D%22M312.4%20202.3c-6.7-11.6-17.9-19.8-30.7-23-.5-.1-47-10.3-63.5-38.8-16.6-28.6-2.3-74-2.2-74.4.1-.2.2-.5.2-.7%203.4-12.7%201.6-26-5-37.4-8.8-15.1-25.1-24.5-42.6-24.5-8.6%200-17.2%202.3-24.7%206.7-20.8%2012-29.4%2037-21.7%2058.9%202.8%2010.2%2011.5%2047-2.7%2071.7-16.5%2028.6-62.9%2038.9-63.4%2039v.1c-4.4%201.1-8.6%202.8-12.6%205.1-11.4%206.4-19.5%2017-22.9%2029.7-3.4%2012.7-1.6%2026%205%2037.3%208.8%2015.1%2025.1%2024.5%2042.6%2024.5%208.6%200%2017.2-2.3%2024.7-6.7%205.3-3.1%209.8-7%2013.5-11.6%208.7-8.6%2035.2-32.4%2062.5-32.4%2033%200%2065.1%2035.1%2065.5%2035.5l.2-.2c9.2%209.4%2021.9%2014.9%2035.3%2014.9%208.6%200%2017.2-2.3%2024.7-6.7%2023.4-13.3%2031.4-43.5%2017.8-67zM151.2%2022.4c5.3-3.1%2011.4-4.7%2017.5-4.7%2012.4%200%2024%206.7%2030.2%2017.4%204.7%208.1%205.9%2017.5%203.5%2026.5-2.4%209-8.2%2016.6-16.2%2021.2-3.2%201.9-6.7%203.1-10.3%203.9-2.4.5-4.8.8-7.2.8s-4.8-.3-7.1-.8c-9.6-2-18.1-8-23.1-16.6-1-1.8-1.9-3.7-2.6-5.5-.4-1-.6-1.9-.9-2.9-4-14.9%202.2-31.2%2016.2-39.3zM102%20236.3c-1.2%204.5-3.2%208.6-5.9%2012.2-.9%201.2-2%202.4-3.1%203.5-2.1%202.1-4.5%204-7.2%205.6-5.3%203.1-11.4%204.7-17.5%204.7-12.4%200-24-6.7-30.2-17.4-4.7-8.1-5.9-17.5-3.5-26.5%202.4-9%208.2-16.6%2016.2-21.2%205.3-3.1%2011.4-4.7%2017.5-4.7%2010%200%2019.4%204.4%2025.9%2011.6%201.6%201.8%203.1%203.7%204.3%205.8%201.2%202.1%202.2%204.3%202.9%206.6%202.1%206.3%202.3%2013.2.6%2019.8zm66.9-24.6c-12.8%200-24.7-5.8-32.8-15.4-1.5-1.8-3-3.8-4.2-5.8-1.2-2.1-2.2-4.3-3-6.5-7.1-19.1.3-41.2%2018.5-51.8%204.4-2.5%209.2-4.2%2014.2-5.1%202.4-.4%204.8-.7%207.2-.7%202.4%200%204.8.3%207.1.7%2012.4%202.1%2023.4%209.6%2029.8%2020.6%205.7%209.9%207.3%2021.4%204.3%2032.4-.3%201.3-.8%202.5-1.2%203.8-1.7%204.6-4.1%208.7-7.2%2012.4-3.2%203.8-7%207.2-11.5%209.8-6.3%203.6-13.7%205.6-21.2%205.6zm118.4%2045.5c-5.3%203.1-11.4%204.7-17.5%204.7-12.4%200-24-6.7-30.2-17.4-4.7-8.1-5.9-17.5-3.5-26.5l.6-1.8c1.5-4.6%203.9-8.9%207.1-12.4%202.4-2.7%205.3-5.1%208.5-7%205.3-3.1%2011.4-4.7%2017.5-4.7%2012.4%200%2024%206.7%2030.2%2017.4%209.7%2016.6%204%2038-12.7%2047.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  margin: -1 * $vzb-loader-size / 2;
  z-index: 9999;
}

%vzb-loader {
  @include size($vzb-loader-size);
  @include position(absolute, 50% null 0 50%);
  animation-timing-function: linear;
  animation-name: rotate-forever;
  animation-iteration-count: infinite;
  animation-duration: $vzb-loader-speed;
  border: $vzb-loader-thickness solid rgba($vzb-color-primary, 0.1);
  border-radius: 100%;
  border-top: $vzb-loader-thickness solid rgba($vzb-color-primary, 0.6);
  content: ' ';
  display: inline-block;
  margin: -1 * $vzb-loader-size / 2;
  z-index: 9999;
}