_sunglass.scss

/*!
* Sunglass - A mixin and functions library for Sass
* v3.0.5
* https://github.com/devatrox/Sunglass
*/

$defaults: (
  base-grid: 12,
  base-gap: 20px,
  global-light: 90deg,
  base-img-path: "../images/",
  base-icon-path: "../icons/",
  base-font-size: 16px,
  rem-fallback: true
);

$sunglass: () !default;

$settings: map-merge($defaults, $sunglass);

@if (variable-exists(base-grid)) {
  $settings: map-merge($defaults, (base-grid: $base-grid)) !global;
}
@if (variable-exists(base-gap)) {
  $settings: map-merge($defaults, (base-gap: $base-gap)) !global;
}
@if (variable-exists(global-light)) {
  $settings: map-merge($defaults, (global-light: $global-light)) !global;
}
@if (variable-exists(base-img-path)) {
  $settings: map-merge($defaults, (base-img-path: $base-img-path)) !global;
}
@if (variable-exists(base-icon-path)) {
  $settings: map-merge($defaults, (base-icon-path: $base-icon-path)) !global;
}
@if (variable-exists(base-font-size)) {
  $settings: map-merge($defaults, (base-font-size: $base-font-size)) !global;
}
@if (variable-exists(rem-fallback)) {
  $settings: map-merge($defaults, (rem-fallback: $rem-fallback)) !global;
}

$_base-grid: map-get($settings, base-grid);
$_base-gap: map-get($settings, base-gap);
$_global-light: map-get($settings, global-light);
$_base-img-path: map-get($settings, base-img-path);
$_base-icon-path: map-get($settings, base-icon-path);
$_base-font-size: map-get($settings, base-font-size);
$_rem-fallback: map-get($settings, rem-fallback);

// Formulars provided by easyrgb.com and rapidtables.com

@function _cmy($cyan, $magenta, $yellow) {
  $red: (1 - ($cyan / 100)) * 255;
  $green: (1 - ($magenta / 100)) * 255;
  $blue: (1 - ($yellow / 100)) * 255;

  @return rgb($red, $green, $blue);
}

@function _cmya($cyan, $magenta, $yellow, $alpha) {
  @return rgba(_cmy($cyan, $magenta, $yellow), $alpha);
}

@function _cmyk($cyan, $magenta, $yellow, $key) {
  $red: (1 - ($key / 100)) * (1 - ($cyan / 100)) * 255;
  $green: (1 - ($key / 100)) * (1 - ($magenta / 100)) * 255;
  $blue: (1 - ($key / 100)) * (1 - ($yellow / 100)) * 255;

  @return rgb($red, $green, $blue);
}

@function _cmyka($cyan, $magenta, $yellow, $key, $alpha) {
  @return rgba(_cmyk($cyan, $magenta, $yellow, $key), $alpha);
}

// Formular provided by easyrgb.com

@function _hsv($hue, $saturation, $value) {
  $hue: ($hue * 100 / 360) / 100;
  $saturation: $saturation / 100;
  $value: $value / 100;

  $red: null;
  $green: null;
  $blue: null;

  $var_1: null;
  $var_2: null;
  $var_3: null;
  $var_b: null;
  $var_g: null;
  $var_h: null;
  $var_i: null;
  $var_r: null;

  @if ($saturation == 0) {
    $red: $value * 255;
    $green: $value * 255;
    $blue: $value * 255;
  }
  @else {
    $var_h: $hue * 6;

    @if ( $var_h == 6 ) {
      $var_h: 0;
    }

    $var_i: floor( $var_h );
    $var_1: $value * ( 1 - $saturation );
    $var_2: $value * ( 1 - $saturation * ( $var_h - $var_i ) );
    $var_3: $value * ( 1 - $saturation * ( 1 - ( $var_h - $var_i ) ) );

    @if ( $var_i == 0 ) {
      $var_r: $value;
      $var_g: $var_3;
      $var_b: $var_1;
    }
    @else if ( $var_i == 1 ) {
      $var_r: $var_2;
      $var_g: $value;
      $var_b: $var_1;
    }
    @else if ( $var_i == 2 ) {
      $var_r: $var_1;
      $var_g: $value;
      $var_b: $var_3;
    }
    @else if ( $var_i == 3 ) {
      $var_r: $var_1;
      $var_g: $var_2;
      $var_b: $value;
    }
    @else if ( $var_i == 4 ) {
      $var_r: $var_3;
      $var_g: $var_1;
      $var_b: $value;
    }
    @else {
      $var_r: $value;
      $var_g: $var_1;
      $var_b: $var_2;
    }

    $red: $var_r * 255;
    $green: $var_g * 255;
    $blue: $var_b * 255;
  }

  @return rgb($red, $green, $blue);
}

