From 9c851acaeb8bdb7fcb6e454adf1c5ad97ced56fd Mon Sep 17 00:00:00 2001
From: LFDM <1986gh@gmail.com>
Date: Fri, 8 Aug 2014 11:15:15 +0200
Subject: [PATCH] Minor css class refactor

---
 app/css/arethusa.scss                         | 95 +++++++++----------
 .../arethusa.dep_tree/focus_controls.html     | 10 +-
 app/templates/arethusa.dep_tree/settings.html |  4 +-
 app/templates/dep_tree.html                   |  7 +-
 app/templates/history.html                    |  4 +-
 app/templates/relation.html                   |  2 +-
 6 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/app/css/arethusa.scss b/app/css/arethusa.scss
index bd0fb89c0..07758cad4 100644
--- a/app/css/arethusa.scss
+++ b/app/css/arethusa.scss
@@ -500,6 +500,10 @@ input.compact {
   @include transition(background-color 700ms ease-in-out);
 }
 
+.settings-span-button {
+  @extend .clickable, .margined-hor-tiny, .flash-on-hover;
+}
+
 .clickable {
   cursor: pointer;
 }
@@ -601,12 +605,6 @@ ul.no-list {
   100% { opacity: 0 }
 }
 
-#keyboard {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 li.keyboard-key {
   float: left;
   margin: 0 3px 3px 0;
@@ -628,56 +626,55 @@ li.keyboard-key:hover {
 }
 
 #keyboard {
+  margin: 0;
+  padding: 0;
+  list-style: none;
   width: 514px;
-}
 
-#keyboard .last-key {
-  margin-right: 0;
-}
-#keyboard .first-key {
-  clear: left;
-}
-#keyboard .tab, #keyboard .delete {
-  width: 52px;
-}
-#keyboard .ctrl, #keyboard .alt {
-  width: 52px;
-}
-#keyboard .capslock {
-  width: 60px;
-}
-#keyboard .return {
-  width: 56px;
-}
-#keyboard .l-shift {
-  width: 70px;
-}
-#keyboard .shift {
-  width: 79px;
-}
+  .last-key {
+    margin-right: 0;
+  }
 
-#keyboard .space {
-  width: 262px;
-}
+  .tab, .delete, .ctrl, .alt {
+    width: 52px;
+  }
 
-#keyboard .inactive {
-  color: rgb(228, 228, 228);
-}
+  .capslock {
+    width: 60px;
+  }
+  .return {
+    width: 56px;
+  }
+  .l-shift {
+    width: 70px;
+  }
+  .shift {
+    width: 79px;
+  }
 
-#keyboard .shifted-1 {
-  padding-left: 0.1em;
-  font-size:0.7em;
-  vertical-align: super;
-}
+  .space {
+    width: 262px;
+  }
 
-#keyboard .shifter {
-  cursor: pointer;
-}
+  .inactive {
+    color: rgb(228, 228, 228);
+  }
 
