style.scss

// Variables
$spacer:            1rem;

$spacers: (
  0: 0,
  1: ($spacer * .125),  // 2px
  2: ($spacer * .25),   // 4px
  3: ($spacer * .5),    // 8px
  4: $spacer,           // 16px
  5: ($spacer * 1.5),   // 24px
  6: ($spacer * 2),     // 32px
  7: ($spacer * 2.5),   // 40px
  8: ($spacer * 3),     // 48px
  9: ($spacer * 3.5),   // 56px
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 1400px,
);

$enable-important-utilities: true !default;

// Functions
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @if not $n {
    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
  }
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $max: map-get($breakpoints, $name);
  @return if($max and $max > 0, $max - .02, null);
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

// Mixins
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
  $values: map-get($utility, values);

  // If the values are a list or string, convert it into a map
  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
    $values: zip($values, $values);
  }

  @each $key, $value in $values {
    $properties: map-get($utility, property);

    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
    @if type-of($properties) == "string" {
      $properties: append((), $properties);
    }

    // Use custom class if present
    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
    $property-class: if($property-class == null, "", $property-class);

    // State params to generate pseudo-classes
    $state: if(map-has-key($utility, state), map-get($utility, state), ());

    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);

    // Don't prefix if value key is null (eg. with shadow class)
    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");

    @if map-get($utility, rfs) {
      // Inside the media query
      @if $is-rfs-media-query {
        $val: rfs-value($value);

        // Do not render anything if fluid and non fluid values are the same
        $value: if($val == rfs-fluid-value($value), null, $val);
      }
      @else {
        $value: rfs-fluid-value($value);
      }
    }

    $is-rtl: map-get($utility, rtl);

    @if $value != null {
      @if $is-rtl == false {
        /* rtl:begin:remove */
      }
      .#{$property-class + $infix + $property-class-modifier} {
        @each $property in $properties {
          #{$property}: $value if($enable-important-utilities, !important, null);
        }
      }

      @each $pseudo in $state {
        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
          @each $property in $properties {
            #{$property}: $value if($enable-important-utilities, !important, null);
          }
        }
      }
      @if $is-rtl == false {
        /* rtl:end:remove */
      }
    }
  }
}

// Utilities map
$utilities: (
  // scss-docs-start utils-overflow
  "overflow":
    (
      property: overflow,
      values: auto hidden visible scroll,
    ),
  // scss-docs-end utils-overflow
  // scss-docs-start utils-display
  "display":
    (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none,
    ),
  // scss-docs-end utils-display
  // Flex utilities
  // scss-docs-start utils-flex
  "flex":
    (
      responsive: true,
      property: flex,
      values: (
        fill: 1 1 auto,
      ),
    ),
  "flex-direction": (
    responsive: true,
    property: flex-direction,
    class: flex,
    values: row column row-reverse column-reverse,
  ),
  "flex-grow": (
    responsive: true,
    property: flex-grow,
    class: flex,
    values: (
      grow-0: 0,
      grow-1: 1,
    ),
  ),
  "flex-shrink": (
    responsive: true,
    property: flex-shrink,
    class: flex,
    values: (
      shrink-0: 0,
      shrink-1: 1,
    ),
  ),
  "flex-wrap": (
    responsive: true,
    property: flex-wrap,
    class: flex,
    values: wrap nowrap wrap-reverse,
  ),
  "justify-content": (
    responsive: true,
    property: justify-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      evenly: space-evenly,
    ),
  ),
  "align-items": (
    responsive: true,
    property: align-items,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    ),
  ),
  "align-content": (
    responsive: true,
    property: align-content,
    values: (
      start: flex-start,
      end: flex-end,
      center: center,
      between: space-between,
      around: space-around,
      stretch: stretch,
    ),
  ),
  "align-self": (
    responsive: true,
    property: align-self,
    values: (
      auto: auto,
      start: flex-start,
      end: flex-end,
      center: center,
      baseline: baseline,
      stretch: stretch,
    ),
  ),
  "order": (
    responsive: true,
    property: order,
    values: (
      first: -1,
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      4: 4,
      5: 5,
      last: 6,
    ),
  ),
  // scss-docs-end utils-flex
  // Margin utilities
  // scss-docs-start utils-spacing
  "margin":
    (
      responsive: true,
      property: margin,
      class: m,
      values:
        map-merge(
          $spacers,
          (
            auto: auto,
          )
        ),
    ),
  "margin-x": (
    responsive: true,
    property: margin-right margin-left,
    class: mx,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  "margin-y": (
    responsive: true,
    property: margin-top margin-bottom,
    class: my,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  "margin-top": (
    responsive: true,
    property: margin-top,
    class: mt,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  "margin-right": (
    responsive: true,
    property: margin-right,
    class: mr,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  "margin-bottom": (
    responsive: true,
    property: margin-bottom,
    class: mb,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  "margin-left": (
    responsive: true,
    property: margin-left,
    class: mr,
    values:
      map-merge(
        $spacers,
        (
          auto: auto,
        )
      ),
  ),
  // Padding utilities
  "padding":
    (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers,
    ),
  "padding-x": (
    responsive: true,
    property: padding-right padding-left,
    class: px,
    values: $spacers,
  ),
  "padding-y": (
    responsive: true,
    property: padding-top padding-bottom,
    class: py,
    values: $spacers,
  ),
  "padding-top": (
    responsive: true,
    property: padding-top,
    class: pt,
    values: $spacers,
  ),
  "padding-right": (
    responsive: true,
    property: padding-right,
    class: pr,
    values: $spacers,
  ),
  "padding-bottom": (
    responsive: true,
    property: padding-bottom,
    class: pb,
    values: $spacers,
  ),
  "padding-left": (
    responsive: true,
    property: padding-left,
    class: pl,
    values: $spacers,
  ),
  // scss-docs-end utils-spacing
  "white-space":
    (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      ),
    ),
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (
      break: break-word,
    ),
    rtl: false,
  ),
  // scss-docs-end utils-text
  // scss-docs-start utils-visibility
  "visibility":
    (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      ),
    )
);


// Loop over each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
  // Generate media query if needed
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // Loop over each utility property
    @each $key, $utility in $utilities {
      // The utility can be disabled with `false`, thus check if the utility is a map first
      // Only proceed if responsive media queries are enabled or if it's the base media query
      @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
        @include generate-utility($utility, $infix);
      }
    }
  }
}