update style of toggle tab header button (#9827)

This commit is contained in:
Alan Ren
2020-04-02 10:30:08 -07:00
committed by GitHub
parent 223aa3fe0e
commit fae73fe6ff
2 changed files with 7 additions and 4 deletions

View File

@@ -144,9 +144,11 @@ panel {
border-color: rgb(214, 214, 214);
}
.tabbedPanel .action-container {
.tabbedPanel .vertical-tab-action-container {
display: flex;
flex-flow: row-reverse;
height: 35px;
padding: 0px 5px;
}
.tabbedPanel .tab-action {
@@ -155,9 +157,10 @@ panel {
padding: 0px;
border: 0px;
background-color: transparent;
background-position: 2px center;
background-position: center;
background-repeat: no-repeat;
background-size: 11px 11px;
background-size: 9px 9px;
align-self: center;
}
.vs .tabbedPanel .tab-action.collapse {

View File

@@ -52,7 +52,7 @@ let idPool = 0;
<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
<div class="tabContainer">
<div *ngIf="options.layout === NavigationBarLayout.vertical" class="action-container">
<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
<button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button>
</div>
<div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" scrollable [horizontalScroll]="AutoScrollbarVisibility" [verticalScroll]="HiddenScrollbarVisibility" [scrollYToX]="true" (keydown)="onKey($event)">