@ons/design-system 70.0.7 → 70.0.9

package/scss/utilities/_grid.scss

@@ -1,245 +1,245 @@
 @use 'sass:math';
 
 .ons-grid {
-  box-sizing: border-box;
-  font-size: 0;
-  margin-left: -$grid-gutters;
+    box-sizing: border-box;
+    font-size: 0;
+    margin-left: -$grid-gutters;
 }
 
 .ons-grid--float {
-  letter-spacing: 0;
+    letter-spacing: 0;
 }
 
 .ons-grid--center {
-  text-align: center;
-  .ons-grid__col {
-    text-align: left;
-  }
+    text-align: center;
+    .ons-grid__col {
+        text-align: left;
+    }
 }
 
 .ons-grid--center-all {
-  text-align: center;
+    text-align: center;
 }
 
 .ons-grid--reverse {
-  direction: rtl;
-  .ons-grid__col {
-    direction: ltr;
-  }
+    direction: rtl;
+    .ons-grid__col {
+        direction: ltr;
+    }
 }
 
 .ons-grid--spaced {
-  .ons-grid__col {
-    margin-bottom: $grid-gutters;
-  }
-  &.ons-grid--tight {
     .ons-grid__col {
-      margin-bottom: math.div($grid-gutters, 2);
+        margin-bottom: $grid-gutters;
+    }
+    &.ons-grid--tight {
+        .ons-grid__col {
+            margin-bottom: math.div($grid-gutters, 2);
+        }
     }
-  }
 }
 
 .ons-grid--align-mid {
-  .ons-grid__col {
-    vertical-align: middle;
-  }
+    .ons-grid__col {
+        vertical-align: middle;
+    }
 }
 
 .ons-grid--stagger-align {
-  .ons-grid__col:nth-of-type(1n) {
-    text-align: right;
-  }
-  .ons-grid__col:nth-of-type(2n) {
-    text-align: left;
-  }
+    .ons-grid__col:nth-of-type(1n) {
+        text-align: right;
+    }
+    .ons-grid__col:nth-of-type(2n) {
+        text-align: left;
+    }
 }
 
 .ons-grid--tight {
-  margin-left: math.div(-$grid-gutters, 2);
-  .ons-grid__col {
-    padding-left: math.div($grid-gutters, 2);
-  }
+    margin-left: math.div(-$grid-gutters, 2);
+    .ons-grid__col {
+        padding-left: math.div($grid-gutters, 2);
+    }
 }
 
 .ons-grid--loose {
-  margin-left: -$grid-gutters * 2;
+    margin-left: -$grid-gutters * 2;
 }
 
 .ons-grid--gutterless {
-  margin-left: 0;
-  .ons-grid__col {
-    padding-left: 0;
-  }
+    margin-left: 0;
+    .ons-grid__col {
+        padding-left: 0;
+    }
 }
 
 .ons-grid--pixelgutter {
-  margin-left: 1px;
-  .ons-grid__col {
-    margin-bottom: 1px;
-    padding-left: 1px;
-  }
+    margin-left: 1px;
+    .ons-grid__col {
+        margin-bottom: 1px;
+        padding-left: 1px;
+    }
 }
 
 .ons-grid--flex {
-  display: flex;
-  flex-flow: row wrap;
+    display: flex;
+    flex-flow: row wrap;
 
-  &.ons-grid--center {
-    justify-content: center;
-  }
+    &.ons-grid--center {
+        justify-content: center;
+    }
 
-  &.ons-grid--between {
-    justify-content: space-between;
-  }
+    &.ons-grid--between {
+        justify-content: space-between;
+    }
 
-  &.ons-grid--vertical-top {
-    align-items: start;
-  }
+    &.ons-grid--vertical-top {
+        align-items: start;
+    }
 
-  &.ons-grid--vertical-center {
-    align-items: center;
-  }
+    &.ons-grid--vertical-center {
+        align-items: center;
+    }
 }
 
 @include bp-suffix(ons-grid--no-wrap) {
-  flex-wrap: nowrap;
+    flex-wrap: nowrap;
 }
 
 @include bp-suffix(ons-grid--column, $create-between-breakpoints: true) {
-  flex-direction: column;
+    flex-direction: column;
 }
 
 @include bp-suffix(ons-grid--bordered, false) {
-  margin-left: 0;
-  .ons-grid__col {
-    border-bottom: 1px solid var(--ons-color-borders);
-    border-top: 1px solid var(--ons-color-borders);
-    flex: 1 1 auto;
-    padding-bottom: 1rem;
-    padding-top: 1rem;
-    &:first-of-type {
-      border-right: 1px solid var(--ons-color-borders);
-      padding-left: 0;
+    margin-left: 0;
+    .ons-grid__col {
+        border-bottom: 1px solid var(--ons-color-borders);
+        border-top: 1px solid var(--ons-color-borders);
+        flex: 1 1 auto;
+        padding-bottom: 1rem;
+        padding-top: 1rem;
+        &:first-of-type {
+            border-right: 1px solid var(--ons-color-borders);
+            padding-left: 0;
+        }
     }
-  }
 }
 
 .ons-grid__col {
-  background-clip: content-box;
-  box-sizing: border-box;
-  display: inline-block;
-  // Fixes text overflow issues
-  min-width: 0;
-  padding-left: $grid-gutters;
-  vertical-align: top;
-  width: 100%;
-
-  .ons-grid--float & {
-    display: block;
-    float: left;
-  }
-
-  &--loose {
-    padding-left: $grid-gutters * 2;
-  }
-
-  .ons-grid--flex & {
-    width: auto;
-  }
+    background-clip: content-box;
+    box-sizing: border-box;
+    display: inline-block;
+    // Fixes text overflow issues
+    min-width: 0;
+    padding-left: $grid-gutters;
+    vertical-align: top;
+    width: 100%;
+
+    .ons-grid--float & {
+        display: block;
+        float: left;
+    }
+
+    &--loose {
+        padding-left: $grid-gutters * 2;
+    }
+
+    .ons-grid--flex & {
+        width: auto;
+    }
 }
 
 .ons-grid__col--flex {
-  display: flex;
+    display: flex;
 }
 
 @include bp-suffix(ons-grid__col--sticky) {
-  position: sticky;
-  top: 2rem;
+    position: sticky;
+    top: 2rem;
 }
 
 @each $breakpoint-min, $size in $grid-bp {
-  @for $column from 1 through $grid-cols {
-    $width: percentage(math.div($column, $grid-cols));
-
-    @include mq($breakpoint-min) {
-      .ons-col-#{$column}\@#{$breakpoint-min} {
-        max-width: $width;
-        width: $width;
-      }
-
-      .ons-push-#{$column}\@#{$breakpoint-min} {
-        left: $width;
-        position: relative;
-      }
-
-      .ons-pull-#{$column}\@#{$breakpoint-min} {
-        left: -$width;
-        position: relative;
-      }
-    }
-  }
-
-  @each $breakpoint-max, $size in $grid-bp {
     @for $column from 1 through $grid-cols {
-      $width: percentage(math.div($column, $grid-cols));
-
-      @include mq($breakpoint-min, $breakpoint-max) {
-        .ons-col-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-          max-width: $width;
-          width: $width;
-        }
-
-        .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-          left: $width;
-          position: relative;
+        $width: math.percentage(math.div($column, $grid-cols));
+
+        @include mq($breakpoint-min) {
+            .ons-col-#{$column}\@#{$breakpoint-min} {
+                max-width: $width;
+                width: $width;
+            }
+
+            .ons-push-#{$column}\@#{$breakpoint-min} {
+                left: $width;
+                position: relative;
+            }
+
+            .ons-pull-#{$column}\@#{$breakpoint-min} {
+                left: -$width;
+                position: relative;
+            }
         }