-#keyboard .key-hit {
-  background-color: #C3E3FF;
-  border: 1px solid lightgray;
-  box-shadow: none;
+  .shifted-1 {
+    padding-left: 0.1em;
+    font-size:0.7em;
+    vertical-align: super;
+  }
+
+  .shifter {
+    cursor: pointer;
+  }
+
+  .key-hit {
+    background-color: #C3E3FF;
+    border: 1px solid lightgray;
+    box-shadow: none;
+  }
 }
 
 .comments {
diff --git a/app/templates/arethusa.dep_tree/focus_controls.html b/app/templates/arethusa.dep_tree/focus_controls.html
index 29e7f00f2..180705054 100644
--- a/app/templates/arethusa.dep_tree/focus_controls.html
+++ b/app/templates/arethusa.dep_tree/focus_controls.html
@@ -1,30 +1,30 @@
 <span
   title="{{ translations.changeDir }} {{ keyHints.directionChange }}"
-  class="margined-hor-tiny clickable flash-on-hover"
+  class="settings-span-button"
   ng-click="changeDir()">
   <i class="fi-loop rotate-on-hover"></i>
 </span>
 <span
   title="{{ translations.focusRoot }}"
-  class="margined-hor-tiny clickable flash-on-hover"
+  class="settings-span-button"
   ng-click="focusRoot()">
   <i class="fa fa-crosshairs rotate-on-hover"></i>
 </span>
 <span
   title="{{ translations.focusSel }} {{ keyHints.focusSelection}}"
-  class="margined-hor-tiny clickable flash-on-hover"
+  class="settings-span-button"
   ng-click="focusSelection()">
   <i class="fi-target-two rotate-on-hover"></i>
 </span>
 <span
   title="{{ translations.centerTree }} {{ keyHints.centerTree }}"
-  class="margined-hor-tiny clickable flash-on-hover"
+  class="settings-span-button"
   ng-click="centerGraph()">
   <i class="fa fa-dot-circle-o"></i>
 </span>
 <span
   title="{{ translations.perfectWidth }} {{ keyHints.perfectWidth }}"
-  class="margined-hor-tiny clickable flash-on-hover"
+  class="settings-span-button"
   ng-click="perfectWidth()">
   <i class="fa fa-arrows-h"></i>
 </span>
diff --git a/app/templates/arethusa.dep_tree/settings.html b/app/templates/arethusa.dep_tree/settings.html
index 2d7ab6358..7b8ef1387 100644
--- a/app/templates/arethusa.dep_tree/settings.html
+++ b/app/templates/arethusa.dep_tree/settings.html
@@ -2,13 +2,13 @@
 <span ng-show="settingsOn">
   <span
     title="{{ translations.compact }}"
-    class="margined-hor-tiny clickable flash-on-hover"
+    class="settings-span-button"
     ng-click="compactTree()">
     <i class="fi-arrows-in"></i>
   </span>
   <span
     title="{{ translations.widen }}"
-    class="margined-hor-tiny clickable flash-on-hover"
+    class="settings-span-button"
     ng-click="wideTree()">
     <i class="fi-arrows-out"></i>
   </span>
diff --git a/app/templates/dep_tree.html b/app/templates/dep_tree.html
index a8ad5f842..d52d6636d 100644
--- a/app/templates/dep_tree.html
+++ b/app/templates/dep_tree.html
@@ -1,13 +1,13 @@
 <div class="tree-canvas">
   <div class="tree-settings">
     <span
-      class="note clickable right margined-hor-tiny flash-on-hover"
+      class="note right span-settings-button"
       ng-show="plugin.diffPresent"
       ng-click="plugin.toggleDiff()">
       Toggle Diff
     </span>
     <span
-      class="note clickable right margined-hor-tiny flash-on-hover"
+      class="note right span-settings-button"
       style="margin-left: 10px"
       unused-token-highlighter
       uth-check-property="head.id">
@@ -19,7 +19,6 @@
     dependency-tree
     tokens="state.tokens"
     styles="plugin.diffStyles()"
-    to-bottom
-    >
+    to-bottom>
   </div>
 </div>
diff --git a/app/templates/history.html b/app/templates/history.html
index 11847fc05..1f4409851 100644
--- a/app/templates/history.html
+++ b/app/templates/history.html
@@ -1,6 +1,6 @@
 <div>
-  <span class="margined-hor-tiny right clickable flash-on-hover" hist-redo/>
-  <span class="margined-hor-tiny right clickable flash-on-hover" hist-undo/>
+  <span class="settings-span-button right" hist-redo/>
+  <span class="settings-span-button right" hist-undo/>
   <div delimiter/>
   <div history-list/>
 </div>
diff --git a/app/templates/relation.html b/app/templates/relation.html
index 16b430555..65740d7b6 100644
--- a/app/templates/relation.html
+++ b/app/templates/relation.html
@@ -12,7 +12,7 @@
 </div>
 
 <div
-  class="note clickable right margined-hor-tiny flash-on-hover"
+  class="note right span-settings-button"
   style="margin-top: 10px"
   unused-token-highlighter
   uth-check-property="relation.label">