consul/ui-v2/app/styles/components/composite-row/layout.scss

97 lines
1.9 KiB
SCSS

%composite-row {
display: grid;
grid-template-columns: auto 50px;
grid-template-rows: 50% 50%;
grid-template-areas:
'header actions'
'detail actions';
padding-top: 10px;
padding-bottom: 10px;
/* whilst this isn't in the designs this makes our temporary rollover look better */
padding-left: 12px;
}
%composite-row-header {
grid-area: header;
align-self: start;
}
%composite-row-detail {
grid-area: detail;
align-self: end;
}
%composite-row-detail:not(:last-child) {
overflow-x: hidden;
}
%composite-row-actions {
grid-area: actions;
justify-self: center;
align-self: center;
}
%composite-row-icon {
margin-right: 6px;
}
%composite-row-icon dt {
display: none;
}
%composite-row-icon dd::before {
font-size: 0.9em;
}
/* TODO Currently only here due to dl's in %form-row */
%composite-row dl {
margin: 0;
padding: 0;
}
%composite-row-detail,
%composite-row-detail ul,
%composite-row-detail dl,
%composite-row-header,
%composite-row-header dl {
display: inline-flex;
flex-wrap: nowrap;
}
%composite-row-header *,
%composite-row-detail * {
white-space: nowrap;
flex-wrap: nowrap;
}
%composite-row-detail dl,
%composite-row-detail > ul > li {
margin-right: 12px;
}
%composite-row-detail .node::before,
%composite-row-detail .tag-list::before {
position: relative;
}
%composite-row-detail .node::before {
top: 1px;
}
%composite-row-detail .tag-list::before {
top: 2px;
}
%composite-row-detail dl dt::before {
margin-right: 4px;
}
// Copy Button
%composite-row .copy-button button {
padding: 0 !important;
margin: 0 !important;
}
%composite-row-detail .copy-button {
margin-right: 4px;
}
%composite-row-header .copy-button {
margin-left: 4px;
}
%composite-row .copy-button {
display: inline-flex;
}
/* buttons need to be displayed in order for the tooltip */
/* to track them */
%composite-row-header .copy-button button {
opacity: 0;
}
%composite-row-header:hover .copy-button button {
opacity: 1;
}