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;