Ghost/core/client/assets/sass/modules/breakpoint.scss

/*
 * Breakpoint Sass 1.3.0
 * Last updated: 2012-08-28
 * Copyright: Mason Wendell 2012 - MIT Licensed
 * Source: https://github.com/canarymason/breakpoint
 */

//////////////////////////////
// Default Variables
//////////////////////////////
$breakpoint-default-feature:  'min-width'     !default;
$breakpoint-default-media:    'all'           !default;
$breakpoint-force-media-all:  false           !default;
$breakpoint-default-pair:     'width'         !default;
$breakpoint-to-ems:           false           !default;
$breakpoint-prefixes:         'webkit' 'moz'  !default;
$breakpoint-prefixed-queries: 'device-pixel-ratio' 'min-device-pixel-ratio' 'max-device-pixel-ratio'                      !default;

$breakpoint-no-queries:       false           !default;
$breakpoint-no-query-wrappers: false           !default;

$breakpoint-base-font-size: false;

//////////////////////////////
// Converts the input value to Base EMs
//////////////////////////////
@function breakpoint-to-base-em($value, $base-font-size: false) {
  $value-unit: unit($value);

  // Will convert relative EMs into root EMs.
  @if $base-font-size and type-of($base-font-size) == 'number' and $value-unit == 'em' {
    $base-unit: unit($base-font-size);

    @if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
      @return base-conversion($value) / base-conversion($base-font-size) * 1em;
    }
    @else {
      @warn '#{$base-font-size} is not set in valid units for font size!';
      @return false;
    }
  }
  @else {
    @return base-conversion($value);
  }
}

@function base-conversion($value) {
  $unit: unit($value);

  @if $unit == 'px' {
    @return $value / 16px * 1em;
  }
  @else if $unit == '%' {
    @return $value / 100% * 1em;
  }
  @else if $unit == 'em' {
    @return $value;
  }
  @else if $unit == 'pt' {
    @return $value / 12pt * 1em;
  }
  @else {
    @return $value;
//    @warn 'Everything is terrible! What have you done?!';
  }
}

//////////////////////////////
// Returns whether the feature can have a min/max pair
//////////////////////////////
@function breakpoint-min-max($feature) {
  @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
    @return true;
  }
  @else {
    @return false;
  }
}

//////////////////////////////
// Returns whether the feature can have a string value
//////////////////////////////
@function breakpoint-string-value($feature) {
@if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' or $feature == 'resolution' or $feature == 'min-resolution' or $feature == 'max-resolution' {
    @return true;
  }
  @else {
    @return false;
  }
}

//////////////////////////////
// Experimental Media Queries
//////////////////////////////
@function breakpoint-experimental($property, $prefix) {
  @if $property == 'min-device-pixel-ratio' {
    @if $prefix == 'webkit' {
      @return '-#{$prefix}-#{$property}';
    }
    @else if $prefix == 'moz' {
      @return 'min--#{$prefix}-device-pixel-ratio';
    }
    @else {
      @warn '#{$property} is not fully supported in -#{prefix}';
      @return 'ERROR';
    }
  }
  @else if $property == 'max-device-pixel-ratio' {
    @if $prefix == 'webkit' {
      @return '-#{$prefix}-#{$property}';
    }
    @else if $prefix == 'moz' {
      @return 'max--#{$prefix}-device-pixel-ratio';
    }
    @else {
      @warn '#{$property} is not fully supported in -#{prefix}';
      @return 'ERROR';
    }
  }
  @else {
    @return '-#{$prefix}-#{$property}';
  }
}


//////////////////////////////
// Private Breakpoint Variables
//////////////////////////////
$TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;

//////////////////////////////
// Breakpoint Get Context
// $feature: Input feature to get it's current MQ context. Returns false if no context
//////////////////////////////
@function breakpoint-get-context($feature) {
  @each $context in $TXkgdmFyaWFibGUhIEdvIGF3YXkh {
    @if $feature == nth($context, 1) {
      @return nth($context, 2);
    }
  }

  @return false;
}

