Kenia 0d88c4ef67
ui: Add health check icon to Ingress Upstreams and add Tooltips in additional areas (#8091)
* Add Health Checks and update Tooltips in Ingress Upstreams

* Update Tooltip in Proxy Info tab Upstreams

* Add Tooltips to Proxy Info tab Exposed Paths

* Add Health Checks with Tooltips to Service List page
2020-06-12 09:35:52 -04:00

84 lines
2.3 KiB
SCSS

%composite-row {
list-style-type: none;
border-top-color: $transparent;
border-bottom-color: $gray-200;
border-right-color: $transparent;
border-left-color: $transparent;
}
%composite-row-intent {
border-color: $gray-200;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-top-color: $transparent;
cursor: pointer;
}
%composite-row-header {
color: $black;
}
%composite-row-detail {
color: $gray-500;
}
// Health Checks
%composite-row .passing::before {
@extend %with-check-circle-fill-color-mask, %as-pseudo;
background-color: $green-500;
}
%composite-row .warning::before {
@extend %with-alert-triangle-color-mask, %as-pseudo;
background-color: $orange-500;
}
%composite-row .critical::before {
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
background-color: $red-500;
}
%composite-row .empty::before {
@extend %with-minus-square-fill-color-mask, %as-pseudo;
background-color: $gray-500;
}
// Metadata
%composite-row .node a {
color: $gray-500;
}
%composite-row .node a:hover {
color: $color-action;
text-decoration: underline;
}
%composite-row .node::before {
@extend %with-git-commit-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row .address::before {
@extend %with-public-default-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row .proxy::before {
@extend %with-swap-horizontal-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row li.datacenter > span:first-child::before {
@extend %with-user-organization-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.nspace > span:first-child::before {
@extend %with-folder-outline-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.path > span:first-child::before {
@extend %with-path-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.port > span:first-child::before {
@extend %with-port-mask, %as-pseudo;
background-color: $gray-500;
}
%composite-row-detail li.protocol > span:first-child::before {
@extend %with-protocol-mask, %as-pseudo;
background-color: $gray-500;
}
// In this case we do not need a background on the icon
%composite-row .combined-address .copy-button button:hover,
%composite-row-detail .port .copy-button button:hover {
background-color: transparent !important;
}