open-consul/ui-v2/app/styles/components/composite-row/layout.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;
}
%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;
}