Page MenuHomePhabricator
Differential D6734 Diff 22597 web/components/tabs.css

Changeset View

Standalone View

View Options

web/components/tabs.css

div.tabsContainer { div.tabsContainer {
color: var(--fg); color: var(--fg);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
max-height: 100%; max-height: 100%;
flex: 1; flex: 1;
} }
div.tabsHeaderContainer { div.tabsHeaderContainer {
border-bottom: 1px solid var(--border);
height: 56px;
}
.tabsHeaderContainerPill {
display: flex; display: flex;
background-color: var(--menu-bg);
border-radius: 8px;
margin: 8px;
align-items: center;
} }
.tabHeader { .tabHeader {
kamilUnsubmitted
Not Done
Inline Actions

probably subtle transition of the background color will be great (suggested also by Atul)

kamil: probably subtle transition of the background color will be great (suggested also by Atul)
flex: 1; flex: 1;
padding: 16px; font-size: var(--s-font-14);
font-size: var(--m-font-16); font-weight: var(--semi-bold);
color: var(--tabs-header-active-color); color: var(--tabs-header-active-color);
border-bottom: 2px solid var(--tabs-header-active-border); height: 32px;
border-radius: 4px;
background-color: var(--tabs-header-active-background);
margin: 4px;
} }
.backgroundTabHeader { .backgroundTabHeader {
color: var(--tabs-header-background-color); color: var(--tabs-header-background-color);
border-bottom-color: var(--tabs-header-background-border); background-color: transparent;
} }
.backgroundTabHeader:hover { .backgroundTabHeader:hover {
color: var(--tabs-header-background-color-hover); color: var(--tabs-header-background-color-hover);
border-bottom-color: var(--tabs-header-background-border-hover);
} }