1 files changed, 213 insertions, 0 deletions
diff --git a/public/css/module.less b/public/css/module.less
new file mode 100644
index 0000000..bb651e7
--- /dev/null
+++ b/public/css/module.less
@@ -0,0 +1,213 @@
+div.images {
+    h3 {
+        clear: both;
+    }
+
+    img.svg {
+        float: left;
+        border: none;
+    }
+
+}
+
+div.images.object-detail-view {
+  display: block;
+
+  img.graphiteImg {
+    width: 100%;
+    display: block;
+  }
+}
+
+.timerangepicker-container {
+  display: flex;
+  padding: .25em 0;
+
+  .button-link {
+    line-height: 1.75;
+    width: 2.25em;
+
+    i {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+    }
+
+    i:before {
+      margin-right: 0;
+    }
+  }
+}
+
+form[name=form_timerangepickercommon_graphite] {
+  display: inline-flex;
+  flex: 1 1 auto;
+  width: 0;
+  max-width: 43.25em;
+
+  &:not(:last-child) {
+    margin-right: .25em;
+  }
+
+  select {
+    min-width: 3.5em;
+    max-width: 7em;
+    flex: 1 1 auto;
+    width: auto;
+
+    &:not(:last-of-type) {
+      margin-right: .25em;
+    }
+  }
+}
+
+form[name=form_timerangepickercustom_graphite] {
+  min-width: 21em;
+
+  .control-label-group {
+    text-align: left;
+  }
+
+  input[type=date] {
+    min-width: 11em;
+  }
+
+  input[type=time] {
+    min-width: 5em;
+  }
+}
+
+.flyover[id^="graphite-customrange-"] {
+  display: inline-block;
+}
+
+.grid {
+  margin-right: -1em;
+  margin-bottom: -1em;
+
+  .empty-state {
+    .rounded-corners();
+    background-color: @gray-lightest;
+    margin-right: 1em;
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+.grid-item {
+  display: inline-block;
+  border-radius: .25em;
+  border: 1px solid @gray-lighter;
+  min-width: 302px;
+  vertical-align: top;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+
+.grid-item  h2 {
+  margin-top: 0;
+  background: @gray-lightest;
+  border-bottom: 1px solid @gray-lighter;
+  padding:.25em .5em;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.grid-item > .images:not(:last-child) {
+  margin-right: 1em;
+  display: inline-block;
+}
+
+.grid-item .graphiteImg {
+  margin-right: 1px;
+}
+
+.grid-item > p {
+  padding: .5em;
+  margin-bottom: 0;
+}
+
+p.load-more {
+  margin-right: 1em;
+  text-align: right;
+}
+
+// TODO: Remove once ipl-web v0.7.0 is required
+.controls:not(.default-layout) {
+  .box-shadow(0, 0, 0, 1px, @gray-lighter);
+
+  .pagination-control {
+    float: left;
+  }
+
+  .sort-control,
+  .limit-control {
+    float: right;
+    margin-left: .5em;
+  }
+
+  .sort-control {
+    display: flex;
+    justify-content: flex-end;
+
+    :not(.form-element) > label {
+      margin-right: 0;
+    }
+
+    .control-button {
+      margin: 0;
+    }
+  }
+
+  > :not(:only-child) {
+    margin-bottom: 0.5em;
+  }
+
+  .search-suggestions {
+    margin-bottom: 2.5em;
+  }
+
+  .search-controls,
+  .filter {
+    clear: both;
+    display: flex;
+    min-width: 100%;
+
+    .search-bar {
+      flex: 1 1 auto;
+
+      & ~ .control-button:last-child {
+        margin-right: -.5em;
+      }
+
+      & ~ .control-button {
+        margin-left: .5em;
+      }
+    }
+  }
+}
+
+/* Graph colors */
+
+@graphite-graph-bg-color: @body-bg-color;
+@graphite-graph-fg-color: @text-color;
+@graphite-graph-major-grid-color: @gray-light;
+@graphite-graph-minor-grid-color: @graphite-graph-bg-color;
+
+@light-mode: {
+  --graphite-graph-bg-color: var(--body-bg-color);
+  --graphite-graph-fg-color: var(--text-color);
+  --graphite-graph-major-grid-color: var(--gray-light);
+  --graphite-graph-minor-grid-color: var(--graphite-graph-bg-color);
+};
+
+.graphite-graph-color-registry {
+  display: none;
+
+  background-color: @graphite-graph-bg-color;
+  color: @graphite-graph-fg-color;
+  border-top-color: @graphite-graph-major-grid-color;
+  border-bottom-color: @graphite-graph-minor-grid-color;
+}