@ons/design-system 70.0.6 → 70.0.8

package/components/navigation/_navigation.scss

@@ -1,145 +1,144 @@
 .ons-navigation {
-  position: relative;
-  &-wrapper {
-    background: var(--ons-color-header);
-    margin-top: -0.03rem;
-  }
-
-  &--sub {
-    background: var(--ons-color-branded-tint);
-    padding-top: 0.5rem;
-  }
-
-  &--sub-mobile {
-    border-bottom: 4px solid var(--ons-color-branded-tint);
-  }
-
-  &-search {
-    padding: 1rem;
-
-    @include mq(l) {
-      background: none;
-      bottom: 65px;
-      padding: 0;
-      position: absolute;
-      right: 1rem;
-      width: 20rem;
+    position: relative;
+
+    &-wrapper {
+        background: var(--ons-color-header);
+        margin-top: -0.03rem;
+
+        &--neutral {
+            background: var(--ons-color-header-neutral);
+            .ons-navigation__item {
+                &--active,
+                &:hover {
+                    border-color: var(--ons-color-links);
+                }
+                .ons-navigation__link {
+                    color: var(--ons-color-header-navigation-links);
+                }
+            }
+        }
     }
-  }
-
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0 0 0.5rem;
 
-    @include mq(l) {
-      padding: 0;
+    &--sub {
+        background: var(--ons-color-branded-tint);
+        padding-top: 0.5rem;
     }
 
-    &-header {
-      font-size: 1rem;
-      margin: 0.75rem 0 0.6rem;
-      padding: 0 0 0 1rem;
-    }
-  }
-
-  &__item {
-    border-left: 4px solid transparent;
-    display: block;
-    margin: 0 0 0.2rem;
-    &--active,
-    &:hover {
-      border-color: var(--ons-color-white);
+    &--sub-mobile {
+        border-bottom: 4px solid var(--ons-color-branded-tint);
     }
 
-    .ons-navigation--sub-mobile & {
-      &--active,
-      &:hover {
-        border-color: var(--ons-color-branded);
-        li {
-          border: 0;
+    &-search {
+        padding: 1rem;
+
+        @include mq(l) {
+            background: none;
+            bottom: 65px;
+            padding: 0;
+            position: absolute;
+            right: 1rem;
+            width: 20rem;
         }
-      }
     }
 
-    @include mq(l) {
-      border-bottom: 4px solid transparent;
-      border-left: 0;
-      display: inline-block;
-      margin: 0 0 0 1rem;
-      padding: 0 0 0.3rem;
-      position: relative;
-      text-align: center;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &--active,
-      &:hover {
-        border-color: var(--ons-color-white);
-      }
-
-      .ons-navigation--sub & {
-        &:hover,
-        &--active {
-          border-color: var(--ons-color-branded);
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0 0 0.5rem;
+
+        @include mq(l) {
+            padding: 0;
         }
-      }
-    }
-  }
-
-  &__link {
-    color: var(--ons-color-white);
-    display: block;
-    margin: 0 0.75rem;
-    padding: 0.1rem 0;
-    text-decoration: none;
-
-    &--section {
-      margin: 0;
-      padding: 0;
-    }
 
-    &:hover,
-    &:focus {
-      color: var(--ons-color-white);
-      text-decoration: none;
+        &-header {
+            font-size: 1rem;
+            margin: 0.75rem 0 0.6rem;
+            padding: 0 0 0 1rem;
+        }
     }
 
-    .ons-navigation--sub &,
-    .ons-navigation--sub-mobile & {
-      color: var(--ons-color-text-link);
-      &:hover,
-      &:focus {
-        color: var(--ons-color-text-link-hover);
-      }
-    }
+    &__item {
+        border-left: 4px solid transparent;
+        display: block;
+        margin: 0 0 0.2rem;
+        &--active,
+        &:hover {
+            border-color: var(--ons-color-white);
+        }
 
-    @include mq(l) {
-      display: inline-block;
-      font-size: 1rem;
-      margin: 0;
-      padding: 0;
+        .ons-navigation--sub-mobile & {
+            &--active,
+            &:hover {
+                border-color: var(--ons-color-branded);
+                li {
+                    border: 0;
+                }
+            }
+        }
+
+        @include mq(l) {
+            border-bottom: 4px solid transparent;
+            border-left: 0;
+            display: inline-block;
+            margin: 0 0 0 1rem;
+            padding: 0 0 0.3rem;
+            position: relative;
+            text-align: center;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &--active,
+            &:hover {
+                border-color: var(--ons-color-white);
+            }
+
+            .ons-navigation--sub & {
+                &:hover,
+                &--active {
+                    border-color: var(--ons-color-branded);
+                }
+            }
+        }
     }
-  }
 
-  &__item--active > &__link {
-    font-weight: $font-weight-bold;
-  }
+    &__link {
+        color: var(--ons-color-white);
+        display: block;
+        margin: 0 0.75rem;
+        padding: 0.1rem 0;
+        text-decoration: none;
 
-  &-wrapper {
-    &--neutral {
-      background: var(--ons-color-header-neutral);
-      .ons-navigation__item {
-        &--active,
-        &:hover {
-          border-color: var(--ons-color-links);
+        &--section {
+            margin: 0;
+            padding: 0;
         }
-        .ons-navigation__link {
-          color: var(--ons-color-header-navigation-links);
+
+        &:hover,
+        &:focus {
+            color: var(--ons-color-white);
+            text-decoration: none;
         }
-      }
+
+        .ons-navigation--sub &,
+        .ons-navigation--sub-mobile & {
+            color: var(--ons-color-text-link);
+            &:hover,
+            &:focus {
+                color: var(--ons-color-text-link-hover);
+            }
+        }
+
+        @include mq(l) {
+            display: inline-block;
+            font-size: 1rem;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    &__item--active > &__link {
+        font-weight: $font-weight-bold;
     }
-  }
 }

package/components/navigation/navigation.dom.js

@@ -1,39 +1,39 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
-  const navigationEl = document.querySelector('.ons-js-navigation');
-  const navigationHideClass = 'ons-u-d-no@xxs@l';
-  const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
-  const subNavigationEl = document.querySelector('.ons-js-secondary-nav');
-  const subNavigationHideClass = 'ons-u-d-no';
-  const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
-  const searchEl = document.querySelector('.ons-js-navigation-search');
-  const searchHideClass = 'ons-u-d-no@xs@l';
-  const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
-  const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
-  const servicesHideClass = 'ons-u-d-no';
-
-  if (toggleNavigationBtn) {
-    const NavigationToggle = (await import('./navigation')).default;
-
-    new NavigationToggle(toggleNavigationBtn, navigationEl, navigationHideClass).registerEvents();
-  }
-
-  if (toggleSubNavigationBtn) {
-    const SubNavigationToggle = (await import('./navigation')).default;
-    new SubNavigationToggle(toggleSubNavigationBtn, subNavigationEl, subNavigationHideClass).registerEvents();
-  }
-
-  if (toggleSearchBtn) {
-    const searchToggle = (await import('./navigation')).default;
-
-    new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
-  }
-
-  if (toggleServicesBtn) {
-    const servicesToggle = (await import('./navigation')).default;
-
-    new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
-  }
+    const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
+    const navigationEl = document.querySelector('.ons-js-navigation');
+    const navigationHideClass = 'ons-u-d-no@xxs@l';
+    const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
+    const subNavigationEl = document.querySelector('.ons-js-secondary-nav');
+    const subNavigationHideClass = 'ons-u-d-no';
+    const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
+    const searchEl = document.querySelector('.ons-js-navigation-search');
+    const searchHideClass = 'ons-u-d-no@xs@l';
+    const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
+    const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
+    const servicesHideClass = 'ons-u-d-no';
+
+    if (toggleNavigationBtn) {
+        const NavigationToggle = (await import('./navigation')).default;
+
+        new NavigationToggle(toggleNavigationBtn, navigationEl, navigationHideClass).registerEvents();
+    }
+
+    if (toggleSubNavigationBtn) {
+        const SubNavigationToggle = (await import('./navigation')).default;
+        new SubNavigationToggle(toggleSubNavigationBtn, subNavigationEl, subNavigationHideClass).registerEvents();
+    }
+
+    if (toggleSearchBtn) {
+        const searchToggle = (await import('./navigation')).default;
+
+        new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
+    }
+
+    if (toggleServicesBtn) {
+        const servicesToggle = (await import('./navigation')).default;
+
+        new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
+    }
 });

package/components/navigation/navigation.js

@@ -4,64 +4,64 @@ const attrExpanded = 'aria-expanded';
 const attrHidden = 'aria-hidden';
 
 export default class NavigationToggle {
-  constructor(toggle, navigation, hideClass) {
-    this.toggle = toggle;
-    this.navigation = navigation;
-    this.hideClass = hideClass;
-    this.toggle.classList.remove('ons-u-d-no');
-    this.setAria();
-    onViewportChange(this.setAria.bind(this));
-  }
+    constructor(toggle, navigation, hideClass) {
+        this.toggle = toggle;
+        this.navigation = navigation;
+        this.hideClass = hideClass;
+        this.toggle.classList.remove('ons-u-d-no');
+        this.setAria();
+        onViewportChange(this.setAria.bind(this));
+    }
 
-  registerEvents() {
-    this.toggle.addEventListener('click', this.toggleNav.bind(this));
-  }
+    registerEvents() {
+        this.toggle.addEventListener('click', this.toggleNav.bind(this));
+    }
 
-  toggleNav() {
-    const isHidden = this.navigation.getAttribute(attrHidden);
-    isHidden === 'false' ? this.closeNav() : this.openNav();
-  }
+    toggleNav() {
+        const isHidden = this.navigation.getAttribute(attrHidden);
+        isHidden === 'false' ? this.closeNav() : this.openNav();
+    }
 
-  openNav() {
-    const input = [...this.navigation.getElementsByTagName('INPUT')][0];
+    openNav() {
+        const input = [...this.navigation.getElementsByTagName('INPUT')][0];
 
-    this.toggle.setAttribute(attrExpanded, 'true');
-    this.toggle.classList.add('active');
-    this.navigation.setAttribute(attrHidden, 'false');
-    this.navigation.classList.remove(this.hideClass);
+        this.toggle.setAttribute(attrExpanded, 'true');
+        this.toggle.classList.add('active');
+        this.navigation.setAttribute(attrHidden, 'false');
+        this.navigation.classList.remove(this.hideClass);
 
-    if (input) {
-      input.focus();
+        if (input) {
+            input.focus();
+        }
     }
-  }
 
-  closeNav() {
-    this.toggle.setAttribute(attrExpanded, 'false');
-    this.toggle.classList.remove('active');
-    this.navigation.setAttribute(attrHidden, 'true');
-    this.navigation.classList.add(this.hideClass);
-  }
+    closeNav() {
+        this.toggle.setAttribute(attrExpanded, 'false');
+        this.toggle.classList.remove('active');
+        this.navigation.setAttribute(attrHidden, 'true');
+        this.navigation.classList.add(this.hideClass);
+    }
 
-  isHidden(el) {
-    return el.offsetParent === null;
-  }
+    isHidden(el) {
+        return el.offsetParent === null;
+    }
 
-  setAria() {
-    const isToggleHidden = this.isHidden(this.toggle);
-    const hasAria = this.navigation.hasAttribute(attrHidden);
+    setAria() {
+        const isToggleHidden = this.isHidden(this.toggle);
+        const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (!isToggleHidden) {
-      if (!hasAria) {
-        this.closeNav();
-      }
-    } else if (hasAria) {
-      this.toggle.removeAttribute(attrExpanded);
-      this.navigation.removeAttribute(attrHidden);
-      if (this.hideClass !== 'ons-u-d-no') {
-        this.navigation.classList.remove(this.hideClass);
-      } else {
-        this.closeNav();
-      }
+        if (!isToggleHidden) {
+            if (!hasAria) {
+                this.closeNav();
+            }
+        } else if (hasAria) {
+            this.toggle.removeAttribute(attrExpanded);
+            this.navigation.removeAttribute(attrHidden);
+            if (this.hideClass !== 'ons-u-d-no') {
+                this.navigation.classList.remove(this.hideClass);
+            } else {
+                this.closeNav();
+            }
+        }
     }
-  }
 }