77 lines
1.6 KiB
SCSS
77 lines
1.6 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: rgb(var(--tone-gray-800));
|
||
|
|
}
|
||
|
|
%pill-pending {
|
||
|
|
background-color: rgb(var(--tone-strawberry-050));
|
||
|
|
color: rgb(var(--tone-strawberry-500));
|
||
|
|
}
|
||
|
|
|
||
|
|
%pill-establishing::before {
|
||
|
|
--icon-name: icon-running;
|
||
|
|
--icon-color: rgb(var(--tone-gray-800));
|
||
|
|
}
|
||
|
|
%pill-establishing {
|
||
|
|
background-color: rgb(var(--tone-blue-050));
|
||
|
|
color: rgb(var(--tone-blue-500));
|
||
|
|
}
|
||
|
|
|
||
|
|
%pill-active::before {
|
||
|
|
--icon-name: icon-check;
|
||
|
|
--icon-color: rgb(var(--tone-green-800));
|
||
|
|
}
|
||
|
|
%pill-active {
|
||
|
|
background-color: rgb(var(--tone-green-050));
|
||
|
|
color: rgb(var(--tone-green-600));
|
||
|
|
}
|
||
|
|
|
||
|
|
%pill-failing::before {
|
||
|
|
--icon-name: icon-x;
|
||
|
|
--icon-color: rgb(var(--tone-red-500));
|
||
|
|
}
|
||
|
|
%pill-failing {
|
||
|
|
background-color: rgb(var(--tone-red-050));
|
||
|
|
color: rgb(var(--tone-red-500));
|
||
|
|
}
|
||
|
|
|
||
|
|
%pill-terminated::before {
|
||
|
|
--icon-name: icon-x-square;
|
||
|
|
--icon-color: rgb(var(--tone-gray-800));
|
||
|
|
}
|
||
|
|
%pill-terminated {
|
||
|
|
background-color: rgb(var(--tone-gray-150));
|
||
|
|
color: rgb(var(--tone-gray-800));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
%pill-deleting::before {
|
||
|
|
--icon-name: icon-loading;
|
||
|
|
--icon-color: rgb(var(--tone-green-800));
|
||
|
|
}
|
||
|
|
%pill-deleting {
|
||
|
|
background-color: rgb(var(--tone-yellow-050));
|
||
|
|
color: rgb(var(--tone-yellow-800));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|