Create sheet for Flip Toggle component

Not a JSX component (yet?) just css for now

ui/src/style/chronograf.scss

@@ -32,6 +32,7 @@
 @import 'components/multi-select-dropdown';
 @import 'components/page-spinner';
 @import 'components/flash-messages';
+@import 'components/flip-toggle';
 @import 'components/dygraphs';
 @import 'components/react-tooltips';
 @import 'components/search-widget';

ui/src/style/components/flip-toggle.scss

@@ -0,0 +1,61 @@
+/*
+    Flip Toggle
+    -------------------------------------------------------------
+    Toggles between 2 options using a 3D transition
+    Aesthetic and space conservative
+*/
+
+$flip-toggle-text: $g11-sidewalk;
+$flip-toggle-bg: $g2-kevlar;
+$flip-toggle-border: $g6-smoke;
+$flip-toggle-border-hover: $g7-graphite;
+$flip-toggle-size: 28px;
+
+.flip-toggle {
+  width: $flip-toggle-size;
+  height: $flip-toggle-size;
+  perspective: 1000px;
+
+  &:hover {
+    cursor: pointer;
+
+    .flip-toggle--front,
+    .flip-toggle--back {
+      border-color: $flip-toggle-border-hover;
+    }
+  }
+}
+.flip-toggle--container {
+  transition: transform 0.6s ease;
+  transform-style: preserve-3d;
+  position: relative;
+}
+.flip-toggle--front,
+.flip-toggle--back {
+  border: 2px solid $flip-toggle-border;
+  background-color: $flip-toggle-bg;
+  transition: border-color 0.25s ease;
+  border-radius: $radius-small;
+  width: $flip-toggle-size;
+  height: $flip-toggle-size;
+  text-align: center;
+  line-height: ($flip-toggle-size - 4px); /* Subtract for border width */
+  color: $flip-toggle-text;
+  position: absolute;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+}
+.flip-toggle--front {
+  z-index: 2;
+  transform: rotateY(0deg);
+}
+.flip-toggle--back {
+  z-index: 1;
+  transform: rotateY(180deg);
+}
+
+/* Flip Animation happens on class toggle */
+.flip-toggle.flipped .flip-toggle--container {
+  transform: rotateY(180deg);
+}