//////////////////////////////
// Private function to set context
//////////////////////////////
@function U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value) {
  @if $value == 'monochrome' {
    $feature: 'monochrome';
  }

  $append: $feature;
  $append: join($append, $value, space);

  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: append($TXkgdmFyaWFibGUhIEdvIGF3YXkh, $append, comma);

  @return true;
}

//////////////////////////////
// Private function to reset context
//////////////////////////////
@mixin TXkgcmVzZXQhIEdvIGF3YXkh {
  $TXkgdmFyaWFibGUhIEdvIGF3YXkh: ();
}

//////////////////////////////
// Breakpoint Mixin
//////////////////////////////
@mixin breakpoint($breakpoint, $media: $breakpoint-default-media, $no-query: false, $base-font-size: $breakpoint-base-font-size) {
  // Query and Media String Defaults
  $query:         false !default;
  $query-holder:  false !default;
  $media-string:  false !default;
  $do-prefix:     false !default;

  $webkit:        false !default;
  $webkit-first:  true !default;
  $moz:           false !default;
  $moz-first:     true !default;
  $o:             false !default;
  $o-first:       true !default;
  $ms:            false !default;
  $ms-first:      true !default;

  // Holder for Count
  $first:         true  !default;

  // Reset Context
  @include TXkgcmVzZXQhIEdvIGF3YXkh;

  // Set Media Context
  $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('media', $media);

  // Initialize Query String
  @if $media != 'all' or $breakpoint-force-media-all {
    $media-string: "#{$media} ";
  }
  @else {
    $media-string: "";
  }

  // If we have a single query, let's just work with that.
  @if is_breakpoint_list($breakpoint) == false {
    @each $prefix-query in $breakpoint-prefixed-queries {
      @if $do-prefix == false {
        $do-prefix: featureExists($prefix-query, $breakpoint);
      }
    }
    @if $do-prefix {
      @each $prfx in $breakpoint-prefixes {
        @if $prfx == 'webkit' {
          $webkit: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
        }

        @if $prfx == 'moz' {
          $moz: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
        }

        @if $prfx == 'o' {
          $o: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
        }

        @if $prfx == 'ms' {
          $ms: breakpoint-switch($breakpoint, $media-string, true, $prfx, $base-font-size: $base-font-size);
        }
      }
    }
    @else {
      $query: breakpoint-switch($breakpoint, $media-string, true, $base-font-size: $base-font-size);
    }
  }
  @else {
    // See if Prefix Query exists
    @each $prefix-query in $breakpoint-prefixed-queries {
      @if $do-prefix == false {
        $do-prefix: featureExists($prefix-query, $breakpoint);
      }
    }

    @if $do-prefix {
      @each $prfx in $breakpoint-prefixes {
        @each $bkpt in $breakpoint {
          @if $prfx == 'webkit' {
            @if $webkit-first {
              $webkit: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
              $webkit-first: false;
            }
            @else {
              $webkit: join($webkit, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
            }
          }

          @if $prfx == 'moz' {
            @if $moz-first {
              $moz: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
              $moz-first: false;
            }
            @else {
              $moz: join($moz, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
            }
          }

          @if $prfx == 'o' {
            @if $o-first {
              $o: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
              $o-first: false;
            }
            @else {
              $o: join($o, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
            }
          }

          @if $prfx == 'ms' {
            @if $ms-first {
              $ms: breakpoint-switch($bkpt, $media-string, true, $prfx, $base-font-size: $base-font-size);
              $ms-first: false;
            }
            @else {
              $ms: join($ms, breakpoint-switch($bkpt, $media-string, $prefix: $prfx, $base-font-size: $base-font-size));
            }
          }
        }
      }
    }
    @else {
      @each $bkpt in $breakpoint {
        @if $first == true {
          $query: breakpoint-switch($bkpt, $media-string, true, $base-font-size: $base-font-size);
          $first: false;
        }
        @else {
          $query: join($query, breakpoint-switch($bkpt, $media-string, $base-font-size: $base-font-size));
        }
      }
    }
  }

  @if $breakpoint-no-queries {
    @if $no-query {
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no queries', true);
      @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
        #{$no-query} & {
          @content;
          $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
        }
      }
      @else {
        @content;
      }
    }
  }
  @else {
    @if $breakpoint-no-query-wrappers and type-of($no-query) == string {
      #{$no-query} & {
        @content;
        $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh('no query wrapper', $no-query);
      }
    }
    @if $query {
      @media #{$query} {
        @content;
      }
    }
    @else {
      $pf-queries: $webkit, $moz, $o, $ms;
      $pf-query: ();

      @each $pfq in $pf-queries {
        @if $pfq {
          $pf-query: append($pf-query, $pfq, comma);
        }
      }
      @media #{$pf-query} {
        @content;
      }
    }
  }

  @include TXkgcmVzZXQhIEdvIGF3YXkh;
}

