diff --git a/Gruntfile.js b/Gruntfile.js index ad46baee9..3a4ebde85 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -156,6 +156,10 @@ module.exports = function(grunt) { files: [{ dest: 'public/red/style.min.css', src: 'editor/sass/style.scss' + }, + { + dest: 'public/vendor/bootstrap/css/bootstrap.min.css', + src: 'editor/vendor/bootstrap/css/bootstrap.css' }] } }, @@ -254,7 +258,7 @@ module.exports = function(grunt) { cwd: 'editor/vendor', src: [ 'ace/**', - 'bootstrap/css/**', + //'bootstrap/css/**', 'bootstrap/img/**', 'jquery/css/**', 'font-awesome/**' diff --git a/editor/images/grip.png b/editor/images/grip.png index c01edb565..8bdf97c7c 100644 Binary files a/editor/images/grip.png and b/editor/images/grip.png differ diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 95f034fb1..b4df6fc43 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -22,7 +22,7 @@ RED.palette = (function() { function createCategoryContainer(category, label){ label = label || category.replace("_", " "); var catDiv = $("#palette-container").append('
'+ - '
'+label+'
'+ + '
'+label+'
'+ '
'+ '
'+ '
'+ @@ -150,7 +150,7 @@ RED.palette = (function() { if ($("#palette-base-category-"+rootCategory).length === 0) { if(core.indexOf(rootCategory) !== -1){ createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory})); - } else { + } else { var ns = def.set.id; createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory})); } diff --git a/editor/js/ui/sidebar.js b/editor/js/ui/sidebar.js index c9c80005c..7dd30f957 100644 --- a/editor/js/ui/sidebar.js +++ b/editor/js/ui/sidebar.js @@ -97,7 +97,7 @@ RED.sidebar = (function() { if (!RED.menu.isSelected("menu-item-sidebar")) { sidebarSeparator.opening = true; - var newChartRight = 15; + var newChartRight = 10; $("#sidebar").addClass("closing"); $("#workspace").css("right",newChartRight); $("#chart-zoom-controls").css("right",newChartRight+20); @@ -151,8 +151,8 @@ RED.sidebar = (function() { RED.menu.setSelected("menu-item-sidebar",false); if ($("#sidebar").width() < 180) { $("#sidebar").width(180); - $("#workspace").css("right",208); - $("#chart-zoom-controls").css("right",228); + $("#workspace").css("right",191); + $("#chart-zoom-controls").css("right",211); } } $("#sidebar-separator").css("left","auto"); diff --git a/editor/js/ui/tabs.js b/editor/js/ui/tabs.js index feb66c762..2514f6865 100644 --- a/editor/js/ui/tabs.js +++ b/editor/js/ui/tabs.js @@ -68,14 +68,14 @@ RED.tabs = (function() { var tabs = ul.find("li.red-ui-tab"); var width = ul.width(); var tabCount = tabs.size(); - var tabWidth = (width-6-(tabCount*7))/tabCount; + var tabWidth = (width-10-(tabCount*6))/tabCount; currentTabWidth = 100*tabWidth/width; currentActiveTabWidth = currentTabWidth+"%"; if (options.hasOwnProperty("minimumActiveTabWidth")) { if (tabWidth < options.minimumActiveTabWidth) { tabCount -= 1; - tabWidth = (width-7-options.minimumActiveTabWidth-(tabCount*7))/tabCount; + tabWidth = (width-10-options.minimumActiveTabWidth-(tabCount*6))/tabCount; currentTabWidth = 100*tabWidth/width; currentActiveTabWidth = options.minimumActiveTabWidth+"px"; } else { diff --git a/editor/sass/colors.scss b/editor/sass/colors.scss new file mode 100644 index 000000000..c04a55409 --- /dev/null +++ b/editor/sass/colors.scss @@ -0,0 +1,25 @@ +/** + * Copyright 2015 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + +$form-placeholder-color: #bbbbbb; + +$form-text-color: #444; +$form-input-focus-color: rgba(85,150,230,0.8); +$form-input-border-color: #ccc; + +$node-selected-color: #5596E6; // #ff7f0e + +$primary-border-color: #bbbbbb; diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss index 1da8603f2..2c27ce8fe 100644 --- a/editor/sass/editor.scss +++ b/editor/sass/editor.scss @@ -29,6 +29,7 @@ .form-row { clear: both; + color: $form-text-color; margin-bottom:10px; } .form-row label { @@ -73,4 +74,3 @@ button.input-append-right { font-size: 14px !important; font-family: monospace !important; } - diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss index 262059936..64508b841 100644 --- a/editor/sass/flow.scss +++ b/editor/sass/flow.scss @@ -155,7 +155,7 @@ } .node_selected { stroke-width: 2; - stroke: #ff7f0e !important; + stroke: $node-selected-color !important; } .node_highlighted { stroke: #dd1616; @@ -176,14 +176,14 @@ } .drag_line { - stroke: #ff7f0e; + stroke: $node-selected-color; stroke-width: 4; fill: none; pointer-events: none; } .drag_line_hidden { - stroke: #ff7f0e; + stroke: $node-selected-color; stroke-width: 0; pointer-events: none; fill: none; @@ -218,7 +218,7 @@ } g.link_selected path.link_line { - stroke: #ff7f0e; + stroke: $node-selected-color; } g.link_unknown path.link_line { stroke: #f00; diff --git a/editor/sass/forms.scss b/editor/sass/forms.scss new file mode 100644 index 000000000..cc62fe4ae --- /dev/null +++ b/editor/sass/forms.scss @@ -0,0 +1,1048 @@ +/** + * Copyright 2015 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +/*! + * Extracted from Bootstrap v2.3.2 + * + * Copyright 2013 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world by @mdo and @fat. + */ + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} + +button, +input { + *overflow: visible; + line-height: normal; +} + +button::-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"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} + +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, +button, +select, +textarea { + font-size: 14px; + font-weight: normal; + line-height: 20px; +} + +input, +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"], +.uneditable-input { + display: inline-block; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +input, +textarea, +.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"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid $form-input-border-color; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + 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, +.uneditable-input:focus { + border-color: $form-input-focus-color; + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + // -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + // -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + // box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +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: 30px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 30px; +} + +select { + width: 220px; + background-color: #ffffff; + 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; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + 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, +textarea:-ms-input-placeholder { + color: $form-placeholder-color; +} + +input::-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, +.uneditable-input { + margin-left: 0; +} + +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + +input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 926px; +} + +input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 846px; +} + +input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 766px; +} + +input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 686px; +} + +input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 606px; +} + +input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 526px; +} + +input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 446px; +} + +input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 366px; +} + +input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 286px; +} + +input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 206px; +} + +input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 126px; +} + +input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 46px; +} + +.controls-row { + *zoom: 1; +} + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; +} + +.controls-row:after { + clear: both; +} + +.controls-row [class*="span"], +.row-fluid .controls-row [class*="span"] { + float: left; +} + +.controls-row .checkbox[class*="span"], +.controls-row .radio[class*="span"] { + padding-top: 5px; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: #eeeeee; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + +.control-group.warning .control-label, +.control-group.warning .help-block, +.control-group.warning .help-inline { + color: #c09853; +} + +.control-group.warning .checkbox, +.control-group.warning .radio, +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + color: #c09853; +} + +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { + border-color: #a47e3c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; +} + +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { + color: #c09853; + background-color: #fcf8e3; + border-color: #c09853; +} + +.control-group.error .control-label, +.control-group.error .help-block, +.control-group.error .help-inline { + color: #b94a48; +} + +.control-group.error .checkbox, +.control-group.error .radio, +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + color: #b94a48; +} + +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.error input:focus, +.control-group.error select:focus, +.control-group.error textarea:focus { + border-color: #953b39; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; +} + +.control-group.error .input-prepend .add-on, +.control-group.error .input-append .add-on { + color: #b94a48; + background-color: #f2dede; + border-color: #b94a48; +} + +.control-group.success .control-label, +.control-group.success .help-block, +.control-group.success .help-inline { + color: #468847; +} + +.control-group.success .checkbox, +.control-group.success .radio, +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + color: #468847; +} + +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.success input:focus, +.control-group.success select:focus, +.control-group.success textarea:focus { + border-color: #356635; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; +} + +.control-group.success .input-prepend .add-on, +.control-group.success .input-append .add-on { + color: #468847; + background-color: #dff0d8; + border-color: #468847; +} + +.control-group.info .control-label, +.control-group.info .help-block, +.control-group.info .help-inline { + color: #3a87ad; +} + +.control-group.info .checkbox, +.control-group.info .radio, +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + color: #3a87ad; +} + +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + border-color: #3a87ad; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.info input:focus, +.control-group.info select:focus, +.control-group.info textarea:focus { + border-color: #2d6987; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; +} + +.control-group.info .input-prepend .add-on, +.control-group.info .input-append .add-on { + color: #3a87ad; + background-color: #d9edf7; + border-color: #3a87ad; +} + +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; +} + +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +.form-actions { + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; + background-color: #f5f5f5; + border-top: 1px solid #e5e5e5; + *zoom: 1; +} + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.help-block, +.help-inline { + color: #595959; +} + +.help-block { + display: block; + margin-bottom: 10px; +} + +.help-inline { + display: inline-block; + *display: inline; + padding-left: 5px; + vertical-align: middle; + *zoom: 1; +} + +.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 select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input, +.input-append .dropdown-menu, +.input-prepend .dropdown-menu, +.input-append .popover, +.input-prepend .popover { + font-size: 14px; +} + +.input-append input, +.input-prepend input, +.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; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append input:focus, +.input-prepend input: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; + -webkit-border-radius: 0; + -moz-border-radius: 0; + 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 { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-append input, +.input-append select, +.input-append .uneditable-input { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + 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 { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + 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 { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append input, +.input-prepend.input-append select, +.input-prepend.input-append .uneditable-input { + -webkit-border-radius: 0; + -moz-border-radius: 0; + 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 { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .add-on:first-child, +.input-prepend.input-append .btn:first-child { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-prepend.input-append .add-on:last-child, +.input-prepend.input-append .btn:last-child { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + 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; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search input, +.form-inline input, +.form-horizontal input, +.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; +} diff --git a/editor/sass/jquery.scss b/editor/sass/jquery.scss index 47eb4e06c..7e73810f8 100644 --- a/editor/sass/jquery.scss +++ b/editor/sass/jquery.scss @@ -37,13 +37,13 @@ } .ui-dialog .ui-dialog-titlebar { padding: 10px; - background: #f0f0f0; + background: #f3f3f3; border: none; - border-bottom: 2px solid #888; + border-bottom: 1px solid #999; border-radius: 0; } .ui-corner-all { - border-radius: 2px; + border-radius: 1px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #f3f3f3; diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index 6d3ab1196..dade50065 100644 --- a/editor/sass/mixins.scss +++ b/editor/sass/mixins.scss @@ -23,6 +23,6 @@ } @mixin component-border { - border: 1px solid #999; + border: 1px solid $primary-border-color; box-sizing: border-box; } diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index 79bb9a0d7..e200caeb6 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -32,7 +32,7 @@ position: absolute; top: 35px; right: 0; - bottom: 0; + bottom: 0px; left:0; padding: 0; overflow-y: auto; @@ -52,7 +52,7 @@ text-align: center; height: 35px; padding: 3px; - border-bottom: 1px solid #999; + border-bottom: 1px solid $primary-border-color; box-sizing:border-box; } #palette-search i { @@ -126,6 +126,7 @@ clear: both; } .palette_label { + font-size: 13px; margin: 4px 0 4px 28px; line-height: 20px; overflow: hidden; @@ -137,7 +138,6 @@ .palette_node { cursor:move; - font-size:13px; background: #ddd; margin: 10px auto; height: 25px; @@ -150,7 +150,7 @@ position: relative; } .palette_node:hover { - border-color: #ff7f0e; + border-color: $node-selected-color; background-color: #eee; } .palette_port { diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss index 38b324a8a..e7f669ec1 100644 --- a/editor/sass/sidebar.scss +++ b/editor/sass/sidebar.scss @@ -14,8 +14,6 @@ * limitations under the License. **/ - - #sidebar { position: absolute; top: 0px; @@ -49,12 +47,12 @@ top: 5px; right: 316px; bottom:10px; - width: 15px; + width: 10px; background: url(images/grip.png) no-repeat 50% 50%; cursor: col-resize; } .sidebar-closed > #sidebar { display: none; } .sidebar-closed > #sidebar-separator { right: 0px !important; } -.sidebar-closed > #workspace { right: 15px !important; } -.sidebar-closed > #chart-zoom-controls { right: 35px !important; } +.sidebar-closed > #workspace { right: 10px !important; } +.sidebar-closed > #chart-zoom-controls { right: 30px !important; } diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 5c8acc484..23156da4d 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -14,8 +14,11 @@ * limitations under the License. **/ +@import "colors"; @import "mixins"; +@import "forms"; + @import "jquery"; @import "bootstrap"; @@ -44,7 +47,7 @@ body { - font: 13px "Helvetica" !important; + font: 14px "Helvetica" !important; padding-top: 100px; background: #f3f3f3; } diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss index d55ff8af1..97a2df7b9 100644 --- a/editor/sass/tab-info.scss +++ b/editor/sass/tab-info.scss @@ -56,22 +56,23 @@ div.node-info { text-decoration: none; } .node-help { - font-size: 16px; + font-size: 14px; + line-height: 1.5em; h1 { font-weight: normal; - font-size: 1.953em; + font-size: 23px; margin: 8px auto; } h2 { font-weight: normal; - font-size: 1.563em; + font-size: 16px; margin: 8px auto; } h3, h4, h5 { font-weight: normal; - font-size: 1.25em; + font-size: 14px; margin: 8px auto; } } diff --git a/editor/sass/tabs.scss b/editor/sass/tabs.scss index 532df5672..a4fadbcce 100644 --- a/editor/sass/tabs.scss +++ b/editor/sass/tabs.scss @@ -21,7 +21,7 @@ ul.red-ui-tabs { display: block; height: 35px; box-sizing:border-box; - border-bottom: 1px solid #999; + border-bottom: 1px solid $primary-border-color; background: #fff; -webkit-user-select: none; -khtml-user-select: none; @@ -31,16 +31,16 @@ ul.red-ui-tabs { } ul.red-ui-tabs li { - box-sizing:border-box; + box-sizing: border-box; display: inline-block; - border-left: 1px solid #999; - border-top: 1px solid #999; - border-right: 1px solid #999; - border-bottom: 1px solid #999; + border-left: 1px solid $primary-border-color; + border-top: 1px solid $primary-border-color; + border-right: 1px solid $primary-border-color; + border-bottom: 1px solid $primary-border-color; background: #f3f3f3; margin: 3px 3px 0 3px; height: 32px; - line-height: 24px; + line-height: 29px; max-width: 200px; width: 14%; overflow: hidden; @@ -49,7 +49,7 @@ ul.red-ui-tabs li { ul.red-ui-tabs li a.red-ui-tab-label { display: block; - padding: 3px 12px; + padding-left: 12px; width: 100%; height: 100%; color: #666; diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss index 62cbc1f06..4acbf1ba6 100644 --- a/editor/sass/workspace.scss +++ b/editor/sass/workspace.scss @@ -35,7 +35,7 @@ top:0px; left:179px; bottom: 10px; - right: 330px; + right: 326px; overflow: hidden; @include component-border; } @@ -60,8 +60,8 @@ right: 0; height: 34px; width: 28px; - border-bottom: 1px solid #999; - border-left: 1px solid #999; + border-bottom: 1px solid $primary-border-color; + border-left: 1px solid $primary-border-color; } #btn-workspace-add-tab { diff --git a/editor/sass/workspaceToolbar.scss b/editor/sass/workspaceToolbar.scss index 6fc58e7cc..20bae633f 100644 --- a/editor/sass/workspaceToolbar.scss +++ b/editor/sass/workspaceToolbar.scss @@ -14,13 +14,12 @@ * limitations under the License. **/ - + #workspace-toolbar { display: none; position: absolute; - top: 30px; + top: 35px; left:0; - right: 20px; padding: 7px; border-bottom-right-radius: 5px; background: #f3f3f3; diff --git a/editor/templates/index.mst b/editor/templates/index.mst index b386282aa..f72d00bd0 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -43,11 +43,10 @@