@ons/design-system 70.0.6 → 70.0.8

package/scss/overrides/rtl.scss

@@ -1,131 +1,131 @@
 @use 'sass:math';
 
 .ons-rtl .ons-page__container > .ons-grid {
-  direction: rtl;
+    direction: rtl;
 
-  ul {
-    padding-left: 0;
-    padding-right: 1.5rem;
-  }
+    ul {
+        padding-left: 0;
+        padding-right: 1.5rem;
+    }
 
-  // List
-  .ons-list {
-    padding: 0 1.5rem 0 0;
+    // List
+    .ons-list {
+        padding: 0 1.5rem 0 0;
 
-    &__link {
-      margin-left: 1rem;
-      margin-right: 0;
-    }
+        &__link {
+            margin-left: 1rem;
+            margin-right: 0;
+        }
 
-    &--bare {
-      padding-right: 0;
-    }
+        &--bare {
+            padding-right: 0;
+        }
 
-    &--dashed {
-      padding-right: 0;
+        &--dashed {
+            padding-right: 0;
 
-      .ons-list__item {
-        margin-left: 0;
-        margin-right: 25px;
+            .ons-list__item {
+                margin-left: 0;
+                margin-right: 25px;
 
-        &::before {
-          left: auto;
-          margin-left: 0;
-          margin-right: -25px;
-          right: 0;
+                &::before {
+                    left: auto;
+                    margin-left: 0;
+                    margin-right: -25px;
+                    right: 0;
+                }
+            }
         }
-      }
     }
-  }
 
-  // Panel
-  .ons-panel {
-    border-left: 0;
-    border-right: 8px solid transparent;
+    // Panel
+    .ons-panel {
+        border-left: 0;
+        border-right: 8px solid transparent;
 
-    &--info {
-      border-color: var(--ons-color-info);
-    }
+        &--info {
+            border-color: var(--ons-color-info);
+        }
 
-    &--warn,
-    &--warn-branded {
-      .ons-panel__body {
-        padding: 0.222rem 2.8rem 0.222rem 0;
-      }
-    }
+        &--warn,
+        &--warn-branded {
+            .ons-panel__body {
+                padding: 0.222rem 2.8rem 0.222rem 0;
+            }
+        }
 
-    &--bare {
-      .ons-panel__body {
-        padding: 0.1rem 1.5rem 0 0;
-      }
+        &--bare {
+            .ons-panel__body {
+                padding: 0.1rem 1.5rem 0 0;
+            }
+        }
     }
-  }
 
-  // Buttons
-  .ons-btn {
-    .ons-icon {
-      margin: 0 0.5rem 0.1rem 0;
-      transform: rotate(180deg);
+    // Buttons
+    .ons-btn {
+        .ons-icon {
+            margin: 0 0.5rem 0.1rem 0;
+            transform: rotate(180deg);
+        }
     }
-  }
 
-  // Content pagination
-  .ons-content-pagination {
-    &__list {
-      padding: 0;
-    }
+    // Content pagination
+    .ons-content-pagination {
+        &__list {
+            padding: 0;
+        }
 
-    &__link-text {
-      margin: 0 0.5rem 0 0;
-    }
+        &__link-text {
+            margin: 0 0.5rem 0 0;
+        }
 
-    &__link-label {
-      margin: 0 2rem 0 0;
-    }
+        &__link-label {
+            margin: 0 2rem 0 0;
+        }
 
-    .ons-icon {
-      transform: rotate(180deg);
+        .ons-icon {
+            transform: rotate(180deg);
+        }
     }
-  }
 
-  // Download
-  .ons-download {
-    &__image {
-      margin-left: 1.5rem;
-      margin-right: 0;
+    // Download
+    .ons-download {
+        &__image {
+            margin-left: 1.5rem;
+            margin-right: 0;
+        }
     }
-  }
 
-  // Flip push and pull
-  @each $breakpoint-min, $size in $grid-bp {
-    @for $column from 1 through $grid-cols {
-      $width: percentage(math.div($column, $grid-cols));
+    // Flip push and pull
+    @each $breakpoint-min, $size in $grid-bp {
+        @for $column from 1 through $grid-cols {
+            $width: math.percentage(math.div($column, $grid-cols));
 
-      @include mq($breakpoint-min) {
-        .ons-push-#{$column}\@#{$breakpoint-min} {
-          left: -$width;
-        }
+            @include mq($breakpoint-min) {
+                .ons-push-#{$column}\@#{$breakpoint-min} {
+                    left: -$width;
+                }
 
-        .ons-pull-#{$column}\@#{$breakpoint-min} {
-          left: $width;
+                .ons-pull-#{$column}\@#{$breakpoint-min} {
+                    left: $width;
+                }
+            }
         }
-      }
-    }
 
-    @each $breakpoint-max, $size in $grid-bp {
-      @for $column from 1 through $grid-cols {
-        $width: percentage(math.div($column, $grid-cols));
+        @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-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-            left: -$width;
-          }
+                @include mq($breakpoint-min, $breakpoint-max) {
+                    .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                        left: -$width;
+                    }
 
-          .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
-            left: $width;
-          }
+                    .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+                        left: $width;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

package/scss/print.scss

@@ -6,51 +6,51 @@
 .ons-language-links,
 .ons-breadcrumbs,
 .ons-u-ph {
-  display: none !important;
+    display: none !important;
 }
 
 a::after {
-  content: ' (' attr(href) ') ';
+    content: ' (' attr(href) ') ';
 }
 
 .ons-header {
-  &__main,
-  &__bottom {
-    background: transparent;
-  }
+    &__main,
+    &__bottom {
+        background: transparent;
+    }
 
-  &__title {
-    color: var(--ons-color-black);
-  }
+    &__title {
+        color: var(--ons-color-black);
+    }
 
-  & &__svg-logo {
-    fill: var(--ons-color-black);
-  }
+    & &__svg-logo {
+        fill: var(--ons-color-black);
+    }
 }
 
 .ons-navigation--main,
 .ons-navigation--sub {
-  border-top: 1px solid var(--ons-color-text-link);
-  display: block !important;
-  padding: 1rem 0 0.5rem;
-  .ons-navigation__item {
-    display: inline-block;
-  }
-  .ons-navigation__item--active {
-    border: 0;
-  }
-  .ons-navigation__link,
-  .ons-navigation__link:hover {
-    color: var(--ons-color-text-link);
-  }
+    border-top: 1px solid var(--ons-color-text-link);
+    display: block !important;
+    padding: 1rem 0 0.5rem;
+    .ons-navigation__item {
+        display: inline-block;
+    }
+    .ons-navigation__item--active {
+        border: 0;
+    }
+    .ons-navigation__link,
+    .ons-navigation__link:hover {
+        color: var(--ons-color-text-link);
+    }
 }
 
 .ons-hero {
-  print-color-adjust: exact;
+    print-color-adjust: exact;
 }
 
 .ons-grid__col {
-  display: block; // Prevents page breaking before grid col when printing from Chrome see: https://github.com/ONSdigital/design-system/issues/2584
+    display: block; // Prevents page breaking before grid col when printing from Chrome see: https://github.com/ONSdigital/design-system/issues/2584
 }
 
 .ons-panel,
@@ -61,33 +61,33 @@ h4,
 h5,
 h6,
 p {
-  break-inside: avoid;
+    break-inside: avoid;
 }
 
 .ons-details {
-  &--initialised & {
-    &__heading {
-      padding: 0;
-      margin: 0 0 1rem;
-    }
+    &--initialised & {
+        &__heading {
+            padding: 0;
+            margin: 0 0 1rem;
+        }
 
-    &__title {
-      color: var(--ons-color-black);
-      font-size: 24px;
-    }
+        &__title {
+            color: var(--ons-color-black);
+            font-size: 24px;
+        }
 
-    &__icon {
-      display: none;
-    }
+        &__icon {
+            display: none;
+        }
 
-    &__content {
-      display: block;
+        &__content {
+            display: block;
+        }
     }
-  }
 
-  &--accordion & {
-    &__heading {
-      padding-top: 1rem;
+    &--accordion & {
+        &__heading {
+            padding-top: 1rem;
+        }
     }
-  }
 }

package/scss/utilities/_border.scss

@@ -1,12 +1,12 @@
 $border: (
-  bt: border-top,
-  br: border-right,
-  bb: border-bottom,
-  bl: border-left,
+    bt: border-top,
+    br: border-right,
+    bb: border-bottom,
+    bl: border-left,
 );
 
 @each $abbr, $dec in $border {
-  @include bp-suffix(ons-u-#{$abbr}, $create-between-breakpoints: true) {
-    #{$dec}: 1px solid var(--ons-color-borders) !important;
-  }
+    @include bp-suffix(ons-u-#{$abbr}, $create-between-breakpoints: true) {
+        #{$dec}: 1px solid var(--ons-color-borders) !important;
+    }
 }

package/scss/utilities/_colors.scss

@@ -1,8 +1,8 @@
 @each $label, $color in (blue: blue, green: green) {
-  .ons-u-#{'' + $label} {
-    color: $color;
-  }
-  .ons-u-bg-#{'' + $label} {
-    background-color: $color;
-  }
+    .ons-u-#{'' + $label} {
+        color: $color;
+    }
+    .ons-u-bg-#{'' + $label} {
+        background-color: $color;
+    }
 }

package/scss/utilities/_display.scss

@@ -1,19 +1,19 @@
 @include bp-suffix('ons-u-d-no', $create-between-breakpoints: true) {
-  display: none !important;
+    display: none !important;
 }
 
 @include bp-suffix('ons-u-d-b', $create-between-breakpoints: true) {
-  display: block !important;
+    display: block !important;
 }
 
 .ons-u-db-no-js_enabled {
-  body.ons-js-enabled & {
-    display: none !important;
-  }
+    body.ons-js-enabled & {
+        display: none !important;
+    }
 }
 
 .ons-u-db-no-js_disabled {
-  body:not(.ons-js-enabled) & {
-    display: none !important;
-  }
+    body:not(.ons-js-enabled) & {
+        display: none !important;
+    }
 }

package/scss/utilities/_float.scss

@@ -9,26 +9,26 @@
  */
 .ons-u-cf::before,
 .ons-u-cf::after {
-  content: ' '; /* 1 */
-  display: table; /* 2 */
+    content: ' '; /* 1 */
+    display: table; /* 2 */
 }
 
 .ons-u-cf::after {
-  clear: both;
+    clear: both;
 }
 
 .ons-u-fl {
-  float: left;
+    float: left;
 }
 
 .ons-u-fr {
-  float: right;
+    float: right;
 }
 
 .ons-u-f-no {
-  float: none;
+    float: none;
 }
 
 @include bp-suffix(ons-u-fr) {
-  float: right;
+    float: right;
 }