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

37 lines
704 B
SCSS

%composite-row {
display: grid;
grid-template-columns: auto 50px;
grid-template-rows: 50% 50%;
grid-template-areas:
'header actions'
'detail actions';
}
%with-one-action-row {
@extend %composite-row;
grid-template-columns: 1fr auto;
padding-right: 12px;
}
%composite-row-header {
grid-area: header;
align-self: start;
}
%composite-row-detail {
grid-area: detail;
align-self: end;
}
%composite-row-actions {
grid-area: actions;
justify-self: center;
align-self: center;
}
%composite-row-header:nth-last-child(2) {
grid-column-start: header;
grid-column-end: actions;
}
%composite-row-detail:last-child {
grid-column-start: detail;
grid-column-end: actions;
}