@function breakpoint-switch($breakpoint, $media-string, $first: false, $prefix: false, $base-font-size: $breakpoint-base-font-size) {
  // Feature/Value/Length/Query Placehoders:
  $feature:       false !default;
  $min-feature:   "min-#{$breakpoint-default-pair}" !default;
  $max-feature:   "max-#{$breakpoint-default-pair}" !default;
  $value:         false !default;
  $min-value:     false !default;
  $max-value:     false !default;
  $length:        false !default;
  $query:         false !default;

  $length: length($breakpoint);
  // Check to see if there is only one item.
  @if $length == 1 {
    $value: $breakpoint;
    @if type-of($breakpoint) == 'number' {
      $feature: $breakpoint-default-feature;
    }

    // If EM Breakpoints are active, do it!
    @if $breakpoint-to-ems and type-of($value) == 'number' {
      $value: breakpoint-to-base-em($value, $base-font-size);
    }
    // Build the Query
    $query: breakpoint-generate($media-string, $feature, $value, $first);
    // Set Context
    $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
  }
  @else if $length == 2 {
    // If both are numbers, we've got a double!
    @if type-of(nth($breakpoint, 1)) == 'number' and type-of(nth($breakpoint, 2)) == 'number' {
      // See which is larger.
      @if nth($breakpoint, 1) > nth($breakpoint, 2) {
        $min-value: nth($breakpoint, 2);
        $max-value: nth($breakpoint, 1);
      }
      @else {
        $min-value: nth($breakpoint, 1);
        $max-value: nth($breakpoint, 2);
      }

      // If EM Breakpoints are active, do it!
      @if $breakpoint-to-ems and type-of($min-value) == 'number' {
        $min-value: breakpoint-to-base-em($min-value, $base-font-size);
      }
      @if $breakpoint-to-ems and type-of($max-value) == 'number' {
        $max-value: breakpoint-to-base-em($max-value, $base-font-size);
      }

      // Min/Max for given
      $query: breakpoint-generate($media-string, $min-feature, $min-value, $first);
      $query: join($query, breakpoint-generate($media-string, $max-feature, $max-value));
      // Set Context
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($min-feature, $min-value);
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($max-feature, $max-value);
    }
    @else if type-of(nth($breakpoint, 1)) == 'string' and type-of(nth($breakpoint, 2)) == 'string' {
      @if breakpoint-string-value(nth($breakpoint, 1)) == true {
        $feature: nth($breakpoint, 1);
        $value: nth($breakpoint, 2);
      }
      @else {
        $feature: nth($breakpoint, 2);
        $value: nth($breakpoint, 1);
      }

      // If EM Breakpoints are active, do it!
      @if $breakpoint-to-ems and type-of($value) == 'number' {
        $value: breakpoint-to-base-em($value, $base-font-size);
      }

      // Build the Query
      $query: breakpoint-generate($media-string, $feature, $value, $first);
      // Set Context
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
    }
    @else {
      // Because we can have either the first or second option be the feature, we switch on it.
      @if type-of(nth($breakpoint, 1)) == string {
        $feature: nth($breakpoint, 1);
        $value: nth($breakpoint, 2);
      }
      @else if type-of(nth($breakpoint, 2)) == string {
        $feature: nth($breakpoint, 2);
        $value: nth($breakpoint, 1);
      }

      @if $feature == 'device-pixel-ratio' or $feature == 'min-device-pixel-ratio' or $feature == 'max-device-pixel-ratio' {
        $feature: breakpoint-experimental($feature, $prefix);
        //$value: 96 * $value * 1dpi;
        //        @if $feature == 'device-pixel-ratio' {
        //          $feature: 'resolution';
        //        }
        //        @else if $feature == 'min-device-pixel-ratio' {
        //          $feature: 'min-resolution';
        //        }
        //        @else if $feature == 'max-device-pixel-ratio' {
        //          $feature: 'max-resolution';
        //        }
      }

      // If EM Breakpoints are active, do it!
      @if $breakpoint-to-ems and type-of($value) == 'number' {
        $value: breakpoint-to-base-em($value, $base-font-size);
      }

      // Build the Query
      $query: breakpoint-generate($media-string, $feature, $value, $first);
      // Set Context
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value);
    }
  }
  @else if $length == 3 {
    @if type-of(nth($breakpoint, 1)) == 'string' {
      $feature: nth($breakpoint, 1);
      // See which is larger.
      @if nth($breakpoint, 2) > nth($breakpoint, 3) {
        $min-value: nth($breakpoint, 3);
        $max-value: nth($breakpoint, 2);
      }
      @else {
        $min-value: nth($breakpoint, 2);
        $max-value: nth($breakpoint, 3);
      }
    }
    @else {
      $feature: nth($breakpoint, 3);
      // See which is larger.
      @if nth($breakpoint, 1) > nth($breakpoint, 2) {
        $min-value: nth($breakpoint, 2);
        $max-value: nth($breakpoint, 1);
      }
      @else {
        $min-value: nth($breakpoint, 1);
        $max-value: nth($breakpoint, 2);
      }
    }

    // If EM Breakpoints are active, do it!
    @if $breakpoint-to-ems and type-of($min-value) == 'number' {
      $min-value: breakpoint-to-base-em($min-value, $base-font-size);
    }
    @if $breakpoint-to-ems and type-of($max-value) == 'number' {
      $max-value: breakpoint-to-base-em($max-value, $base-font-size);
    }

    @if breakpoint-min-max($feature) == true {
      @if $feature == 'device-pixel-ratio' {
        $min-feature: breakpoint-experimental('min-#{$feature}', $prefix);
        $max-feature: breakpoint-experimental('max-#{$feature}', $prefix);
      }
      @else {
        $min-feature: 'min-#{$feature}';
        $max-feature: 'max-#{$feature}';
      }

      // Min/Max for given
      $query: breakpoint-generate($media-string, $min-feature, $min-value, $first);
      $query: join($query, breakpoint-generate($media-string, $max-feature, $max-value));
      // Set Context
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($min-feature, $min-value);
      $context: U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($max-feature, $max-value);
    }
    @else {
      @warn '#{$feature} cannot have a min/max value!';
    }
  }

  @return $query;
}

@function breakpoint-generate($media, $feature, $value, $first: false) {
  // Media Query string to be returned
  $new-string: "";

  // If it's the first item, it gets special treatment
  @if $first == true {
    // And Statement
    $and: 'and ';
    // If $media is blank (i.e. all), remove and statement
    @if $media == '' {
      $and: '';
    }

    @if $feature != false {
      $new-string: #{$media}unquote("#{$and}(#{$feature}: #{$value})");
    }
    @else {
      $new-string: #{$media}unquote("#{$and}(#{$value})");
    }
  }

  @else {
    @if $feature != false {
      $new-string: unquote("and (#{$feature}: #{$value})");
    }
    @else {
      $new-string: unquote("and (#{$value})");
    }
  }

  @return $new-string;
}