+    }
 
-        .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-          left: -$width;
-          position: relative;
+    @each $breakpoint-max, $size in $grid-bp {
+        @for $column from 1 through $grid-cols {
+            $width: math.percentage(math.div($column, $grid-cols));
+
+            @include mq($breakpoint-min, $breakpoint-max) {
+                .ons-col-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                    max-width: $width;
+                    width: $width;
+                }
+
+                .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                    left: $width;
+                    position: relative;
+                }
+
+                .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                    left: -$width;
+                    position: relative;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @include bp-suffix(ons-col-auto) {
-  width: auto;
+    width: auto;
 
-  .ons-grid--flex & {
-    flex-basis: auto;
-    max-width: 100%;
-  }
+    .ons-grid--flex & {
+        flex-basis: auto;
+        max-width: 100%;
+    }
 }
 
 @include bp-suffix(ons-u-flex-shrink) {
-  flex-shrink: 1;
+    flex-shrink: 1;
 }
 
 @include bp-suffix(ons-u-flex-no-shrink) {
-  flex-shrink: 0;
+    flex-shrink: 0;
 }
 
 @include bp-suffix(ons-u-flex-grow) {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 @include bp-suffix(ons-u-flex-no-grow) {
-  flex-grow: 0;
+    flex-grow: 0;
 }
 
 @include bp-suffix(ons-u-flex-no-basis) {
-  flex-basis: 0;
+    flex-basis: 0;
 }
 
 @include bp-suffix(ons-u-flex-align-bottom) {
-  align-self: flex-end;
+    align-self: flex-end;
 }
 
 @include bp-suffix('ons-nopull-', false) {
-  left: 0;
+    left: 0;
 }
 
 @include bp-suffix('ons-nopush-', false) {
-  left: 0;
+    left: 0;
 }

package/scss/utilities/_highlight.scss

@@ -1,6 +1,6 @@
 .ons-highlight {
-  background-color: var(--ons-color-highlight);
-  box-shadow: 0 4px 0 0 var(--ons-color-text-link-focus);
-  font-style: normal;
-  padding: 0 2px;
+    background-color: var(--ons-color-highlight);
+    box-shadow: 0 4px 0 0 var(--ons-color-text-link-focus);
+    font-style: normal;
+    padding: 0 2px;
 }

package/scss/utilities/_margin.scss

@@ -1,26 +1,26 @@
 $sizes: (
-  no: 0,
-  xxs: 0.25rem,
-  xs: 0.5rem,
-  s: 1rem,
-  m: 1.5rem,
-  l: 2rem,
-  xl: 3rem,
-  auto: auto,
+    no: 0,
+    xxs: 0.25rem,
+    xs: 0.5rem,
+    s: 1rem,
+    m: 1.5rem,
+    l: 2rem,
+    xl: 3rem,
+    auto: auto,
 );
 
 $margins: (
-  mt: margin-top,
-  mr: margin-right,
-  mb: margin-bottom,
-  ml: margin-left,
-  m: margin,
+    mt: margin-top,
+    mr: margin-right,
+    mb: margin-bottom,
+    ml: margin-left,
+    m: margin,
 );
 
 @each $key, $value in $sizes {
-  @each $abbr, $dec in $margins {
-    @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
-      #{$dec}: #{$value} !important;
+    @each $abbr, $dec in $margins {
+        @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
+            #{$dec}: #{$value} !important;
+        }
     }
-  }
 }

package/scss/utilities/_pad.scss

@@ -1,25 +1,25 @@
 // e.g ons-u-pl-m
 $sizes: (
-  no: 0 !important,
-  xxs: 0.3rem,
-  xs: 0.5rem,
-  s: 1rem,
-  m: 2rem,
-  l: 3rem,
+    no: 0 !important,
+    xxs: 0.3rem,
+    xs: 0.5rem,
+    s: 1rem,
+    m: 2rem,
+    l: 3rem,
 );
 
 $padding: (
-  pt: padding-top,
-  pr: padding-right,
-  pb: padding-bottom,
-  pl: padding-left,
-  p: padding,
+    pt: padding-top,
+    pr: padding-right,
+    pb: padding-bottom,
+    pl: padding-left,
+    p: padding,
 );
 
 @each $key, $value in $sizes {
-  @each $abbr, $dec in $padding {
-    @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
-      #{$dec}: #{$value};
+    @each $abbr, $dec in $padding {
+        @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
+            #{$dec}: #{$value};
+        }
     }
-  }
 }

