@ons/design-system 70.0.7 → 70.0.9

package/components/panel/_panel.scss

@@ -1,253 +1,254 @@
 @mixin panel-variant($name, $color, $color-bg) {
-  .ons-panel {
-    &--#{$name} {
-      background: $color-bg;
-      border-color: $color;
-      outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+    .ons-panel {
+        &--#{$name} {
+            background: $color-bg;
+            border-color: $color;
+            outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+        }
+
+        &--#{$name} & {
+            &__header {
+                background: $color;
+            }
+        }
     }
-
-    &--#{$name} & {
-      &__header {
-        background: $color;
-      }
-    }
-  }
 }
 
 .ons-branded-warning {
-  background: var(--ons-color-branded-tertiary);
+    background: var(--ons-color-branded-tertiary);
 }
 
 .ons-announcement {
-  background-color: var(--ons-color-black);
+    background-color: var(--ons-color-black);
 }
 
 .ons-branded-warning,
 .ons-announcement {
-  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 }
 
 .ons-panel {
-  border-radius: 0;
-  position: relative;
-
-  // Removes inherited bottom margin to make whitespace inside panel equal
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  .ons-field {
-    margin-bottom: 0;
-  }
-
-  &:focus {
-    box-shadow: none;
-    outline: 4px solid var(--ons-color-focus) !important;
-  }
-
-  &__header {
     border-radius: 0;
-    color: var(--ons-color-text-inverse);
-    margin: 0;
-    padding: 0.75rem 1rem;
-  }
-
-  &__timer {
-    white-space: nowrap;
-  }
-
-  &__title {
-    margin: 0;
-  }
-
-  &__body {
-    padding: 1rem;
+    position: relative;
 
     // Removes inherited bottom margin to make whitespace inside panel equal
-    > *:last-child,
-    strong > *:last-child {
-      margin-bottom: 0;
+    > *:last-child {
+        margin-bottom: 0;
     }
 
-    &.ons-icon-margin--xxxl {
-      padding-left: 2.7rem !important;
-
-      @include mq(m) {
-        padding-left: 3.5rem !important;
-      }
+    .ons-field {
+        margin-bottom: 0;
     }
-    &.ons-icon-margin--xxl {
-      padding-left: 2.45rem !important;
 
-      @include mq(m) {
-        padding-left: 2.9rem !important;
-      }
+    &:focus {
+        box-shadow: none;
+        outline: 4px solid var(--ons-color-focus) !important;
     }
-    &.ons-icon-margin--xl {
-      padding-left: 2.35rem !important;
 
-      @include mq(m) {
-        padding-left: 2.55rem !important;
-      }
+    &__header {
+        border-radius: 0;
+        color: var(--ons-color-text-inverse);
+        margin: 0;
+        padding: 0.75rem 1rem;
     }
-    &.ons-icon-margin--l {
-      padding-left: 2.25rem !important;
 
-      @include mq(m) {
-        padding-left: 2.35rem !important;
-      }
+    &__timer {
+        white-space: nowrap;
     }
-    &.ons-icon-margin--m {
-      padding-left: 2.05rem !important;
 
-      @include mq(m) {
-        padding-left: 2.2rem !important;
-      }
-    }
-    &.ons-icon-margin--s {
-      padding-left: 1.7rem !important;
+    &__title {
+        margin: 0;
     }
-  }
-
-  &__error {
-    color: var(--ons-color-errors);
-  }
-
-  &--warn {
-    border: 0 !important;
-    margin-bottom: 1rem;
-    outline: none !important;
-    padding: 0;
-
-    &--footer {
-      background-color: var(--ons-color-grey-15) !important;
-      margin-bottom: 0;
-      padding: 1rem 0 !important;
+
+    &__body {
+        padding: 1rem;
+
+        // Removes inherited bottom margin to make whitespace inside panel equal
+        > *:last-child,
+        strong > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &.ons-icon-margin--xxxl {
+            padding-left: 2.7rem !important;
+
+            @include mq(m) {
+                padding-left: 3.5rem !important;
+            }
+        }
+        &.ons-icon-margin--xxl {
+            padding-left: 2.45rem !important;
+
+            @include mq(m) {
+                padding-left: 2.9rem !important;
+            }
+        }
+        &.ons-icon-margin--xl {
+            padding-left: 2.35rem !important;
+
+            @include mq(m) {
+                padding-left: 2.55rem !important;
+            }
+        }
+        &.ons-icon-margin--l {
+            padding-left: 2.25rem !important;
+
+            @include mq(m) {
+                padding-left: 2.35rem !important;
+            }
+        }
+        &.ons-icon-margin--m {
+            padding-left: 2.05rem !important;
+
+            @include mq(m) {
+                padding-left: 2.2rem !important;
+            }
+        }
+        &.ons-icon-margin--s {
+            padding-left: 1.7rem !important;
+        }
     }
-  }
-
-  &--warn-branded,
-  &--announcement {
-    border: 0 !important;
-    color: var(--ons-color-white);
-    margin-bottom: 0;
-    outline: none !important;
-    padding: 1rem 0 !important;
-    a {
-      color: inherit;
-      text-decoration: underline solid var(--ons-color-white) 1px;
+
+    &__error {
+        color: var(--ons-color-errors);
     }
-    a:hover {
-      text-decoration-thickness: 2px;
+
+    &--warn {
+        border: 0 !important;
+        margin-bottom: 1rem;
+        outline: none !important;
+        padding: 0;
+
+        &--footer {
+            background-color: var(--ons-color-grey-15) !important;
+            margin-bottom: 0;
+            padding: 1rem 0 !important;
+        }
     }
-  }
 
-  &--announcement {
-    a:focus {
-      box-shadow: 0 -2px var(--ons-color-focus),
-        0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+    &--warn-branded,
+    &--announcement {
+        border: 0 !important;
+        color: var(--ons-color-white);
+        margin-bottom: 0;
+        outline: none !important;
+        padding: 1rem 0 !important;
+        a {
+            color: inherit;
+            text-decoration: underline solid var(--ons-color-white) 1px;
+        }
+        a:hover {
+            text-decoration-thickness: 2px;
+        }
     }
-  }
-
-  &--no-title {
-    border-left: 8px solid transparent;
-    padding: 1rem;
-    .ons-panel__body {
-      background: none;
-      padding: 0;
+
+    &--announcement {
+        a:focus {
+            box-shadow:
+                0 -2px var(--ons-color-focus),
+                0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+        }
     }
-    &.ons-panel--warn {
-      padding: 0;
+
+    &--no-title {
+        border-left: 8px solid transparent;
+        padding: 1rem;
+        .ons-panel__body {
+            background: none;
+            padding: 0;
+        }
+        &.ons-panel--warn {
+            padding: 0;
+        }
     }
-  }
 
-  &--spacious {
-    padding: 1rem;
+    &--spacious {
+        padding: 1rem;
 
-    @include mq(m) {
-      padding: 2rem;
+        @include mq(m) {
+            padding: 2rem;
+        }
     }
-  }
 
-  &--warn &,
-  &--warn-branded &,
-  &--announcement & {
-    &__body {
-      font-weight: $font-weight-bold;
-      min-height: 2rem; // Height of icon
-      padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
+    &--warn &,
+    &--warn-branded &,
+    &--announcement & {
+        &__body {
+            font-weight: $font-weight-bold;
+            min-height: 2rem; // Height of icon
+            padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
+        }
+        &__icon {
+            background: var(--ons-color-black);
+            border-radius: 50%;
+            color: var(--ons-color-white);
+            font-size: 1.5rem;
+            font-weight: $font-weight-bold;
+            line-height: 2rem;
+            min-height: 2rem;
+            min-width: 2rem;
+            outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+            text-align: center;
+        }
     }
-    &__icon {
-      background: var(--ons-color-black);
-      border-radius: 50%;
-      color: var(--ons-color-white);
-      font-size: 1.5rem;
-      font-weight: $font-weight-bold;
-      line-height: 2rem;
-      min-height: 2rem;
-      min-width: 2rem;
-      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-      text-align: center;
-    }
-  }
 
-  &--announcement & {
-    &__body div > *:last-child {
-      margin-bottom: 0;
+    &--announcement & {
+        &__body div > *:last-child {
+            margin-bottom: 0;
+        }
+
+        &__icon {
+            background-color: var(--ons-color-white);
+            color: var(--ons-color-black);
+            display: flex;
+            svg {
+                margin: auto;
+            }
+        }
     }
 
-    &__icon {
-      background-color: var(--ons-color-white);
-      color: var(--ons-color-black);
-      display: flex;
-      svg {
-        margin: auto;
-      }
+    &--warn-branded & {
+        &__icon {
+            background-color: var(--ons-color-white);
+            color: var(--ons-color-branded-tertiary);
+        }
     }
-  }
 
-  &--warn-branded & {
-    &__icon {
-      background-color: var(--ons-color-white);
-      color: var(--ons-color-branded-tertiary);
-    }
-  }
-
-  &--success & {
-    &__icon {
-      left: 0;
-      padding-left: 1rem;
-      .ons-icon {
-        fill: var(--ons-color-success) !important;
-        margin-top: -15% !important;
-      }
+    &--success & {
+        &__icon {
+            left: 0;
+            padding-left: 1rem;
+            .ons-icon {
+                fill: var(--ons-color-success) !important;
+                margin-top: -15% !important;
+            }
+        }
     }
-  }
-
-  &__icon + &__body {
-    padding-left: 2rem;
-  }
 
-  &--bare & {
-    &__icon {
-      height: 1.3rem;
-      width: 1.3rem;
+    &__icon + &__body {
+        padding-left: 2rem;
     }
-    &__body {
-      padding: 0 0 0 1.5rem;
+
+    &--bare & {
+        &__icon {
+            height: 1.3rem;
+            width: 1.3rem;
+        }
+        &__body {
+            padding: 0 0 0 1.5rem;
+        }
     }
-  }
-
-  &--info,
-  &--bare,
-  &--success,
-  &--warn,
-  &--warn-branded,
-  &--announcement {
-    .ons-panel__icon {
-      position: absolute;
+
+    &--info,
+    &--bare,
+    &--success,
+    &--warn,
+    &--warn-branded,
+    &--announcement {
+        .ons-panel__icon {
+            position: absolute;
+        }
     }
-  }
 }
 
 @include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));

package/components/panel/example-panel-bare.njk

@@ -1,8 +1,10 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'bare',
-    "iconType": 'lock'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'bare',
+        "iconType": 'lock'
+    })
+%}
     Here is some text with an icon
 {% endcall %}

package/components/panel/example-panel-with-announcement.njk

@@ -1,11 +1,14 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'announcement'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'announcement'
+    })
+%}
     <p class="ons-u-mb-no">National lockdown: stay at home</p>
 
     <div class="ons-u-fs-r">

package/components/panel/example-panel-with-error-summary.njk

@@ -1,10 +1,12 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/list/_macro.njk" import onsList %}
 
-{% call onsPanel({
-    "title": 'There are 2 problems with your answer',
-    "variant": 'error'
-}) %}
+{%
+    call onsPanel({
+        "title": 'There are 2 problems with your answer',
+        "variant": 'error'
+    })
+%}
     {{
         onsList({
             "element": 'ol',

package/components/panel/example-panel-with-warning.njk

@@ -1,7 +1,9 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'warn'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'warn'
+    })
+%}
     All of the information about this person will be deleted
 {% endcall %}

package/components/password/_macro.njk

@@ -4,11 +4,13 @@
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
     {% from "components/input/_macro.njk" import onsInput %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": "ons-js-password" + (" " + params.fieldClasses if params.fieldClasses else ""),
-        "error": params.error
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": "ons-js-password" + (" " + params.fieldClasses if params.fieldClasses else ""),
+            "error": params.error
+        })
+    %}
         {{
             onsLabel({
                 "for": params.id,