From 8403f6291f603b7c596e4470acb9d5cb02dea908 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 13 Apr 2015 21:50:40 +0100
Subject: [PATCH] Tidy deploy button css

---
 editor/js/ui/deploy.js  |   6 +-
 editor/sass/header.scss | 170 +++++++++++++++++++---------------------
 2 files changed, 84 insertions(+), 92 deletions(-)

diff --git a/editor/js/ui/deploy.js b/editor/js/ui/deploy.js
index 428eb3df3..e3aec7d4f 100644
--- a/editor/js/ui/deploy.js
+++ b/editor/js/ui/deploy.js
@@ -43,8 +43,8 @@ RED.deploy = (function() {
         
         if (type == "default") {
             $('<li><span class="deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> <span>Deploy</span></a>'+
-              '<a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '<a id="btn-deploy" class="deploy-button disabled" href="#"><img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> <span>Deploy</span></a>'+
+              '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
               '</span></li>').prependTo(".header-toolbar");
               RED.menu.init({id:"btn-deploy-options",
                   options: [
@@ -61,7 +61,7 @@ RED.deploy = (function() {
             }
             
             $('<li><span class="deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="action-deploy disabled" href="#">'+
+              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
               (icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+
               '<span>'+label+'</span></a>'+
               '</span></li>').prependTo(".header-toolbar");
diff --git a/editor/sass/header.scss b/editor/sass/header.scss
index 1b9c0b4f7..2011f8780 100644
--- a/editor/sass/header.scss
+++ b/editor/sass/header.scss
@@ -48,29 +48,29 @@ span.logo {
     font-size: 30px;
     line-height: 30px;
     text-decoration: none;
+    
+    span {
+        vertical-align: middle;
+        font-size: 16px !important;
+    }
+    img {
+        height: 18px;
+    }
 }
-span.logo span {
-    vertical-align: middle;
-    font-size: 16px !important;
-}
-span.logo img {
-    height: 18px;
-}
-#header ul.header-toolbar {
+
+.header-toolbar {
     padding: 0;
     margin: 0;
     list-style: none;
     float: right;
-}
-
-#header ul.header-toolbar > li {
-    padding: 0;
-    margin: 0;
-    position: relative;
-}
-
-#header ul.header-toolbar > li {
-    display: inline-block;
+    
+    > li {
+        display: inline-block;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        
+    }
 }
 
 .button {
@@ -90,96 +90,88 @@ span.logo img {
     vertical-align: middle;
     border-left: 2px solid #000;
     border-right: 2px solid #000;
-}
-#header .button:not(.disabled):hover {
-    border-color: $headerMenuItemHover;
-}
-
-#btn-deploy {
-    background: $deployButton;
-    color: #eee !important;
-}
-#btn-deploy + a {
-    background: $deployButton;
-    color: #eee;
-}
-#btn-deploy + a:hover {
-    background: $deployButtonHover;
-    color: #eee;
-}
-#btn-deploy + a:active {
-    background: $deployButtonActive;
-    color: #ccc;
-}
-span.deploy-button-group.open > #btn-deploy + a {
-    background: $activeButton !important;
-}
-
-#btn-deploy:not(.disabled):hover {
-    background: $deployButtonHover;
-}
-
-
-#btn-deploy:not(.disabled):active {
-    background: $deployButtonActive !important;
-}
-#btn-deploy:not(.disabled):active {
-    color: #ccc !important;
-}
-
-#btn-deploy.disabled {
-    cursor: default;
-    background: $deployDisabledButton;
-    color: #999 !important;
-}
-
-#btn-deploy.disabled + a {
-    background: $deployDisabledButton;
-    color: #ddd;
-}
-#btn-deploy.disabled + a:hover {
-    background: $deployDisabledButtonHover;
-    color: #ddd;
-}
-#btn-deploy.disabled + a:active {
-    background: $deployDisabledButton;
-    color: #ddd;
-}
-span.deploy-button-group.open > #btn-deploy.disabled + a {
-    background: $activeButton !important;
-}
-
-#btn-deploy img {
-    margin-right: 8px;
-}
-#btn-deploy.disabled img {
-    opacity: 0.3;
+    
+    &:hover {
+        border-color: $headerMenuItemHover;
+    }
 }
 
 .button-group {
     display: inline-block;
     margin: auto 15px;
     vertical-align: middle;
-    background: $deployDisabledButtonHover;
     clear: both;
 }
 .button-group > a {
+    display: inline-block;
     float: left;
     line-height: 22px;
     font-size: 14px;
     text-decoration: none;
-    display: inline-block;
     padding: 4px 8px;
-    color: #ccc;
     margin: 0;
 }
 
-#header .button:active, #header .button.active {
-    background: $activeButton;
+.deploy-button {
+    background: $deployButton;
+    color: #eee !important;
+    
+    &:hover {
+        background: $deployButtonHover;
+    }
+    
+    &:active {
+        background: $deployButtonActive;
+        color: #ccc !important;
+    }
 }
-#header .button:focus {
-    outline: none;
+
+#btn-deploy {
+    
+    padding: 4px 12px;
+    
+    &.disabled {
+        cursor: default;
+        background: $deployDisabledButton;
+        color: #999 !important;
+        
+        img {
+            opacity: 0.3;
+        }
+        
+        &+ #btn-deploy-options {
+            background: $deployDisabledButton;
+            color: #ddd;
+        }
+        &+ #btn-deploy-options:hover {
+            background: $deployDisabledButtonHover;
+        }
+        &+ #btn-deploy-options:active {
+            background: $deployDisabledButton;
+        }
+    }
+    
+    img {
+        margin-right: 8px;
+    }
 }
+
+.deploy-button-group.open {
+    #btn-deploy-options {
+        background: $activeButton !important;
+    }
+}
+
+
+#header .button {
+    &:active, &.active {
+        background: $activeButton;
+    }
+    &:focus {
+        outline: none;
+    }
+}
+
 #header li.open .button {
     background: $activeButton;
     border-color: $activeButton;