open-consul/ui/packages/consul-ui/app/components/consul/server/card/skin.scss

38 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: var(--token-color-hashicorp-brand);
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: var(--token-color-surface-strong);
color: var(--token-color-foreground-faint);
}
%consul-server-card:not(.voting-status-non-voter) .health-status.healthy + dd {
background-color: var(--token-color-surface-success);
color: var(--token-color-palette-green-400);
}
%consul-server-card:not(.voting-status-non-voter) .health-status:not(.healthy) + dd {
background-color: var(--token-color-surface-critical);
color: var(--token-color-foreground-critical);
}
%consul-server-card .health-status + dd::before {
--icon-size: icon-000;
content: '';
}
%consul-server-card .health-status.healthy + dd::before {
--icon-name: icon-check;
}
%consul-server-card .health-status:not(.healthy) + dd::before {
--icon-name: icon-x;
}