mirror of
https://github.com/status-im/consul.git
synced 2025-01-09 21:35:52 +00:00
5ab7e48862
This commit/PR beings to move away from using CSS preprocessing for our icons and towards using native CSS via native CSS property composition
111 lines
2.8 KiB
SCSS
111 lines
2.8 KiB
SCSS
#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: rgb(var(--tone-gray-700));
|
|
overflow: hidden;
|
|
background-color: rgb(var(--tone-gray-000));
|
|
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: rgb(var(--tone-gray-200));
|
|
p {
|
|
padding: 12px 12px 0 12px;
|
|
font-size: var(--typo-size-500);
|
|
font-weight: var(--typo-weight-semibold);
|
|
margin-bottom: 0 !important;
|
|
}
|
|
p.empty {
|
|
padding: 12px !important;
|
|
}
|
|
div {
|
|
dl {
|
|
display: inline-flex;
|
|
margin-right: 8px;
|
|
}
|
|
dd {
|
|
color: rgb(var(--tone-gray-700));
|
|
}
|
|
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: rgb(var(--tone-gray-500));
|
|
}
|
|
.passing::before {
|
|
@extend %with-check-circle-fill-mask, %as-pseudo;
|
|
--icon-color: rgb(var(--tone-green-500));
|
|
}
|
|
.warning::before {
|
|
@extend %with-alert-triangle-mask, %as-pseudo;
|
|
--icon-color: rgb(var(--tone-orange-500));
|
|
}
|
|
.critical::before {
|
|
@extend %with-cancel-square-fill-mask, %as-pseudo;
|
|
--icon-color: rgb(var(--tone-red-500));
|
|
}
|
|
.empty::before {
|
|
@extend %with-minus-square-fill-mask, %as-pseudo;
|
|
--icon-color: rgb(var(--tone-gray-500));
|
|
}
|
|
}
|
|
.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: rgb(var(--tone-gray-500));
|
|
}
|
|
dl:first-child {
|
|
grid-area: partition;
|
|
padding-bottom: 6px;
|
|
}
|
|
dl:nth-child(2) {
|
|
grid-area: namespace;
|
|
}
|
|
}
|
|
}
|
|
}
|