From 4418f8bfced20a0d2afedf43e40b19ab80472e53 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 9 May 2019 19:22:40 +0100
Subject: [PATCH] Better CSS namespace of base form elements

---
 .../@node-red/editor-client/src/js/red.js     |    2 +
 .../editor-client/src/js/ui/clipboard.js      |   14 +-
 .../src/js/ui/common/searchBox.js             |    1 +
 .../src/js/ui/common/treeList.js              |    2 +-
 .../src/js/ui/common/typedInput.js            |    9 +-
 .../@node-red/editor-client/src/js/ui/diff.js |    4 +-
 .../editor-client/src/js/ui/library.js        |   10 +-
 .../editor-client/src/js/ui/palette-editor.js |    5 -
 .../editor-client/src/js/ui/palette.js        |    1 +
 .../src/js/ui/projects/projectSettings.js     |    2 +-
 .../src/js/ui/projects/projectUserSettings.js |    6 +-
 .../src/js/ui/projects/projects.js            |   70 +-
 .../editor-client/src/js/ui/sidebar.js        |    1 +
 .../@node-red/editor-client/src/js/user.js    |    6 +-
 .../editor-client/src/sass/base.scss          |   10 +-
 .../editor-client/src/sass/colors.scss        |   16 +
 .../editor-client/src/sass/debug.scss         |    4 +-
 .../editor-client/src/sass/diff.scss          |   10 +-
 .../editor-client/src/sass/dropdownMenu.scss  |    2 +
 .../editor-client/src/sass/editor.scss        |   98 +-
 .../editor-client/src/sass/flow.scss          |    1 +
 .../editor-client/src/sass/forms.scss         | 1423 +++++++++--------
 .../editor-client/src/sass/jquery.scss        |    4 +-
 .../editor-client/src/sass/keyboard.scss      |    8 +-
 .../editor-client/src/sass/library.scss       |   20 +-
 .../editor-client/src/sass/mixins.scss        |   39 -
 .../src/sass/palette-editor.scss              |    4 +-
 .../editor-client/src/sass/popover.scss       |    3 +-
 .../editor-client/src/sass/projects.scss      |   73 +-
 .../editor-client/src/sass/sidebar.scss       |   12 +-
 .../editor-client/src/sass/tab-info.scss      |    4 +-
 .../src/sass/ui/common/nodeList.scss          |    2 +-
 .../src/sass/ui/common/searchBox.scss         |    2 +-
 .../src/sass/ui/common/treeList.scss          |    2 +-
 .../src/sass/ui/common/typedInput.scss        |   12 +-
 .../editor-client/src/sass/workspace.scss     |   40 +
 .../@node-red/nodes/core/io/10-mqtt.html      |    8 +-
 37 files changed, 1018 insertions(+), 912 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js