package/scss/utilities/_typography.scss

@@ -1,88 +1,90 @@
+@use 'sass:map';
+
 @mixin font-size($props, $base) {
-  $small-size: map-get($props, small);
-  $large-size: map-get($props, large);
+    $small-size: map.get($props, small);
+    $large-size: map.get($props, large);
 
-  font-size: rems($small-size, $base);
-  font-weight: map-get($props, weight);
-  line-height: map-get($props, line-height);
+    font-size: rems($small-size, $base);
+    font-weight: map.get($props, weight);
+    line-height: map.get($props, line-height);
 
-  @if $small-size != $large-size {
-    @include mq(m) {
-      font-size: rems($large-size, $base);
+    @if $small-size != $large-size {
+        @include mq(m) {
+            font-size: rems($large-size, $base);
+        }
     }
-  }
 }
 
 @each $name, $props in $type-matrix {
-  .#{$name} {
-    @include font-size($props, $base);
-  }
+    .#{$name} {
+        @include font-size($props, $base);
+    }
 }
 
 @each $breakpoint, $size in $grid-bp {
-  @each $name, $props in $type-matrix {
-    @include mq($breakpoint) {
-      .#{$name}\@#{$breakpoint} {
-        @include font-size($props, $base);
-      }
+    @each $name, $props in $type-matrix {
+        @include mq($breakpoint) {
+            .#{$name}\@#{$breakpoint} {
+                @include font-size($props, $base);
+            }
+        }
     }
-  }
 }
 
 h1 {
-  @extend .ons-u-fs-xl;
+    @extend .ons-u-fs-xl;
 }
 
 h2 {
-  @extend .ons-u-fs-l;
+    @extend .ons-u-fs-l;
 }
 
 h3 {
-  @extend .ons-u-fs-m;
+    @extend .ons-u-fs-m;
 }
 
 h4 {
-  @extend .ons-u-fs-r--b;
+    @extend .ons-u-fs-r--b;
 }
 
 .ons-u-fw-b {
-  font-weight: $font-weight-bold;
+    font-weight: $font-weight-bold;
 }
 
 .ons-u-fw-n {
-  font-weight: $font-weight-regular;
+    font-weight: $font-weight-regular;
 }
 
 .ons-u-fs-i {
-  font-style: italic;
+    font-style: italic;
 }
 
 .ons-u-tt-u {
-  text-transform: uppercase;
+    text-transform: uppercase;
 }
 
 .ons-u-td-no,
 .ons-u-td-no:hover {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .ons-u-lighter {
-  color: var(--ons-color-text-light);
+    color: var(--ons-color-text-light);
 }
 
 .ons-u-f-mono {
-  font-family: $font-mono;
-  letter-spacing: 0.1em;
+    font-family: $font-mono;
+    letter-spacing: 0.1em;
 }
 
 .ons-u-ta-right {
-  text-align: right;
+    text-align: right;
 }
 
 .ons-u-ta-left {
-  text-align: left;
+    text-align: left;
 }
 
 .ons-u-ta-center {
-  text-align: center;
+    text-align: center;
 }

package/scss/utilities/_utilities.scss

@@ -1,36 +1,36 @@
 .ons-u-dib {
-  display: inline-block;
+    display: inline-block;
 }
 
 .ons-u-di {
-  display: inline;
+    display: inline;
 }
 
 .ons-u-db {
-  display: block;
+    display: block;
 }
 
 // Utility class to override the height property to 'auto'
 .ons-u-ha {
-  height: auto;
+    height: auto;
 }
 
 // Utility class to force non-wrapping of values
 .ons-u-nowrap {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 // Utility class to force wrapping of values
 .ons-u-wrap {
-  white-space: normal !important;
+    white-space: normal !important;
 }
 
 // Utility class to set direction right to left
 .ons-u-rtl {
-  direction: rtl;
+    direction: rtl;
 }
 
 // Set an element's width to be auto at specified breakpoint
 @include bp-suffix(ons-u-wa--) {
-  width: auto !important;
+    width: auto !important;
 }