From fce8c8f3d4cec8f2fbaaba03d95a5b8369e29f24 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 8 Nov 2016 12:37:59 -0800
Subject: [PATCH] Moving Kapacitor styles into their own sheet

- Also trying to use variables to maintain consistency on the page
---
 .../enterprise_style/_enterprise-custom.scss  | 281 ----------
 .../style/enterprise_style/application.scss   |   1 +
 ui/src/style/enterprise_style/kapacitor.scss  | 525 ++++++++++++++++++
 3 files changed, 526 insertions(+), 281 deletions(-)
 create mode 100644 ui/src/style/enterprise_style/kapacitor.scss

diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss
index 6268cb94e5..6ff51a967f 100644
--- a/ui/src/style/enterprise_style/_enterprise-custom.scss
+++ b/ui/src/style/enterprise_style/_enterprise-custom.scss
@@ -735,284 +735,3 @@ table .monotype {
     margin-bottom: 45px;
   }
 }
-
-
-
-
-/*
-    Kapacitor Rule Builder
-    ----------------------------------------------
-*/
-$kapacitor-page-padding: ($enterprise-page-header-height / 2);
-$kapacitor-page-gutter: 46px;
-$kapacitor-dot-size: 18px;
-$kapacitor-graphic-color: $g1-raven;
-$kapacitor-line-width: 3px;
-
-$rule-preview-width: 488px;
-
-.kapacitor-rule-page {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: $g2-kevlar;
-  background: -moz-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
-  background: -webkit-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
-  background: linear-gradient(to bottom, $g2-kevlar 0%, $g0-obsidian 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g2-kevlar', endColorstr='$g0-obsidian',GradientType=0 );
-  color: $g17-whisper;
-
-  .enterprise-header {
-    background-color: $g0-obsidian;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    padding-left: $kapacitor-page-padding;
-    padding-right: $kapacitor-page-padding;
-
-    &__container {
-      max-width: 100%;
-    }
-  }
-}
-.rule-builder-wrapper {
-  position: absolute;
-  top: $enterprise-page-header-height;
-  left: 0;
-  width: 100%;
-  height: calc(100% - #{$enterprise-page-header-height});
-  display: flex;
-  align-items: stretch;
-}
-.rule-builder {
-  width: calc(100% - #{$rule-preview-width});
-  padding: $kapacitor-page-padding;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  background: $g2-kevlar;
-  background: -moz-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
-  background: -webkit-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
-  background: linear-gradient(to bottom, $g5-pepper 0%, $g3-castle 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g5-pepper', endColorstr='$g3-castle',GradientType=0 );
-}
-.rule-preview {
-  width: $rule-preview-width;
-  padding: $kapacitor-page-padding;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-}
-.rule-preview--graph {
-  width: 100%;
-  background-color: $g3-castle;
-  border-radius: 4px;
-}
-.rule-preview--graph-heading {
-  width: 100%;
-  height: 44px;
-  line-height: 44px;
-  padding: 0 13px;
-  font-size: 16px;
-  color: $g17-whisper;
-  background-color: $g5-pepper;
-  border-radius: 4px 4px 0 0;
-  font-weight: 600;
-  margin: 0;
-}
-.rule-preview--graph-container {
-  width: 100%;
-  padding: 9px 13px;
-  height: (320px + (9px * 2));
-  position: relative;
-}
-.rule-preview--graph-empty {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  p {
-    margin: 0;
-    font-size: 16px;
-    line-height: 23px;
-    text-align: center;
-    color: $g12-forge;
-
-    strong {
-      color: $g18-cloud;
-      font-weight: 900;
-    }
-  }
-}
-
-.rule-section-heading {
-  margin: 0;
-  padding: $kapacitor-page-padding 0 11px $kapacitor-page-gutter;
-  font-weight: 400;
-  color: $g13-mist;
-  position: relative;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    transform: translateX(-50%);
-  }
-  // Vertical Line
-  &:before {
-    width: $kapacitor-line-width;
-    height: 100%;
-    background-color: $kapacitor-graphic-color;
-    top: 0;
-    left: ($kapacitor-dot-size/2);
-  }
-  // Dot
-  &:after {
-    width: $kapacitor-dot-size;
-    height: $kapacitor-dot-size;
-    background-color: $c-rainforest;
-    border: 6px solid $kapacitor-graphic-color;
-    border-radius: 50%;
-    top: ($kapacitor-page-padding + 3px);
-    left: ($kapacitor-dot-size / 2);
-  }
-}
-.rule-section-body {
-  padding: 0 0 0 $kapacitor-page-gutter;
-  margin: 0;
-  position: relative;
-
-  // Vertical Line
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    transform: translateX(-50%);
-    width: $kapacitor-line-width;
-    height: 100%;
-    background-color: $kapacitor-graphic-color;
-    top: 0;
-    left: ($kapacitor-dot-size / 2);
-  }
-}
-.kapacitor-rule-section {
-  // Override appearance of lines and dots for first child
-  &:first-of-type {
-    .rule-section-heading:before {
-      top: ($kapacitor-page-padding + 5px);
-      height: calc(100% - #{$kapacitor-page-padding} - 5px);
-    }
-  }
-  // Override appearance of lines and dots for last child
-  &:last-of-type {
-    .rule-section-heading:before {
-      top: 0;
-      height: ($kapacitor-page-padding + 3px + 3px);
-    }
-    .rule-section-body:before {
-      display: none;
-    }
-  }
-}
-
-
-$metric-selector-height: 156px;
-
-div.query-editor.kapacitor-metric-selector {
-  border-radius: 0;
-  background-color: transparent;
-  padding: 0;
-
-  // Query sample
-  .query-editor__code pre {
-    white-space: pre-wrap;
-    background-color: $kapacitor-graphic-color;
-    color: $c-rainforest;
-    border-radius: 5px 5px 0 0;
-    border: 0;
-    padding: 8px 13px;
-  }
-
-  // Tabs
-  .query-editor__tabs {
-    background-color: $kapacitor-graphic-color;
-    padding: 0 13px;
-  }
-  .query-editor__tab {
-    background-color: $kapacitor-graphic-color;
-    font-weight: 500;
-    padding-left: 11px;
-    padding-right: 11px;
-
-    &.active {
-      background-color: $g3-castle;
-    }
-  }
-
-  // Editor List
-  .query-editor__list {
-    background-color: $g3-castle;
-    min-height: $metric-selector-height;
-    max-height: $metric-selector-height;
-    height: $metric-selector-height;
-
-    // Custom Scrollbar styles, pretty sure these only work in chrome
-    &::-webkit-scrollbar {
-      width: 14px;
-      border-bottom-right-radius: $radius;
-
-      &-button {
-        background-color: $g3-castle;
-      }
-      &-track {
-        background-color: $g3-castle;
-        border-bottom-right-radius: $radius;
-      }
-      &-track-piece {
-        background-color: $g2-kevlar;
-        border: 4px solid $g3-castle;
-        border-radius: 8px;
-      }
-      &-thumb {
-        background-color: $c-rainforest;
-        border: 4px solid $g3-castle;
-        border-radius: 8px;
-      }
-      &-corner {
-        background-color: $g3-castle;
-      }
-    }
-    &::-webkit-resizer {
-      background-color: $g6-smoke;
-    }
-  }
-  .query-editor__list-header {
-    background-color: $g3-castle;
-    padding: 8px 24px 0 24px;
-  }
-  .query-editor__list-item {
-    padding-left: 24px;
-    padding-right: 24px;
-
-    &:hover {
-      background-color: $g5-pepper;
-    }
-    &.active {
-      background-color: $g5-pepper;
-      color: $c-rainforest;
-    }
-  }
-}
diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss
index 20d7e741eb..e973ae4d5b 100644
--- a/ui/src/style/enterprise_style/application.scss
+++ b/ui/src/style/enterprise_style/application.scss
@@ -13,6 +13,7 @@
 @import 'modals';
 @import 'enterprise-custom';
 @import 'hosts';
+@import 'kapacitor';
 
 // Because of some issues with sharing styles across multiple webpack bundles,
 // we have to import other scss files here instead of in their corresponding
diff --git a/ui/src/style/enterprise_style/kapacitor.scss b/ui/src/style/enterprise_style/kapacitor.scss
new file mode 100644
index 0000000000..505eee687b
--- /dev/null
+++ b/ui/src/style/enterprise_style/kapacitor.scss
@@ -0,0 +1,525 @@
+/*
+    Kapacitor Rule Builder
+    ----------------------------------------------
+*/
+$kapacitor-page-padding: ($enterprise-page-header-height / 2);
+$kapacitor-page-gutter: 46px;
+$kapacitor-dot-size: 18px;
+$kapacitor-line-width: 3px;
+$rule-preview-width: 488px;
+$kap-padding-sm: 8px;
+$kap-padding-md: 13px;
+$kap-padding-lg: 24px;
+$kap-radius-lg: 5px;
+$kap-input-height: 30px;
+
+$kapacitor-graphic-color: $g1-raven;
+$kapacitor-accent: $c-rainforest;
+
+$kapacitor-font-sm: 13px;
+
+.kapacitor-rule-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: $g2-kevlar;
+  background: -moz-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
+  background: -webkit-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
+  background: linear-gradient(to bottom, $g2-kevlar 0%, $g0-obsidian 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g2-kevlar', endColorstr='$g0-obsidian',GradientType=0 );
+  color: $g17-whisper;
+
+  .enterprise-header {
+    background-color: $g0-obsidian;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding-left: $kapacitor-page-padding;
+    padding-right: $kapacitor-page-padding;
+
+    &__container {
+      max-width: 100%;
+    }
+  }
+}
+.rule-builder-wrapper {
+  position: absolute;
+  top: $enterprise-page-header-height;
+  left: 0;
+  width: 100%;
+  height: calc(100% - #{$enterprise-page-header-height});
+  display: flex;
+  align-items: stretch;
+}
+.rule-builder {
+  width: calc(100% - #{$rule-preview-width});
+  padding: $kapacitor-page-padding;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  background: $g2-kevlar;
+  background: -moz-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
+  background: -webkit-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
+  background: linear-gradient(to bottom, $g5-pepper 0%, $g3-castle 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g5-pepper', endColorstr='$g3-castle',GradientType=0 );
+}
+.rule-preview {
+  width: $rule-preview-width;
+  padding: $kapacitor-page-padding;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.rule-preview--graph {
+  width: 100%;
+  background-color: $g3-castle;
+  border-radius: 4px;
+}
+.rule-preview--graph-heading {
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  padding: 0 $kap-padding-md;
+  font-size: 16px;
+  color: $g17-whisper;
+  background-color: $g5-pepper;
+  border-radius: 4px 4px 0 0;
+  font-weight: 600;
+  margin: 0;
+}
+.rule-preview--graph-container {
+  width: 100%;
+  padding: $kap-padding-sm $kap-padding-md;
+  height: (320px + ($kap-padding-sm * 2));
+  position: relative;
+}
+.rule-preview--graph-empty {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0;
+    font-size: 16px;
+    line-height: 23px;
+    text-align: center;
+    color: $g12-forge;
+
+    strong {
+      color: $g18-cloud;
+      font-weight: 900;
+    }
+  }
+}
+
+.rule-section-heading {
+  margin: 0;
+  padding: $kapacitor-page-padding 0 $kap-padding-md $kapacitor-page-gutter;
+  font-weight: 400;
+  color: $g13-mist;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+  // Vertical Line
+  &:before {
+    width: $kapacitor-line-width;
+    height: 100%;
+    background-color: $kapacitor-graphic-color;
+    top: 0;
+    left: ($kapacitor-dot-size/2);
+  }
+  // Dot
+  &:after {
+    width: $kapacitor-dot-size;
+    height: $kapacitor-dot-size;
+    background-color: $kapacitor-accent;
+    border: 6px solid $kapacitor-graphic-color;
+    border-radius: 50%;
+    top: ($kapacitor-page-padding + 3px);
+    left: ($kapacitor-dot-size / 2);
+  }
+}
+.rule-section-body {
+  padding: 0 0 0 $kapacitor-page-gutter;
+  margin: 0;
+  position: relative;
+
+  // Vertical Line
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    transform: translateX(-50%);
+    width: $kapacitor-line-width;
+    height: 100%;
+    background-color: $kapacitor-graphic-color;
+    top: 0;
+    left: ($kapacitor-dot-size / 2);
+  }
+}
+.kapacitor-rule-section {
+  // Override appearance of lines and dots for first child
+  &:first-of-type {
+    .rule-section-heading:before {
+      top: ($kapacitor-page-padding + 5px);
+      height: calc(100% - #{$kapacitor-page-padding} - 5px);
+    }
+  }
+  // Override appearance of lines and dots for last child
+  &:last-of-type {
+    .rule-section-heading:before {
+      top: 0;
+      height: ($kapacitor-page-padding + 3px + 3px);
+    }
+    .rule-section-body:before {
+      display: none;
+    }
+  }
+}
+
+
+$metric-selector-height: 156px;
+
+div.query-editor.kapacitor-metric-selector {
+  border-radius: 0;
+  background-color: transparent;
+  padding: 0;
+
+  // Query sample
+  .query-editor__code pre {
+    font-size: $kapacitor-font-sm;
+    white-space: pre-wrap;
+    background-color: $kapacitor-graphic-color;
+    color: $kapacitor-accent;
+    border-radius: $kap-radius-lg $kap-radius-lg 0 0;
+    border: 0;
+    padding: $kap-padding-sm $kap-padding-md;
+  }
+
+  // Tabs
+  .query-editor__tabs {
+    background-color: $kapacitor-graphic-color;
+    padding: 0 $kap-padding-md;
+  }
+  .query-editor__tab {
+    background-color: $kapacitor-graphic-color;
+    font-weight: 500;
+    padding-left: $kap-padding-md;
+    padding-right: $kap-padding-md;
+
+    &.active {
+      background-color: $g3-castle;
+    }
+  }
+
+  // Editor List
+  .query-editor__list {
+    background-color: $g3-castle;
+    min-height: $metric-selector-height;
+    max-height: $metric-selector-height;
+    height: $metric-selector-height;
+    border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
+
+    // Custom Scrollbar styles, pretty sure these only work in chrome
+    &::-webkit-scrollbar {
+      width: 14px;
+      border-bottom-right-radius: $radius;
+
+      &-button {
+        background-color: $g3-castle;
+      }
+      &-track {
+        background-color: $g3-castle;
+        border-bottom-right-radius: $radius;
+      }
+      &-track-piece {
+        background-color: $g2-kevlar;
+        border: 4px solid $g3-castle;
+        border-radius: 8px;
+      }
+      &-thumb {
+        background-color: $kapacitor-accent;
+        border: 4px solid $g3-castle;
+        border-radius: 8px;
+      }
+      &-corner {
+        background-color: $g3-castle;
+      }
+    }
+    &::-webkit-resizer {
+      background-color: $g6-smoke;
+    }
+  }
+  .query-editor__list-header {
+    background-color: $g3-castle;
+    padding: $kap-padding-sm $kap-padding-lg 0 $kap-padding-lg;
+  }
+  .query-editor__list-item {
+    font-size: $kapacitor-font-sm;
+    padding-left: $kap-padding-lg;
+    padding-right: $kap-padding-lg;
+
+    &:hover {
+      background-color: $g5-pepper;
+    }
+    &.active {
+      background-color: $g5-pepper;
+      color: $kapacitor-accent;
+    }
+  }
+}
+
+.alert-message {
+  border: 2px solid $g3-castle;
+  border-radius: 4px;
+  background-color: $kapacitor-graphic-color;
+  margin: 0;
+  padding: $kap-padding-sm;
+  color: $kapacitor-accent;
+  width: 100%;
+  height: 100px;
+  min-width: 100%;
+  max-width: 100%;
+  display: block;
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  font-weight: 600;
+  font-size: $kapacitor-font-sm;
+  line-height: 17px;
+  transition:
+    color 0.25s ease,
+    border-color 0.25s ease;
+
+  &:hover {
+    border-color: $g4-onyx;
+  }
+  &:focus {
+    outline: none;
+    color: $g20-white;
+    border-color: $kapacitor-accent;
+  }
+  &::-webkit-input-placeholder { color: $g9-mountain; }
+  &::-moz-placeholder { color: $g9-mountain; }
+  &:-ms-input-placeholder { color: $g9-mountain; }
+  &:-moz-placeholder { color: $g9-mountain; }
+}
+.alert-message-key {
+  margin-top: $kap-padding-sm;
+  display: flex;
+  width: 100%;
+  align-items: center;
+
+  label {
+    color: $g13-mist;
+    padding: 0;
+    background-color: transparent;
+    margin: 0 $kap-padding-sm 0 0;
+    font-size: $kapacitor-font-sm;
+    font-weight: 600;
+  }
+  span {
+    background-color: $g3-castle;
+    padding: 3px $kap-padding-sm;
+    border-radius: 3px;
+    display: inline-block;
+    margin-left: ($kap-padding-sm / 2);
+    color: $c-pool;
+    font-family: Consolas, "Lucida Console", Monaco, monospace;
+    font-size: $kapacitor-font-sm;
+    font-weight: 600;
+  }
+}
+
+.rule-section--item {
+  background-color: $kapacitor-graphic-color;
+  padding: $kap-padding-sm $kap-padding-lg;
+  overflow: visible;
+
+  p {
+    margin: 0;
+    font-weight: 600;
+    display: inline-block;
+    color: $g15-platinum;
+    text-transform: capitalize;
+  }
+
+  &:first-of-type {
+    border-top-left-radius: $kap-radius-lg;
+    border-top-right-radius: $kap-radius-lg;
+  }
+  &:last-of-type {
+    border-bottom-left-radius: $kap-radius-lg;
+    border-bottom-right-radius: $kap-radius-lg;
+  }
+}
+.alert-endpoint-dropdown {
+  display: inline-block;
+  position: relative;
+  margin-left: $kap-padding-sm;
+}
+
+.kapacitor-values-tabs,
+.value-selector {
+  background-color: $kapacitor-graphic-color;
+  padding: ($kap-padding-sm / 2) $kap-padding-lg;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  > * {
+    display: inline-block;
+    margin: ($kap-padding-sm / 2);
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  > p {
+    white-space: nowrap;
+    font-weight: 600;
+    color: $g15-platinum;
+    text-transform: capitalize;
+  }
+}
+
+.kapacitor-values-tabs {
+  border-radius: $kap-radius-lg $kap-radius-lg 0 0;
+  margin-bottom: 2px;
+
+  .tab-group {
+    > .btn.tab {
+      padding: 0 $kap-padding-md;
+      height: $kap-input-height;
+      line-height: ($kap-input-height - 4px);
+      font-size: $kapacitor-font-sm;
+      font-weight: 700;
+      background-color: $kapacitor-graphic-color;
+      border-color: $g5-pepper;
+      color: $g11-sidewalk;
+
+      &:hover {
+        background-color: $g3-castle;
+        color: $g20-white;
+      }
+      &.active {
+        background-color: $g5-pepper;
+        color: $kapacitor-accent;
+      }
+    }
+  }
+}
+.value-selector {
+  border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
+}
+
+// Overriding form styles in the builder
+.rule-builder {
+  input[type="text"] {
+    background-color: $kapacitor-graphic-color;
+    color: $kapacitor-accent;
+    border-color: $g5-pepper;
+    font-weight: 600;
+    font-size: $kapacitor-font-sm;
+    font-family: Consolas, "Lucida Console", Monaco, monospace;
+    height: 30px;
+
+    &:focus {
+      border-color: $kapacitor-accent;
+      outline: none;
+      box-shadow: none;
+      color: $g20-white;
+    }
+  }
+  .dropdown-toggle,
+  input[type="text"] {
+    padding-left: $kap-padding-sm;
+    padding-right: $kap-padding-sm;
+    height: $kap-input-height;
+  }
+  .dropdown-toggle {
+    width: 100%;
+    text-align: left;
+    position: relative;
+    color: $kapacitor-accent !important;
+    text-transform: capitalize;
+    font-size: $kapacitor-font-sm;
+
+    .caret {
+      position: absolute;
+      top: 50%;
+      right: $kap-padding-sm;
+      transform: translate(0,-50%);
+    }
+
+    &:hover {
+      color: $c-honeydew !important;
+    }
+  }
+  .size-256 {
+    width: 256px;
+  }
+  .size-176 {
+    width: 176px;
+  }
+  .size-166 {
+    width: 166px;
+  }
+  .size-106 {
+    width: 106px;
+  }
+  .size-66 {
+    width: 66px;
+  }
+  .size-49 {
+    width: 49px;
+  }
+
+  .dropdown-menu {
+    width: 100%;
+    min-width: 100%;
+    padding: 0;
+    margin: 0;
+    border-radius: 4px;
+    @include gradient-v($c-viridian,$c-ocean);
+
+    > li > a {
+      text-transform: capitalize;
+      font-size: $kapacitor-font-sm;
+      padding: ($kap-padding-sm / 2) $kap-padding-sm;
+      font-weight: 600;
+      color: transparentize($g20-white, 0.25); 
+      border-radius: 0;
+
+      &:hover {
+        background-color: $c-rainforest;
+        color: $g20-white;
+      }
+    }
+    > li:first-child > a {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+    > li:last-child > a {
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
+}