@ons/design-system 70.0.6 → 70.0.8

package/components/document-list/document-list.scss

@@ -1,184 +1,180 @@
 .ons-document-list {
-  @extend .ons-list--bare;
+    @extend .ons-list--bare;
 
-  margin-bottom: 0;
+    margin-bottom: 0;
 
-  &__item {
-    border-bottom: 1px solid var(--ons-color-borders-light);
-    margin: 0 0 1.5rem;
-    padding: 0 0 1.5rem;
+    &__item {
+        border-bottom: 1px solid var(--ons-color-borders-light);
+        margin: 0 0 1.5rem;
+        padding: 0 0 1.5rem;
 
-    @include mq(xs) {
-      align-items: flex-start;
-      display: flex;
-    }
+        @include mq(xs) {
+            align-items: flex-start;
+            display: flex;
+        }
 
-    &:last-of-type {
-      border-bottom: 0;
-      margin: 0;
-    }
-  }
+        &:last-of-type {
+            border-bottom: 0;
+            margin: 0;
+        }
 
-  &__item-image {
-    flex: 0 0 auto;
-    margin-bottom: 1rem;
-    width: 136px;
+        // Featured document
+        &--featured {
+            background-color: var(--ons-color-banner-bg);
+            border-bottom: 0;
+            display: block;
+            outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+            outline-offset: -2px;
+            padding: 2rem;
+
+            @include mq(m) {
+                align-items: flex-start;
+                display: flex;
+
+                .ons-container {
+                    display: flex;
+                }
+            }
 
-    @include mq(xs) {
-      margin-right: 1.5rem;
-    }
+            // Increase thumbnail image size
+            .ons-document-list__item-image {
+                width: 248px;
+
+                & &__image-link {
+                    &--placeholder {
+                        height: 96px;
+                    }
+                }
+
+                @include mq(m) {
+                    margin-right: 2.5rem;
+                    width: 379px;
+
+                    & &__image-link {
+                        &--placeholder {
+                            height: 248px;
+                        }
+                    }
+                }
+            }
 
-    @include mq(m) {
-      margin-bottom: 0;
-    }
-  }
+            // Show metadata above title
+            .ons-document-list__item-header {
+                &--reverse {
+                    display: flex;
+                    flex-direction: column-reverse;
+                    margin-bottom: 0.5rem;
+                }
+            }
 
-  &__item-image & {
-    &__image-link {
-      &--placeholder {
-        height: 96px;
-      }
+            // Increase font size
+            .ons-document-list__item-title {
+                @extend .ons-u-fs-l;
+            }
+
+            // If featured item is first in same list
+            + .ons-document-list__item {
+                border-top: 0;
+                margin-top: 0;
+            }
+        }
+
+        // If featured item is full width
+        &--full-width {
+            padding: 2rem 0;
+        }
     }
-  }
 
-  &__item-image--file {
-    width: 96px;
-  }
+    &__item-image {
+        flex: 0 0 auto;
+        margin-bottom: 1rem;
+        width: 136px;
 
-  &__item-image--file & {
-    &__image-link {
-      border-color: var(--ons-color-borders-document-image);
+        @include mq(xs) {
+            margin-right: 1.5rem;
+        }
 
-      &--placeholder {
-        height: 136px;
-      }
+        @include mq(m) {
+            margin-bottom: 0;
+        }
     }
-  }
-
-  &__image-link {
-    border: 2px solid transparent;
-    box-sizing: content-box;
-    display: block;
-    width: 100%;
-
-    &:focus {
-      background-color: var(--ons-color-image-placeholder) !important;
-      border: 2px solid var(--ons-color-borders-document-image-focus);
-      box-shadow: none;
-      outline: 4px solid var(--ons-color-focus) !important;
-      outline-offset: 0;
+
+    &__item-image & {
+        &__image-link {
+            &--placeholder {
+                height: 96px;
+            }
+        }
     }
 
-    &--placeholder {
-      background-clip: padding-box;
-      background-color: var(--ons-color-borders-document-image);
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 32px 32px;
-      height: 100%;
+    &__item-image--file {
+        width: 96px;
     }
-  }
 
-  &__item-metadata {
-    @extend .ons-list--bare;
+    &__item-image--file & {
+        &__image-link {
+            border-color: var(--ons-color-borders-document-image);
 
-    line-height: 1.2 !important;
-  }
+            &--placeholder {
+                height: 136px;
+            }
+        }
+    }
 
-  &__item-attribute {
-    color: var(--ons-color-text-metadata);
-    display: inline-block;
-    margin: 0 1rem 0 0;
+    &__image-link {
+        border: 2px solid transparent;
+        box-sizing: content-box;
+        display: block;
+        width: 100%;
+
+        &:focus {
+            background-color: var(--ons-color-image-placeholder) !important;
+            border: 2px solid var(--ons-color-borders-document-image-focus);
+            box-shadow: none;
+            outline: 4px solid var(--ons-color-focus) !important;
+            outline-offset: 0;
+        }
 
-    @extend .ons-u-fs-s;
-  }
+        &--placeholder {
+            background-clip: padding-box;
+            background-color: var(--ons-color-borders-document-image);
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 32px 32px;
+            height: 100%;
+        }
+    }
 
-  &__attribute-link {
-    color: inherit;
+    &__item-metadata {
+        @extend .ons-list--bare;
 
-    &:hover {
-      color: var(--ons-color-text-metadata);
-      text-decoration: underline solid var(--ons-color-text-metadata) 2px;
+        line-height: 1.2 !important;
     }
-  }
 
-  &__item-description {
-    margin-bottom: 0;
-    max-width: 660px; // Equivalent to 8 Columns
+    &__item-attribute {
+        color: var(--ons-color-text-metadata);
+        display: inline-block;
+        margin: 0 1rem 0 0;
 
-    p:last-of-type {
-      margin-bottom: 0;
+        @extend .ons-u-fs-s;
     }
-  }
-}
-
-// Featured document
-.ons-document-list {
-  &__item {
-    &--featured {
-      background-color: var(--ons-color-banner-bg);
-      border-bottom: none;
-      display: block;
-      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-      outline-offset: -2px;
-      padding: 2rem;
-
-      @include mq(m) {
-        align-items: flex-start;
-        display: flex;
-
-        .ons-container {
-          display: flex;
-        }
-      }
 
-      // Increase thumbnail image size
-      .ons-document-list__item-image {
-        width: 248px;
+    &__attribute-link {
+        color: inherit;
 
-        & &__image-link {
-          &--placeholder {
-            height: 96px;
-          }
+        &:hover {
+            color: var(--ons-color-text-metadata);
+            text-decoration: underline solid var(--ons-color-text-metadata) 2px;
         }
+    }
 
-        @include mq(m) {
-          margin-right: 2.5rem;
-          width: 379px;
+    &__item-description {
+        margin-bottom: 0;
+        max-width: 660px; // Equivalent to 8 Columns
 
-          & &__image-link {
-            &--placeholder {
-              height: 248px;
-            }
-          }
-        }
-      }
-
-      // Show metadata above title
-      .ons-document-list__item-header {
-        &--reverse {
-          display: flex;
-          flex-direction: column-reverse;
-          margin-bottom: 0.5rem;
+        p:last-of-type {
+            margin-bottom: 0;
         }
-      }
-
-      // Increase font size
-      .ons-document-list__item-title {
-        @extend .ons-u-fs-l;
-      }
-
-      // If featured item is first in same list
-      & + .ons-document-list__item {
-        border-top: none;
-        margin-top: 0;
-      }
-    }
-
-    // If featured item is full width
-    &--full-width {
-      padding: 2rem 0;
     }
-  }
 }

package/components/download-resources/_download-resources.scss

@@ -1,142 +1,143 @@
 .ons-adv-filter {
-  &__gallery {
-    border-top: 1px solid var(--ons-color-borders-light);
-    margin-left: 0;
-    padding-left: 0;
-    padding-top: 1.5rem;
-  }
-
-  &__item {
-    margin-top: 1.5rem;
-
-    &:first-of-type {
-      margin-top: 1.5rem;
+    &__gallery {
+        border-top: 1px solid var(--ons-color-borders-light);
+        margin-left: 0;
+        padding-left: 0;
+        padding-top: 1.5rem;
     }
 
-    .ons-checkboxes__item {
-      min-width: auto;
-    }
-  }
-
-  &__selection {
-    color: var(--ons-color-grey-100);
-    margin-bottom: 0.5rem;
-  }
-
-  &__results-options {
-    margin-bottom: 1.5rem;
-  }
-
-  &__results-sort {
-    align-items: center;
-    display: flex;
-    margin-top: 0.5rem;
-
-    .ons-label {
-      font-weight: $font-weight-regular;
-      margin-bottom: 0;
-      margin-right: 0.5rem;
-    }
+    &__item {
+        margin-top: 1.5rem;
 
-    .ons-input--select {
-      width: auto !important;
-    }
-  }
-
-  &__panel {
-    display: none;
-  }
-
-  &__panel--is-visible {
-    background-color: var(--ons-color-white);
-    inset: 0;
-    display: block;
-    height: calc(100% - 76px); // Height of action buttons
-    overflow-y: scroll;
-    padding: 1rem;
-    position: fixed;
-    z-index: 10;
-  }
-
-  &__actions {
-    background-color: var(--ons-color-white);
-    bottom: 0;
-    box-shadow: 0 0 5px 0 rgb(34 34 34 / 50%),
-      0 -1px 0 0 rgb(65 64 66 / 50%);
-    display: flex;
-    left: 0;
-    padding: 1rem;
-    position: fixed;
-    width: 100%;
-    z-index: 11;
-
-    .ons-btn:first-of-type {
-      flex-grow: 1;
+        &:first-of-type {
+            margin-top: 1.5rem;
+        }
+
+        .ons-checkboxes__item {
+            min-width: auto;
+        }
     }
 
-    .ons-btn + .ons-btn {
-      margin-left: 1rem;
+    &__selection {
+        color: var(--ons-color-grey-100);
+        margin-bottom: 0.5rem;
     }
-  }
 
-  @include mq(s) {
     &__results-options {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
     }
 
     &__results-sort {
-      margin-top: 0; // Reset
-    }
-  }
+        align-items: center;
+        display: flex;
+        margin-top: 0.5rem;
 
-  @include mq(m) {
-    &__actions {
-      display: none;
-    }
+        .ons-label {
+            font-weight: $font-weight-regular;
+            margin-bottom: 0;
+            margin-right: 0.5rem;
+        }
 
-    &__trigger {
-      display: none;
+        .ons-input--select {
+            width: auto !important;
+        }
     }
 
     &__panel {
-      display: block;
+        display: none;
+    }
+
+    &__panel--is-visible {
+        background-color: var(--ons-color-white);
+        inset: 0;
+        display: block;
+        height: calc(100% - 76px); // Height of action buttons
+        overflow-y: scroll;
+        padding: 1rem;
+        position: fixed;
+        z-index: 10;
     }
 
-    .ons-no-scroll {
-      overflow: auto;
+    &__actions {
+        background-color: var(--ons-color-white);
+        bottom: 0;
+        box-shadow:
+            0 0 5px 0 rgb(34 34 34 / 50%),
+            0 -1px 0 0 rgb(65 64 66 / 50%);
+        display: flex;
+        left: 0;
+        padding: 1rem;
+        position: fixed;
+        width: 100%;
+        z-index: 11;
+
+        .ons-btn:first-of-type {
+            flex-grow: 1;
+        }
+
+        .ons-btn + .ons-btn {
+            margin-left: 1rem;
+        }
+    }
+
+    @include mq(s) {
+        &__results-options {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+        }
+
+        &__results-sort {
+            margin-top: 0; // Reset
+        }
+    }
+
+    @include mq(m) {
+        &__actions {
+            display: none;
+        }
+
+        &__trigger {
+            display: none;
+        }
+
+        &__panel {
+            display: block;
+        }
+
+        .ons-no-scroll {
+            overflow: auto;
+        }
     }
-  }
 }
 
 // No JavaScript
 body:not(.ons-js-enabled) {
-  .ons-adv-filter {
-    &__actions {
-      display: none;
-    }
+    .ons-adv-filter {
+        &__actions {
+            display: none;
+        }
 
-    &__panel {
-      display: block;
-    }
+        &__panel {
+            display: block;
+        }
 
-    &__trigger {
-      display: none;
-    }
+        &__trigger {
+            display: none;
+        }
 
-    &__no-results {
-      display: none;
-    }
+        &__no-results {
+            display: none;
+        }
 
-    &__selection {
-      display: none;
+        &__selection {
+            display: none;
+        }
     }
-  }
 }
 
 // Prevent scrollbars on body
 .ons-no-scroll {
-  overflow-y: hidden;
+    overflow-y: hidden;
 }