vault/ui/app/styles/components/empty-state-component.scss
claire bontempo f18a0643d3
UI: Cleanup scss color variables (#31386)
* update greys to use hds tokens

* update blue vars

* remove unused color vars

* replace remaining colors, add hex codes in commnets

* update kv rgp color

* remove color_variables file and use hds tokens directly
2025-07-29 13:13:08 -07:00

67 lines
1.5 KiB
SCSS

@use '../utils/font_variables';
@use '../utils/size_variables';
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.empty-state {
align-items: center;
color: var(--token-color-foreground-faint);
background: var(--token-color-surface-faint);
display: flex;
justify-content: center;
padding: size_variables.$spacing-48 size_variables.$spacing-12;
box-shadow: 0 -2px 0 -1px var(--token-color-palette-neutral-300);
}
.empty-state-transparent {
align-items: center;
color: var(--token-color-foreground-faint);
background: transparent;
display: flex;
justify-content: center;
padding: size_variables.$spacing-48 0;
box-shadow: none;
}
.empty-state-content {
max-width: 320px;
}
.empty-state-title {
color: var(--token-color-palette-neutral-400);
font-size: size_variables.$size-4;
font-weight: font_variables.$font-weight-semibold;
line-height: 1.2;
margin-bottom: size_variables.$spacing-8;
}
.empty-state-subTitle {
font-size: size_variables.$size-7;
margin-top: -10px;
padding-bottom: size_variables.$spacing-12;
}
.empty-state-message.has-border-bottom-light {
padding-bottom: size_variables.$spacing-12;
}
.empty-state-actions {
margin-top: size_variables.$spacing-8;
display: flex;
justify-content: space-between;
> * + * {
margin-left: size_variables.$spacing-12;
margin-right: size_variables.$spacing-12;
}
}
.empty-state-icon > .hs-icon,
.empty-state-icon > .hds-icon {
float: left;
margin-right: size_variables.$spacing-8;
}