Subversion Repositories web.creative

// breakpoints.scss v1.0 | @ajlkn | MIT licensed */

// Vars.

  /// Breakpoints.
  /// @var {list}
  $breakpoints: () !global;

// Mixins.

  /// Sets breakpoints.
  /// @param {map} $x Breakpoints.
  @mixin breakpoints($x: ()) {
    $breakpoints: $x !global;
  }

  /// Wraps @content in a @media block targeting a specific orientation.
  /// @param {string} $orientation Orientation.
  @mixin orientation($orientation) {
    @media screen and (orientation: #{$orientation}) {
      @content;
    }
  }

  /// Wraps @content in a @media block using a given query.
  /// @param {string} $query Query.
  @mixin breakpoint($query: null) {

    $breakpoint: null;
    $op: null;
    $media: null;

    // Determine operator, breakpoint.

      // Greater than or equal.
        @if (str-slice($query, 0, 2) == '>=') {

          $op: 'gte';
          $breakpoint: str-slice($query, 3);

        }

      // Less than or equal.
        @elseif (str-slice($query, 0, 2) == '<=') {

          $op: 'lte';
          $breakpoint: str-slice($query, 3);

        }

      // Greater than.
        @elseif (str-slice($query, 0, 1) == '>') {

          $op: 'gt';
          $breakpoint: str-slice($query, 2);

        }

      // Less than.
        @elseif (str-slice($query, 0, 1) == '<') {

          $op: 'lt';
          $breakpoint: str-slice($query, 2);

        }

      // Not.
        @elseif (str-slice($query, 0, 1) == '!') {

          $op: 'not';
          $breakpoint: str-slice($query, 2);

        }

      // Equal.
        @else {

          $op: 'eq';
          $breakpoint: $query;

        }

    // Build media.
      @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {

        $a: map-get($breakpoints, $breakpoint);

        // Range.
          @if (type-of($a) == 'list') {

            $x: nth($a, 1);
            $y: nth($a, 2);

            // Max only.
              @if ($x == null) {

                // Greater than or equal (>= 0 / anything)
                  @if ($op == 'gte') {
                    $media: 'screen';
                  }

                // Less than or equal (<= y)
                  @elseif ($op == 'lte') {
                    $media: 'screen and (max-width: ' + $y + ')';
                  }

                // Greater than (> y)
                  @elseif ($op == 'gt') {
                    $media: 'screen and (min-width: ' + ($y + 1) + ')';
                  }

                // Less than (< 0 / invalid)
                  @elseif ($op == 'lt') {
                    $media: 'screen and (max-width: -1px)';
                  }

                // Not (> y)
                  @elseif ($op == 'not') {
                    $media: 'screen and (min-width: ' + ($y + 1) + ')';
                  }

                // Equal (<= y)
                  @else {
                    $media: 'screen and (max-width: ' + $y + ')';
                  }

              }

            // Min only.
              @else if ($y == null) {

                // Greater than or equal (>= x)
                  @if ($op == 'gte') {
                    $media: 'screen and (min-width: ' + $x + ')';
                  }

                // Less than or equal (<= inf / anything)
                  @elseif ($op == 'lte') {
                    $media: 'screen';
                  }

                // Greater than (> inf / invalid)
                  @elseif ($op == 'gt') {
                    $media: 'screen and (max-width: -1px)';
                  }

                // Less than (< x)
                  @elseif ($op == 'lt') {
                    $media: 'screen and (max-width: ' + ($x - 1) + ')';
                  }

                // Not (< x)
                  @elseif ($op == 'not') {
                    $media: 'screen and (max-width: ' + ($x - 1) + ')';
                  }

                // Equal (>= x)
                  @else {
                    $media: 'screen and (min-width: ' + $x + ')';
                  }

              }

            // Min and max.
              @else {

                // Greater than or equal (>= x)
                  @if ($op == 'gte') {
                    $media: 'screen and (min-width: ' + $x + ')';
                  }

                // Less than or equal (<= y)
                  @elseif ($op == 'lte') {
                    $media: 'screen and (max-width: ' + $y + ')';
                  }

                // Greater than (> y)
                  @elseif ($op == 'gt') {
                    $media: 'screen and (min-width: ' + ($y + 1) + ')';
                  }

                // Less than (< x)
                  @elseif ($op == 'lt') {
                    $media: 'screen and (max-width: ' + ($x - 1) + ')';
                  }

                // Not (< x and > y)
                  @elseif ($op == 'not') {
                    $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
                  }

                // Equal (>= x and <= y)
                  @else {
                    $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
                  }

              }

          }

        // String.
          @else {

            // Missing a media type? Prefix with "screen".
              @if (str-slice($a, 0, 1) == '(') {
                $media: 'screen and ' + $a;
              }

            // Otherwise, use as-is.
              @else {
                $media: $a;
              }

          }

      }

    // Output.
          @media #{$media} {
        @content;
      }

  }