Added custom sass styles for triggers panel.

2016-03-19 19:17:21 +03:00
parent 404c2afd46
commit c9dfbe646c
5 changed files with 140 additions and 13 deletions
--- a/src/panel-triggers/sass/panel_triggers.scss
+++ b/src/panel-triggers/sass/panel_triggers.scss
@@ -0,0 +1,108 @@
+$tight-form-func-bg:        #333;
+$blue:                   #33B5E5;
+$dark-2:                 #1f1d1d;
+$body-bg:          rgb(20,20,20);
+
+$grafanaListAccent:         lighten($dark-2, 2%);
+
+.triggers-panel-wrapper {
+  .panel-content {
+    padding: 0;
+  }
+  .panel-title-container {
+    padding-bottom: 4px;
+  }
+}
+
+.triggers-panel-scroll {
+  overflow: auto;
+}
+
+.triggers-panel-container {
+  padding-top: 2.2em;
+  position: relative;
+}
+
+.triggers-panel-footer {
+  text-align: center;
+  font-size: 90%;
+  line-height: 2px;
+
+  ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+  ul > li {
+    display: inline; // Remove list-style and block-level defaults
+  }
+  ul > li > a {
+    float: left; // Collapse white-space
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0;
+
+    &:hover {
+      background-color: $tight-form-func-bg;
+    }
+
+    &.active {
+      font-weight: bold;
+      color: $blue;
+    }
+  }
+}
+
+.triggers-panel-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    padding: 0;
+
+    &:first-child {
+      .triggers-panel-table-header-inner {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid $body-bg;
+    border-right: 2px solid $body-bg;
+
+    &:first-child {
+      padding-left: 15px;
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
+
+.triggers-panel-header-bg {
+  background: $grafanaListAccent;
+  border-top: 2px solid $body-bg;
+  border-bottom: 2px solid $body-bg;
+  height: 2.0em;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.triggers-panel-table-header-inner {
+  padding: 0.45em 0 0.45em 1.1em;
+  text-align: left;
+  color: $blue;
+  position: absolute;
+  top: 0;
+}
+
+.triggers-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px;
+}