@function _hsva($hue, $saturation, $value, $alpha) {
  @return rgba(_hsv($hue, $saturation, $value), $alpha);
}

// HSB - because Photoshop
@function _hsb($hue, $saturation, $brightness) {
  @return _hsv($hue, $saturation, $brightness);
}

@function _hsba($hue, $saturation, $brightness, $alpha) {
  @return _hsva($hue, $saturation, $brightness, $alpha);
}

@function _random-color($palette: false) {
  $rgb: "";

  @if $palette {
    @if type-of($palette) == string {
      @if $palette == monochrome {
        $rgb: if(round(random()) == 1, #000, #fff);
      }
      @else if $palette == grayscale or $palette == greyscale {
        $rgb: hsl(0, 0, random(100) + 0%);
      }
      @else {
        @warn "Invalid keywords (#{$palette})";
      }

    }
    @else {
      @warn "#{$palette} not a string";
    }
  }
  @else {
    $red: random(255);
    $green: random(255);
    $blue: random(255);

    $rgb: rgb($red, $green, $blue);
  }

  @return $rgb;
}

// todo: pastel, gradient (hue value)

@function _shade($color, $percent){
  @return mix(black, $color, $percent);
}

@function _tint($color, $percent){
  @return mix(white, $color, $percent);
}

@function _filter($list, $filters...) {
  $output: ();

  @each $item in $list {

    @if index($filters, $item) {
      // silence
    }
    @else {
      $output: append($output, $item, list-separator($list));
    }

  }

  @return $output;
}

@function _compact($list) {
  @return _filter($list, false, "");
}

@function _split($string, $substr: false, $limit: str-length($string)) {
  $list: ();

    @if $substr == false {
      $list: append($list, $string);
    }
    @else if $substr == '' {
      @while str-length($string) > 0 {
        $list: append($list, str-slice($string, 0, 1));
        $string: str-slice($string, 2);
      }
    }
    @else if $substr {
      @if _str-contains($string, $substr) {
        $l: true;
        $c: _str-count($string, $substr);

        @for $i from 1 through $c {

          $start: str-index($string, $substr);
          $end: $start + str-length($substr) - 1;

          @if $start != 1 {
            $list: append($list, str-slice($string, 0, $start - 1));
            $string: str-slice($string, $end + 1, str-length($string));
          }
          @else {
            $string: str-slice($string, $end + 1, str-length($string));
          }
        }
        @if str-length($string) > 0 {
          $list: append($list, str-slice($string, 0));
        }
      }
      @else {
        @warn '"#{$string}" does not contain "#{$substr}"!';
        $list: append($list, $string);
      }
    }

  @return $list;
}

@function _coordinates($angle, $length: 1px) {

  $aliases: (
    n: 90deg,
    ne: 45deg,
    e: 0deg,
    se: 315deg,
    s: 270deg,
    sw: 225deg,
    w: 180deg,
    nw: 135deg
  );

  @if map-has-key($aliases, $angle) {
    $angle: to-lower-case($angle);

    $angle: map-get($aliases, $angle);
  }
  @if type-of($angle) != number {
    @warn "#{$angle} NaN";
  }
  @if type-of($length) != number {
    @warn "#{$length} NaN";
  }
  @if unit($length) != "px" {
    @warn "#{$length}; Unit must be px";
  }

  $x: _strip-unit($length) * _cos($angle);
  $y: _strip-unit($length) * _sin($angle);
  $y: _opposite($y);

  @return ($x + 0px) ($y + 0px);
}

@function _coords($angle, $length: 1px) {
  @return _coordinates($angle, $length);
}

@function _opposite($numbers) {
  $output: ();

  @if type-of($numbers) == number {
    $output: $numbers * -1;
  }
  @else if type-of($numbers) == list {
    @each $number in $numbers {
      @if type-of($number) == number {
        $output: append($output, $number * -1);
      }
      @else {
        @warn "#{$number} NaN";
      }
    }
  }
  @else {
    @warn "#{$numbers} NaN";
  }

  @return $output;
}

@function _rem-to-px($size) {
  @return (_strip-unit($size) * _strip-unit($_base-font-size)) + 0px;
}

// SASSY MATH
// https://github.com/Team-Sass/Sassy-math

// My light functions depend on these so I stole it
// Prefixed functions to avoid conflicts

$sg-pi: 3.1415926535897932384626433832795028841971693993751;
$sg-iter: 50;

@function _exponent($base, $exponent) {
  // reset value
  $value: $base;
  // positive intergers get multiplied
  @if $exponent > 1 {
    @for $i from 2 through $exponent {
      $value: $value * $base; } }
  // negitive intergers get divided. A number divided by itself is 1
  @if $exponent < 1 {
    @for $i from 0 through -$exponent {
      $value: $value / $base; } }
  // return the last value written
  @return $value;
}

@function _factorial($number) {
  // reset value
  $value: 1;
  // positive intergers get multiplied
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function _maclaurin($start, $key, $number) {
  $value: $start;
  $add: 0;

  @for $i from 1 through $sg-iter {
    @if $add == 0 {
      $value: $value - ( _exponent($number, $key) / -factorial($key) );
      $add: 1;
    }
    @else {
      $value: $value + ( _exponent($number, $key) / -factorial($key) );
      $add: 0;
    }

    $key: $key + 2;
  }

  @return $value;
}

@function _deg-to-rad($number) {
  @return $number * $sg-pi / 180deg;
}

@function _rad-to-deg($number) {
  @return $number * 180deg / $sg-pi;
}

@function _sin($number, $unit: "deg") {
 @if $unit == "deg" {
   $number: _deg-to-rad($number);
 }
 @return _maclaurin($number, 3, $number);
}

@function _cos($number, $unit: "deg") {
 @if $unit == "deg" {
   $number: _deg-to-rad($number);
 }
 @return _maclaurin(1, 2, $number);
}

@function _strip-unit($number) {
  @if type-of($number) != number {
    @warn "#{$number} NaN";
  }

  @return $number / ($number * 0 + 1)
}

@function _str-append($string, $insert) {
  $string: if($string == null, "", $string);

  @return str-insert($string, $insert, str-length($string) + 1);
}

@function _str-contains($string, $substr, $pos: 0) {

  $string: str-slice($string, $pos);

  @if str-index($string, $substr) != null {
    @return true;
  }
  @else {
    @return false;
  }
}

@function _str-count($string, $substring) {
  $counter: 0;

  @for $i from 1 through str-length($string) {

    $index: str-index($string, $substring);

    @if $index and $index > 0 {
      $counter: $counter + 1;
      $string: str-slice($string, $index + 1, str-length($string));
    }
  }

  @return $counter;

}

@function _str-join($list, $separator: ",") {
  $string: "";

  @for $i from 1 through length($list) {
    $string: _str-append($string, #{nth($list, $i)});

    @if $i != length($list) {
      $string: _str-append($string, $separator);
    }
  }

  @return $string;
}

@function _str-prepend($string, $insert) {
  $string: if($string == null, "", $string);

  @return str-insert($string, $insert, 1);
}

@function _global-light($length: 1px) {
  @return _light-source($_global-light, $length);
}

@function _global-light-inset($length: 1px) {
  @return _opposite(_global-light($length));
}

// Shorthands
@function _g($length: 1px) {
  @return _global-light($length);
}

@function _gi($length: 1px) {
  @return _global-light-inset($length);
}

@mixin _letterpress($background, $alpha: 0.6, $light-source: $_global-light) {
  @if lightness($background) > 50% {
    text-shadow: rgba(white, $alpha) _light-source($light-source) 0;
  } @else {
    text-shadow: rgba(black, $alpha) _light-source-inset($light-source) 0;
  }
  color: _readable($background, 10%);
}

@function _light-source($source, $length: 1px) {
  @return _opposite(_coordinates($source, $length));
}

@function _local-light($string, $length: 1px) {
  @return _light-source($string, $length);
}

@function _local-light-inset($string, $length: 1px) {
  @return _opposite(_local-light($string, $length));
}

@function _long-shadow($bgcolor: #fff, $length: 100px, $opacity: 0.1, $strength: 0, $light: $_global-light) {

  @if unit($length) == "px" or unitless($length) {
    $length: _strip-unit($length);
  }
  @else {
    @warn "Invalid unit #{$length}! Please use pixels";
  }

  $shadow-list: null;

  $x: 1;
  $y: 1;

  $l: _light-source($light);

  @for $i from 1 through $length {
    $o: ($opacity - (($opacity - ($opacity * $strength)) * ($i * 100 / $length) / 100)) * 100%;

    $x: nth($l, 1) * $i;
    $y: nth($l, 2) * $i;

    $shadow-list: append($shadow-list, mix(black, $bgcolor, $o) $x $y 0, comma);
  }

  @if alpha($bgcolor) < 1 {
    @warn "No alpha allowed (#{$bgcolor})!";
    @return null;
  }
  @else {
    @return $shadow-list;
  }
}

// For when you don't need any other shadows on the element
@mixin _long-box-shadow($bgcolor: #fff, $length: 100px, $opacity: 0.1, $strength: 0, $light: $_global-light) {
  box-shadow: _long-shadow($bgcolor, $length, $opacity, $strength, $light);
}

@mixin _long-text-shadow($bgcolor: #fff, $length: 100px, $opacity: 0.1, $strength: 0, $light: $_global-light) {
  text-shadow: _long-shadow($bgcolor, $length, $opacity, $strength, $light);
}

@function _readable($background, $alpha: 10%) {
  @if lightness($background) > 50% {
    @return mix($background, black, $alpha);
  } @else {
    @return mix($background, white, $alpha);
  }
}

// This is just a silly named CSS3 "filter" mixin and it only works in Webkit-based browsers as of now
// See http://caniuse.com/#feat=css-filters for compatibility

@mixin _sunglass($filter: brightness(50%)) {
  -webkit-filter: $filter;
  -moz-filter: $filter;
  filter: $filter;
}

@mixin _column($span: 1, $push: 0, $gap: $_base-gap, $grid: $_base-grid) {
  position: relative;
  min-height: 1px;
  padding-right: $gap/2;
  padding-left: $gap/2;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  @include _span($span, $grid);

  @if $push >= 0 {
    @include _push($push, $grid);
  }
}

@mixin _first-column {
  clear: left;
}

@mixin _generate-grid($grid-class, $span-class, $push-class: null, $grid: $_base-grid, $gap: $_base-gap) {

  .#{$grid-class} {
    @include _grid-container($gap);

    > [class*="#{$span-class}"] {
      @include _column(1, 0, $gap);
    }

    @for $i from 1 through $grid {
      & > .#{$span-class}#{$i} {
        @include _span($i, $grid);
      }
    }

    @if $push-class != null {
      @for $i from 0 through ($grid - 1) {
        & > .#{$push-class}#{$i} {
          @include _push($i, $grid);
        }
      }
    }
  }
}

