_responsive.scss

/*  =========================================================================
    tools.responsive
    desc
/   ========================================================================= */

/*  Use/Forward rules
    `@use` or `@forward` everything you need here from other files.
    These can include variables, mixins & other includes.
/   ========================================================================= */

@use 'sass:list';
@use 'sass:math';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use '../settings/defaults';
@use '_internal/functions';
@use 'rem';



/*  Query
    Apply a media query defined in `defaults.$queries`.

    Example usage:
    @include responsive.mq(wall) {
      outline: 1px solid #ff0000;
    }

    Or you can pass in a type:
    @include responsive.mq(wall, print) {
      outline: 1px solid #ff0000;
    }
/   ========================================================================= */

@mixin mq($name, $type: all) {
  @if not map.has-key(defaults.$queries, $name) {
    @error '"defaults.$queries" does not contain "#{$name}", expects one of the following: #{map.keys(defaults.$queries)}' ;
  }

  @media #{$type} and #{functions.get-breakpoints(map.get(defaults.$queries, $name))} {
    @content;
  }
}



/*  in-query
    A little helper mixin to quickly create responsive variants of a certain
    selector. The mixin's `@content` will be also applied to the parent selector.

    Example usage:
    $in-query-YOURMODULE: (lap, desk);
    .your-module {
      @include responsive.in-query($in-query-YOURMODULE) {
        outline: 1px solid #ff0000;
      }
    }
/   ========================================================================= */


@mixin in-query($queries) {
  @content;

  @if meta.type-of($queries) == list {
    @each $query in $queries {
      @include mq($query) {
        &#{defaults.$responsive-modifier}#{$query} {
          @content;
        }
      }
    }
  }
  @else if meta.type-of($queries) == string {
    @include mq($queries) {
      &#{defaults.$responsive-modifier}#{$queries} {
        @content;
      }
    }
  }
}




/*  Lock
    Basic usage:

    font-size: responsive.lock(18px, 24px);

    This will scale the property perfectly and smooth from 18px
    on `lap` breakpoint to 24px on `desk` breakpoint.

    You can also redefine the min- and max breakpoints like this:

    padding: responsive.lock(18px, 24px, desk, wall);
/   ========================================================================= */

@function lock($size-min: 16px, $size-max: 20px, $min-bp: lap, $max-bp: desk) {
  $return: $size-min;

  @if map.has-key(defaults.$breakpoints, $min-bp) and map.has-key(defaults.$breakpoints, $max-bp) {
    @if (math.unit($size-min) == 'px' and math.unit($size-max) == 'px' and math.unit(map.get(defaults.$breakpoints, $min-bp)) == 'px' and math.unit(map.get(defaults.$breakpoints, $max-bp)) == 'px') {
      $min-bp-value: map.get(defaults.$breakpoints, $min-bp);
      $max-bp-value: map.get(defaults.$breakpoints, $max-bp);

      $min-bp-rem-unitless: functions.strip-units(rem.convert($min-bp-value));
      $max-bp-rem-unitless: functions.strip-units(rem.convert($max-bp-value));

      $size-min-rem: rem.convert($size-min);
      $size-min-rem-unitless: functions.strip-units($size-min-rem);
      $size-max-rem: rem.convert($size-max);
      $size-max-rem-unitless: functions.strip-units($size-max-rem);

      $slope: ($size-max-rem-unitless - $size-min-rem-unitless) / ($max-bp-rem-unitless - $min-bp-rem-unitless);
      $yAxisIntersection: -($min-bp-rem-unitless) * $slope + $size-min-rem-unitless;

      $return: clamp(#{$size-min-rem}, #{$yAxisIntersection * 1rem} + #{($slope * 100) * 1vw}, #{$size-max-rem});
    } @else {
      @error '$size-min, $size-max, $min-bp and $max-bp should be defined in px.';
    }
  } @else {
    @error '`$min-bp: #{$min-bp}` or `$max-bp: #{$max-bp}` should be defined in `defaults.$breakpoints`';
  }

  @return $return;
}