vault/ui/app/styles/components/stat-text.scss
claire bontempo 9507c22c45
UI: Builds template and basic page component for new client-list route (#31414)
* resolve todos

* rename chart container component

* template the client-list route

* update tests

* only render colon if items is selected

* stub clients endpoint so activity is consistent
2025-08-05 10:26:27 -07:00

114 lines
3.0 KiB
SCSS

@use '../utils/font_variables';
@use '../utils/size_variables';
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.stat-text-container {
line-height: normal;
max-height: 100%;
display: flex;
flex-direction: column;
&.l,
&.m {
.stat-label {
font-size: size_variables.$size-6;
font-weight: font_variables.$font-weight-semibold;
margin-bottom: size_variables.$spacing-4;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-12;
}
}
&.s {
.stat-label {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-semibold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-12;
}
}
&.l-no-subText {
.stat-label {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-semibold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-3;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-4;
}
}
&.m-no-subText {
.stat-label {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-bold;
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-5;
font-weight: font_variables.$font-weight-normal;
margin-top: size_variables.$spacing-4;
}
}
&.s-no-subText {
.stat-label {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-400);
line-height: inherit;
}
.stat-text {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-500);
line-height: inherit;
}
.stat-value {
font-size: size_variables.$size-8;
font-weight: font_variables.$font-weight-normal;
color: var(--token-color-palette-neutral-600);
line-height: inherit;
}
}
}