mirror of https://github.com/hashicorp/consul
115 lines
2.9 KiB
SCSS
115 lines
2.9 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
#upstream-container .topology-metrics-card:not(:last-child),
|
|
#downstream-container .topology-metrics-card:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
#upstream-container .topology-metrics-card,
|
|
#downstream-container .topology-metrics-card {
|
|
display: block;
|
|
color: var(--token-color-foreground-faint);
|
|
overflow: hidden;
|
|
background-color: var(--token-color-surface-primary);
|
|
border-radius: var(--decor-radius-100);
|
|
border: 1px solid;
|
|
/* TODO: If this color is combined with the above */
|
|
/* border property then the compressor removes the color */
|
|
border-color: var(--token-color-surface-interactive-active);
|
|
p {
|
|
@extend %display-300-semibold;
|
|
padding: 12px 12px 0 12px;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
p.empty {
|
|
padding: 12px !important;
|
|
}
|
|
div {
|
|
dl {
|
|
display: inline-flex;
|
|
margin-right: 8px;
|
|
}
|
|
dd {
|
|
color: var(--token-color-foreground-faint);
|
|
}
|
|
span {
|
|
margin-right: 8px;
|
|
}
|
|
span::before,
|
|
dt::before {
|
|
margin-right: 4px;
|
|
}
|
|
.nspace dt::before,
|
|
.health dt::before {
|
|
margin-top: 2px;
|
|
}
|
|
.partition dt::before {
|
|
@extend %with-user-team-mask, %as-pseudo;
|
|
}
|
|
.nspace dt::before {
|
|
@extend %with-folder-outline-mask, %as-pseudo;
|
|
}
|
|
.health dt::before {
|
|
@extend %with-help-circle-outline-mask, %as-pseudo;
|
|
}
|
|
.health dt::before {
|
|
@extend %with-help-circle-outline-mask, %as-pseudo;
|
|
}
|
|
.partition dt::before,
|
|
.nspace dt::before,
|
|
.health dt::before {
|
|
--icon-color: var(--token-color-foreground-faint);
|
|
}
|
|
.passing::before {
|
|
@extend %with-check-circle-fill-mask, %as-pseudo;
|
|
--icon-color: var(--token-color-foreground-success);
|
|
}
|
|
.warning::before {
|
|
@extend %with-alert-triangle-mask, %as-pseudo;
|
|
--icon-color: var(--token-color-foreground-warning);
|
|
}
|
|
.critical::before {
|
|
@extend %with-cancel-square-fill-mask, %as-pseudo;
|
|
--icon-color: var(--token-color-foreground-critical);
|
|
}
|
|
.empty::before {
|
|
@extend %with-minus-square-fill-mask, %as-pseudo;
|
|
--icon-color: var(--token-color-foreground-faint);
|
|
}
|
|
}
|
|
.details {
|
|
padding: 0 12px 12px 12px;
|
|
> *:not(:last-child) {
|
|
padding-bottom: 6px;
|
|
}
|
|
.group {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-template-areas:
|
|
'partition partition'
|
|
'union namespace';
|
|
span {
|
|
display: inline-block;
|
|
grid-area: union;
|
|
padding-left: 7px;
|
|
margin-right: 0px;
|
|
}
|
|
span::before {
|
|
margin-right: 0px;
|
|
@extend %with-union-mask, %as-pseudo;
|
|
--icon-color: var(--token-color-foreground-faint);
|
|
}
|
|
dl:first-child {
|
|
grid-area: partition;
|
|
padding-bottom: 6px;
|
|
}
|
|
dl:nth-child(2) {
|
|
grid-area: namespace;
|
|
}
|
|
}
|
|
}
|
|
}
|