Namespace dropdown menu CSS

packages/node_modules/@node-red/editor-client/src/js/red.js

@@ -481,8 +481,8 @@ var RED = (function() {
         menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
 
 
-        $('<li><a id="btn-sidemenu" class="button" href="#"><i class="fa fa-bars"></i></a></li>').appendTo(".red-ui-header-toolbar")
+        $('<li><a id="red-ui-header-button-sidemenu" class="button" href="#"><i class="fa fa-bars"></i></a></li>').appendTo(".red-ui-header-toolbar")
-        RED.menu.init({id:"btn-sidemenu",options: menuOptions});
+        RED.menu.init({id:"red-ui-header-button-sidemenu",options: menuOptions});
 
     }
 

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -61,7 +61,7 @@ RED.menu = (function() {
             item = $('<li></li>');
 
             if (opt.group) {
-                item.addClass("menu-group-"+opt.group);
+                item.addClass("rd-ui-menu-group-"+opt.group);
 
             }
             var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">';
@@ -79,10 +79,10 @@ RED.menu = (function() {
             }
 
             if (opt.sublabel) {
-                linkContent += '<span class="menu-label-container"><span class="menu-label">'+opt.label+'</span>'+
+                linkContent += '<span class="red-ui-menu-label-container"><span class="red-ui-menu-label">'+opt.label+'</span>'+
-                               '<span class="menu-sublabel">'+opt.sublabel+'</span></span>'
+                               '<span class="red-ui-menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
-                linkContent += '<span class="menu-label">'+opt.label+'</span>'
+                linkContent += '<span class="red-ui-menu-label">'+opt.label+'</span>'
             }
 
             linkContent += '</a>';
@@ -130,8 +130,8 @@ RED.menu = (function() {
                 });
             }
             if (opt.options) {
-                item.addClass("dropdown-submenu pull-left");
+                item.addClass("red-ui-menu-dropdown-submenu pull-left");
-                var submenu = $('<ul id="'+opt.id+'-submenu" class="dropdown-menu"></ul>').appendTo(item);
+                var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
 
                 for (var i=0;i<opt.options.length;i++) {
                     var li = createMenuItem(opt.options[i]);
@@ -150,7 +150,7 @@ RED.menu = (function() {
 
     }
     function createMenu(options) {
-        var topMenu = $("<ul/>",{class:"red-ui-menu dropdown-menu pull-right"});
+        var topMenu = $("<ul/>",{class:"red-ui-menu red-ui-menu-dropdown pull-right"});
 
         if (options.id) {
             topMenu.attr({id:options.id+"-submenu"});
@@ -239,13 +239,13 @@ RED.menu = (function() {
     function addItem(id,opt) {
         var item = createMenuItem(opt);
         if (opt.group) {
-            var groupItems = $("#"+id+"-submenu").children(".menu-group-"+opt.group);
+            var groupItems = $("#"+id+"-submenu").children(".red-ui-menu-group-"+opt.group);
             if (groupItems.length === 0) {
                 item.appendTo("#"+id+"-submenu");
             } else {
                 for (var i=0;i<groupItems.length;i++) {
                     var groupItem = groupItems[i];
-                    var label = $(groupItem).find(".menu-label").html();
+                    var label = $(groupItem).find(".red-ui-menu-label").html();
                     if (opt.label < label) {
                         $(groupItem).before(item);
                         break;

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -36,7 +36,7 @@ RED.deploy = (function() {
 
     function changeDeploymentType(type) {
         deploymentType = type;
-        $("#btn-deploy-icon").attr("src",deploymentTypes[type].img);
+        $("#red-ui-header-button-deploy-icon").attr("src",deploymentTypes[type].img);
     }
 
     /**
@@ -51,19 +51,19 @@ RED.deploy = (function() {
         var type = options.type || "default";
 
         if (type == "default") {
-            $('<li><span class="deploy-button-group button-group">'+
+            $('<li><span class="red-ui-deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
+              '<a id="red-ui-header-button-deploy" class="red-ui-deploy-button disabled" href="#">'+
-                '<span class="deploy-button-content">'+
+                '<span class="red-ui-deploy-button-content">'+
-                 '<img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> '+
+                 '<img id="red-ui-header-button-deploy-icon" src="red/images/deploy-full-o.png"> '+
                  '<span>'+RED._("deploy.deploy")+'</span>'+
                 '</span>'+
-                '<span class="deploy-button-spinner hide">'+
+                '<span class="red-ui-deploy-button-spinner hide">'+
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '<a id="btn-deploy-options" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
-              RED.menu.init({id:"btn-deploy-options",
+              RED.menu.init({id:"red-ui-header-button-deploy-options",
                   options: [
                       {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
                       {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.png",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
@@ -80,20 +80,20 @@ RED.deploy = (function() {
                 icon = options.icon;
             }
 
-            $('<li><span class="deploy-button-group button-group">'+
+            $('<li><span class="red-ui-deploy-button-group button-group">'+
-              '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
+              '<a id="red-ui-header-button-deploy" class="red-ui-deploy-button disabled" href="#">'+
-                '<span class="deploy-button-content">'+
+                '<span class="red-ui-deploy-button-content">'+
-                  (icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+
+                  (icon?'<img id="red-ui-header-button-deploy-icon" src="'+icon+'"> ':'')+
                   '<span>'+label+'</span>'+
                 '</span>'+
-                '<span class="deploy-button-spinner hide">'+
+                '<span class="red-ui-deploy-button-spinner hide">'+
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
         }
 
-        $('#btn-deploy').on("click", function(event) {
+        $('#red-ui-header-button-deploy').on("click", function(event) {
             event.preventDefault();
             save();
         });
@@ -107,10 +107,10 @@ RED.deploy = (function() {
                 window.onbeforeunload = function() {
                     return RED._("deploy.confirm.undeployedChanges");
                 }
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             } else {
                 window.onbeforeunload = null;
-                $("#btn-deploy").addClass("disabled");
+                $("#red-ui-header-button-deploy").addClass("disabled");
             }
         });
 
@@ -266,10 +266,10 @@ RED.deploy = (function() {
     }
     function restart() {
         var startTime = Date.now();
-        $(".deploy-button-content").css('opacity',0);
+        $(".red-ui-deploy-button-content").css('opacity',0);
-        $(".deploy-button-spinner").show();
+        $(".red-ui-deploy-button-spinner").show();
-        var deployWasEnabled = !$("#btn-deploy").hasClass("disabled");
+        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
-        $("#btn-deploy").addClass("disabled");
+        $("#red-ui-header-button-deploy").addClass("disabled");
         deployInflight = true;
         $("#red-ui-header-shade").show();
         $("#red-ui-editor-shade").show();
@@ -284,12 +284,12 @@ RED.deploy = (function() {
             }
         }).done(function(data,textStatus,xhr) {
             if (deployWasEnabled) {
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             }
             RED.notify('<p>'+RED._("deploy.successfulRestart")+'</p>',"success");
         }).fail(function(xhr,textStatus,err) {
             if (deployWasEnabled) {
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
             }
             if (xhr.status === 401) {
                 RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
@@ -304,8 +304,8 @@ RED.deploy = (function() {
             deployInflight = false;
             var delta = Math.max(0,300-(Date.now()-startTime));
             setTimeout(function() {
-                $(".deploy-button-content").css('opacity',1);
+                $(".red-ui-deploy-button-content").css('opacity',1);
-                $(".deploy-button-spinner").hide();
+                $(".red-ui-deploy-button-spinner").hide();
                 $("#red-ui-header-shade").hide();
                 $("#red-ui-editor-shade").hide();
                 $("#red-ui-palette-shade").hide();
@@ -314,7 +314,7 @@ RED.deploy = (function() {
         });
     }
     function save(skipValidation,force) {
-        if (!$("#btn-deploy").hasClass("disabled")) {
+        if (!$("#red-ui-header-button-deploy").hasClass("disabled")) {
             if (!RED.user.hasPermission("flows.write")) {
                 RED.notify(RED._("user.errors.deploy"),"error");
                 return;
@@ -411,9 +411,9 @@ RED.deploy = (function() {
             var nns = RED.nodes.createCompleteNodeSet();
 
             var startTime = Date.now();
-            $(".deploy-button-content").css('opacity',0);
+            $(".red-ui-deploy-button-content").css('opacity',0);
-            $(".deploy-button-spinner").show();
+            $(".red-ui-deploy-button-spinner").show();
-            $("#btn-deploy").addClass("disabled");
+            $("#red-ui-header-button-deploy").addClass("disabled");
 
             var data = {flows:nns};
 
@@ -476,7 +476,7 @@ RED.deploy = (function() {
                 RED.events.emit("deploy");
             }).fail(function(xhr,textStatus,err) {
                 RED.nodes.dirty(true);
-                $("#btn-deploy").removeClass("disabled");
+                $("#red-ui-header-button-deploy").removeClass("disabled");
                 if (xhr.status === 401) {
                     RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
                 } else if (xhr.status === 409) {
@@ -490,8 +490,8 @@ RED.deploy = (function() {
                 deployInflight = false;
                 var delta = Math.max(0,300-(Date.now()-startTime));
                 setTimeout(function() {
-                    $(".deploy-button-content").css('opacity',1);
+                    $(".red-ui-deploy-button-content").css('opacity',1);
-                    $(".deploy-button-spinner").hide();
+                    $(".red-ui-deploy-button-spinner").hide();
                     $("#red-ui-header-shade").hide();
                     $("#red-ui-editor-shade").hide();
                     $("#red-ui-palette-shade").hide();

packages/node_modules/@node-red/editor-client/src/js/ui/library.js

@@ -205,7 +205,7 @@ RED.library = (function() {
             '<a id="node-input-'+options.type+'-lookup" class="editor-button"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '</div>'
 
-            // '<ul class="dropdown-menu pull-right" role="menu">'+
+            // '<ul class="red-ui-menu-dropdown pull-right" role="menu">'+
             // '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
             // '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+
             // '</ul></div>'

packages/node_modules/@node-red/editor-client/src/js/user.js

@@ -178,9 +178,9 @@ RED.user = (function() {
     }
 
     function updateUserMenu() {
-        $("#btn-usermenu-submenu li").remove();
+        $("#red-ui-header-button-user-submenu li").remove();
         if (RED.settings.user.anonymous) {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-login",
                 label:RED._("menu.label.login"),
                 onselect: function() {
@@ -194,11 +194,11 @@ RED.user = (function() {
                 }
             });
         } else {
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-username",
                 label:"<b>"+RED.settings.user.username+"</b>"
             });
-            RED.menu.addItem("btn-usermenu",{
+            RED.menu.addItem("red-ui-header-button-user",{
                 id:"usermenu-item-logout",
                 label:RED._("menu.label.logout"),
                 onselect: function() {
@@ -213,7 +213,7 @@ RED.user = (function() {
         if (RED.settings.user) {
             if (!RED.settings.editorTheme || !RED.settings.editorTheme.hasOwnProperty("userMenu")) {
 
-                var userMenu = $('<li><a id="btn-usermenu" class="button hide" href="#"></a></li>')
+                var userMenu = $('<li><a id="red-ui-header-button-user" class="button hide" href="#"></a></li>')
                     .prependTo(".red-ui-header-toolbar");
                 if (RED.settings.user.image) {
                     $('<span class="user-profile"></span>').css({
@@ -223,7 +223,7 @@ RED.user = (function() {
                     $('<i class="fa fa-user"></i>').appendTo(userMenu.find("a"));
                 }
 
-                RED.menu.init({id:"btn-usermenu",
+                RED.menu.init({id:"red-ui-header-button-user",
                     options: []
                 });
                 updateUserMenu();

packages/node_modules/@node-red/editor-client/src/sass/base.scss

@@ -37,6 +37,19 @@ body {
     overflow:hidden;
 }
 
+#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
+    @include shade;
+    z-index: 2;
+}
+#red-ui-sidebar-shade  {
+    left: -8px;
+    top: -1px;
+    bottom: -1px;
+}
+#red-ui-full-shade {
+    @include shade;
+    z-index: 15;
+}
 
 a {
     color: #0088cc;

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -83,3 +83,13 @@ $diff-state-unchanged: #bbb;
 $diff-state-conflicted: purple;
 $diff-state-moved: #3f81b3;
 $diff-state-conflict: #9b45ce;
+
+$menuBackground: #f3f3f3;
+$menuDivider: #e5e5e5;
+$menuColor: #444;
+$menuActiveColor: #ffffff;
+$menuActiveBackground: #777;
+$menuDisabledColor: #999;
+$menuHoverColor: #ffffff;
+$menuHoverBackground: #999;
+$menuCaret: #e0e0e0;

packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss

@@ -14,231 +14,157 @@
  * limitations under the License.
  **/
 
-.dropdown-menu {
+.red-ui-menu-dropdown {
     position: absolute;
     top: 100%;
+    width: 200px;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
-    min-width: 160px;
-    padding: 5px 0;
     margin: 2px 0 0;
+    margin-left: 0px !important;
+    padding: 5px 0;
     list-style: none;
-    background-color: #ffffff;
+    background: $menuBackground;
-    border: 1px solid #ccc;
+    border: 1px solid $secondary-border-color;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    *border-right-width: 2px;
-    *border-bottom-width: 2px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-    -webkit-background-clip: padding-box;
+
-    -moz-background-clip: padding;
+    &.pull-right {
-    background-clip: padding-box;
+        right: 0;
+        left: auto;
+    }
+
+    .divider {
+        height: 1px;
+        margin: 9px 1px;
+        overflow: hidden;
+        background-color: $menuDivider;
+    }
+    & > li > a {
+        display: block;
+        padding: 3px 0 3px 32px;
+        clear: both;
+        font-weight: normal;
+        line-height: 20px;
+        color: $menuColor;
+        white-space: normal !important;
+    }
+
+    & > .active > a,
+    & > .active > a:hover,
+    & > .active > a:focus {
+        color: $menuActiveColor;
+        text-decoration: none;
+        background-color: $menuActiveBackground;
+        outline: 0;
+    }
+
+    & > .disabled > a,
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        color: $menuDisabledColor;
+    }
+
+    & > .disabled > a:hover,
+    & > .disabled > a:focus {
+        text-decoration: none;
+        cursor: default;
+        background-color: transparent;
+        background-image: none;
+    }
+
+    a {
+        .fa {
+            width: 20px;
+            margin-left: -25px;
+            margin-top: 3px;
+            text-align: center;
+        }
+        .fa-check-square {
+            display: none;
+        }
+        .fa-square {
+            display: inline-block;
+        }
+        &.active {
+            .fa-check-square {
+                display: inline-block;
+            }
+            .fa-square {
+                display: none;
+            }
+        }
+    }
+
 }
 
-.dropdown-menu.pull-right {
+.pull-right > .red-ui-menu-dropdown {
-    right: 0;
-    left: auto;
-}
-
-.pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
 
-.dropdown-menu .divider {
-    *width: 100%;
-    height: 1px;
-    margin: 9px 1px;
-    *margin: -5px 0 5px;
-    overflow: hidden;
-    background-color: #e5e5e5;
-    border-bottom: 1px solid #ffffff;
-}
 
-.dropdown-menu > li > a {
+.red-ui-menu-dropdown > li > a:hover,
-    display: block;
+.red-ui-menu-dropdown > li > a:focus,
-    padding: 3px 20px;
+.red-ui-menu-dropdown-submenu:hover > a,
-    clear: both;
+.red-ui-menu-dropdown-submenu:focus > a {
-    font-weight: normal;
+    color: $menuHoverColor;
-    line-height: 20px;
-    color: #333333;
-    white-space: nowrap;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
-    color: #ffffff;
     text-decoration: none;
-    background-color: #0081c2;
+    background-color: $menuHoverBackground;
-    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
-    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
-    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
-    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
 }
 
-.dropdown-menu > .active > a,
+.red-ui-menu-dropdown-submenu {
-.dropdown-menu > .active > a:hover,
+    position: relative;
-.dropdown-menu > .active > a:focus {
+    & > .red-ui-menu-dropdown {
-    color: #ffffff;
+        top: 0;
-    text-decoration: none;
+        left: 100%;
-    background-color: #0081c2;
+        margin-top: -6px;
-    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+        margin-left: -1px;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    }
-    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    &:hover > .red-ui-menu-dropdown {
-    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+      display: block;
-    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    }
-    background-repeat: repeat-x;
+    & > a:after {
-    outline: 0;
+      display: block;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+      float: right;
-}
+      width: 0;
-
+      height: 0;
-.dropdown-menu > .disabled > a,
+      margin-top: 5px;
-.dropdown-menu > .disabled > a:hover,
+      margin-right: -10px;
-.dropdown-menu > .disabled > a:focus {
+      border-color: transparent;
-    color: #999999;
+      border-left-color: $menuCaret;
-}
+      border-style: solid;
-
+      border-width: 5px 0 5px 5px;
-.dropdown-menu > .disabled > a:hover,
+      content: " ";
-.dropdown-menu > .disabled > a:focus {
+    }
-    text-decoration: none;
+    &.pull-left {
-    cursor: default;
+        float: none;
-    background-color: transparent;
+        & > .red-ui-menu-dropdown {
-    background-image: none;
+            left: -100%;
-    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+            margin-left: 10px;
-}
+        }
-
-
-
-.dropdown-submenu {
-  position: relative;
-}
-
-.dropdown-submenu > .dropdown-menu {
-  top: 0;
-  left: 100%;
-  margin-top: -6px;
-  margin-left: -1px;
-  -webkit-border-radius: 0 6px 6px 6px;
-     -moz-border-radius: 0 6px 6px 6px;
-          border-radius: 0 6px 6px 6px;
-}
-
-.dropdown-submenu:hover > .dropdown-menu {
-  display: block;
-}
-
-.dropdown-submenu > a:after {
-  display: block;
-  float: right;
-  width: 0;
-  height: 0;
-  margin-top: 5px;
-  margin-right: -10px;
-  border-color: transparent;
-  border-left-color: #cccccc;
-  border-style: solid;
-  border-width: 5px 0 5px 5px;
-  content: " ";
-}
-
-.dropdown-submenu:hover > a:after {
-  border-left-color: #ffffff;
-}
-
-.dropdown-submenu.pull-left {
-  float: none;
-}
-
-.dropdown-submenu.pull-left > .dropdown-menu {
-  left: -100%;
-  margin-left: 10px;
-  -webkit-border-radius: 6px 0 6px 6px;
-     -moz-border-radius: 6px 0 6px 6px;
-          border-radius: 6px 0 6px 6px;
-}
-
-
-
-.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
-    background: #999;
-}
-
-.dropdown-menu {
-    background: #f3f3f3;
-    border-color: $secondary-border-color;
-    &>li>a {
-        color: #444;
     }
 }
 
-
+.red-ui-menu-dropdown-submenu>a:after {
-.dropdown-menu * .fa-check-square {
-    display: none;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-check-square {
-    display: inline-block;
-}
-.dropdown-menu * .fa-square {
-    display: inline-block;
-    color: #e0e0e0;
-    margin-left: -25px;
-    margin-top: 3px;
-}
-.dropdown-menu * a.active > .fa-square {
     display: none;
 }
-
+.red-ui-menu-dropdown-submenu>a:before {
-/** Fix for unreachable dropdown menu **/
-.dropdown-menu  {
-    border-radius: 0;
-    width: 200px !important;
-    margin-left: 0px !important;
-}
-.dropdown-menu > li > a > i {
-    width: 10px;
-    text-align: center;
-    margin-left: -8px;
-}
-.dropdown-menu > li > a {
-     padding-left: 38px ;
-     text-indent: -8px ;
-     white-space: normal !important;
-}
-
-.dropdown-submenu>a:after {
-    display: none;
-}
-.dropdown-submenu>a:before {
     display: block;
     float: left;
     width: 0;
     height: 0;
     margin-top: 5px;
     margin-left: -30px;
+    /* Caret Arrow */
     border-color: transparent;
-    border-right-color: #e0e0e0;
+    border-right-color: $menuCaret;
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
 }
 
-.dropdown-submenu.disabled > a:before {
+.red-ui-menu-dropdown-submenu.disabled > a:before {
     border-right-color: #444;
 }
-.dropdown-submenu.pull-left>.dropdown-menu {
-    border-radius: 0;
-}

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -154,21 +154,8 @@
     background: $background-color;
     color: $workspace-button-color;
 }
-#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
-    @include shade;
-    z-index: 2;
-}
-#red-ui-sidebar-shade  {
-    left: -8px;
-    top: -1px;
-    bottom: -1px;
-}
-#red-ui-full-shade {
-    @include shade;
-    z-index: 15;
-}
 
-.dialog-form,#dialog-form, #node-config-dialog-edit-form {
+.dialog-form, #dialog-form, #node-config-dialog-edit-form {
     height: 100%;
 }
 

packages/node_modules/@node-red/editor-client/src/sass/forms.scss

@@ -764,8 +764,8 @@ select:focus:invalid:focus {
 .input-prepend select,
 .input-append .uneditable-input,
 .input-prepend .uneditable-input,
-.input-append .dropdown-menu,
+.input-append .red-ui-menu-dropdown,
-.input-prepend .dropdown-menu,
+.input-prepend .red-ui-menu-dropdown,
 .input-append .popover,
 .input-prepend .popover {
   font-size: 14px;

packages/node_modules/@node-red/editor-client/src/sass/header.scss

@@ -24,6 +24,7 @@ $deployDisabledButton: #444;
 $deployDisabledButtonHover: #555;
 $deployDisabledButtonActive: #444;
 
+$headerMenuColor: #C7C7C7;
 $headerMenuBackground: #121212;
 $headerMenuItemHover: #323232;
 $headerMenuItemDivider: #464646;
@@ -42,7 +43,7 @@ $headerMenuItemDivider: #464646;
     background: #000;
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: #C7C7C7;
+    color: $headerMenuColor;
     font-size: 14px;
 
     span.red-ui-header-logo {
@@ -95,7 +96,7 @@ $headerMenuItemDivider: #464646;
         font-size: 20px;
         padding: 0px 12px;
         text-decoration: none;
-        color: #C7C7C7;
+        color: $headerMenuColor;
         margin: auto 5px;
         vertical-align: middle;
         border-left: 2px solid #000;
@@ -129,7 +130,7 @@ $headerMenuItemDivider: #464646;
         }
     }
 
-    .deploy-button {
+    .red-ui-deploy-button {
         background: $deployButton;
         color: #eee !important;
 
@@ -143,7 +144,7 @@ $headerMenuItemDivider: #464646;
         }
     }
 
-    .deploy-button-spinner {
+    .red-ui-deploy-button-spinner {
         position: absolute;
         left: 0;
         top: 0;
@@ -157,35 +158,35 @@ $headerMenuItemDivider: #464646;
         }
     }
 
-    #btn-deploy {
+    #red-ui-header-button-deploy {
         padding: 4px 12px;
         &.disabled {
             cursor: default;
             background: $deployDisabledButton;
             color: #999 !important;
 
-            .deploy-button-content>img {
+            .red-ui-deploy-button-content>img {
                 opacity: 0.3;
             }
-            &+ #btn-deploy-options {
+            &+ #red-ui-header-button-deploy-options {
                 background: $deployDisabledButton;
                 color: #ddd;
             }
-            &+ #btn-deploy-options:hover {
+            &+ #red-ui-header-button-deploy-options:hover {
                 background: $deployDisabledButtonHover;
             }
-            &+ #btn-deploy-options:active {
+            &+ #red-ui-header-button-deploy-options:active {
                 background: $deployDisabledButton;
             }
         }
 
-        .deploy-button-content>img {
+        .red-ui-deploy-button-content>img {
             margin-right: 8px;
         }
     }
 
-    .deploy-button-group.open {
+    .red-ui-deploy-button-group.open {
-        #btn-deploy-options {
+        #red-ui-header-button-deploy-options {
             background: $activeButton !important;
         }
     }
@@ -196,88 +197,81 @@ $headerMenuItemDivider: #464646;
     }
 
 
-    ul.dropdown-menu {
+    ul.red-ui-menu-dropdown {
         background: $headerMenuBackground;
         border: 1px solid rgba(0,0,0,0.2);
         width: 250px !important;
         margin-top: 0;
-    }
+        li a {
+            color: $headerMenuColor;
+            padding: 3px 40px;
+            img {
+                margin-right: 10px;
+                padding: 4px;
+                border: 3px solid rgba(0,0,0,0);
+            }
 
-    ul.dropdown-menu li a {
+            &.active img {
-        color: #C7C7C7;
+                border: 3px solid #777677;
-        padding: 3px 40px;
+            }
-    }
 
-    ul.dropdown-menu li a img {
+            span.red-ui-menu-label-container {
-        margin-right: 10px;
+                width: 180px;
-        padding: 4px;
+                vertical-align: top;
-        border: 3px solid rgba(0,0,0,0);
+                display: inline-block;
-    }
+                text-indent: 0px;
-
+            }
-    ul.dropdown-menu li a.active img {
+            span.red-ui-menu-label {
-        border: 3px solid #777677;
+                font-size: 14px;
-    }
+                display: inline-block;
-
+                text-indent: 0px;
-    ul.dropdown-menu li a span.menu-label-container {
+            }
-        width: 180px;
+            span.red-ui-menu-sublabel {
-        vertical-align: top;
+                color: #aeaeae;
-        display: inline-block;
+                font-size: 13px;
-        text-indent: 0px;
+                display: inline-block;
-    }
+                text-indent: 0px;
-    ul.dropdown-menu li a span.menu-label {
+            }
-        font-size: 14px;
+        }
-        display: inline-block;
+        > li:hover > a,
-        text-indent: 0px;
+        > li:focus > a {
-    }
+            background: $headerMenuItemHover !important;
-    ul.dropdown-menu li a span.menu-sublabel {
+        }
-        color: #aeaeae;
+        li.divider {
-        font-size: 13px;
+            background: $headerMenuItemDivider;
-        display: inline-block;
+            border-bottom-color: $headerMenuItemHover;
-        text-indent: 0px;
+        }
-    }
+        li.disabled a {
-
+            color: #666;
-    ul.dropdown-menu > li:hover > a,
+        }
-    ul.dropdown-menu > li:focus > a {
+        > li.disabled:hover > a,
-        background: $headerMenuItemHover !important;
+        > li.disabled:focus > a {
-    }
+            background: none !important;
-
+        }
-    ul.dropdown-menu li.divider {
-        background: $headerMenuItemDivider;
-        border-bottom-color: $headerMenuItemHover;
-    }
-    ul.dropdown-menu li.disabled a {
-        color: #666;
-    }
-
-    ul.dropdown-menu > li.disabled:hover > a,
-    ul.dropdown-menu > li.disabled:focus > a {
-        background: none !important;
     }
 
     /* Deploy menu customisations */
-    ul#btn-deploy-options-submenu {
+    ul#red-ui-header-button-deploy-options-submenu {
         width: 300px !important;
+        li a {
+            padding: 10px 30px;
+            color: #fff;
+            span.red-ui-menu-label {
+                font-size: 16px;
+                display: inline-block;
+                text-indent: 0px;
+            }
+            > i.fa {
+                display: none !important;
+            }
+        }
     }
-    ul#btn-deploy-options-submenu li a span.menu-label {
-        font-size: 16px;
-        display: inline-block;
-        text-indent: 0px;
-    }
-    ul#btn-deploy-options-submenu li a {
-        padding: 10px 30px;
-        color: #fff;
-    }
-    ul#btn-deploy-options-submenu li a > i.fa {
-        display: none !important;
-    }
-
     /* User menu customisations */
-    ul#btn-usermenu-submenu li a#btn-username > .menu-label {
+    #usermenu-item-username > .red-ui-menu-label {
-        font-size: 16px;
         color: #fff;
     }
 
-    #btn-usermenu .user-profile {
+    #red-ui-header-button-user .user-profile {
         background-position: center center;
         background-repeat: no-repeat;
         background-size: contain;