mirror of
https://github.com/hashicorp/vault.git
synced 2025-11-11 22:01:23 +01:00
7f03393630
* 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
181 lines
2.4 KiB
SCSS
181 lines
2.4 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 */
|
|
.is-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.is-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.is-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.has-gap-m {
|
|
gap: $spacing-16;
|
|
}
|
|
|
|
.has-gap-l {
|
|
gap: $spacing-24;
|
|
}
|
|
|
|
// 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%;
|
|
}
|
|
|
|
// moving away from !important, fresh flex styles below
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.align-self-center {
|
|
align-self: center;
|
|
}
|
|
|
|
.is-medium-height {
|
|
height: 125px;
|
|
}
|
|
|
|
.is-grid-column-span-3 {
|
|
grid-column-end: span 3;
|
|
}
|
|
|
|
.grid-align-items-start {
|
|
align-items: start;
|
|
}
|