@ons/design-system 70.0.6 → 70.0.8

package/scss/base/_forms.scss

@@ -1,29 +1,29 @@
 fieldset,
 legend {
-  border: 0;
-  margin: 0;
-  padding: 0;
+    border: 0;
+    margin: 0;
+    padding: 0;
 }
 
 fieldset {
-  width: 100%;
+    width: 100%;
 }
 
 input {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 ::-webkit-inner-spin-button {
-  display: none;
+    display: none;
 }
 
 input[type='text'],
 input[type='number'] {
-  appearance: none;
+    appearance: none;
 }
 
 select {
-  option[disabled][value=''] {
-    display: none;
-  }
+    option[disabled][value=''] {
+        display: none;
+    }
 }

package/scss/base/_global.scss

@@ -1,68 +1,69 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
-  word-wrap: break-word;
+    box-sizing: border-box;
+    word-wrap: break-word;
 }
 
 html {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
 }
 
 body {
-  height: 100%;
-  margin: 0;
-  position: relative;
+    height: 100%;
+    margin: 0;
+    position: relative;
 }
 
 img {
-  height: auto;
-  max-width: 100%;
-  vertical-align: middle;
+    height: auto;
+    max-width: 100%;
+    vertical-align: middle;
 }
 
 hr {
-  border: 0;
-  border-top: 1px solid var(--ons-color-borders);
-  margin: 2rem 0 0;
+    border: 0;
+    border-top: 1px solid var(--ons-color-borders);
+    margin: 2rem 0 0;
 }
 
 %a-focus {
-  background-color: var(--ons-color-focus);
-  box-decoration-break: clone;
-  box-shadow: 0 -2px var(--ons-color-focus),
-    0 4px var(--ons-color-text-link-focus);
-  color: var(--ons-color-text-link-focus);
-  outline: 3px solid transparent;
-  outline-offset: 1px;
-  text-decoration: none;
+    background-color: var(--ons-color-focus);
+    box-decoration-break: clone;
+    box-shadow:
+        0 -2px var(--ons-color-focus),
+        0 4px var(--ons-color-text-link-focus);
+    color: var(--ons-color-text-link-focus);
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    text-decoration: none;
 }
 
 a {
-  color: var(--ons-color-text-link);
-  text-decoration-thickness: 1px;
-  text-underline-position: under;
-  &:not(.ons-u-fs-r--b):hover {
-    .ons-u-fs-l &,
-    h2:not(.ons-u-fs-m) & {
-      text-decoration-thickness: 3px;
-    }
+    color: var(--ons-color-text-link);
+    text-decoration-thickness: 1px;
+    text-underline-position: under;
+    &:not(.ons-u-fs-r--b):hover {
+        .ons-u-fs-l &,
+        h2:not(.ons-u-fs-m) & {
+            text-decoration-thickness: 3px;
+        }
 
-    @include mq(m) {
-      .ons-u-fs-m &,
-      h2 &,
-      h3 & {
-        text-decoration-thickness: 3px;
-      }
+        @include mq(m) {
+            .ons-u-fs-m &,
+            h2 &,
+            h3 & {
+                text-decoration-thickness: 3px;
+            }
+        }
+    }
+    &:hover {
+        color: var(--ons-color-text-link-hover);
+        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+    }
+    &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) {
+        @extend %a-focus;
     }
-  }
-  &:hover {
-    color: var(--ons-color-text-link-hover);
-    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
-  }
-  &:focus:not(.ons-btn--link, .ons-btn--ghost, .ons-js-clear-btn, .ons-download__thumbnail--link, .ons-tab--row, .ons-skip-to-content) {
-    @extend %a-focus;
-  }
 }

package/scss/base/_typography.scss

@@ -1,18 +1,18 @@
 html {
-  @include font-smoothing;
+    @include font-smoothing;
 
-  font-size: $base;
-  line-height: 1.6;
+    font-size: $base;
+    line-height: 1.6;
 }
 
 body {
-  color: var(--ons-color-text);
-  font-family: $font-sans;
-  font-feature-settings: 'ss01';
+    color: var(--ons-color-text);
+    font-family: $font-sans;
+    font-feature-settings: 'ss01';
 }
 
 p {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
 h1,
@@ -21,33 +21,33 @@ h3,
 h4,
 h5,
 h6 {
-  line-height: 1.2;
-  margin: 0 0 1rem;
-  strong {
-    @extend .ons-highlight;
-  }
+    line-height: 1.2;
+    margin: 0 0 1rem;
+    strong {
+        @extend .ons-highlight;
+    }
 }
 
 mark {
-  @extend .ons-highlight;
+    @extend .ons-highlight;
 
-  font-weight: $font-weight-bold;
+    font-weight: $font-weight-bold;
 }
 
 code {
-  font-size: 0.8rem;
+    font-size: 0.8rem;
 }
 
 ul {
-  margin: 0 0 1rem;
-  padding-left: 1.5rem;
+    margin: 0 0 1rem;
+    padding-left: 1.5rem;
 }
 
 li {
-  margin-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 em {
-  font-style: normal;
-  font-weight: $font-weight-bold;
+    font-style: normal;
+    font-weight: $font-weight-bold;
 }

package/scss/helpers/_functions.scss

@@ -1,36 +1,39 @@
 @use 'sass:math';
+@use 'sass:string';
+@use 'sass:map';
 
 @function ems($pxval, $base: $base) {
-  $em-size: math.div($pxval, $base);
+    $em-size: math.div($pxval, $base);
 
-  @return #{$em-size}em;
+    @return #{$em-size}em;
 }
 
 @function rems($pxval, $base: $base) {
-  $rem-size: math.div($pxval, $base);
+    $rem-size: math.div($pxval, $base);
 
-  @return #{$rem-size}rem;
+    @return #{$rem-size}rem;
 }
 
 @function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
+    @return $num / ($num * 0 + 1);
 }
 
 @function map-set($map, $key, $value) {
-  $new: (
-    $key: $value,
-  );
+    $new: (
+        $key: $value,
+    );
 
-  @return map-merge($map, $new);
+    @return map.merge($map, $new);
 }
 
 @function str-replace($string, $search, $replace: '') {
-  $string: to-string($string);
-  $index: str-index($string, $search);
+    $string: to-string($string);
+    $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;
 }

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;
 }