From e090fd49547ebed28b03d1b22627f093f15ec360 Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sat, 14 Nov 2015 19:25:04 -0800
Subject: [PATCH] Add floating action object

---
 client/source/sass/base/_form-elements.scss   |  1 +
 .../source/sass/objects/_floating-action.scss | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 client/source/sass/objects/_floating-action.scss

diff --git a/client/source/sass/base/_form-elements.scss b/client/source/sass/base/_form-elements.scss
index 4fec8bf6..97965215 100644
--- a/client/source/sass/base/_form-elements.scss
+++ b/client/source/sass/base/_form-elements.scss
@@ -57,6 +57,7 @@
   &--primary {
     background: $button--primary--background;
     color: $button--primary--foreground;
+    white-space: nowrap;
 
     &:hover {
       background: $button--primary--background--hover;
diff --git a/client/source/sass/objects/_floating-action.scss b/client/source/sass/objects/_floating-action.scss
new file mode 100644
index 00000000..8364f05f
--- /dev/null
+++ b/client/source/sass/objects/_floating-action.scss
@@ -0,0 +1,41 @@
+.floating-action {
+
+  &__button {
+    background: $textbox-repeater--button--background;
+    border: none;
+    border-radius: 16px;
+    box-shadow: 0 0 0 1px $textbox-repeater--button--border;
+    cursor: pointer;
+    height: 16px;
+    outline: none;
+    margin-right: 8px;
+    padding: 0;
+    position: relative;
+    transition: background 0.25s, box-shadow 0.25s;
+    width: 16px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      background: $textbox-repeater--button--background--hover;
+      box-shadow: 0 0 0 1px $textbox-repeater--button--border--hover;
+
+      .icon {
+        fill: $textbox-repeater--button--foreground--hover;
+      }
+    }
+
+    .icon {
+      height: 8px;
+      fill: $textbox-repeater--button--foreground;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transition: fill 0.25s;
+      transform: translate(-50%, -50%);
+      width: 8px;
+    }
+  }
+}