@ons/design-system 70.0.6 → 70.0.8

package/components/table/_table.scss

@@ -1,234 +1,237 @@
 .ons-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__head {
-    border-bottom: 2px solid var(--ons-color-grey-75);
-  }
-
-  &__caption {
-    font-weight: $font-weight-bold;
-    text-align: left;
-  }
-
-  &__header,
-  &__cell {
-    @include nth-element(1, 0);
-
-    border-bottom: 2px solid var(--ons-color-grey-75);
-    overflow: hidden;
-    padding: 0.5rem 0 0.5rem 1rem;
-    text-align: left;
-    vertical-align: top;
-    &--numeric {
-      text-align: right;
-    }
-  }
-
-  &__cell,
-  &__header--row {
-    border-bottom: 1px solid var(--ons-color-borders);
-  }
-
-  &__row--highlight {
-    background: var(--ons-color-highlight);
-  }
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1rem;
+    width: 100%;
 
-  &:not(.ons-table--responsive) .ons-table__body .ons-table__row:last-child {
-    .ons-table__cell,
-    .ons-table__header--row {
-      border: 0;
-    }
-  }
-
-  &__foot .ons-table__cell {
-    border-bottom: 0;
-    border-top: 1px solid var(--ons-color-borders);
-  }
-
-  &--compact {
-    .ons-table__head,
-    .ons-table__body,
-    .ons-table__foot {
-      font-size: 81.25%;
+    &__head {
+        border-bottom: 2px solid var(--ons-color-grey-75);
     }
-  }
 
-  &--row-hover {
-    .ons-table__body .ons-table__row:hover {
-      background: var(--ons-color-highlight);
+    &__caption {
+        font-weight: $font-weight-bold;
+        text-align: left;
     }
-  }
 
-  &--responsive {
-    @include mq(xxs, s) {
-      .ons-table__header {
-        display: none;
-      }
+    &__header,
+    &__cell {
+        @include nth-element(1, 0);
 
-      .ons-table__head {
-        border-bottom: none;
-      }
-
-      .ons-table__body .ons-table__row {
         border-bottom: 2px solid var(--ons-color-grey-75);
-        display: block;
-        margin-bottom: 1rem;
-      }
-
-      .ons-table__cell {
-        display: block;
-        padding-left: 0;
-        text-align: right;
-        &:last-child {
-          border: 0;
-        }
-        &::before {
-          content: attr(data-th);
-          float: left;
-          font-weight: $font-weight-bold;
-          padding-right: 1rem;
+        overflow: hidden;
+        padding: 0.5rem 0 0.5rem 1rem;
+        text-align: left;
+        vertical-align: top;
+        &--numeric {
+            text-align: right;
         }
-      }
     }
-  }
 
-  &-scrollable {
-    position: relative;
-    ::-webkit-scrollbar {
-      height: 7px;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: var(--ons-color-grey-75);
-      border-radius: 20px;
+    &__cell,
+    &__header--row {
+        border-bottom: 1px solid var(--ons-color-borders);
     }
-    &--on {
-      .ons-table__header,
-      .ons-table__cell {
-        white-space: nowrap;
-      }
+
+    &__row--highlight {
+        background: var(--ons-color-highlight);
     }
-    &__content {
-      overflow: visible;
-      overflow-x: auto;
-      width: 100%;
-      &:focus {
-        box-shadow: 0 0 0 3px var(--ons-color-page-light),
-          0 0 0 5px var(--ons-color-text-link-focus),
-          0 0 0 8px var(--ons-color-focus);
-        outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-        outline-offset: 1px;
-      }
-      .ons-table__header,
-      .ons-table__cell {
-        @include mq(xxs, m) {
-          white-space: nowrap;
-        }
-      }
-      .ons-table__right-shadow,
-      .ons-table__left-shadow {
-        height: 100%;
-        padding: 2px;
-        position: absolute;
-        top: 0;
-        width: 5px;
-        z-index: 200;
-
-        &.ons-with-transition {
-          transition: box-shadow 0.4s ease-out;
-        }
-      }
-      .ons-table__right-shadow {
-        right: 0;
-        &.ons-visible {
-          box-shadow: inset -1px 0 0 0 #bfc1c3,
-            inset -5px 0 0 0 rgb(191 193 195 / 40%);
-        }
-      }
-      .ons-table__left-shadow {
-        left: 0;
-        &.ons-visible {
-          box-shadow: inset 1px 0 0 0 #bfc1c3,
-            inset -5px 0 0 0 rgb(191 193 195 / 40%);
+
+    &:not(.ons-table--responsive) .ons-table__body .ons-table__row:last-child {
+        .ons-table__cell,
+        .ons-table__header--row {
+            border: 0;
         }
-      }
     }
-  }
 
-  &--sortable {
-    [aria-sort='descending'].ons-table__header {
-      .ons-icon {
-        .ons-topTriangle {
-          fill: var(--ons-color-grey-15);
+    &__foot .ons-table__cell {
+        border-bottom: 0;
+        border-top: 1px solid var(--ons-color-borders);
+    }
+
+    &--compact {
+        .ons-table__head,
+        .ons-table__body,
+        .ons-table__foot {
+            font-size: 81.25%;
         }
-        .ons-bottomTriangle {
-          fill: var(--ons-color-text);
+    }
+
+    &--row-hover {
+        .ons-table__body .ons-table__row:hover {
+            background: var(--ons-color-highlight);
         }
-      }
-      .ons-table__sort-button:focus {
-        .ons-icon {
-          .ons-topTriangle {
-            fill: #e3ba02;
-          }
+    }
+
+    &--responsive {
+        @include mq(xxs, s) {
+            .ons-table__header {
+                display: none;
+            }
+
+            .ons-table__head {
+                border-bottom: 0;
+            }
+
+            .ons-table__body .ons-table__row {
+                border-bottom: 2px solid var(--ons-color-grey-75);
+                display: block;
+                margin-bottom: 1rem;
+            }
+
+            .ons-table__cell {
+                display: block;
+                padding-left: 0;
+                text-align: right;
+                &:last-child {
+                    border: 0;
+                }
+                &::before {
+                    content: attr(data-th);
+                    float: left;
+                    font-weight: $font-weight-bold;
+                    padding-right: 1rem;
+                }
+            }
         }
-      }
     }
 
-    [aria-sort='ascending'].ons-table__header {
-      .ons-icon {
-        .ons-topTriangle {
-          fill: var(--ons-color-text);
+    &-scrollable {
+        position: relative;
+        ::-webkit-scrollbar {
+            height: 7px;
         }
-        .ons-bottomTriangle {
-          fill: var(--ons-color-grey-15);
+        ::-webkit-scrollbar-thumb {
+            background: var(--ons-color-grey-75);
+            border-radius: 20px;
         }
-      }
-      .ons-table__sort-button:focus {
-        .ons-icon {
-          .ons-bottomTriangle {
-            fill: #e3ba02;
-          }
+        &--on {
+            .ons-table__header,
+            .ons-table__cell {
+                white-space: nowrap;
+            }
+        }
+        &__content {
+            overflow: visible;
+            overflow-x: auto;
+            width: 100%;
+            &:focus {
+                box-shadow:
+                    0 0 0 3px var(--ons-color-page-light),
+                    0 0 0 5px var(--ons-color-text-link-focus),
+                    0 0 0 8px var(--ons-color-focus);
+                outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+                outline-offset: 1px;
+            }
+            .ons-table__header,
+            .ons-table__cell {
+                @include mq(xxs, m) {
+                    white-space: nowrap;
+                }
+            }
+            .ons-table__right-shadow,
+            .ons-table__left-shadow {
+                height: 100%;
+                padding: 2px;
+                position: absolute;
+                top: 0;
+                width: 5px;
+                z-index: 200;
+
+                &.ons-with-transition {
+                    transition: box-shadow 0.4s ease-out;
+                }
+            }
+            .ons-table__right-shadow {
+                right: 0;
+                &.ons-visible {
+                    box-shadow:
+                        inset -1px 0 0 0 #bfc1c3,
+                        inset -5px 0 0 0 rgb(191 193 195 / 40%);
+                }
+            }
+            .ons-table__left-shadow {
+                left: 0;
+                &.ons-visible {
+                    box-shadow:
+                        inset 1px 0 0 0 #bfc1c3,
+                        inset -5px 0 0 0 rgb(191 193 195 / 40%);
+                }
+            }
         }
-      }
     }
 
-    .ons-table__header {
-      .ons-table__sort-button {
-        background-color: transparent;
-        border: 0;
-        box-shadow: none;
-        color: var(--ons-color-text-link);
-        cursor: pointer;
-        display: inline-block;
-        font-family: $font-sans;
-        font-weight: $font-weight-bold;
-        line-height: 1rem;
-        padding: 0 0 0.2rem;
-        white-space: nowrap;
-
-        &:hover:not(:focus) {
-          color: var(--ons-color-text-link-hover);
-          text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
-          text-underline-position: under;
+    &--sortable {
+        [aria-sort='descending'].ons-table__header {
+            .ons-icon {
+                .ons-topTriangle {
+                    fill: var(--ons-color-grey-15);
+                }
+                .ons-bottomTriangle {
+                    fill: var(--ons-color-text);
+                }
+            }
+            .ons-table__sort-button:focus {
+                .ons-icon {
+                    .ons-topTriangle {
+                        fill: #e3ba02;
+                    }
+                }
+            }
         }
 
-        .ons-icon {
-          fill: var(--ons-color-grey-75);
-          height: 16px;
-          margin-left: 0.2rem;
-          padding-bottom: 0.1rem;
-          width: 16px;
+        [aria-sort='ascending'].ons-table__header {
+            .ons-icon {
+                .ons-topTriangle {
+                    fill: var(--ons-color-text);
+                }
+                .ons-bottomTriangle {
+                    fill: var(--ons-color-grey-15);
+                }
+            }
+            .ons-table__sort-button:focus {
+                .ons-icon {
+                    .ons-bottomTriangle {
+                        fill: #e3ba02;
+                    }
+                }
+            }
         }
 
-        &:focus {
-          @extend %a-focus;
-          .ons-icon {
-            fill: var(--ons-color-black);
-          }
+        .ons-table__header {
+            .ons-table__sort-button {
+                background-color: transparent;
+                border: 0;
+                box-shadow: none;
+                color: var(--ons-color-text-link);
+                cursor: pointer;
+                display: inline-block;
+                font-family: $font-sans;
+                font-weight: $font-weight-bold;
+                line-height: 1rem;
+                padding: 0 0 0.2rem;
+                white-space: nowrap;
+
+                &:hover:not(:focus) {
+                    color: var(--ons-color-text-link-hover);
+                    text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+                    text-underline-position: under;
+                }
+
+                .ons-icon {
+                    fill: var(--ons-color-grey-75);
+                    height: 16px;
+                    margin-left: 0.2rem;
+                    padding-bottom: 0.1rem;
+                    width: 16px;
+                }
+
+                &:focus {
+                    @extend %a-focus;
+                    .ons-icon {
+                        fill: var(--ons-color-black);
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

package/components/table/scrollable-table.dom.js

@@ -3,13 +3,13 @@ import domready from '../../js/domready';
 export const classTableScrollable = 'ons-table-scrollable';
 
 async function tableScroller() {
-  const tables = [...document.querySelectorAll(`.${classTableScrollable}`)];
+    const tables = [...document.querySelectorAll(`.${classTableScrollable}`)];
 
-  if (tables.length) {
-    const TableScroll = (await import('./scrollable-table')).default;
+    if (tables.length) {
+        const TableScroll = (await import('./scrollable-table')).default;
 
-    tables.forEach((table) => new TableScroll(table));
-  }
+        tables.forEach((table) => new TableScroll(table));
+    }
 }
 
 domready(tableScroller);

package/components/table/scrollable-table.js

@@ -2,78 +2,78 @@ export const classTableScrollableContent = 'ons-table-scrollable__content';
 export const classTable = 'ons-table';
 
 export default class TableScroll {
-  constructor(table) {
-    this.table = table;
-    this.tableScroll = this.table.getElementsByClassName(classTableScrollableContent);
-    this.tableEl = this.tableScroll[0].getElementsByClassName(classTable);
+    constructor(table) {
+        this.table = table;
+        this.tableScroll = this.table.getElementsByClassName(classTableScrollableContent);
+        this.tableEl = this.tableScroll[0].getElementsByClassName(classTable);
 
-    this.activeTable = false;
+        this.activeTable = false;
 
-    this.tableSizeCheck();
-    this.viewportCheck();
-  }
+        this.tableSizeCheck();
+        this.viewportCheck();
+    }
 
-  tableSizeCheck() {
-    this.tableWidth = this.tableEl[0].offsetWidth;
-    this.tableContainerWidth = this.tableScroll[0].offsetWidth;
-    if (this.tableWidth > this.tableContainerWidth && this.activeTable === false) {
-      this.activeTable = true;
-      this.insertShadows();
-      this.registerScroll();
-    } else if (this.tableWidth <= this.tableContainerWidth && this.activeTable === true) {
-      this.removeShadows();
-      this.activeTable = false;
+    tableSizeCheck() {
+        this.tableWidth = this.tableEl[0].offsetWidth;
+        this.tableContainerWidth = this.tableScroll[0].offsetWidth;
+        if (this.tableWidth > this.tableContainerWidth && this.activeTable === false) {
+            this.activeTable = true;
+            this.insertShadows();
+            this.registerScroll();
+        } else if (this.tableWidth <= this.tableContainerWidth && this.activeTable === true) {
+            this.removeShadows();
+            this.activeTable = false;
+        }
     }
-  }
 
-  viewportCheck() {
-    window.addEventListener('resize', () => this.tableSizeCheck(), true);
-  }
+    viewportCheck() {
+        window.addEventListener('resize', () => this.tableSizeCheck(), true);
+    }
 
-  registerScroll() {
-    this.tableScroll[0].addEventListener('scroll', this.toggleShadows.bind(this));
-  }
+    registerScroll() {
+        this.tableScroll[0].addEventListener('scroll', this.toggleShadows.bind(this));
+    }
 
-  insertShadows() {
-    const rightShadowEl = document.createElement('div');
-    const leftShadowEl = document.createElement('div');
+    insertShadows() {
+        const rightShadowEl = document.createElement('div');
+        const leftShadowEl = document.createElement('div');
 
-    rightShadowEl.className = 'ons-table__right-shadow ons-visible';
-    leftShadowEl.className = 'ons-table__left-shadow';
-    this.tableScroll[0].appendChild(rightShadowEl);
-    this.tableScroll[0].insertBefore(leftShadowEl, this.tableScroll[0].firstChild);
-  }
+        rightShadowEl.className = 'ons-table__right-shadow ons-visible';
+        leftShadowEl.className = 'ons-table__left-shadow';
+        this.tableScroll[0].appendChild(rightShadowEl);
+        this.tableScroll[0].insertBefore(leftShadowEl, this.tableScroll[0].firstChild);
+    }
 
-  removeShadows() {
-    const rightShadow = this.tableScroll[0].querySelector('.ons-table__right-shadow');
-    const leftShadow = this.tableScroll[0].querySelector('.ons-table__left-shadow');
-    this.tableScroll[0].removeChild(rightShadow);
-    this.tableScroll[0].removeChild(leftShadow);
-  }
+    removeShadows() {
+        const rightShadow = this.tableScroll[0].querySelector('.ons-table__right-shadow');
+        const leftShadow = this.tableScroll[0].querySelector('.ons-table__left-shadow');
+        this.tableScroll[0].removeChild(rightShadow);
+        this.tableScroll[0].removeChild(leftShadow);
+    }
 
-  toggleShadows() {
-    const rightShadow = this.tableScroll[0].querySelector('.ons-table__right-shadow');
-    const leftShadow = this.tableScroll[0].querySelector('.ons-table__left-shadow');
-    const tableScrollPos = this.getOffset(this.tableScroll[0]).left;
-    const tablePos = this.getOffset(this.tableEl[0]).left;
+    toggleShadows() {
+        const rightShadow = this.tableScroll[0].querySelector('.ons-table__right-shadow');
+        const leftShadow = this.tableScroll[0].querySelector('.ons-table__left-shadow');
+        const tableScrollPos = this.getOffset(this.tableScroll[0]).left;
+        const tablePos = this.getOffset(this.tableEl[0]).left;
 
-    this.tableWidth = this.tableEl[0].offsetWidth;
-    this.tableContainerWidth = this.tableScroll[0].offsetWidth;
-    tablePos === tableScrollPos ? leftShadow.classList.remove('ons-visible') : leftShadow.classList.add('ons-visible');
+        this.tableWidth = this.tableEl[0].offsetWidth;
+        this.tableContainerWidth = this.tableScroll[0].offsetWidth;
+        tablePos === tableScrollPos ? leftShadow.classList.remove('ons-visible') : leftShadow.classList.add('ons-visible');
 
-    -tableScrollPos === this.tableContainerWidth - this.tableWidth - tablePos
-      ? rightShadow.classList.remove('ons-visible')
-      : rightShadow.classList.add('ons-visible');
+        -tableScrollPos === this.tableContainerWidth - this.tableWidth - tablePos
+            ? rightShadow.classList.remove('ons-visible')
+            : rightShadow.classList.add('ons-visible');
 
-    setTimeout(function () {
-      return leftShadow.classList.add('ons-with-transition'), rightShadow.classList.add('ons-with-transition');
-    }, 200);
-  }
+        setTimeout(function () {
+            return leftShadow.classList.add('ons-with-transition'), rightShadow.classList.add('ons-with-transition');
+        }, 200);
+    }
 
-  getOffset(el) {
-    const rect = el.getBoundingClientRect();
-    return {
-      left: rect.left + window.scrollX,
-    };
-  }
+    getOffset(el) {
+        const rect = el.getBoundingClientRect();
+        return {
+            left: rect.left + window.scrollX,
+        };
+    }
 }

package/components/table/sortable-table.dom.js

@@ -3,13 +3,13 @@ import domready from '../../js/domready';
 export const classTableSortable = 'ons-table--sortable';
 
 async function tableSorter() {
-  const tables = [...document.querySelectorAll(`.${classTableSortable}`)];
+    const tables = [...document.querySelectorAll(`.${classTableSortable}`)];
 
-  if (tables.length) {
-    const TableSort = (await import('./sortable-table')).default;
+    if (tables.length) {
+        const TableSort = (await import('./sortable-table')).default;
 
-    tables.forEach((table, index) => new TableSort(table, index));
-  }
+        tables.forEach((table, index) => new TableSort(table, index));
+    }
 }
 
 domready(tableSorter);