107 lines
2.1 KiB
SCSS
107 lines
2.1 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;
|
|
}
|
|
%with-one-action-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: 50% 50%;
|
|
|
|
// only one action applies to these rows
|
|
grid-template-areas:
|
|
'header actions'
|
|
'detail actions';
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-right: 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;
|
|
margin-left: -2px;
|
|
}
|
|
%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 > span {
|
|
margin-right: 18px;
|
|
}
|
|
%composite-row-detail dl.node dt::before {
|
|
margin-top: 3px;
|
|
}
|
|
%composite-row-detail dl dt::before {
|
|
margin-right: 4px;
|
|
margin-top: 2px;
|
|
}
|
|
// Copy Button
|
|
%composite-row .copy-button button {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
%composite-row-detail .copy-button {
|
|
margin-right: 4px;
|
|
margin-top: 2px;
|
|
}
|
|
%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;
|
|
}
|