index a060e13d6..f6b7d65d4 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/red.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/red.js
@@ -578,6 +578,8 @@ var RED = (function() {
             options.apiRootUrl = options.apiRootUrl+"/";
         }
         options.target = $("#red-ui-editor");
+        options.target.addClass("red-ui-editor");
+        
         buildEditor(options);
         RED.i18n.init(options, function() {
             RED.settings.init(options, loadEditor);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
index e6ec89146..d4115ac63 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
@@ -28,13 +28,18 @@ RED.clipboard = (function() {
     var libraryBrowser;
 
     function setupDialogs() {
-        dialog = $('<div id="red-ui-clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>')
+        dialog = $('<div id="red-ui-clipboard-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
             .appendTo("#red-ui-editor")
             .dialog({
                 modal: true,
                 autoOpen: false,
                 width: 700,
                 resizable: false,
+                classes: {
+                    "ui-dialog": "red-ui-editor-dialog",
+                    "ui-dialog-titlebar-close": "hide",
+                    "ui-widget-overlay": "red-ui-editor-dialog"
+                },
                 buttons: [
                     {
                         id: "red-ui-clipboard-dialog-cancel",
@@ -148,9 +153,6 @@ RED.clipboard = (function() {
                         }
                     }
                 ],
-                open: function(e) {
-                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
-                },
                 close: function(e) {
                     if (popover) {
                         popover.close(true);
@@ -171,7 +173,7 @@ RED.clipboard = (function() {
                 '</span>'+
             '</div>'+
             '<div style="height: 400px; position:relative; border:1px solid #999;">'+
-                '<div style="position: absolute; top:0;left:0;bottom:0;width:120px;background: #f3f3f3;">'+
+                '<div class="red-ui-clipboard-dialog-tabs">'+
                     '<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
                 '</div>'+
                 '<div id="red-ui-clipboard-dialog-export-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
@@ -199,7 +201,7 @@ RED.clipboard = (function() {
 
         importNodesDialog =
             '<div style="height: 400px; position:relative; border:1px solid #999; margin-bottom: 12px">'+
-                '<div style="position: absolute; top:0;left:0;bottom:0;width:120px;background: #f3f3f3;">'+
+                '<div class="red-ui-clipboard-dialog-tabs">'+
                     '<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
                 '</div>'+
                 '<div id="red-ui-clipboard-dialog-import-tabs-content" class="red-ui-clipboard-dialog-tabs-content">'+
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
index 9ca16bcf7..3f3aa87f1 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js
@@ -35,6 +35,7 @@
             this.currentTimeout = null;
             this.lastSent = "";
             this.element.val("");
+            this.element.addClass("red-ui-searchBox-input");
             this.uiContainer = this.element.wrap("<div>").parent();
             this.uiContainer.addClass("red-ui-searchBox-container");
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index 30137b3e7..ef7b4dd54 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -276,7 +276,7 @@
             }
             if (item.hasOwnProperty('selected')) {
                 var selectWrapper = $('<span class="red-ui-treeList-icon"></span>').appendTo(label);
-                var cb = $('<input type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
+                var cb = $('<input class="red-ui-treeList-checkbox" type="checkbox">').prop('checked',item.selected).appendTo(selectWrapper);
                 cb.on('click', function(e) {
                     e.stopPropagation();
                 });
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
index 2de2c4f47..b22af7c6c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -124,7 +124,7 @@
                 }
                 var contextStores = RED.settings.context.stores;
                 var contextOptions = contextStores.map(function(store) {
-                    return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database" style="color: #'+(store==='memory'?'ddd':'777')+'"></i>'}
+                    return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database"></i>'}
                 })
                 if (contextOptions.length < 2) {
                     allOptions.flow.options = [];
@@ -138,12 +138,12 @@
             var that = this;
 
             this.disarmClick = false;
-            this.input = $('<input type="text"></input>');
+            this.input = $('<input class="red-ui-typedInput-input" type="text"></input>');
             this.input.insertAfter(this.element);
             this.input.val(this.element.val());
             this.element.addClass('red-ui-typedInput');
             this.uiWidth = this.element.outerWidth();
-            this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input');
+            this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input-wrap');
             this.uiSelect = this.elementDiv.wrap( "<div>" ).parent();
             var attrStyle = this.element.attr('style');
             var m;
@@ -171,7 +171,7 @@
 
             this.options.types = this.options.types||Object.keys(allOptions);
 
-            this.selectTrigger = $('<button tabindex="0"></button>').prependTo(this.uiSelect);
+            this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
             $('<i class="red-ui-typedInput-icon fa fa-sort-desc"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
 
             this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
@@ -363,7 +363,6 @@
                 var container = $('<div class="red-ui-typedInput-container"></div>').css({
                     position:"absolute",
                     top:0,
-                    left:-1000
                 }).appendTo(document.body);
                 var newTrigger = label.clone().appendTo(container);
                 labelWidth = newTrigger.outerWidth();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
index 3951c4cdf..fa77480eb 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js
@@ -1029,9 +1029,9 @@ RED.diff = (function() {
         }
 
         var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
-        var localRadio = $('<input>',{id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
+        var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
         var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
-        var remoteRadio = $('<input>',{id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
+        var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
         if (state === 'local') {
             localRadio.prop('checked',true);
         } else if (state === 'remote') {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
index 7e5590161..726eee07d 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js
@@ -433,6 +433,11 @@ RED.library = (function() {
                 autoOpen: false,
                 width: 800,
                 resizable: false,
+                classes: {
+                    "ui-dialog": "red-ui-editor-dialog",
+                    "ui-dialog-titlebar-close": "hide",
+                    "ui-widget-overlay": "red-ui-editor-dialog"
+                },
                 buttons: [
                     {
                         text: RED._("common.label.cancel"),
@@ -449,10 +454,7 @@ RED.library = (function() {
                             $( this ).dialog( "close" );
                         }
                     }
-                ],
-                open: function(e) {
-                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
-                }
+                ]
             });
 
             saveLibraryBrowser = RED.library.createBrowser({
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 7ed97a0de..fc42fb73b 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -235,12 +235,7 @@ RED.palette.editor = (function() {
                                 if (def && def.color) {
                                     swatch.css({background:RED.utils.getNodeColor(t,def)});
                                     swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
-
-                                } else {
-                                    swatch.css({background:"#eee",border:"1px dashed #999"})
                                 }
-                            } else {
-                                swatch.css({background:"#eee",border:"1px dashed #999"})
                             }
                         }
                         nodeEntries[module].setUseCount[setName] = inUseCount;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index ee702f8e4..4f54349f9 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -535,6 +535,7 @@ RED.palette = (function() {
             sidebarControls.toggle("slide", { direction: "left" }, 200);
         })
         $("#red-ui-palette").on("mouseleave", function() {
+            sidebarControls.stop(false,true);
             sidebarControls.hide();
         })
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
index b4707e97b..1ea2bd869 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
@@ -231,7 +231,7 @@ RED.projects.settings = (function() {
         var pane = $('<div id="red-ui-project-settings-tab-main" class="red-ui-project-settings-tab-pane node-help"></div>');
         $('<h1>').text(activeProject.name).appendTo(pane);
         var summary = $('<div style="position: relative">').appendTo(pane);
-        var summaryContent = $('<div></div>',{style:"color: #999"}).appendTo(summary);
+        var summaryContent = $('<div></div>').appendTo(summary);
         updateProjectSummary(activeProject.summary, summaryContent);
         if (RED.user.hasPermission("projects.write")) {
             $('<button class="editor-button editor-button-small" style="float: right;">' + RED._('sidebar.project.editDescription') + '</button>')
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
index f3533a19b..b818ab740 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectUserSettings.js
@@ -27,7 +27,7 @@ RED.projects.userSettings = (function() {
         var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.committerDetail")).appendTo(pane);
 
         var gitconfigContainer = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
-        $('<div style="color:#aaa;"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
+        $('<div class="red-ui-settings-section-description"></div>').appendTo(gitconfigContainer).text(RED._("editor:sidebar.project.userSettings.committerTip"));
 
         var row = $('<div class="red-ui-settings-row"></div>').appendTo(gitconfigContainer);
         $('<label for=""></label>').text(RED._("editor:sidebar.project.userSettings.userName")).appendTo(row);
@@ -45,7 +45,7 @@ RED.projects.userSettings = (function() {
         var container = $('<div class="red-ui-settings-section"></div>').appendTo(pane);
         var popover;
         var title = $('<h3></h3>').text(RED._("editor:sidebar.project.userSettings.sshKeys")).appendTo(container);
-        var subtitle = $('<div style="color:#aaa;"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
+        var subtitle = $('<div class="red-ui-settings-section-description"></div>').appendTo(container).text(RED._("editor:sidebar.project.userSettings.sshKeysTip"));
 
         var addKeyButton = $('<button id="user-settings-gitconfig-add-key" class="editor-button editor-button-small" style="float: right; margin-right: 10px;">'+RED._("editor:sidebar.project.userSettings.add")+'</button>')
             .appendTo(subtitle)
@@ -95,7 +95,7 @@ RED.projects.userSettings = (function() {
         var addKeyDialogBody = $('<div>').appendTo(addKeyDialog);
 
         row = $('<div class="red-ui-settings-row"></div>').appendTo(addKeyDialogBody);
-        $('<div style="color:#aaa;"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
+        $('<div class="red-ui-settings-section-description"></div>').appendTo(row).text(RED._("editor:sidebar.project.userSettings.addSshKeyTip"));
         // var bg = $('<div></div>',{class:"button-group", style:"text-align: center"}).appendTo(row);
         // var addLocalButton = $('<button class="editor-button toggle selected">use local key</button>').appendTo(bg);
         // var uploadButton = $('<button class="editor-button toggle">upload key</button>').appendTo(bg);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
index 17160872e..01d147f60 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
@@ -852,14 +852,14 @@ RED.projects = (function() {
                         var row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(body);
                         $('<label>'+RED._("projects.encryption-config.credentials")+'</label>').appendTo(row);
 
-                        var credentialsBox = $('<div style="width: 550px">').appendTo(row);
-                        var credentialsRightBox = $('<div style="min-height:150px; box-sizing: border-box; float: right; vertical-align: top; width: 331px; margin-left: -1px; padding: 15px; margin-top: -15px; border: 1px solid #ccc; border-radius: 3px;  display: inline-block">').appendTo(credentialsBox);
-                        var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px;  display: inline-block">').appendTo(credentialsBox);
+                        var credentialsBox = $('<div class="red-ui-projects-dialog-credentials-box">').appendTo(row);
+                        var credentialsRightBox = $('<div class="red-ui-projects-dialog-credentials-box-right">').appendTo(credentialsBox);
+                        var credentialsLeftBox = $('<div class="red-ui-projects-dialog-credentials-box-left">').appendTo(credentialsBox);
 
-                        var credentialsEnabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
-                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
-                        var credentialsDisabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
-                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
+                        var credentialsEnabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-enabled"></div>').appendTo(credentialsLeftBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled"> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
+                        var credentialsDisabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-disabled"></div>').appendTo(credentialsLeftBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="disabled"> <i class="fa fa-unlock"></i> <span>'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
 
                         credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
                             var val = $(this).val();
@@ -881,15 +881,8 @@ RED.projects = (function() {
                                 $(".projects-encryption-disabled-row").show();
                             }
 
-                            toEnable.css({
-                                borderColor: "#ccc",
-                                borderRightColor: "white"
-                            });
-                            toDisable.css({
-                                borderColor: "white",
-                                borderRightColor: "#ccc"
-                            });
-
+                            toEnable.removeClass("disabled");
+                            toDisable.addClass("disabled");
                             validateForm();
                         })
 
@@ -1266,14 +1259,14 @@ RED.projects = (function() {
                         row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-empty"></div>').appendTo(container);
                         $('<label>'+RED._("projects.create.credentials")+'</label>').appendTo(row);
 
-                        var credentialsBox = $('<div style="width: 550px">').appendTo(row);
-                        var credentialsRightBox = $('<div style="min-height:150px; box-sizing: border-box; float: right; vertical-align: top; width: 331px; margin-left: -1px; padding: 15px; margin-top: -15px; border: 1px solid #ccc; border-radius: 3px;  display: inline-block">').appendTo(credentialsBox);
-                        var credentialsLeftBox = $('<div style="vertical-align: top; width: 220px;  display: inline-block">').appendTo(credentialsBox);
+                        var credentialsBox = $('<div class="red-ui-projects-dialog-credentials-box">').appendTo(row);
+                        var credentialsRightBox = $('<div class="red-ui-projects-dialog-credentials-box-right">').appendTo(credentialsBox);
+                        var credentialsLeftBox = $('<div class="red-ui-projects-dialog-credentials-box-left">').appendTo(credentialsBox);
 
-                        var credentialsEnabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid #ccc;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: white;"></div>').appendTo(credentialsLeftBox);
-                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" checked style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="enabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-lock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.enable-encryption")+'</span></label>').appendTo(credentialsEnabledBox);
-                        var credentialsDisabledBox = $('<div class="form-row" style="padding:  7px 8px 3px 8px;border: 1px solid white;border-radius: 4px;border-top-right-radius: 0;border-bottom-right-radius: 0;border-right-color: #ccc; "></div>').appendTo(credentialsLeftBox);
-                        $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" name="projects-encryption-type" value="disabled"> <i style="font-size: 1.4em; margin-right: 8px; vertical-align: middle; color: #888;" class="fa fa-unlock"></i> <span style="vertical-align: middle;">'+RED._("projects.create.disable-encryption")+'</span></label>').appendTo(credentialsDisabledBox);
+                        var credentialsEnabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-enabled"></div>').appendTo(credentialsLeftBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="enabled"> <i class="fa fa-lock"></i> <span>'+RED._("projects.encryption-config.enable")+'</span></label>').appendTo(credentialsEnabledBox);
+                        var credentialsDisabledBox = $('<div class="form-row red-ui-projects-dialog-credentials-box-disabled disabled"></div>').appendTo(credentialsLeftBox);
+                        $('<label class="red-ui-projects-edit-form-inline-label"><input type="radio" name="projects-encryption-type" value="disabled"> <i class="fa fa-unlock"></i> <span>'+RED._("projects.encryption-config.disable")+'</span></label>').appendTo(credentialsDisabledBox);
 
                         credentialsLeftBox.find("input[name=projects-encryption-type]").on("click", function(e) {
                             var val = $(this).val();
@@ -1294,15 +1287,8 @@ RED.projects = (function() {
                                 $(".projects-encryption-disabled-row").show();
 
                             }
-
-                            toEnable.css({
-                                borderColor: "#ccc",
-                                borderRightColor: "white"
-                            });
-                            toDisable.css({
-                                borderColor: "white",
-                                borderRightColor: "#ccc"
-                            })
+                            toEnable.removeClass("disabled");
+                            toDisable.addClass("disabled");
                             validateForm();
                         })
 
@@ -1689,7 +1675,7 @@ RED.projects = (function() {
         dialogBody.append(container);
         dialog.dialog('option','title',screen.title||"");
         dialog.dialog("open");
-        dialog.dialog({position: { 'my': 'center top', 'at': 'center top+10%', 'of': window }});
+        dialog.dialog({position: { 'my': 'center top', 'at': 'center top+20', 'of': window }});
     }
 
     function createProjectList(options) {
@@ -2217,25 +2203,17 @@ RED.projects = (function() {
     }
 
     function init() {
-        dialog = $('<div id="red-ui-projects-dialog" class="hide node-red-dialog red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
+        dialog = $('<div id="red-ui-projects-dialog" class="hide red-ui-projects-edit-form"><form class="form-horizontal"></form><div class="red-ui-component-spinner hide"><img src="red/images/spin.svg"/></div></div>')
             .appendTo("#red-ui-editor")
             .dialog({
                 modal: true,
                 autoOpen: false,
                 width: 600,
                 resizable: false,
-                open: function(e) {
-                    $(this).parent().find(".ui-dialog-titlebar-close").hide();
-                    // $("#red-ui-header-shade").show();
-                    // $("#red-ui-editor-shade").show();
-                    // $("#red-ui-palette-shade").show();
-                    // $("#red-ui-sidebar-shade").show();
-                },
-                close: function(e) {
-                    // $("#red-ui-header-shade").hide();
-                    // $("#red-ui-editor-shade").hide();
-                    // $("#red-ui-palette-shade").hide();
-                    // $("#red-ui-sidebar-shade").hide();
+                classes: {
+                    "ui-dialog": "red-ui-editor-dialog",
+                    "ui-dialog-titlebar-close": "hide",
+                    "ui-widget-overlay": "red-ui-editor-dialog"
                 }
             });
         dialogBody = dialog.find("form");
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
index cc544ea7a..9e89add0c 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@@ -178,6 +178,7 @@ RED.sidebar = (function() {
         })
         $("#red-ui-sidebar-separator").on("mouseleave", function() {
             if (!sidebarSeparator.dragging) {
+                sidebarControls.stop(false,true);
                 sidebarControls.hide();
             }
         });
diff --git a/packages/node_modules/@node-red/editor-client/src/js/user.js b/packages/node_modules/@node-red/editor-client/src/js/user.js
index 05a84077a..f2b53c31a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/user.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/user.js
@@ -30,7 +30,11 @@ RED.user = (function() {
 
         dialog.dialog({
             autoOpen: false,
-            dialogClass: "ui-dialog-no-close",
+            classes: {
+                "ui-dialog": "red-ui-editor-dialog",
+                "ui-dialog-titlebar-close": "hide",
+                "ui-widget-overlay": "red-ui-editor-dialog"
+            },
             modal: true,
             closeOnEscape: !!opts.cancelable,
             width: 600,
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index 6a899260b..4750723aa 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -14,9 +14,11 @@
 * limitations under the License.
 **/
 
-body {
-    font-size: 14px;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+
+.red-ui-editor {
+    font-size: $primary-font-size;
+    font-family: $primary-font;
     padding: 0;
     margin: 0;
     background: $primary-background;
@@ -137,7 +139,7 @@ i.spinner {
 
 code, pre {
     padding: 0 3px 2px;
-    font-family: monospace;
+    font-family: $monospace-font;
     font-size: 14px;
     color: #333333;
     border-radius: 1px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 5b8df81fa..7150ea3d9 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -14,14 +14,23 @@
  * limitations under the License.
  **/
 
+$primary-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+$primary-font-size: 14px;
+$monospace-font: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace;
+
+
 $primary-background: #f3f3f3;
 $primary-text-color: #555;
+$secondary-text-color: #999;
+
+$form-background: #fff;
 
 $form-placeholder-color: #bbbbbb;
 $form-text-color: $primary-text-color;
 $form-input-focus-color:  rgba(85,150,230,0.8);
 $form-input-border-color:  #ccc;
 $form-input-border-selected-color:  #aaa;
+$form-input-border-error-color: rgb(214, 97, 95);
 $form-input-background: #fff;
 $form-input-background-disabled: #eee;
 
@@ -101,6 +110,11 @@ $menuHoverColor: #ffffff;
 $menuHoverBackground: #999;
 $menuCaret: #e0e0e0;
 
+
+$keyboard-help-key-border: #ddd;
+$keyboard-help-key-background: #f6f6f6;
+$keyboard-help-key-shadow: #999;
+
 $view-navigator-background: rgba(245,245,245,0.8);
 
 
@@ -114,3 +128,5 @@ $link-link-color: #ccc;
 $link-link-active-color: #ff7f0e;
 $link-subflow-color: #bbb;
 $link-unknown-color: #f00;
+
+$clipboard-textarea-background: #F3E7E7;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index 69227e1b6..f40502d14 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -165,7 +165,7 @@
 }
 .red-ui-debug-msg-element {
     color: #333;
-    font-family: Menlo, monospace;
+    font-family: $monospace-font;
     font-size: 13px !important;
     line-height: 1.3em;
 }
@@ -211,7 +211,7 @@
     display:none;
 }
 .red-ui-debug-msg-object-entry pre {
-    font-family: Menlo, monospace;
+    font-family: $monospace-font;
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
index d9dcd8b5f..7364f44ac 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss
@@ -447,7 +447,7 @@
     text-align: center;
     border-left: 1px solid #eee;
     margin:0;
-    input {
+    input.red-ui-diff-selectbox-input {
         margin-top: 8px;
     }
 
@@ -538,7 +538,7 @@ ul.red-ui-deploy-dialog-confirm-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: monospace;
+            font-family: $monospace-font;
             text-align: right;
             color: #999;
             background: #f6f6f6;
@@ -554,7 +554,7 @@ ul.red-ui-deploy-dialog-confirm-list {
             border-left: 1px solid $secondary-border-color;
         }
         td.linetext {
-            font-family: monospace;
+            font-family: $monospace-font;
             white-space: pre-wrap;
             padding: 1px 5px;
             border-left: 1px solid #ccc;
@@ -612,7 +612,7 @@ ul.red-ui-deploy-dialog-confirm-list {
         }
         tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: monospace;
+                font-family: $monospace-font;
             }
             background: #f3f3f3;
             padding: 5px 10px 5px 0;
@@ -648,7 +648,7 @@ ul.red-ui-deploy-dialog-confirm-list {
         }
 
         tr.red-ui-diff-text-header > td:not(.flow-diff) {
-            font-family: monospace;
+            font-family: $monospace-font;
             padding: 5px 10px;
             text-align: left;
             color: #666;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 6fb8cf019..730b4c02b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -15,6 +15,8 @@
  **/
 
 .red-ui-menu-dropdown {
+    font-family: $primary-font;
+    font-size: $primary-font-size;
     position: absolute;
     top: 100%;
     width: 200px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index 0379bf127..4b6755ce9 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -49,10 +49,10 @@
     position: relative;
     box-sizing: border-box;
     padding: 0.1px; // prevent margin collapsing
-    .dialog-form,#dialog-form, #node-config-dialog-edit-form {
-        margin: 20px;
-        height: calc(100% - 40px);
-    }
+    // .dialog-form,#dialog-form, #node-config-dialog-edit-form {
+    //     margin: 20px;
+    //     height: calc(100% - 40px);
+    // }
 }
 .red-ui-tray-content {
     overflow: auto;
@@ -153,7 +153,8 @@
         cursor: default;
     }
 }
-.red-ui-tray-resize-button {
+a.red-ui-tray-resize-button,
+button.red-ui-tray-resize-button {
     @include workspace-button;
     display: block;
     height: 37px;
@@ -165,44 +166,55 @@
     color: $workspace-button-color;
 }
 
-.dialog-form, #dialog-form, #node-config-dialog-edit-form {
-    height: 100%;
+.red-ui-editor {
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 20px;
+        height: calc(100% - 40px);
+    }
+}
+.red-ui-editor-dialog {
+    .dialog-form, #dialog-form, #node-config-dialog-edit-form {
+        margin: 0;
+        height:100%;
+    }
 }
 
-.input-error {
-    border-color: rgb(214, 97, 95) !important;
-}
+.red-ui-editor,.red-ui-editor-dialog {
 
-.form-row {
-    clear: both;
-    color: $form-text-color;
-    margin-bottom:12px;
-}
-.form-row label {
-    display: inline-block;
-    width: 100px;
-}
-.form-row input, .form-row div[contenteditable="true"] {
-    width:70%;
-}
+    .input-error {
+        border-color: $form-input-border-error-color !important;
+    }
 
-.form-tips {
-    background: #ffe;
-    padding: 8px;
-    border-radius: 2px;
-    border: 1px solid $secondary-border-color;
-    max-width: 450px;
-}
-.form-tips code {
-    border: none;
-    padding: auto;
-}
-.form-tips a {
-    text-decoration: underline;
-}
+    .form-row {
+        clear: both;
+        color: $form-text-color;
+        margin-bottom:12px;
+    }
+    .form-row label {
+        display: inline-block;
+        width: 100px;
+    }
+    .form-row input, .form-row div[contenteditable="true"] {
+        width:70%;
+    }
+    .form-tips {
+        background: #ffe;
+        padding: 8px;
+        border-radius: 2px;
+        border: 1px solid $secondary-border-color;
+        max-width: 450px;
+    }
+    .form-tips code {
+        border: none;
+        padding: auto;
+    }
+    .form-tips a {
+        text-decoration: underline;
+    }
 
-.form-warning {
-    border-color: #d6615f;
+    .form-warning {
+        border-color: #d6615f;
+    }
 }
 
 .node-text-editor {
@@ -221,8 +233,8 @@
     border:1px solid #ccc;
     border-radius:5px;
     overflow: hidden;
-    font-size: 14px !important;
-    font-family: Menlo, Consolas, 'DejaVu Sans Mono', Courier, monospace !important;
+    font-size: $primary-font-size !important;
+    font-family: $monospace-font !important;
     height: 100%;
 
     &.red-ui-editor-text-container-toolbar {
@@ -230,7 +242,8 @@
     }
 }
 
-.editor-button {
+a.editor-button,
+button.editor-button {
     @include workspace-button;
     height: 34px;
     line-height: 32px;
@@ -245,7 +258,8 @@
 }
 
 
-.editor-button-small {
+a.editor-button-small,
+button.editor-button-small {
     height: 20px;
     min-width: 20px;
     line-height: 18px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index aaa0f53ef..85e2821f6 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -271,6 +271,7 @@ g.link_unknown path.link_line {
 .port_tooltip_label {
     stroke-width: 0;
     fill: $popover-color;
+    font-family: $primary-font;
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
index c340908a2..7448e352e 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss
@@ -23,714 +23,717 @@
 * Designed and built with all the love in the world by @mdo and @fat.
 */
 
-button,
-input,
-select,
-div[contenteditable="true"],
-textarea {
-    margin: 0;
-    font-size: 100%;
-    vertical-align: middle;
-}
-
-button,
-div[contenteditable="true"],
-input {
-    *overflow: visible;
-    line-height: normal;
-}
-
-button::-moz-focus-inner,
-div[contenteditable="true"]::-moz-focus-inner,
-input::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-}
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-    cursor: pointer;
-    -webkit-appearance: button;
-}
-
-label,
-select,
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-input[type="radio"],
-input[type="checkbox"] {
-    cursor: pointer;
-}
-
-input[type="search"] {
-    box-sizing: content-box;
-}
-
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-}
-
-textarea {
-    overflow: auto;
-    vertical-align: top;
-}
-
-form {
-    margin: 0 0 20px;
-}
-
-fieldset {
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-legend {
-    display: block;
-    width: 100%;
-    padding: 0;
-    margin-bottom: 20px;
-    font-size: 21px;
-    line-height: 40px;
-    color: #333333;
-    border: 0;
-    border-bottom: 1px solid #e5e5e5;
-}
-
-legend small {
-    font-size: 15px;
-    color: #999999;
-}
-
-
-label,
-input,
-div[contenteditable="true"],
-button,
-select,
-textarea {
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 20px;
-}
-
-input,
-div[contenteditable="true"],
-button,
-select,
-textarea {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-label {
-    display: block;
-    margin-bottom: 5px;
-}
-
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-div[contenteditable="true"],
-.uneditable-input {
-    box-sizing: border-box;
-    display: inline-block;
-    height: 34px;
-    padding: 6px 6px;
-    margin-bottom: 10px;
-    font-size: 14px;
-    line-height: 20px;
-    color: $form-text-color;
-    vertical-align: middle;
-    border-radius: 4px;
-}
-
-input,
-textarea,
-div[contenteditable="true"],
-.uneditable-input {
-    width: 206px;
-}
-
-textarea {
-    height: auto;
-}
-
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"],
-div[contenteditable="true"],
-.uneditable-input {
-    background-color: $form-input-background;
-    border: 1px solid $form-input-border-color;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus,
-div[contenteditable="true"]:focus,
-.uneditable-input:focus {
-    border-color: $form-input-focus-color;
-    outline: 0;
-    outline: thin dotted \9;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-    margin: 4px 0 0;
-    margin-top: 1px \9;
-    *margin-top: 0;
-    line-height: normal;
-}
-
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-    width: auto;
-}
-
-select,
-input[type="file"] {
-    height: 34px;
-    line-height: 34px;
-}
-
-select {
-    width: 220px;
-    background-color: $form-input-background;
-    border: 1px solid $form-input-border-color;
-}
-
-select[multiple],
-select[size] {
-    height: auto;
-}
-
-select:focus,
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-    outline: thin dotted #333;
-    outline: 2px auto $form-input-focus-color;
-    outline-offset: -3px;
-}
-
-.uneditable-input,
-.uneditable-textarea {
-    color: #999999;
-    cursor: not-allowed;
-    background-color: #fcfcfc;
-    border-color: #cccccc;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
-}
-
-.uneditable-input {
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.uneditable-textarea {
-    width: auto;
-    height: auto;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-    color: $form-placeholder-color;
-}
-
-input:-ms-input-placeholder,
-div[contenteditable="true"]:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-    color: $form-placeholder-color;
-}
-
-input::-webkit-input-placeholder,
-div[contenteditable="true"]::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
-    color: $form-placeholder-color;
-}
-
-.radio,
-.checkbox {
-    min-height: 20px;
-    padding-left: 20px;
-}
-
-.radio input[type="radio"],
-.checkbox input[type="checkbox"] {
-    float: left;
-    margin-left: -20px;
-}
-
-.controls > .radio:first-child,
-.controls > .checkbox:first-child {
-    padding-top: 5px;
-}
-
-.radio.inline,
-.checkbox.inline {
-    display: inline-block;
-    padding-top: 5px;
-    margin-bottom: 0;
-    vertical-align: middle;
-}
-
-.radio.inline + .radio.inline,
-.checkbox.inline + .checkbox.inline {
-    margin-left: 10px;
-}
-
-.input-mini {
-    width: 60px;
-}
-
-.input-small {
-    width: 90px;
-}
-
-.input-medium {
-    width: 150px;
-}
-
-.input-large {
-    width: 210px;
-}
-
-.input-xlarge {
-    width: 270px;
-}
-
-.input-xxlarge {
-    width: 530px;
-}
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"],
-.uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-    float: none;
-    margin-left: 0;
-}
-
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-    display: inline-block;
-}
-
-input,
-textarea,
-div[contenteditable="true"],
-.uneditable-input {
-    margin-left: 0;
-}
-
-label.disabled {
-    color: #bbb !important;
-    cursor: default;
-}
-
-input[disabled],
-select[disabled],
-textarea[disabled],
-input[readonly],
-select[readonly],
-textarea[readonly] {
-    cursor: not-allowed;
-    background-color: $form-input-background-disabled;
-}
-
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][readonly],
-input[type="checkbox"][readonly] {
-    background-color: transparent;
-}
-
-input:focus:invalid,
-div[contenteditable="true"]:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
-    color: #b94a48;
-    border-color: #ee5f5b;
-}
-
-input:focus:invalid:focus,
-div[contenteditable="true"]:focus:invalid:focus,
-textarea:focus:invalid:focus,
-select:focus:invalid:focus {
-    border-color: #e9322d;
-    box-shadow: 0 0 6px #f8b9b7;
-}
-
-.input-append,
-.input-prepend {
-    display: inline-block;
-    margin-bottom: 10px;
-    font-size: 0;
-    white-space: nowrap;
-    vertical-align: middle;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append div[contenteditable="true"],
-.input-prepend div[contenteditable="true"],
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input,
-.input-append .red-ui-menu-dropdown,
-.input-prepend .red-ui-menu-dropdown,
-.input-append .popover,
-.input-prepend .popover {
-    font-size: 14px;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append div[contenteditable="true"],
-.input-prepend div[contenteditable="true"],
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input {
-    position: relative;
-    margin-bottom: 0;
-    *margin-left: 0;
-    vertical-align: top;
-    border-radius: 0 4px 4px 0;
-}
-
-.input-append input:focus,
-.input-prepend input:focus,
-.input-append div[contenteditable="true"]:focus,
-.input-prepend div[contenteditable="true"]:focus,
-.input-append select:focus,
-.input-prepend select:focus,
-.input-append .uneditable-input:focus,
-.input-prepend .uneditable-input:focus {
-    z-index: 2;
-}
-
-.input-append .add-on,
-.input-prepend .add-on {
-    display: inline-block;
-    width: auto;
-    height: 20px;
-    min-width: 16px;
-    padding: 4px 5px;
-    font-size: 14px;
-    font-weight: normal;
-    line-height: 20px;
-    text-align: center;
-    text-shadow: 0 1px 0 #ffffff;
-    background-color: #eeeeee;
-    border: 1px solid #ccc;
-}
-
-.input-append .add-on,
-.input-prepend .add-on,
-.input-append .btn,
-.input-prepend .btn,
-.input-append .btn-group > .dropdown-toggle,
-.input-prepend .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    border-radius: 0;
-}
-
-.input-append .active,
-.input-prepend .active {
-    background-color: #a9dba9;
-    border-color: #46a546;
-}
-
-.input-prepend .add-on,
-.input-prepend .btn {
-    margin-right: -1px;
-}
-
-.input-prepend .add-on:first-child,
-.input-prepend .btn:first-child {
-    border-radius: 4px 0 0 4px;
-}
-
-.input-append input,
-.input-append div[contenteditable="true"],
-.input-append select,
-.input-append .uneditable-input {
-    border-radius: 4px 0 0 4px;
-}
-
-.input-append input + .btn-group .btn:last-child,
-.input-append select + .btn-group .btn:last-child,
-.input-append .uneditable-input + .btn-group .btn:last-child {
-    border-radius: 0 4px 4px 0;
-}
-
-.input-append .add-on,
-.input-append .btn,
-.input-append .btn-group {
-    margin-left: -1px;
-}
-
-.input-append .add-on:last-child,
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-    border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append input,
-.input-prepend.input-append div[contenteditable="true"],
-.input-prepend.input-append select,
-.input-prepend.input-append .uneditable-input {
-    border-radius: 0;
-}
-
-.input-prepend.input-append input + .btn-group .btn,
-.input-prepend.input-append select + .btn-group .btn,
-.input-prepend.input-append .uneditable-input + .btn-group .btn {
-    border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
-    margin-right: -1px;
-    border-radius: 4px 0 0 4px;
-}
-
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
-    margin-left: -1px;
-    border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .btn-group:first-child {
-    margin-left: 0;
-}
-
-input.search-query {
-    padding-right: 14px;
-    padding-right: 4px \9;
-    padding-left: 14px;
-    padding-left: 4px \9;
-    /* IE7-8 doesn't have border-radius, so don't indent the padding */
-
-    margin-bottom: 0;
-    border-radius: 15px;
-}
-
-/* Allow for input prepend/append in search forms */
-
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-    border-radius: 0;
-}
-
-.form-search .input-append .search-query {
-    border-radius: 14px 0 0 14px;
-}
-
-.form-search .input-append .btn {
-    border-radius: 0 14px 14px 0;
-}
-
-.form-search .input-prepend .search-query {
-    border-radius: 0 14px 14px 0;
-}
-
-.form-search .input-prepend .btn {
-    border-radius: 14px 0 0 14px;
-}
-
-.form-search input,
-.form-inline input,
-.form-horizontal input,
-.form-search div[contenteditable="true"],
-.form-inline div[contenteditable="true"],
-.form-horizontal div[contenteditable="true"],
-.form-search textarea,
-.form-inline textarea,
-.form-horizontal textarea,
-.form-search select,
-.form-inline select,
-.form-horizontal select,
-.form-search .help-inline,
-.form-inline .help-inline,
-.form-horizontal .help-inline,
-.form-search .uneditable-input,
-.form-inline .uneditable-input,
-.form-horizontal .uneditable-input,
-.form-search .input-prepend,
-.form-inline .input-prepend,
-.form-horizontal .input-prepend,
-.form-search .input-append,
-.form-inline .input-append,
-.form-horizontal .input-append {
-    display: inline-block;
-    *display: inline;
-    margin-bottom: 0;
-    vertical-align: middle;
-    *zoom: 1;
-}
-
-.form-search .hide,
-.form-inline .hide,
-.form-horizontal .hide {
-    display: none;
-}
-
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-    display: inline-block;
-}
-
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-    margin-bottom: 0;
-}
-
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-    padding-left: 0;
-    margin-bottom: 0;
-    vertical-align: middle;
-}
-
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-    float: left;
-    margin-right: 3px;
-    margin-left: 0;
-}
-
-.control-group {
-    margin-bottom: 10px;
-}
-
-legend + .control-group {
-    margin-top: 20px;
-    -webkit-margin-top-collapse: separate;
-}
-
-.form-horizontal .control-group {
-    margin-bottom: 20px;
-    *zoom: 1;
-}
-
-.form-horizontal .control-group:before,
-.form-horizontal .control-group:after {
-    display: table;
-    line-height: 0;
-    content: "";
-}
-
-.form-horizontal .control-group:after {
-    clear: both;
-}
-
-.form-horizontal .control-label {
-    float: left;
-    width: 160px;
-    padding-top: 5px;
-    text-align: right;
-}
-
-.form-horizontal .controls {
-    *display: inline-block;
-    *padding-left: 20px;
-    margin-left: 180px;
-    *margin-left: 0;
-}
-
-.form-horizontal .controls:first-child {
-    *padding-left: 180px;
-}
-
-.form-horizontal .help-block {
-    margin-bottom: 0;
-}
-
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block,
-.form-horizontal .uneditable-input + .help-block,
-.form-horizontal .input-prepend + .help-block,
-.form-horizontal .input-append + .help-block {
-    margin-top: 10px;
-}
-
-.form-horizontal .form-actions {
-    padding-left: 180px;
-}
-
-.form-row div[contenteditable="true"] {
-    white-space: nowrap;
-    overflow: hidden;
+.red-ui-editor, .red-ui-editor-dialog {
+
+    button,
+    input,
+    select,
+    div[contenteditable="true"],
+    textarea {
+        margin: 0;
+        font-size: 100%;
+        vertical-align: middle;
+    }
+
+    button,
+    div[contenteditable="true"],
+    input {
+        *overflow: visible;
+        line-height: normal;
+    }
+
+    button::-moz-focus-inner,
+    div[contenteditable="true"]::-moz-focus-inner,
+    input::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+
+    button,
+    html input[type="button"],
+    input[type="reset"],
+    input[type="submit"] {
+        cursor: pointer;
+        -webkit-appearance: button;
+    }
+
+    label,
+    select,
+    button,
+    input[type="button"],
+    input[type="reset"],
+    input[type="submit"],
+    input[type="radio"],
+    input[type="checkbox"] {
+        cursor: pointer;
+    }
+
+    input[type="search"] {
+        box-sizing: content-box;
+    }
+
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+    }
+
+    textarea {
+        overflow: auto;
+        vertical-align: top;
+    }
+
+    form {
+        margin: 0 0 20px;
+    }
+
+    fieldset {
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+
+    legend {
+        display: block;
+        width: 100%;
+        padding: 0;
+        margin-bottom: 20px;
+        font-size: 21px;
+        line-height: 40px;
+        color: #333333;
+        border: 0;
+        border-bottom: 1px solid #e5e5e5;
+    }
+
+    legend small {
+        font-size: 15px;
+        color: #999999;
+    }
+
+
+    label,
+    input,
+    div[contenteditable="true"],
+    button,
+    select,
+    textarea {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+    }
+
+    input,
+    div[contenteditable="true"],
+    button,
+    select,
+    textarea {
+        font-family: $primary-font;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 5px;
+    }
+
+    select,
+    textarea,
+    input[type="text"],
+    input[type="password"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="date"],
+    input[type="month"],
+    input[type="time"],
+    input[type="week"],
+    input[type="number"],
+    input[type="email"],
+    input[type="url"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="color"],
+    div[contenteditable="true"],
+    .uneditable-input {
+        box-sizing: border-box;
+        display: inline-block;
+        height: 34px;
+        padding: 6px 6px;
+        margin-bottom: 10px;
+        font-size: 14px;
+        line-height: 20px;
+        color: $form-text-color;
+        vertical-align: middle;
+        border-radius: 4px;
+    }
+
+    input,
+    textarea,
+    div[contenteditable="true"],
+    .uneditable-input {
+        width: 206px;
+    }
+
+    textarea {
+        height: auto;
+    }
+
+    textarea,
+    input[type="text"],
+    input[type="password"],
+    input[type="datetime"],
+    input[type="datetime-local"],
+    input[type="date"],
+    input[type="month"],
+    input[type="time"],
+    input[type="week"],
+    input[type="number"],
+    input[type="email"],
+    input[type="url"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="color"],
+    div[contenteditable="true"],
+    .uneditable-input {
+        background-color: $form-input-background;
+        border: 1px solid $form-input-border-color;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    }
+
+    textarea:focus,
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="datetime"]:focus,
+    input[type="datetime-local"]:focus,
+    input[type="date"]:focus,
+    input[type="month"]:focus,
+    input[type="time"]:focus,
+    input[type="week"]:focus,
+    input[type="number"]:focus,
+    input[type="email"]:focus,
+    input[type="url"]:focus,
+    input[type="search"]:focus,
+    input[type="tel"]:focus,
+    input[type="color"]:focus,
+    div[contenteditable="true"]:focus,
+    .uneditable-input:focus {
+        border-color: $form-input-focus-color;
+        outline: 0;
+        outline: thin dotted \9;
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+        margin: 4px 0 0;
+        margin-top: 1px \9;
+        *margin-top: 0;
+        line-height: normal;
+    }
+
+    input[type="file"],
+    input[type="image"],
+    input[type="submit"],
+    input[type="reset"],
+    input[type="button"],
+    input[type="radio"],
+    input[type="checkbox"] {
+        width: auto;
+    }
+
+    select,
+    input[type="file"] {
+        height: 34px;
+        line-height: 34px;
+    }
+
+    select {
+        width: 220px;
+        background-color: $form-input-background;
+        border: 1px solid $form-input-border-color;
+    }
+
+    select[multiple],
+    select[size] {
+        height: auto;
+    }
+
+    select:focus,
+    input[type="file"]:focus,
+    input[type="radio"]:focus,
+    input[type="checkbox"]:focus {
+        outline: thin dotted #333;
+        outline: 2px auto $form-input-focus-color;
+        outline-offset: -3px;
+    }
+
+    .uneditable-input,
+    .uneditable-textarea {
+        color: #999999;
+        cursor: not-allowed;
+        background-color: #fcfcfc;
+        border-color: #cccccc;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+    }
+
+    .uneditable-input {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .uneditable-textarea {
+        width: auto;
+        height: auto;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    input:-ms-input-placeholder,
+    div[contenteditable="true"]:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    input::-webkit-input-placeholder,
+    div[contenteditable="true"]::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+        color: $form-placeholder-color;
+    }
+
+    .radio,
+    .checkbox {
+        min-height: 20px;
+        padding-left: 20px;
+    }
+
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+        float: left;
+        margin-left: -20px;
+    }
+
+    .controls > .radio:first-child,
+    .controls > .checkbox:first-child {
+        padding-top: 5px;
+    }
+
+    .radio.inline,
+    .checkbox.inline {
+        display: inline-block;
+        padding-top: 5px;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .radio.inline + .radio.inline,
+    .checkbox.inline + .checkbox.inline {
+        margin-left: 10px;
+    }
+
+    .input-mini {
+        width: 60px;
+    }
+
+    .input-small {
+        width: 90px;
+    }
+
+    .input-medium {
+        width: 150px;
+    }
+
+    .input-large {
+        width: 210px;
+    }
+
+    .input-xlarge {
+        width: 270px;
+    }
+
+    .input-xxlarge {
+        width: 530px;
+    }
+
+    input[class*="span"],
+    select[class*="span"],
+    textarea[class*="span"],
+    .uneditable-input[class*="span"],
+    .row-fluid input[class*="span"],
+    .row-fluid select[class*="span"],
+    .row-fluid textarea[class*="span"],
+    .row-fluid .uneditable-input[class*="span"] {
+        float: none;
+        margin-left: 0;
+    }
+
+    .input-append input[class*="span"],
+    .input-append .uneditable-input[class*="span"],
+    .input-prepend input[class*="span"],
+    .input-prepend .uneditable-input[class*="span"],
+    .row-fluid input[class*="span"],
+    .row-fluid select[class*="span"],
+    .row-fluid textarea[class*="span"],
+    .row-fluid .uneditable-input[class*="span"],
+    .row-fluid .input-prepend [class*="span"],
+    .row-fluid .input-append [class*="span"] {
+        display: inline-block;
+    }
+
+    input,
+    textarea,
+    div[contenteditable="true"],
+    .uneditable-input {
+        margin-left: 0;
+    }
+
+    label.disabled {
+        color: #bbb !important;
+        cursor: default;
+    }
+
+    input[disabled],
+    select[disabled],
+    textarea[disabled],
+    input[readonly],
+    select[readonly],
+    textarea[readonly] {
+        cursor: not-allowed;
+        background-color: $form-input-background-disabled;
+    }
+
+    input[type="radio"][disabled],
+    input[type="checkbox"][disabled],
+    input[type="radio"][readonly],
+    input[type="checkbox"][readonly] {
+        background-color: transparent;
+    }
+
+    input:focus:invalid,
+    div[contenteditable="true"]:focus:invalid,
+    textarea:focus:invalid,
+    select:focus:invalid {
+        color: #b94a48;
+        border-color: #ee5f5b;
+    }
+
+    input:focus:invalid:focus,
+    div[contenteditable="true"]:focus:invalid:focus,
+    textarea:focus:invalid:focus,
+    select:focus:invalid:focus {
+        border-color: #e9322d;
+        box-shadow: 0 0 6px #f8b9b7;
+    }
+
+    .input-append,
+    .input-prepend {
+        display: inline-block;
+        margin-bottom: 10px;
+        font-size: 0;
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .input-append input,
+    .input-prepend input,
+    .input-append div[contenteditable="true"],
+    .input-prepend div[contenteditable="true"],
+    .input-append select,
+    .input-prepend select,
+    .input-append .uneditable-input,
+    .input-prepend .uneditable-input,
+    .input-append .red-ui-menu-dropdown,
+    .input-prepend .red-ui-menu-dropdown,
+    .input-append .popover,
+    .input-prepend .popover {
+        font-size: 14px;
+    }
+
+    .input-append input,
+    .input-prepend input,
+    .input-append div[contenteditable="true"],
+    .input-prepend div[contenteditable="true"],
+    .input-append select,
+    .input-prepend select,
+    .input-append .uneditable-input,
+    .input-prepend .uneditable-input {
+        position: relative;
+        margin-bottom: 0;
+        *margin-left: 0;
+        vertical-align: top;
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-append input:focus,
+    .input-prepend input:focus,
+    .input-append div[contenteditable="true"]:focus,
+    .input-prepend div[contenteditable="true"]:focus,
+    .input-append select:focus,
+    .input-prepend select:focus,
+    .input-append .uneditable-input:focus,
+    .input-prepend .uneditable-input:focus {
+        z-index: 2;
+    }
+
+    .input-append .add-on,
+    .input-prepend .add-on {
+        display: inline-block;
+        width: auto;
+        height: 20px;
+        min-width: 16px;
+        padding: 4px 5px;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        text-align: center;
+        text-shadow: 0 1px 0 #ffffff;
+        background-color: #eeeeee;
+        border: 1px solid #ccc;
+    }
+
+    .input-append .add-on,
+    .input-prepend .add-on,
+    .input-append .btn,
+    .input-prepend .btn,
+    .input-append .btn-group > .dropdown-toggle,
+    .input-prepend .btn-group > .dropdown-toggle {
+        vertical-align: top;
+        border-radius: 0;
+    }
+
+    .input-append .active,
+    .input-prepend .active {
+        background-color: #a9dba9;
+        border-color: #46a546;
+    }
+
+    .input-prepend .add-on,
+    .input-prepend .btn {
+        margin-right: -1px;
+    }
+
+    .input-prepend .add-on:first-child,
+    .input-prepend .btn:first-child {
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-append input,
+    .input-append div[contenteditable="true"],
+    .input-append select,
+    .input-append .uneditable-input {
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-append input + .btn-group .btn:last-child,
+    .input-append select + .btn-group .btn:last-child,
+    .input-append .uneditable-input + .btn-group .btn:last-child {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-append .add-on,
+    .input-append .btn,
+    .input-append .btn-group {
+        margin-left: -1px;
+    }
+
+    .input-append .add-on:last-child,
+    .input-append .btn:last-child,
+    .input-append .btn-group:last-child > .dropdown-toggle {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append input,
+    .input-prepend.input-append div[contenteditable="true"],
+    .input-prepend.input-append select,
+    .input-prepend.input-append .uneditable-input {
+        border-radius: 0;
+    }
+
+    .input-prepend.input-append input + .btn-group .btn,
+    .input-prepend.input-append select + .btn-group .btn,
+    .input-prepend.input-append .uneditable-input + .btn-group .btn {
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append .add-on:first-child,
+    .input-prepend.input-append .btn:first-child {
+        margin-right: -1px;
+        border-radius: 4px 0 0 4px;
+    }
+
+    .input-prepend.input-append .add-on:last-child,
+    .input-prepend.input-append .btn:last-child {
+        margin-left: -1px;
+        border-radius: 0 4px 4px 0;
+    }
+
+    .input-prepend.input-append .btn-group:first-child {
+        margin-left: 0;
+    }
+
+    input.search-query {
+        padding-right: 14px;
+        padding-right: 4px \9;
+        padding-left: 14px;
+        padding-left: 4px \9;
+        /* IE7-8 doesn't have border-radius, so don't indent the padding */
+
+        margin-bottom: 0;
+        border-radius: 15px;
+    }
+
+    /* Allow for input prepend/append in search forms */
+
+    .form-search .input-append .search-query,
+    .form-search .input-prepend .search-query {
+        border-radius: 0;
+    }
+
+    .form-search .input-append .search-query {
+        border-radius: 14px 0 0 14px;
+    }
+
+    .form-search .input-append .btn {
+        border-radius: 0 14px 14px 0;
+    }
+
+    .form-search .input-prepend .search-query {
+        border-radius: 0 14px 14px 0;
+    }
+
+    .form-search .input-prepend .btn {
+        border-radius: 14px 0 0 14px;
+    }
+
+    .form-search input,
+    .form-inline input,
+    .form-horizontal input,
+    .form-search div[contenteditable="true"],
+    .form-inline div[contenteditable="true"],
+    .form-horizontal div[contenteditable="true"],
+    .form-search textarea,
+    .form-inline textarea,
+    .form-horizontal textarea,
+    .form-search select,
+    .form-inline select,
+    .form-horizontal select,
+    .form-search .help-inline,
+    .form-inline .help-inline,
+    .form-horizontal .help-inline,
+    .form-search .uneditable-input,
+    .form-inline .uneditable-input,
+    .form-horizontal .uneditable-input,
+    .form-search .input-prepend,
+    .form-inline .input-prepend,
+    .form-horizontal .input-prepend,
+    .form-search .input-append,
+    .form-inline .input-append,
+    .form-horizontal .input-append {
+        display: inline-block;
+        *display: inline;
+        margin-bottom: 0;
+        vertical-align: middle;
+        *zoom: 1;
+    }
+
+    .form-search .hide,
+    .form-inline .hide,
+    .form-horizontal .hide {
+        display: none;
+    }
+
+    .form-search label,
+    .form-inline label,
+    .form-search .btn-group,
+    .form-inline .btn-group {
+        display: inline-block;
+    }
+
+    .form-search .input-append,
+    .form-inline .input-append,
+    .form-search .input-prepend,
+    .form-inline .input-prepend {
+        margin-bottom: 0;
+    }
+
+    .form-search .radio,
+    .form-search .checkbox,
+    .form-inline .radio,
+    .form-inline .checkbox {
+        padding-left: 0;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .form-search .radio input[type="radio"],
+    .form-search .checkbox input[type="checkbox"],
+    .form-inline .radio input[type="radio"],
+    .form-inline .checkbox input[type="checkbox"] {
+        float: left;
+        margin-right: 3px;
+        margin-left: 0;
+    }
+
+    .control-group {
+        margin-bottom: 10px;
+    }
+
+    legend + .control-group {
+        margin-top: 20px;
+        -webkit-margin-top-collapse: separate;
+    }
+
+    .form-horizontal .control-group {
+        margin-bottom: 20px;
+        *zoom: 1;
+    }
+
+    .form-horizontal .control-group:before,
+    .form-horizontal .control-group:after {
+        display: table;
+        line-height: 0;
+        content: "";
+    }
+
+    .form-horizontal .control-group:after {
+        clear: both;
+    }
+
+    .form-horizontal .control-label {
+        float: left;
+        width: 160px;
+        padding-top: 5px;
+        text-align: right;
+    }
+
+    .form-horizontal .controls {
+        *display: inline-block;
+        *padding-left: 20px;
+        margin-left: 180px;
+        *margin-left: 0;
+    }
+
+    .form-horizontal .controls:first-child {
+        *padding-left: 180px;
+    }
+
+    .form-horizontal .help-block {
+        margin-bottom: 0;
+    }
+
+    .form-horizontal input + .help-block,
+    .form-horizontal select + .help-block,
+    .form-horizontal textarea + .help-block,
+    .form-horizontal .uneditable-input + .help-block,
+    .form-horizontal .input-prepend + .help-block,
+    .form-horizontal .input-append + .help-block {
+        margin-top: 10px;
+    }
+
+    .form-horizontal .form-actions {
+        padding-left: 180px;
+    }
+
+    .form-row div[contenteditable="true"] {
+        white-space: nowrap;
+        overflow: hidden;
+    }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
index eb2dc6a1d..cfa27bb68 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss
@@ -16,11 +16,11 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
+    font-family: $primary-font;
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
index 83d4ed72a..856600a8f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss
@@ -114,12 +114,12 @@
     }
 }
 .help-key {
-    border: 1px solid #ddd;
+    border: 1px solid $keyboard-help-key-border;
     padding: 4px;
     border-radius: 3px;
-    background: #f6f6f6;
-    font-family: Courier, monospace;
-    box-shadow: #999 1px 1px 1px;
+    background: $keyboard-help-key-background;
+    font-family: $monospace-font;
+    box-shadow: $keyboard-help-key-shadow 1px 1px 1px;
 }
 .help-key-block {
     white-space: nowrap;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index b961412ca..08d7819bb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -18,14 +18,13 @@
     pre {
         margin: 10px 0;
         border: none;
-        color: #666;
+        color: $primary-text-color;
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            background: #e25151;
-            color: white;
+            border: 1px solid $form-input-border-error-color;
             margin: 0 1px;
         }
     }
@@ -36,16 +35,23 @@
          resize: none;
          width: 100%;
          border-radius: 4px;
-         font-family: monospace !important;
+         font-family: $monospace-font !important;
          font-size: 13px !important;
          height: 300px;
          line-height: 1.3em;
          padding: 6px 10px;
-         background: #F3E7E7;
-         color: #533;
+         background: $clipboard-textarea-background;
     }
 }
 
+.red-ui-clipboard-dialog-tabs {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    width:120px;
+}
+
 .red-ui-clipboard-dialog-tabs-content {
     position: absolute;
     top: 0;
@@ -53,7 +59,7 @@
     right: 0;
     bottom: 0;
     padding: 0;
-    background: white;
+    background: $form-input-background;
     &>div {
         height: calc(100% - 20px)
     }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
index 9f07f66ef..6cb87a65f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss
@@ -280,42 +280,3 @@
 .component-shade {
     @include shade
 }
-
-
-.red-ui-component-footer {
-    @include component-footer;
-}
-
-.red-ui-footer-button {
-    @include component-footer-button;
-}
-
-.red-ui-footer-button-toggle {
-    @include component-footer-button-toggle;
-}
-
-.red-ui-statusbar-widget {
-    margin: 0 2px;
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-    line-height: 20px;
-}
-
-.red-ui-statusbar-bucket {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-}
-.red-ui-statusbar-bucket-left {
-    left: 10px;
-    .red-ui-statusbar-widget:first-child {
-        margin-left: 0;
-    }
-}
-.red-ui-statusbar-bucket-right {
-    right: 10px;
-    .red-ui-statusbar-widget:last-child {
-        margin-right: 0;
-    }
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
index 2e0f08449..a597eac51 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss
@@ -156,8 +156,8 @@
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: #fff;
-        border: 1px solid #fff;
+        background: #eee;
+        border: 1px dashed #fff;
     }
     .red-ui-palette-module-set-button-group {
         position: absolute;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index d703b29a7..1661d2899 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -25,6 +25,7 @@
     color: $popover-color;
     border-radius: 4px;
     z-index: 1000;
+    font-family: $primary-font;
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -140,7 +141,7 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: monospace;
+    font-family: $monospace-font;
     margin-left: 3px;
     border: 1px solid #999;
     border-radius:3px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 8a773bd43..86b2abe8a 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -46,7 +46,7 @@
         }
         input[type=checkbox], input[type=radio] {
             width: auto;
-            vertical-align: top;
+            vertical-align: middle;
         }
     }
 
@@ -125,6 +125,62 @@
 .red-ui-projects-dialog-screen-secret {
     min-height: auto;
 }
+
+.red-ui-projects-dialog-credentials-box {
+    width: 550px;
+    > div {
+        vertical-align: top;
+        display: inline-block;
+    }
+}
+.red-ui-projects-dialog-credentials-box-right {
+    min-height:150px;
+    box-sizing: border-box;
+    float: right;
+    width: 331px;
+    margin-left: -1px;
+    padding: 15px;
+    margin-top: -15px;
+    border: 1px solid $secondary-border-color;
+    border-radius: 3px;
+}
+.red-ui-projects-dialog-credentials-box-left {
+    width: 220px;
+    > div {
+        padding:  7px 8px 3px 8px;
+        border: 1px solid $secondary-border-color;
+        border-radius: 4px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right-color: $form-background;
+        &.disabled {
+            border-color: $form-background;
+            border-right-color:$secondary-border-color;
+        }
+        i {
+            font-size: 1.4em;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+        label.red-ui-projects-edit-form-inline-label {
+            margin-left: 5px;
+            span {
+                vertical-align: middle;
+            }
+        }
+        input[type="radio"] {
+            vertical-align: middle;
+            margin-top:0;
+            margin-right: 10px;
+        }
+
+    }
+}
+.red-ui-projects-dialog-credentials-box-enabled {
+}
+.red-ui-projects-dialog-credentials-box-disabled {
+}
+
 .red-ui-projects-dialog-project-list-container {
     border: 1px solid $secondary-border-color;
     border-radius: 2px;
@@ -149,6 +205,8 @@
     &.projects-list-entry-current {
         &:not(.selectable) {
             background: #f9f9f9;
+            border-left: 3px solid #f9f9f9;
+            border-right: 3px solid #f9f9f9;
         }
         i {
             color: #999;
@@ -158,8 +216,8 @@
         cursor: pointer;
         &:hover {
             background: #f3f3f3;
-            // border-left-color: #aaa;
-            // border-right-color: #aaa;
+            border-left-color: #f3f3f3;
+            border-right-color: #f3f3f3;
         }
     }
     .red-ui-projects-dialog-project-list-entry-icon {
@@ -493,7 +551,7 @@
 }
 .red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: monospace;
+    font-family: $monospace-font;
     color: #c38888;
     display: inline-block;
     font-size: 0.85em;
@@ -828,3 +886,10 @@ div.red-ui-projects-dialog-ssh-public-key {
         margin-bottom: 10px;
     }
 }
+
+#red-ui-settings-tab-gitconfig {
+    padding: 8px 20px 20px;
+}
+.red-ui-settings-section-description {
+    color: $secondary-text-color;
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
index 4589afb7f..925f5742f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss
@@ -84,16 +84,20 @@
     @include component-footer-button-toggle;
 }
 
-.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
-.red-ui-sidebar-header-button {
+a.sidebar-header-button,
+button.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
+a.red-ui-sidebar-header-button,
+button.red-ui-sidebar-header-button {
     @include workspace-button;
     font-size: 13px;
     line-height: 13px;
     padding: 5px 8px;
 }
 
-.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
-.red-ui-sidebar-header-button-toggle {
+a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+button.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
+a.red-ui-sidebar-header-button-toggle,
+button.red-ui-sidebar-header-button-toggle {
     @include workspace-button-toggle;
     font-size: 13px;
     line-height: 13px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index a4d3eea3d..342c3ef27 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -144,7 +144,7 @@ div.node-info {
         margin: 5px auto 10px;
         &>dt {
             padding: 0px 3px 2px 3px;
-            font-family: monospace;
+            font-family: $monospace-font;
             font-weight: normal;
             margin: 5px 3px 1px;
             color: #AD1625;
@@ -154,7 +154,7 @@ div.node-info {
 
             }
             .property-type {
-                font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+                font-family: $primary-font;
                 color: #666;
                 font-style: italic;
                 font-size: 11px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
index e92e64e2f..e96c785fb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss
@@ -39,7 +39,7 @@
             }
             .meta {
                 float: right;
-                input[type="checkbox"] {
+                input[type="checkbox"].red-ui-treeList-checkbox {
                     margin: 0;
                 }
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index 975a80c79..a3184aa6c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -32,7 +32,7 @@
         right: 5px;
         top: 9px;
     }
-    input {
+    input.red-ui-searchBox-input {
         border-radius: 0;
         border: none;
         width: 100%;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
index ea217cffe..b7920c629 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss
@@ -94,7 +94,7 @@
         color: $list-item-color;
     }
 
-    input {
+    input.red-ui-treeList-checkbox {
         margin: 0;
     }
 }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
index b73c139f4..cf45af443 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -25,7 +25,7 @@
     box-sizing: border-box;
     overflow:visible;
     position: relative;
-    .red-ui-typedInput-input {
+    .red-ui-typedInput-input-wrap {
         position: absolute;
         left:0;
         right:0;
@@ -33,7 +33,7 @@
         bottom:0;
         outline: red;
     }
-    input {
+    input.red-ui-typedInput-input {
         width: 100%;
         padding: 0 0 0 3px;
         margin:0;
@@ -50,7 +50,10 @@
         border-color: $form-input-focus-color !important;
     }
 
-    button {
+    button.red-ui-typedInput-type-select,
+    button.red-ui-typedInput-option-expand,
+    button.red-ui-typedInput-option-trigger
+     {
         text-align: left;
         border: none;
         position: absolute;
@@ -152,6 +155,9 @@
 }
 .red-ui-typedInput-options {
     @include component-shadow;
+    font-family: $primary-font;
+    font-size: $primary-font-size;
+
     position: absolute;
     border: 1px solid $primary-border-color;
     background: #fff;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index 26217381d..da4af4b13 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -109,3 +109,43 @@
     strokeWidth: 1;
     fill: white;
 }
+
+.red-ui-component-footer {
+    @include component-footer;
+}
+
+a.red-ui-footer-button,
+button.red-ui-footer-button {
+    @include component-footer-button;
+}
+
+a.red-ui-footer-button-toggle,
+button.red-ui-footer-button-toggle {
+    @include component-footer-button-toggle;
+}
+
+.red-ui-statusbar-widget {
+    margin: 0 2px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    line-height: 20px;
+}
+
+.red-ui-statusbar-bucket {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+.red-ui-statusbar-bucket-left {
+    left: 10px;
+    .red-ui-statusbar-widget:first-child {
+        margin-left: 0;
+    }
+}
+.red-ui-statusbar-bucket-right {
+    right: 10px;
+    .red-ui-statusbar-widget:last-child {
+        margin-right: 0;
+    }
+}
diff --git a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
index 79e05f2e3..4d7a6dad3 100644
--- a/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
+++ b/packages/node_modules/@node-red/nodes/core/io/10-mqtt.html
@@ -179,7 +179,7 @@
         </div>
         <div id="mqtt-broker-tab-messages" style="display:none">
             <div id="mqtt-broker-section-birth">
-                <div class="palette-header">
+                <div class="red-ui-palette-header">
                     <i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.birth-message"></span>
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
@@ -205,7 +205,7 @@
                 </div>
             </div>
             <div id="mqtt-broker-section-close">
-                <div class="palette-header">
+                <div class="red-ui-palette-header">
                     <i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.close-message"></span>
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
@@ -231,7 +231,7 @@
                 </div>
             </div>
             <div id="mqtt-broker-section-will">
-                <div class="palette-header">
+                <div class="red-ui-palette-header">
                     <i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.will-message"></span>
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
@@ -336,7 +336,7 @@
 
             function setUpSection(sectionId, isExpanded) {
                 var birthMessageSection = $(sectionId);
-                var paletteHeader = birthMessageSection.find('.palette-header');
+                var paletteHeader = birthMessageSection.find('.red-ui-palette-header');
                 var twistie = paletteHeader.find('i');
                 var sectionContent = birthMessageSection.find('.section-content');