From bc0db45e6c7fc526e423eba4f6f9e10ee99b4603 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Mon, 14 Mar 2016 16:52:54 +0100
Subject: [PATCH] Apply more general classes on pane title elements.

---
 app.html      |  5 +++--
 app.js        |  2 +-
 sass/app.scss | 33 +++++++++++----------------------
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/app.html b/app.html
index 8856c566..07f747c0 100644
--- a/app.html
+++ b/app.html
@@ -29,7 +29,7 @@
         <div class="row">
           <h1 class="col-xs-12 pane-title">
             <i class="fa fa-keyboard-o"></i>
-            <span class="keymap__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev" contenteditable="true">QTY</span>)
+            <span class="keymap__name pane-title__name" contenteditable="true">QWERTY</span> keymap (<span class="keymap__abbrev pane-title__abbrev" contenteditable="true">QTY</span>)
             <i class="fa fa-star-o fa-star keymap__is-default"></i>
           </h1>
         </div>
@@ -67,7 +67,7 @@
         <div class="row">
           <h1 class="col-xs-12 pane-title">
             <i class="fa fa-play"></i>
-            <span class="macro__name" contenteditable="true">Macro1</span> <i class="fa"></i>
+            <span class="macro__name pane-title__name" contenteditable="true">Macro1</span> <i class="fa"></i>
           </h1>
         </div>
         <div class="row">
@@ -175,6 +175,7 @@
                 </ul>
               {{/if}}
               {{#if actions}}
+                <!-- Most probably this "actions" section will be removed. -->
                 <ul class="sidebar__actions--list">
                   {{#each actions}}
                     <li class="sidebar__action--item">
diff --git a/app.js b/app.js
index 3048f161..d8b33b49 100644
--- a/app.js
+++ b/app.js
@@ -7,7 +7,7 @@ $(function() {
   // ========================
   // Keymap related settings.
   // ========================
-  $('.keymap__name, .keymap__abbrev, .macro__name').on('mouseover', function() {
+  $('.pane-title__name, .pane-title__abbrev').on('mouseover', function() {
     $(this).addClass('active');
   }).on('mouseout', function() {
     if (!$(this).is(':focus')) {
diff --git a/sass/app.scss b/sass/app.scss
index b38d1a6f..4bfedbe7 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -112,30 +112,19 @@ li {
 
 .pane-title {
   margin-bottom: 1em;
-}
 
-.macro__name.active,
-.keymap__name.active,
-.keymap__abbrev.active {
-  box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
-  border-color: transparent;
-}
+  &__name,
+  &__abbrev {
+    border: none;
+    border-bottom: 2px dotted #999;
+    padding: 0 .5rem;
+    margin: 0 .25rem;
 
-.macro__name,
-.keymap__name,
-.keymap__abbrev {
-  border: none;
-  border-bottom: 2px dotted #999;
-}
-
-.macro__name,
-.macro__name.active,
-.keymap__name,
-.keymap__name.active,
-.keymap__abbrev,
-.keymap__abbrev.active {
-  padding: 0 .5rem;
-  margin: 0 .25rem;
+    &.active {
+      box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
+      border-color: transparent;
+    }
+  }
 }
 
 .keymap__is-default.fa-star {