@ons/design-system 70.0.7 → 70.0.8

package/scss/helpers/_mixins.scss

@@ -1,94 +1,100 @@
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+
 @mixin rem($property, $values...) {
-  $max: length($values);
-  $px-values: '';
-  $rem-values: '';
+    $max: list.length($values);
+    $px-values: '';
+    $rem-values: '';
 
-  @for $i from 1 through $max {
-    $value: strip-unit(nth($values, $i));
-    $px-values: #{$px-values + $value * 16}px;
+    @for $i from 1 through $max {
+        $value: strip-unit(list.nth($values, $i));
+        $px-values: #{$px-values + $value * 16}px;
 
-    @if $i < $max {
-      $px-values: #{$px-values + ' '};
+        @if $i < $max {
+            $px-values: #{$px-values + ' '};
+        }
     }
-  }
 
-  @for $i from 1 through $max {
-    $value: strip-unit(nth($values, $i));
-    $rem-values: #{$rem-values + $value}rem;
+    @for $i from 1 through $max {
+        $value: strip-unit(list.nth($values, $i));
+        $rem-values: #{$rem-values + $value}rem;
 
-    @if $i < $max {
-      $rem-values: #{$rem-values + ' '};
+        @if $i < $max {
+            $rem-values: #{$rem-values + ' '};
+        }
     }
-  }
 
-  #{$property}: $px-values;
-  #{$property}: $rem-values;
+    #{$property}: $px-values;
+    #{$property}: $rem-values;
 }
 
 @mixin font-size($size-value: 1.6) {
-  @include rem(font-size, $size-value);
+    @include rem(font-size, $size-value);
 }
 
 // =============================================================================
 // String Replace
 // =============================================================================
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+    $index: string.index($string, $search);
 
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace +
+            str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
 
-  @return $string;
+    @return $string;
 }
 // =============================================================================
 // Font Face
 // =============================================================================
 @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
-  $src: null;
-  $extmods: (
-    eot: '?',
-    svg: '#' + str-replace($name, ' ', '_'),
-  );
-  $formats: (
-    otf: 'opentype',
-    ttf: 'truetype',
-  );
-
-  @each $ext in $exts {
-    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
-    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
-    $src: append($src, url('#{$path}.#{$extmod}') format(quote($format)), comma);
-  }
-
-  @font-face {
-    font-family: quote($name);
-    font-style: $style;
-    font-weight: $weight;
-    src: $src;
-  }
+    $src: null;
+    $extmods: (
+        eot: '?',
+        svg: '#' + str-replace($name, ' ', '_'),
+    );
+    $formats: (
+        otf: 'opentype',
+        ttf: 'truetype',
+    );
+
+    @each $ext in $exts {
+        $extmod: if(map.has-key($extmods, $ext), $ext + map.get($extmods, $ext), $ext);
+        $format: if(map.has-key($formats, $ext), map.get($formats, $ext), $ext);
+        $src: list.append($src, url('#{$path}.#{$extmod}') format(string.quote($format)), comma);
+    }
+
+    @font-face {
+        font-family: string.quote($name);
+        font-style: $style;
+        font-weight: $weight;
+        src: $src;
+    }
 }
 
-/* stylelint-disable */
+/* stylelint-disable block-no-empty */
 @mixin clearfix() {
-  // no-op
+    // no-op
 }
-/* stylelint-enable */
+/* stylelint-enable block-no-empty */
 
 // =============================================================================
 // Remove nth-Child Padding
 // =============================================================================
 
 @mixin nth-element($num, $px) {
-  &:nth-child(#{$num}) {
-    padding-left: $px;
-  }
+    &:nth-child(#{$num}) {
+        padding-left: $px;
+    }
 }
 
 // =============================================================================
 // Sets antialiasing - used for light text on dark background
 // =============================================================================
 @mixin font-smoothing() {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
 }

package/scss/helpers/_mq.scss

