vault/ui/app/styles/components/tabs-component.scss
claire bontempo 7f03393630
UI: Increase base font size (#23994)
* fix button padding

* rename spacing variables using numerical values

* fix toggle aligment

* remove unused toggle classes

* replace margin and padding with spacing vars

* increase base font size

* remove switch css, use toggle consistently

* remaining margin/padding size vars to spacing pixels

* add deprecated note, rever changes to size vars

* decrease console size

* remove function

* adjust card size for small selectable cards

* fix select to fit to content width

* fix toolbar-scroller height

* add changelog;

* fix checkbox styling
2023-11-13 21:29:39 +00:00

92 lines
1.8 KiB
SCSS

/**
* 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 $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: $blue;
color: $blue;
}
}
li {
// solves for tools -> sub-tabs like "Unwrap data" -> "Data"
&.is-active {
border-bottom: 2px solid $blue;
color: $blue;
}
// solves for tabs on auth mounts & secrets engines
> a {
&.active {
color: $blue;
background-color: transparent;
border-bottom: 2px solid $blue;
}
}
}
}
li {
&:focus {
box-shadow: none;
}
&.active a,
&.is-active a {
border-color: $blue;
color: $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: $grey;
font-weight: $font-weight-semibold;
padding: $spacing-14 $spacing-12 $spacing-12;
text-decoration: none;
transition: background-color $speed, border-color $speed;
&:hover,
&:active {
border-color: $grey-light;
}
&:hover {
background-color: $ui-gray-050;
color: $grey-darkest;
}
}
.ember-basic-dropdown-trigger {
outline: none;
}
}