StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-23 16:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: rename Tabber classes to be more semantic

Browse source
This commit is contained in:
alistair3149 2021-06-21 19:46:17 -04:00
parent c8aa336530
commit 2580c82d06
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
modules/ext.tabberNeue.js
View file

@ -25,7 +25,7 @@ function initTabber( tabber ) {
tabPanel.setAttribute( 'aria-hidden', true );
tab.innerText = tabPanel.title;
tab.classList.add( 'tabber__item' );
tab.classList.add( 'tabber__tab' );
tab.setAttribute( 'title', tabPanel.title );
tab.setAttribute( 'role', 'tab' );
tab.setAttribute( 'href', '#' + hash );
@ -39,7 +39,7 @@ function initTabber( tabber ) {
tabList.append( fragment );
container.classList.add( 'tabber__header' );
tabList.classList.add( 'tabber__nav' );
tabList.classList.add( 'tabber__tabs' );
tabList.setAttribute( 'role', 'tablist' );
prevButton.classList.add( 'tabber__header__prev' );
nextButton.classList.add( 'tabber__header__next' );
@ -113,7 +113,7 @@ function initTabber( tabber ) {
* @param {string} targetHash
*/
function showPanel( targetHash ) {
const ACTIVETABCLASS = 'tabber__item--active',
const ACTIVETABCLASS = 'tabber__tab--active',
ACTIVEPANELCLASS = 'tabber__panel--active',
targetPanel = document.getElementById( targetHash ),
targetTab = document.getElementById( 'tab-' + targetHash ),
@ -137,7 +137,7 @@ function initTabber( tabber ) {
section.style.height = targetPanel.offsetHeight + 'px';
}
// Add active class to the tab item
// Add active class to the tab
targetTab.classList.add( ACTIVETABCLASS );
targetTab.setAttribute( 'aria-selected', true );
targetPanel.classList.add( ACTIVEPANELCLASS );

14
modules/ext.tabberNeue.less
View file

@ -6,7 +6,7 @@
overflow: hidden;
flex-direction: column;
&__nav {
&__tabs {
display: flex;
overflow: auto hidden;
box-shadow: inset 0 -1px 0 0 #a2a9b1;
@ -64,17 +64,17 @@
}
}
&--prev-visible .tabber__nav {
&--prev-visible .tabber__tabs {
-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20% );
mask-image: linear-gradient( 90deg, transparent, #000 20% );
}
&--next-visible .tabber__nav {
&--next-visible .tabber__tabs {
-webkit-mask-image: linear-gradient( 90deg, #000 80%, transparent );
mask-image: linear-gradient( 90deg, #000 80%, transparent );
}
&--prev-visible.tabber__header--next-visible .tabber__nav {
&--prev-visible.tabber__header--next-visible .tabber__tabs {
-webkit-mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
mask-image: linear-gradient( 90deg, transparent, #000 20%, #000 80%, transparent );
}
@ -99,7 +99,7 @@
}
}
&__item {
&__tab {
display: inline-flex;
align-items: center;
padding: 5px 12px;
@ -140,7 +140,7 @@
@media ( hover: hover ) {
.tabber {
&__item {
&__tab {
&:hover {
box-shadow: inset 0 -2px 0 0 #447ff5;
color: #447ff5;
@ -160,7 +160,7 @@
.tabber {
&__header,
&__section,
&__nav {
&__tabs {
scroll-behavior: smooth;
}
}