From 62db0828ca7e136823abd37cb8d73e33ac181dc9 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 27 Feb 2018 20:39:39 -0800
Subject: [PATCH] Introduce Radio Buttons (tab lists)

---
 ui/src/style/theme/_radio-buttons.scss   | 104 +++++++++++++++++++++++
 ui/src/style/theme/chronograf-theme.scss |   1 +
 2 files changed, 105 insertions(+)
 create mode 100644 ui/src/style/theme/_radio-buttons.scss

diff --git a/ui/src/style/theme/_radio-buttons.scss b/ui/src/style/theme/_radio-buttons.scss
new file mode 100644
index 000000000..c090c8acb
--- /dev/null
+++ b/ui/src/style/theme/_radio-buttons.scss
@@ -0,0 +1,104 @@
+/*
+   Radio Buttons
+   -----------------------------------------------------------------------------
+*/
+
+.nav-tablist {
+  display: inline-flex;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  border: $ix-border solid $g5-pepper;
+  background-color: $g5-pepper;
+  height: $form-md-height;
+  border-radius: 4px;
+  overflow: hidden;
+
+  > li {
+    @extend %no-user-select;
+    display: flex;
+    align-items: center;
+    padding: 0 $form-md-padding;
+    font-size: $form-md-font;
+    font-weight: 600;
+    margin: 0 2px 0 0;
+    background-color: $g2-kevlar;
+    color: $g11-sidewalk;
+    transition:
+      background-color 0.25s ease,
+      color 0.25s ease;
+
+    &:hover {
+      background-color: $g4-onyx;
+      color: $g15-platinum;
+      cursor: pointer;
+    }
+    &.active {
+      background-color: $g5-pepper;
+      color: $g18-cloud;
+    }
+    &.disabled,
+    &[disabled="true"] {
+      &, &:hover {
+        background-color: $g2-kevlar;
+        font-style: italic;
+        color: $g7-graphite;
+        cursor: not-allowed;
+      }
+    }
+    &:last-child {margin-right: 0;}
+  }
+}
+
+//  Size Modifiers
+//  ----------------------------------------------------------------------------
+.nav-tablist.nav-tablist-lg {
+  height: $form-lg-height;
+  > li {
+    padding: 0 $form-lg-padding;
+    font-size: $form-lg-font;
+  }
+}
+.nav-tablist.nav-tablist-md {
+  height: $form-md-height;
+  > li {
+    padding: 0 $form-md-padding;
+    font-size: $form-md-font;
+  }
+}
+.nav-tablist.nav-tablist-sm {
+  height: $form-sm-height;
+  > li {
+    padding: 0 $form-sm-padding;
+    font-size: $form-sm-font;
+  }
+}
+.nav-tablist.nav-tablist-xs {
+  height: $form-xs-height;
+  > li {
+    padding: 0 $form-xs-padding;
+    font-size: $form-xs-font;
+  }
+}
+
+//  Theme Modifiers
+//  ----------------------------------------------------------------------------
+.nav-tablist.nav-tablist-malachite {
+  > li {
+    background-color: $g3-castle;
+
+    &:hover {background-color: $g4-onyx;}
+    &.active {
+      background-color: $g5-pepper;
+      color: $c-rainforest;
+    }
+    &.disabled,
+    &[disabled="true"] {
+      &, &:hover {
+        background-color: $g3-castle;
+        color: $g7-graphite;
+      }
+    }
+  }
+}
diff --git a/ui/src/style/theme/chronograf-theme.scss b/ui/src/style/theme/chronograf-theme.scss
index cde214ebc..523e8647d 100644
--- a/ui/src/style/theme/chronograf-theme.scss
+++ b/ui/src/style/theme/chronograf-theme.scss
@@ -13,3 +13,4 @@
 @import 'form-elements';
 @import 'alerts';
 @import 'panels';
+@import 'radio-buttons';