41 lines
1.2 KiB
SCSS
41 lines
1.2 KiB
SCSS
|
%consul-server-card dt:not(.name) {
|
||
|
@extend %visually-hidden;
|
||
|
}
|
||
|
%consul-server-card.voting-status-leader .name {
|
||
|
@extend %with-leader-tile;
|
||
|
}
|
||
|
%consul-server-card .name + dd {
|
||
|
@extend %h300;
|
||
|
color: rgb(var(--tone-gray-999));
|
||
|
animation-name: typo-truncate;
|
||
|
}
|
||
|
%consul-server-card .health-status + dd {
|
||
|
@extend %pill-200;
|
||
|
font-size: var(--typo-size-700);
|
||
|
}
|
||
|
%consul-server-card.voting-status-non-voter .health-status + dd {
|
||
|
background-color: rgb(var(--tone-gray-100));
|
||
|
color: rgb(var(--tone-gray-600));
|
||
|
}
|
||
|
%consul-server-card:not(.voting-status-non-voter) .health-status.healthy + dd {
|
||
|
background-color: rgb(var(--tone-green-050));
|
||
|
color: rgb(var(--tone-green-800));
|
||
|
}
|
||
|
%consul-server-card:not(.voting-status-non-voter) .health-status:not(.healthy) + dd {
|
||
|
background-color: rgb(var(--tone-red-050));
|
||
|
color: rgb(var(--tone-red-500));
|
||
|
}
|
||
|
%consul-server-card .health-status + dd::before {
|
||
|
--icon-size: icon-000;
|
||
|
content: '';
|
||
|
}
|
||
|
%consul-server-card .health-status.healthy + dd::before {
|
||
|
--icon-name: icon-check;
|
||
|
--icon-color: rgb(var(--tone-green-800));
|
||
|
}
|
||
|
%consul-server-card .health-status:not(.healthy) + dd::before {
|
||
|
--icon-name: icon-x;
|
||
|
--icon-color: rgb(var(--tone-red-500));
|
||
|
}
|
||
|
|