mirror of
https://github.com/hashicorp/vault.git
synced 2025-09-03 13:01:12 +02:00
17552aab7d
* refactor usage stats to use Hds::Card * use usage stats in other tabs * use flex row and remove verbose grid css classes * cleanup selectors, add arg to usage stat selector * update usage stat test * update token tab usage stat title * add test coverage for description and title
195 lines
2.6 KiB
SCSS
195 lines
2.6 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
/* Helpers that define anything with the CSS flexbox or CSS grid. */
|
|
|
|
/* Flexbox helpers */
|
|
|
|
// FLEX CONTAINER (child helpers at end of file)
|
|
// new flex classes, these do not use !important
|
|
.flex {
|
|
display: flex;
|
|
|
|
// direction
|
|
&.row-wrap {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
// alignment
|
|
&.space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&.row-gap-8 {
|
|
row-gap: $spacing-8;
|
|
}
|
|
|
|
&.column-gap-16 {
|
|
column-gap: $spacing-16;
|
|
}
|
|
}
|
|
|
|
// avoid !important flex classes below
|
|
.is-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.is-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.is-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.gap-16 {
|
|
gap: $spacing-16;
|
|
}
|
|
|
|
.gap-24 {
|
|
gap: $spacing-24;
|
|
}
|
|
|
|
.gap-36 {
|
|
gap: $spacing-36;
|
|
}
|
|
|
|
// Alignment of the items
|
|
.is-flex-v-centered {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.is-flex-align-start {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.is-flex-align-baseline {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
// Justify-content
|
|
.is-centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-flex-end {
|
|
display: flex !important;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.is-flex-start {
|
|
display: flex !important;
|
|
justify-content: flex-start;
|
|
|
|
&.has-gap {
|
|
gap: $spacing-16;
|
|
}
|
|
}
|
|
|
|
.is-flex-between,
|
|
.is-grouped-split {
|
|
display: flex;
|
|
justify-content: space-between !important;
|
|
}
|
|
|
|
// Flex basis, grow, stretch and flow
|
|
.is-flex-full {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.is-flex-grow-1 {
|
|
flex-grow: 1;
|
|
&.basis-0 {
|
|
flex-basis: 0;
|
|
}
|
|
}
|
|
|
|
.is-flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.is-no-flex-grow {
|
|
flex-grow: 0 !important;
|
|
}
|
|
|
|
.is-flex-wrap {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.is-flex-half {
|
|
flex: 50%;
|
|
}
|
|
|
|
/* Flex Responsive */
|
|
@media screen and (min-width: 769px), print {
|
|
.is-flex-v-centered-tablet {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@include until($mobile) {
|
|
.is-flex-row {
|
|
flex-flow: column wrap;
|
|
}
|
|
}
|
|
|
|
/* CSS GRID */
|
|
.is-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.grid-2-columns {
|
|
grid-template-columns: 2fr 2fr;
|
|
|
|
@include until($mobile) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.grid-gap-2 {
|
|
grid-gap: 2rem;
|
|
}
|
|
|
|
.is-grid-3-columns {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.is-medium-height {
|
|
height: 125px;
|
|
}
|
|
|
|
.is-grid-column-span-3 {
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
.grid-align-items-start {
|
|
align-items: start;
|
|
}
|
|
|
|
// CHILD ELEMENT HELPERS
|
|
|
|
.align-self-center {
|
|
align-self: center;
|
|
}
|
|
|
|
.align-self-end {
|
|
align-self: end;
|
|
}
|