open-consul/ui/packages/consul-peerings/app/components/consul/peer/components.scss

73 lines
1.8 KiB
SCSS

%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 {
font-weight: var(--typo-weight-medium);
font-size: var(--typo-size-700);
}
%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);
}