@itrocks/list/list.css

Generic action-based object list navigation in HTML and JSON

main > article[data-action=list] {
  display: grid;
  grid-template-areas: "header" "form";
  grid-template-rows: min-content 1fr;
  height: 100%;
}
main > article[data-action=list] > header {
  grid-area: header;
}
main > article[data-action=list] > header > .summary {
  padding: 13px 10px 12px;
  position: absolute;
  right: 0;
  white-space: nowrap;
}
main > article[data-action=list] > form {
  display: grid;
  grid-area: form;
  grid-template-areas: "table" "footer";
  grid-template-rows: 1fr min-content;
  height: 100%;
  overflow: auto;
}
main > article[data-action=list] > form > table {
  border-collapse: collapse;
  display: block;
  grid-area: table;
  margin-bottom: -1px;
  overflow-y: auto;
}
main > article[data-action=list] > form > table tr > td, main > article[data-action=list] > form > table tr > th {
  border-bottom: 1px solid #d8d8d8;
  border-spacing: 0;
  padding: 0.6em;
}
main > article[data-action=list] > form > table tr > td:last-child, main > article[data-action=list] > form > table tr > th:last-child {
  border-right: 1px solid #d8d8d8;
}
main > article[data-action=list] > form > table tr > td:not(:first-child), main > article[data-action=list] > form > table tr > th:not(:first-child) {
  cursor: pointer;
}
main > article[data-action=list] > form > table > thead > tr > * {
  background: #f8f8f8;
}
main > article[data-action=list] > form > table > thead > .properties > .select > input[name=select] {
  display: none;
}
main > article[data-action=list] > form > table > tbody > tr:nth-child(even) > * {
  background: #f8f8f8;
}
main > article[data-action=list] > form > table > tbody > tr:nth-child(odd) > * {
  background: white;
}
main > article[data-action=list] > form > table > tbody > tr > td > ul {
  display: block;
  margin: 0;
  padding: 0;
}
main > article[data-action=list] > form > table > tbody > tr > td > ul > li {
  display: inline-block;
}
main > article[data-action=list] > form > table > tbody > tr > td > ul > li:not(:first-child):before {
  content: ", ";
}
main > article[data-action=list] > form > footer {
  grid-area: footer;
  position: relative;
}