@@ -1,93 +1,90 @@
-@mixin mq($from: none, $to: none, $from-operator: none, $to-operator: none) {
-  @if $from != none and type-of($from) == 'string' {
-    $from: get-bp-width($from);
-  }
-
-  @if $to != none and type-of($to) == 'string' {
-    $to: get-bp-width($to);
-  }
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
 
-  @if ($from == none or $from <= nth(nth($grid-bp, 1), 2)) and $to == none {
-    @content;
-  }
-
-  @else if $from == none or $from <= nth(nth($grid-bp, 1), 2) {
-    @if $to-operator != none and $to-operator == '<' {
-      $to: $to - 1;
+@mixin mq($from: none, $to: none, $from-operator: none, $to-operator: none) {
+    @if $from != none and meta.type-of($from) == 'string' {
+        $from: get-bp-width($from);
     }
 
-    @media (max-width: $to) {
-      @content;
+    @if $to != none and meta.type-of($to) == 'string' {
+        $to: get-bp-width($to);
     }
-  }
 
-  @else if $to == none {
-    @if $from-operator != none and $from-operator == '<' {
-      $from: $from + 1;
-    }
+    @if ($from == none or $from <= list.nth(list.nth($grid-bp, 1), 2)) and $to == none {
+        @content;
+    } @else if $from == none or $from <= list.nth(list.nth($grid-bp, 1), 2) {
+        @if $to-operator != none and $to-operator == '<' {
+            $to: $to - 1;
+        }
 
-    @media (min-width: $from) {
-      @content;
-    }
-  }
+        @media (max-width: $to) {
+            @content;
+        }
+    } @else if $to == none {
+        @if $from-operator != none and $from-operator == '<' {
+            $from: $from + 1;
+        }
 
-  @else {
-    @if $from-operator != none and $from-operator == '<' {
-      $from: $from + 1;
-    }
+        @media (min-width: $from) {
+            @content;
+        }
+    } @else {
+        @if $from-operator != none and $from-operator == '<' {
+            $from: $from + 1;
+        }
 
-    @if $to-operator != none and $to-operator == '<' {
-      $to: $to - 1;
-    }
+        @if $to-operator != none and $to-operator == '<' {
+            $to: $to - 1;
+        }
 
-    @media (min-width: $from) and (max-width: $to) {
-      @content;
+        @media (min-width: $from) and (max-width: $to) {
+            @content;
+        }
     }
-  }
 }
 
 @function get-bp-width($name, $breakpoints: $grid-bp) {
-  @if map-has-key($breakpoints, $name) {
-    @return map-get($breakpoints, $name);
-  }
-
-  @else {
-    @warn 'Breakpoint #{$name} wasn\'t found in $breakpoints.';
-  }
+    @if map.has-key($breakpoints, $name) {
+        @return map.get($breakpoints, $name);
+    } @else {
+        @warn 'Breakpoint #{$name} wasn\'t found in $breakpoints.';
+    }
 }
 
 /// @param {Number} $number - Number to remove unit from
 /// @return {Number} - Unitless number
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / ($number * 0 + 1);
-  }
+    @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+        @return $number / ($number * 0 + 1);
+    }
 
-  @return $number;
+    @return $number;
 }
 
 @mixin bp-suffix($class, $original: true, $breakpoints: $grid-bp, $create-between-breakpoints: false) {
-  @if $original {
-    .#{$class} {
-      @content;
+    @if $original {
+        .#{$class} {
+            @content;
+        }
     }
-  }
 
-  @each $breakpoint-min, $size in $breakpoints {
-    @include mq($breakpoint-min) {
-      .#{$class}\@#{$breakpoint-min} {
-        @content;
-      }
-    }
+    @each $breakpoint-min, $size in $breakpoints {
+        @include mq($breakpoint-min) {
+            .#{$class}\@#{$breakpoint-min} {
+                @content;
+            }
+        }
 
-    @if $create-between-breakpoints {
-      @each $breakpoint-max, $size in $grid-bp {
-        @include mq($breakpoint-min, $breakpoint-max, $to-operator: '<') {
-          .#{$class}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-            @content;
-          }
+        @if $create-between-breakpoints {
+            @each $breakpoint-max, $size in $grid-bp {
+                @include mq($breakpoint-min, $breakpoint-max, $to-operator: '<') {
+                    .#{$class}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                        @content;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

package/scss/objects/_container.scss

@@ -1,34 +1,34 @@
 .ons-container {
-  box-sizing: border-box;
-  margin: 0 auto;
-  max-width: $grid-max-width;
-  padding: 0 $grid-gutters;
-  position: relative;
-  width: 100%;
-
-  @include mq(s) {
+    box-sizing: border-box;
+    margin: 0 auto;
+    max-width: $grid-max-width;
     padding: 0 $grid-gutters;
-  }
+    position: relative;
+    width: 100%;
+
+    @include mq(s) {
+        padding: 0 $grid-gutters;
+    }
 
-  &--wide {
-    max-width: $grid-max-1280;
-  }
+    &--wide {
+        max-width: $grid-max-1280;
+    }
 
-  &--full-width {
-    max-width: 100%;
-  }
+    &--full-width {
+        max-width: 100%;
+    }
 }
 
 .ons-grid--align-bottom {
-  .ons-grid__col {
-    vertical-align: bottom;
-  }
+    .ons-grid__col {
+        vertical-align: bottom;
+    }
 }
 
 .ons-grid__col {
-  font-size: 1rem;
+    font-size: 1rem;
 }
 
 @include bp-suffix('ons-container--gutterless', $create-between-breakpoints: true) {
-  padding: 0;
+    padding: 0;
 }

package/scss/objects/_page.scss

@@ -1,54 +1,54 @@
 .ons-page {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  overflow-x: clip;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    overflow-x: clip;
+    width: 100%;
 }
 
 .ons-page__content {
-  flex: 1 0 auto;
-  // NOTE: padding-bottom: 1px fixes safari scroll issue
-  // Issue number #862
-  padding-bottom: 1px;
-  position: relative;
+    flex: 1 0 auto;
+    // NOTE: padding-bottom: 1px fixes safari scroll issue
+    // Issue number #862
+    padding-bottom: 1px;
+    position: relative;
 }
 
 .ons-page__main {
-  margin-bottom: 4.5rem;
-  margin-top: 2.5rem;
+    margin-bottom: 4.5rem;
+    margin-top: 2.5rem;
 
-  @include mq(xxs, m) {
-    margin-top: 1.5rem;
-  }
+    @include mq(xxs, m) {
+        margin-top: 1.5rem;
+    }
 }
 
 // Adjust margin-top when .ons-page__main contains .ons-panel--error
 .ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
-  margin-top: 1rem;
+    margin-top: 1rem;
 }
 
 .ons-page__body {
-  h2:not(.ons-document-list__item-title) {
-    @extend .ons-u-fs-xl;
-  }
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 2rem;
-  }
-  .ons-panel__body,
-  .ons-details {
-    h2,
+    h2:not(.ons-document-list__item-title) {
+        @extend .ons-u-fs-xl;
+    }
     h3,
     h4,
     h5,
     h6 {
-      margin-top: 0;
+        margin-top: 2rem;
+    }
+    .ons-panel__body,
+    .ons-details {
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 0;
+        }
+    }
+    h2:not(:first-child) {
+        margin-top: 2.5rem;
     }
-  }
-  h2:not(:first-child) {
-    margin-top: 2.5rem;
-  }
 }

package/scss/objects/_spacing.scss

@@ -6,17 +6,17 @@
 .ons-panel +,
 .ons-summary__group +,
 .ons-details:not(.ons-details--accordion) + {
-  .ons-image,
-  .ons-panel,
-  .ons-field,
-  .ons-field-group,
-  .ons-fieldset,
-  .ons-input-items,
-  .ons-summary__group {
-    margin-top: 1.5rem;
-  }
+    .ons-image,
+    .ons-panel,
+    .ons-field,
+    .ons-field-group,
+    .ons-fieldset,
+    .ons-input-items,
+    .ons-summary__group {
+        margin-top: 1.5rem;
+    }
 }
 
 .ons-breadcrumbs + .ons-grid {
-  margin-top: -1rem;
+    margin-top: -1rem;
 }