@mixin _grid-container($gap: $_base-gap) {

  margin-right: -($gap/2);
  margin-left: -($gap/2);
  @include _clearfix;
}

@mixin _push($i, $grid: $_base-grid) {
  margin-left: _span($i, $grid);
}

@function _span($i, $grid: $_base-grid) {
  @return (100% / $grid) * $i;
}

@mixin _span($i, $grid: $_base-grid) {
  width: _span($i, $grid);
}

// Micro Clearfix by Nicolas Gallagher.
// http://nicolasgallagher.com/micro-clearfix-hack/

@mixin _clearfix {
  *zoom: 1;

  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

@function _img($filename) {
  @return url(#{$_base-img-path}#{$filename});
}

@function _icon($filename) {
  @return url(#{$_base-icon-path}#{$filename});
}

@mixin _google-font($family, $styles: (), $protocol: null) {

  $url: "//fonts.googleapis.com/css?family=";

  @if $protocol {
    $url: _str-prepend($url, $protocol + ":");
  }

  @if type-of($family) == string and _str-contains($family, " ") {
    $family: _split($family, " ");
  }
  $family: _str-join($family, "+");

  $url: _str-append($url, $family);

  @if length($styles) != 0 {
    $url: _str-append($url, ":");

    $url: _str-append($url, _str-join($styles));
  }
  @import url(quote($url));
}

@mixin _rem($property, $value) {
  @if ($_rem-fallback == true) {
    #{$property}: _rem-to-px($value);
  }
  #{$property}: $value;
}

@mixin _font-size($value) {

  @if unit($value) == rem {
    @include _rem(font-size, $value);
  }
  @else {
    font-size: $value;
  }
}