Changeset View
Changeset View
Standalone View
Standalone View
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 { | ||||
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); | transition: color 100ms; | ||||
} | |||||
.backgroundTabHeader:not(:hover) { | |||||
transition: color 100ms; | |||||
} | } |