diff --git a/modules/ext.tabberNeue.js b/modules/ext.tabberNeue.js index edf4ca0..8eb56f1 100644 --- a/modules/ext.tabberNeue.js +++ b/modules/ext.tabberNeue.js @@ -128,13 +128,17 @@ function initTabber( tabber, count ) { // Just to add the right classes updateButtons(); - prevButton.addEventListener( 'click', function() { - scrollTabs( -scrollOffset ); - }, false ); - nextButton.addEventListener( 'click', function() { - scrollTabs( scrollOffset ); - }, false ); + // Button only shows on pointer devices + if ( matchMedia( '(hover: hover)' ).matches ) { + prevButton.addEventListener( 'click', function() { + scrollTabs( -scrollOffset ); + }, false ); + + nextButton.addEventListener( 'click', function() { + scrollTabs( scrollOffset ); + }, false ); + } } else { container.classList.remove( NEXTCLASS ); container.classList.remove( PREVCLASS ); @@ -328,10 +332,7 @@ function initTabber( tabber, count ) { switchTab(); - // Only run if client is not a touch device - if ( matchMedia( '(hover: hover)' ).matches ) { - initButtons(); - } + initButtons(); // window.addEventListener( 'hashchange', switchTab, false ); diff --git a/modules/ext.tabberNeue.less b/modules/ext.tabberNeue.less index b925e58..ee14c1f 100644 --- a/modules/ext.tabberNeue.less +++ b/modules/ext.tabberNeue.less @@ -196,6 +196,22 @@ } } +@media ( hover: none ) { + // Need extra specificity to override + .tabber { + .tabber__header { + &__prev, + &__next { + pointer-events: none; // Disable arrow button + + &:after { + background-image: none; // Remove arrow icon + } + } + } + } +} + @media ( hover: hover ) { .tabber { &__tab {