mirror of
https://github.com/hashicorp/vault.git
synced 2026-05-28 04:10:44 -04:00
3092a60978
* use SES.configure selector consistently * VAULT-40956 remove duplicate "Configure" toolbar actions for kubernetes * remaining selector cleanup and consolidation * update tests Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
95 lines
2.3 KiB
SCSS
95 lines
2.3 KiB
SCSS
@use '../utils/size_variables';
|
|
|
|
/**
|
|
* Copyright IBM Corp. 2016, 2025
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
// This file defines the style for .tabs-container, .tabs and .tab
|
|
|
|
.page-header + .tabs-container {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tabs {
|
|
align-items: stretch;
|
|
box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-300);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
|
|
ul {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
min-height: 3rem;
|
|
|
|
> a {
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
&.active {
|
|
border-color: var(--token-color-palette-blue-200);
|
|
color: var(--token-color-foreground-action);
|
|
}
|
|
}
|
|
li {
|
|
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
|
|
&.is-active {
|
|
border-bottom: 2px solid var(--token-color-palette-blue-200);
|
|
color: var(--token-color-foreground-action);
|
|
}
|
|
// solves for tabs on auth mounts & secrets engines
|
|
> a {
|
|
&.active {
|
|
color: var(--token-color-foreground-action);
|
|
background-color: transparent;
|
|
border-bottom: 2px solid var(--token-color-palette-blue-200);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
&.active a,
|
|
&.is-active a {
|
|
border-color: var(--token-color-palette-blue-200);
|
|
color: var(--token-color-foreground-action);
|
|
}
|
|
}
|
|
// important for auth tabs in active state, otherwise the border-bottom will not show.
|
|
a {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
vertical-align: top;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--token-color-palette-neutral-500);
|
|
font-weight: var(--token-typography-font-weight-semibold);
|
|
padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12;
|
|
text-decoration: none;
|
|
transition:
|
|
background-color size_variables.$speed,
|
|
border-color size_variables.$speed;
|
|
|
|
&:hover,
|
|
&:active {
|
|
border-color: var(--token-color-palette-neutral-300);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--token-color-surface-faint);
|
|
color: var(--token-color-foreground-primary);
|
|
}
|
|
}
|
|
|
|
.ember-basic-dropdown-trigger {
|
|
outline: none;
|
|
}
|
|
}
|