Move some base widgets from Icinga DB Web

asset/css/list/action-list.less

@@ -0,0 +1,14 @@
+.action-list {
+  [data-action-item]:hover {
+    background-color: @tr-hover-color;
+    cursor: pointer;
+  }
+
+  [data-action-item].active {
+    background-color: @tr-active-color;
+  }
+
+  &[data-icinga-multiselect-url] * {
+    user-select: none;
+  }
+}

asset/css/list/item-list.less

@@ -0,0 +1,155 @@
+// Style
+
+.item-list {
+  list-style-type: none;
+
+  > .empty-state {
+    .rounded-corners();
+    background-color: @gray-lighter;
+  }
+
+  .load-more:hover,
+  .page-separator:hover {
+    background: none;
+  }
+
+  > .load-more a {
+    .rounded-corners(.25em);
+    background: @low-sat-blue;
+    text-align: center;
+
+    &:hover {
+      opacity: .8;
+      text-decoration: none;
+    }
+  }
+
+  > .page-separator:after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: @gray;
+    align-self: center;
+    margin-left: .25em;
+  }
+
+  > .page-separator a {
+    color: @gray;
+    font-weight: bold;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  > .page-separator + .list-item .main {
+    border-top: none;
+  }
+}
+
+// Layout
+
+.item-list {
+  margin: 0;
+  padding: 0;
+
+  .list-item {
+    display: flex;
+
+    &.load-more a {
+      flex: 1;
+      margin: 1.5em 0;
+      padding: .5em 0;
+    }
+
+    .main {
+      flex: 1 1 auto;
+      padding: .5em 0;
+      width: 0;
+      margin-left: .5em;
+    }
+
+    .visual {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .caption {
+      height: 3em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      .line-clamp();
+
+      img {
+        max-height: 1em;
+      }
+    }
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    footer {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  > .empty-state {
+    margin: 0 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+.item-list .list-item {
+  .title {
+    display: inline-flex;
+    align-items: baseline;
+    white-space: nowrap;
+    min-width: 0;
+
+    > * {
+      margin: 0 .28125em; // 0 calculated   width
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .subject {
+      .text-ellipsis();
+    }
+  }
+}
+
+.item-list {
+  .icon-image {
+    width:  3em;
+    height: 3em;
+    text-align: center;
+    margin-top: .5em;
+    margin-left: .5em;
+    overflow: hidden;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+}
+
+.controls .list-item:not(:last-child) {
+  margin-bottom: .5em;
+}

asset/css/list/item-table.less

@@ -0,0 +1,104 @@
+// Style
+
+ul.item-table {
+  list-style-type: none;
+}
+
+div.item-table {
+  > .empty-state {
+    .rounded-corners();
+    background-color: @gray-lighter;
+  }
+}
+
+.table-row {
+  color: @text-color-light;
+
+  .title {
+    .subject {
+      color: @text-color;
+    }
+
+    a {
+      font-weight: bold;
+
+      &:hover {
+        color: @icinga-blue;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@media print {
+  .item-table li.page-break-follows:not(:last-of-type) {
+    .col {
+      border-bottom: none;
+    }
+
+    .visual {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Layout
+
+.table-row {
+  .title {
+    display: flex;
+
+    .visual {
+      width: 2.5em;
+      padding: .5em 0;
+      margin-top: -.5em;
+      margin-bottom: -.5em;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      width: 0;
+
+      > * {
+        .text-ellipsis();
+      }
+    }
+  }
+
+  .col {
+    white-space: nowrap;
+  }
+}
+
+ul.item-table {
+  display: grid;
+
+  > .table-row {
+    .col:not(.title) {
+      display: grid;
+      align-items: center;
+    }
+  }
+}
+
+ul.item-table {
+  padding: 0;
+  margin: 0;
+}
+
+div.item-table {
+  > .empty-state {
+    margin: 0 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+div.table-row {
+  display: flex;
+  column-gap: 1em;
+
+  .title {
+    flex: 1 1 auto;
+  }
+}

asset/css/list/list-item.less

@@ -0,0 +1,87 @@
+// Style
+
+.list-item {
+  color: @text-color-light;
+
+  &:not(:first-child) > .main {
+    border-top: 1px solid @gray-light;
+  }
+
+  &:not(:first-child) .visual {
+    margin-top: 1px;
+  }
+
+  .caption {
+    i {
+      opacity: 0.8;
+    }
+
+    a {
+      color: @text-color;
+    }
+  }
+
+  .title {
+    .subject {
+      color: @text-color;
+    }
+
+    a {
+      color: @text-color;
+      font-weight: bold;
+
+      &:hover {
+        color: @icinga-blue;
+        text-decoration: none;
+      }
+    }
+  }
+
+  footer {
+    &:not(:empty) {
+      padding-top: .5em;
+    }
+  }
+}
+
+@media print {
+  .list-item.page-break-follows + .list-item {
+    .main {
+      border-top: 1px solid transparent;
+    }
+  }
+}
+
+// Layout
+
+.list-item {
+  .visual {
+    padding: .5em 0;
+    width: 2.5em;
+  }
+
+  .caption {
+    p {
+      display: inline-block;
+    }
+  }
+
+  .title {
+    margin-right: 1em;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  time {
+    white-space: nowrap;
+  }
+
+  footer {
+    > * {
+      font-size: .857em;
+      line-height: 1.5*.857em;
+    }
+  }
+}

asset/css/mixin/mixins.less

@@ -18,3 +18,20 @@
   -moz-box-shadow: @arguments;
   box-shadow: @arguments;
 }
+
+.line-clamp(@numOfLines: 2) when (@numOfLines > 1) {
+  display: -webkit-box;
+  -webkit-line-clamp: @numOfLines;
+  -webkit-box-orient: vertical;
+}
+.line-clamp(@numOfLines: 2) when (@numOfLines = "reset") {
+  display: block; // Would have used "revert", but browser support is still poor and it's not final yet
+  -webkit-line-clamp: initial;
+  -webkit-box-orient: initial;
+}
+
+.text-ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}