From 0eaea4852bd7d4aa76c946ea8f9b4ace99014800 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Tue, 15 Mar 2016 22:45:03 +0100
Subject: [PATCH] Show handle on sortable buttons resolves #9.

---
 index.html    |  6 +++---
 sass/app.scss | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 7fb88692..701069d0 100644
--- a/index.html
+++ b/index.html
@@ -40,9 +40,9 @@
           <div class="col-xs-12 text-center">
             <div class="" role="" style="margin-bottom: 2rem;">
               <button type="button" class="btn btn-primary btn-lg">Base</button>
-              <button type="button" class="btn btn-default btn-lg">Mod</button>
-              <button type="button" class="btn btn-default btn-lg">Fn</button>
-              <button type="button" class="btn btn-default btn-lg">Mouse</button>
+              <button type="button" class="btn btn-default btn-lg grip">Mod</button>
+              <button type="button" class="btn btn-default btn-lg grip">Fn</button>
+              <button type="button" class="btn btn-default btn-lg grip">Mouse</button>
             </div>
           </div>
           <div class="col-xs-12">
diff --git a/sass/app.scss b/sass/app.scss
index c8530bbb..24127a07 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -171,6 +171,29 @@ ul {
   max-width: 100%;
 }
 
+.grip {
+  position: relative;
+
+  &:before {
+    content: '';
+    display: none;
+    width: 5px;
+    height: 20px;
+    background-image: url(../images/grips/vertical_dark.png);
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    left: 7px;
+    margin-top: -10px;
+  }
+
+  &:hover {
+    &:before {
+      display: block;
+    }
+  }
+}
+
 // BOF: These styles will be deleted when removing OWL carousel.
 .owl-carousel {
   max-width: 991px;