mirror of
https://github.com/status-im/consul.git
synced 2025-01-10 13:55:55 +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
113 lines
3.0 KiB
SCSS
113 lines
3.0 KiB
SCSS
@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 rgb(var(--tone-gray-200));
|
|
}
|
|
.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-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-fill-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: rgb(var(--tone-brand-600));
|
|
}
|