mirror of
https://github.com/hashicorp/vault.git
synced 2025-09-12 17:31:10 +02:00
98 lines
2.2 KiB
SCSS
98 lines
2.2 KiB
SCSS
@use '../utils/color_variables';
|
|
@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 color_variables.$grey-light;
|
|
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: color_variables.$blue;
|
|
color: color_variables.$blue;
|
|
}
|
|
}
|
|
li {
|
|
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
|
|
&.is-active {
|
|
border-bottom: 2px solid color_variables.$blue;
|
|
color: color_variables.$blue;
|
|
}
|
|
// solves for tabs on auth mounts & secrets engines
|
|
> a {
|
|
&.active {
|
|
color: color_variables.$blue;
|
|
background-color: transparent;
|
|
border-bottom: 2px solid color_variables.$blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
&.active a,
|
|
&.is-active a {
|
|
border-color: color_variables.$blue;
|
|
color: color_variables.$blue;
|
|
}
|
|
}
|
|
// 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: color_variables.$grey;
|
|
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: color_variables.$grey-light;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: color_variables.$ui-gray-050;
|
|
color: color_variables.$grey-darkest;
|
|
}
|
|
}
|
|
|
|
.ember-basic-dropdown-trigger {
|
|
outline: none;
|
|
}
|
|
}
|