/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ @import './layout'; %composite-row { @extend %list-row; } %composite-row > .header { @extend %composite-row-header, %list-row-header; } %composite-row > .detail { @extend %composite-row-detail, %list-row-detail; } %composite-row > .actions { @extend %composite-row-actions; } %with-composite-row-intent:hover, %with-composite-row-intent:focus, %with-composite-row-intent:active { @extend %list-row-intent; } /* project level */ .list-collection > ul > li:not(:first-child) { @extend %composite-row; } /* hoverable rows */ %composite-row.linkable, .consul-service-instance-list > ul > li:not(:first-child), .consul-node-list > ul > li:not(:first-child), .consul-token-list > ul > li:not(:first-child), .consul-policy-list > ul > li:not(:first-child), .consul-role-list > ul > li:not(:first-child), .consul-auth-method-list > ul > li:not(:first-child) { @extend %with-composite-row-intent; } // TODO: This hides the iconless dt's in the below lists as they don't have // tooltips the todo would be to wrap these texts in spans .consul-nspace-list > ul > li:not(:first-child) dt, .consul-token-list > ul > li:not(:first-child) dt, .consul-policy-list > ul li:not(:first-child) dl:not(.datacenter) dt, .consul-role-list > ul > li:not(:first-child) dt { @extend %iconless-dt; } %iconless-dt { display: none; } %iconless-dt + dd { margin-left: 0 !important; } /* TODO: the service list has a 1px offset */ .consul-policy-list dl.datacenter dt, .consul-service-list li > div:first-child > dl:first-child dd { margin-top: 1px; } .consul-service-list .detail, .consul-service-instance-list .detail { overflow-x: visible !important; } .consul-intention-permission-list > ul { border-top: 1px solid var(--token-color-surface-interactive-active); } .consul-service-instance-list .port dt, .consul-service-instance-list .port dt::before { display: none; } .consul-service-instance-list .port .copy-button { margin-right: 0; } // Copy Button %composite-row .copy-button { display: inline-flex; } %composite-row .copy-button button { @extend %body-100-medium; } %composite-row-header .copy-button { margin-left: 4px; } %composite-row-detail .copy-button { margin-top: 2px; } %composite-row .copy-button button { padding: 0 !important; margin: 0 !important; } %composite-row-header .copy-button button { display: none; } %composite-row-header:hover .copy-button button { display: block; } %composite-row .copy-button button:hover { background-color: transparent !important; } %composite-row-detail > .consul-kind:first-child, %composite-row-detail > .consul-external-source:first-child { margin-left: -5px; } %composite-row-detail .policy::before { @extend %with-file-text-mask, %as-pseudo; margin-right: 3px; } %composite-row-detail .role::before { @extend %with-user-plain-mask, %as-pseudo; margin-right: 3px; } %composite-row-detail .policy-management::before { margin-right: 3px; } %composite-row-header .policy-management dd::before, %composite-row-detail .policy-management::before { @extend %with-star-fill-mask, %as-pseudo; --icon-color: var(--token-color-consul-brand); }