1 files changed, 154 insertions, 0 deletions
diff --git a/public/css/list/item-list.less b/public/css/list/item-list.less
new file mode 100644
index 0000000..251eec3
--- /dev/null
+++ b/public/css/list/item-list.less
@@ -0,0 +1,154 @@
+// Style
+
+.item-list {
+  .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 .list-item {
+  &.load-more a {
+    flex: 1;
+    margin: 1.5em 0;
+    padding: .5em 0;
+  }
+}
+
+.item-list.minimal {
+  > .empty-state {
+    padding: .25em;
+  }
+
+  .list-item {
+    header {
+      max-width: 100%;
+    }
+
+    .visual {
+      width: 2.2em;
+    }
+
+    .check-attempt {
+      display: none;
+    }
+
+    .title {
+      p {
+        display: inline;
+
+        & + p {
+          margin-left: .417em;
+        }
+      }
+    }
+
+    .caption {
+      flex: 1 1 auto;
+      height: 1.5em;
+      margin-right: 1em;
+      width: 0;
+
+      .line-clamp("reset");
+    }
+
+    .caption,
+    .caption .plugin-output {
+      .text-ellipsis();
+    }
+  }
+}
+
+.item-list.detailed .list-item {
+  .title {
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+  }
+
+  .caption {
+    display: block;
+    height: auto;
+    max-height: 7.5em; /* 5 lines */
+    position: relative;
+
+    .line-clamp(4)
+  }
+}
+
+.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;
+    }
+  }
+
+  &.minimal {
+    .icon-image {
+      height: 2em;
+      width: 2em;
+      line-height: 2;
+    }
+  }
+}
+
+.controls .item-list:not(.detailed):not(.minimal) .list-item {
+  .plugin-output {
+    line-height: 1.5
+  }
+
+  .caption {
+    height: 2.5em;
+  }
+}
+
+.controls .item-list.minimal .icon-image {
+  margin-top: 0;
+}