consul/ui-v2/app/styles/components/healthchecked-resource.scss

54 lines
1.3 KiB
SCSS

.healthchecked-resource > div {
@extend %stats-card;
}
%stats-card-icon {
@extend %tooltip-below;
}
%stats-card-icon:first-child::before {
@extend %tooltip-left;
}
%stats-card-icon:last-child::before {
@extend %tooltip-right;
}
%stats-card-icon:last-child {
/* TODO: In order to get rid of our colored star */
/* this needs to use a %mask, and we are already using */
/* our before/after psuedo elements for the tooltip */
/* so this will need reworking slighly before we can */
/* get rid of our hardcoded magenta star icon */
@extend %with-star-icon;
}
%stats-card header > .zero {
@extend %with-minus-square-fill-color-icon;
color: $gray-400;
}
%stats-card header > .non-zero {
@extend %with-check-circle-fill-color-icon;
color: $green-500;
}
%stats-card li a > :first-child {
font-size: 0;
height: 16px;
min-width: 16px;
}
[data-tooltip] {
@extend %with-pseudo-tooltip;
}
%stats-card li a > :last-child {
margin-left: 10px;
}
%stats-card a > :first-child::before {
left: -10px;
}
%stats-card a.passing > :first-child {
@extend %with-check-circle-fill-color-icon;
}
%stats-card a.warning > :first-child {
@extend %with-alert-triangle-color-icon;
}
%stats-card a.critical > :first-child {
@extend %with-cancel-square-fill-color-icon;
}