Fixing tabbing logic for tab headers (#19770)

* Fixing tabbing logic for tab headers

* Renaming stuff
Making null checks concise
Adding comments

* Renaming css class and interfaces from active to selected

* Renaming styling classes and objects

* Changing tabbing logic to match w3 behavior

* Fixing focus logic in tab

* Adding helper comment

* Code cleanup
This commit is contained in:
Aasim Khan
2022-06-21 13:13:10 -07:00
committed by GitHub
parent f2c4e23f99
commit 15a611d4a4
9 changed files with 120 additions and 83 deletions

View File

@@ -70,15 +70,15 @@ panel {
font-weight: 600;
}
.tabbedPanel .tabList .tab-header:hover:not(.active) {
.tabbedPanel .tabList .tab-header:hover:not(.selected) {
background-color: #dcdcdc;
outline: none;
}
.vs-dark .tabbedPanel .tabList .tab-header:hover:not(.active) {
.vs-dark .tabbedPanel .tabList .tab-header:hover:not(.selected) {
background-color: #2a2d2e;
outline: none;
}
.hc-black .tabbedPanel .tabList .tab-header:hover:not(.active) {
.hc-black .tabbedPanel .tabList .tab-header:hover:not(.selected) {
background-color: initial;
outline: 1px dashed #f38518;
outline-offset: -3px;
@@ -135,7 +135,7 @@ panel {
flex: 0 0 auto;
}
.tab > .tabLabel.active {
.tab > .tabLabel.selected {
border-bottom: 1px solid;
}

View File

@@ -13,7 +13,7 @@ tab-header .action-item {
line-height: 1.4em;
}
tab-header .tab-header.active .action-label, /* always show it for active tab */
tab-header .tab-header.selected .action-label, /* always show it for selected tab */
tab-header .tab-header:hover .action-label, /* always show it on hover */
tab-header .tab-header:focus .action-label { /* always show it on focus */
opacity: 1;