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") {
$('
'+
- ' Deploy'+
- ''+
+ ' Deploy'+
+ ''+
'').prependTo(".header-toolbar");
RED.menu.init({id:"btn-deploy-options",
options: [
@@ -61,7 +61,7 @@ RED.deploy = (function() {
}
$(''+
- ''+
+ ''+
(icon?' ':'')+
''+label+''+
'').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;