mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-06 22:57:02 +02:00
f18a0643d3
* update greys to use hds tokens * update blue vars * remove unused color vars * replace remaining colors, add hex codes in commnets * update kv rgp color * remove color_variables file and use hds tokens directly
97 lines
2.3 KiB
SCSS
97 lines
2.3 KiB
SCSS
@use '../utils/font_variables';
|
|
@use '../utils/size_variables';
|
|
|
|
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* 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-palette-blue-200);
|
|
}
|
|
}
|
|
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-palette-blue-200);
|
|
}
|
|
// solves for tabs on auth mounts & secrets engines
|
|
> a {
|
|
&.active {
|
|
color: var(--token-color-palette-blue-200);
|
|
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-palette-blue-200);
|
|
}
|
|
}
|
|
// 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-400);
|
|
font-weight: font_variables.$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-palette-neutral-50);
|
|
color: var(--token-color-palette-neutral-600);
|
|
}
|
|
}
|
|
|
|
.ember-basic-dropdown-trigger {
|
|
outline: none;
|
|
}
|
|
}
|