78 lines
1.8 KiB
SCSS
78 lines
1.8 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
%pill-pending::before,
|
|
%pill-establishing::before,
|
|
%pill-active::before,
|
|
%pill-failing::before,
|
|
%pill-terminated::before,
|
|
%pill-deleting::before {
|
|
--icon-size: icon-000;
|
|
content: "";
|
|
}
|
|
%pill-pending,
|
|
%pill-establishing,
|
|
%pill-active,
|
|
%pill-failing,
|
|
%pill-terminated,
|
|
%pill-deleting {
|
|
@extend .hds-font-weight-medium;
|
|
font-size: var(--token-typography-body-200-font-size);
|
|
}
|
|
|
|
%pill-pending::before {
|
|
--icon-name: icon-running;
|
|
--icon-color: var(--token-color-palette-neutral-600);
|
|
}
|
|
%pill-pending {
|
|
background-color: var(--token-color-consul-surface);
|
|
color: var(--token-color-consul-foreground);
|
|
}
|
|
|
|
%pill-establishing::before {
|
|
--icon-name: icon-running;
|
|
--icon-color: var(--token-color-palette-neutral-600);
|
|
}
|
|
%pill-establishing {
|
|
background-color: var(--token-color-palette-blue-50);
|
|
color: var(--token-color-palette-blue-200);
|
|
}
|
|
|
|
%pill-active::before {
|
|
--icon-name: icon-check;
|
|
--icon-color: var(--token-color-palette-green-400);
|
|
}
|
|
%pill-active {
|
|
background-color: var(--token-color-palette-green-50);
|
|
color: var(--token-color-palette-green-200);
|
|
}
|
|
|
|
%pill-failing::before {
|
|
--icon-name: icon-x;
|
|
--icon-color: var(--token-color-palette-red-200);
|
|
}
|
|
%pill-failing {
|
|
background-color: var(--token-color-palette-red-50);
|
|
color: var(--token-color-palette-red-200);
|
|
}
|
|
|
|
%pill-terminated::before {
|
|
--icon-name: icon-x-square;
|
|
--icon-color: var(--token-color-palette-neutral-600);
|
|
}
|
|
%pill-terminated {
|
|
background-color: var(--token-color-palette-neutral-200);
|
|
color: var(--token-color-palette-neutral-600);
|
|
}
|
|
|
|
%pill-deleting::before {
|
|
--icon-name: icon-loading;
|
|
--icon-color: var(--token-color-foreground-warning-on-surface);
|
|
}
|
|
%pill-deleting {
|
|
background-color: var(--token-color-surface-warning);
|
|
color: var(--token-color-foreground-warning-on-surface);
|
|
}
|