111 lines
3.0 KiB
SCSS
111 lines
3.0 KiB
SCSS
%composite-row {
|
|
list-style-type: none;
|
|
border: 1px solid;
|
|
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-header * {
|
|
color: inherit;
|
|
}
|
|
%composite-row-detail {
|
|
color: $gray-500;
|
|
}
|
|
|
|
%composite-row-detail .policy::before {
|
|
@extend %with-file-fill-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
margin-right: 3px;
|
|
}
|
|
%composite-row-detail .role::before {
|
|
@extend %with-user-plain-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
margin-right: 3px;
|
|
}
|
|
%composite-row-detail .policy-management::before {
|
|
@extend %with-star-fill-mask, %as-pseudo;
|
|
background-color: var(--brand-600);
|
|
margin-right: 3px;
|
|
}
|
|
// Health Checks
|
|
%composite-row-detail li.passing::before,
|
|
%composite-row-header .passing dd::before {
|
|
@extend %with-check-circle-fill-color-mask, %as-pseudo;
|
|
background-color: $green-500;
|
|
}
|
|
%composite-row-detail li.warning::before,
|
|
%composite-row-header .warning dd::before {
|
|
@extend %with-alert-triangle-color-mask, %as-pseudo;
|
|
background-color: $orange-500;
|
|
}
|
|
%composite-row-detail li.critical::before,
|
|
%composite-row-header .critical dd::before {
|
|
@extend %with-cancel-square-fill-color-mask, %as-pseudo;
|
|
background-color: $red-500;
|
|
}
|
|
%composite-row-detail li.empty::before,
|
|
%composite-row-header .empty dd::before {
|
|
@extend %with-minus-square-fill-color-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
}
|
|
|
|
%composite-row-header [rel='me'] dd::before {
|
|
@extend %with-check-circle-fill-mask, %as-pseudo;
|
|
background-color: $blue-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-detail dl.nspace dt::before {
|
|
@extend %with-folder-outline-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
}
|
|
%composite-row-detail dl.datacenter dt::before {
|
|
@extend %with-user-organization-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
}
|
|
%composite-row-detail dl.path dt::before {
|
|
@extend %with-path-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
}
|
|
%composite-row-detail dl.port dt::before {
|
|
@extend %with-port-mask, %as-pseudo;
|
|
background-color: $gray-500;
|
|
}
|
|
%composite-row-detail dl.protocol dt::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;
|
|
}
|