From d2c4c2c34c4a3e10238dd155b9941cb3ede2eb56 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 9 Apr 2015 14:46:29 +0100 Subject: [PATCH] Split css into individual scss files --- editor/index.html | 1 - editor/sass/bootstrap.scss | 21 + editor/sass/dragdrop.scss | 37 + editor/sass/dropdownMenu.scss | 84 ++ editor/sass/editor.scss | 75 ++ editor/sass/flow.scss | 231 +++++ editor/sass/header.scss | 179 ++++ editor/sass/jquery.scss | 53 ++ editor/sass/keyboard.scss | 40 + editor/sass/library.scss | 33 + editor/sass/mixins.scss | 29 + editor/sass/notifications.scss | 32 + editor/sass/palette.scss | 201 +++++ editor/sass/sidebar.scss | 54 ++ editor/sass/style.scss | 1301 +---------------------------- editor/sass/tab-config.scss | 63 ++ editor/sass/tab-info.scss | 77 ++ editor/sass/tabs.scss | 101 +++ editor/sass/workspace.scss | 76 ++ editor/sass/workspaceToolbar.scss | 54 ++ 20 files changed, 1469 insertions(+), 1273 deletions(-) create mode 100644 editor/sass/bootstrap.scss create mode 100644 editor/sass/dragdrop.scss create mode 100644 editor/sass/dropdownMenu.scss create mode 100644 editor/sass/editor.scss create mode 100644 editor/sass/flow.scss create mode 100644 editor/sass/header.scss create mode 100644 editor/sass/jquery.scss create mode 100644 editor/sass/keyboard.scss create mode 100644 editor/sass/library.scss create mode 100644 editor/sass/mixins.scss create mode 100644 editor/sass/notifications.scss create mode 100644 editor/sass/palette.scss create mode 100644 editor/sass/sidebar.scss create mode 100644 editor/sass/tab-config.scss create mode 100644 editor/sass/tab-info.scss create mode 100644 editor/sass/tabs.scss create mode 100644 editor/sass/workspace.scss create mode 100644 editor/sass/workspaceToolbar.scss diff --git a/editor/index.html b/editor/index.html index ba1dbeee3..5949a566d 100644 --- a/editor/index.html +++ b/editor/index.html @@ -75,7 +75,6 @@
Drop the flow here
-
diff --git a/editor/sass/bootstrap.scss b/editor/sass/bootstrap.scss new file mode 100644 index 000000000..c172cac90 --- /dev/null +++ b/editor/sass/bootstrap.scss @@ -0,0 +1,21 @@ +/** + * 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. + **/ + +.popover-title { display: none; } + +div.btn-group, a.btn { + @include disable-selection; +} diff --git a/editor/sass/dragdrop.scss b/editor/sass/dragdrop.scss new file mode 100644 index 000000000..2b9814d76 --- /dev/null +++ b/editor/sass/dragdrop.scss @@ -0,0 +1,37 @@ +/** + * 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. + **/ + +#dropTarget { + position: absolute; + top: 0; bottom: 0; + left: 0; right: 0; + background: rgba(0,0,0,0.1); + display:table; + width: 100%; + height: 100%; + display: none; +} +#dropTarget div { + display: table-cell; + vertical-align: middle; + text-align: center; + font-size: 40px; + color: #fff; +} +#dropTarget div i { + font-size: 80px; +} + diff --git a/editor/sass/dropdownMenu.scss b/editor/sass/dropdownMenu.scss new file mode 100644 index 000000000..8ada3a2d9 --- /dev/null +++ b/editor/sass/dropdownMenu.scss @@ -0,0 +1,84 @@ +/** + * 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. + **/ + + +.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a { + background: #999; +} + +.dropdown-menu * .fa-check-square { + display: none; + color: #e0e0e0; + margin-left: -25px; + margin-top: 3px; +} +.dropdown-menu * a.active > .fa-check-square { + display: inline-block; +} +.dropdown-menu * .fa-square { + display: inline-block; + color: #e0e0e0; + margin-left: -25px; + margin-top: 3px; +} +.dropdown-menu * a.active > .fa-square { + display: none; +} + + +.dropdown-menu>li.disabled>a:hover>[class^="icon-"] { + background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important; +} +/** Fix for unreachable dropdown menu **/ +.dropdown-menu { + border-radius: 0; + width: 200px !important; + margin-left: 0px !important; +} +.dropdown-menu > li > a > i { + width: 10px; + text-align: center; + margin-left: -8px; +} +.dropdown-menu > li > a { + padding-left: 38px ; + text-indent: -8px ; + white-space: normal !important; +} + +.dropdown-submenu>a:after { + display: none; +} +.dropdown-submenu>a:before { + display: block; + float: left; + width: 0; + height: 0; + margin-top: 5px; + margin-left: -30px; + border-color: transparent; + border-right-color: #e0e0e0; + border-style: solid; + border-width: 5px 5px 5px 0; + content: " "; +} + +.dropdown-submenu.disabled > a:before { + border-right-color: #444; +} +.dropdown-submenu.pull-left>.dropdown-menu { + border-radius: 0; +} diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss new file mode 100644 index 000000000..d05344208 --- /dev/null +++ b/editor/sass/editor.scss @@ -0,0 +1,75 @@ +/** + * 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. + **/ + +.dialog-form, #dialog-form, #dialog-config-form { + margin: 0; + height: 100%; +} + +.input-error { + border-color: rgb(214, 97, 95) !important; +} + +.leftButton { + margin-right: 200px !important; +} + +.form-row { + clear: both; + margin-bottom:10px; +} +.form-row label { + display: inline-block; + width: 100px; +} +.form-row input { + width:70%; +} + +input.input-append-left { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +button.input-append-right { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-top-right-radius: 4px !important; + border-bottom-right-radius: 4px !important; + margin-left: -1px !important; + padding-left: 4px !important; + padding-right: 4px !important; +} + +.form-tips { + background: lightgoldenrodyellow; + font-size: 12px; + padding: 8px; + border-radius: 5px; + border: 1px solid #999; + max-width: 450px; +} +.form-tips code { + border: none; + padding: auto; +} + +.node-text-editor { + border:1px solid #ccc; + border-radius:5px; + overflow: hidden; + font-size: 16px !important; +} + diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss new file mode 100644 index 000000000..ace11b42b --- /dev/null +++ b/editor/sass/flow.scss @@ -0,0 +1,231 @@ +/** + * 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. + **/ + +.hidden { + display: none; +} + +.lasso { + stroke-width: 2px; + stroke: #ff7f0e; + fill: rgba(20,125,255,0.1); + stroke-dasharray: 10 5; +} + +.group-box { + stroke-width: 1px; + stroke: #aaaaaa; + fill: rgba(208, 211, 238, 0.1); + stroke-dasharray: 3 3; +} +.group-box-active { + fill: #fff; + stroke: #ff7f0e; +} + +.group_label { + stroke-width: 0; + fill: #999; + font-size: 11px; + pointer-events: none; + -webkit-touch-callout: none; + @include disable-selection; +} + +.pull-right { + margin-left: 20px; +} + +#workspace { + @include component-border; +} + +.node_label_italic { + font-style: italic; +} +.node_label_unknown { + font-style: italic; + fill: #e00 !important; +} +.node_label_white { + fill: #eee !important; +} +.node_label { + stroke-width: 0; + fill: #333; + font-size: 14px; + pointer-events: none; + -webkit-touch-callout: none; + @include disable-selection; +} + +.port_label { + stroke-width: 0; + fill: #888; + font-size: 16px; + alignment-baseline: middle; + text-anchor: middle; + pointer-events: none; + -webkit-touch-callout: none; + @include disable-selection; +} + + +.function_label { + font-size: 12px; +} +.node { + stroke: #999; + cursor: move; + stroke-width: 2; +} +.node_unknown { + stroke-dasharray:10,4; + stroke: #f33; +} +.tool_arrow { + stroke-width: 1; + stroke: #999; + fill: #999; + cursor: pointer; +} +.node_tools { + fill: #ddd; + stroke: #999; + cursor: move; + stroke-width: 1; + cursor: pointer; +} +.node_tools_hovered { + stroke: #ff7f0e; + fill: #eee; +} + +.node_button { + fill: inherit; + +} +.port { + stroke: #999; + stroke-width: 2; + fill: #ddd; + cursor: crosshair; +} + +.port_highlight { + stroke: #6DA332; + stroke-width: 3; + fill: #fff; + pointer-events:none; + fill-opacity: 0.5; +} + + +.node_error { + stroke: #ff0000; + stroke-width: 2; + fill: #ff7f0e; +} + +.node_badge { + stroke: rgb(93, 114, 145); + stroke-width: 1; + fill: rgb(190, 209, 255); +} +.node_badge_label { + stroke-width:0; + fill: #fff; + font-size: 11px; + pointer-events: none; + -webkit-touch-callout: none; + @include disable-selection; + +} +.node_invalid { + stroke: #ff0000; +} +.node_selected { + stroke: #ff7f0e !important; +} +.node_highlighted { + stroke: #dd1616; + stroke-width: 3; + stroke-dasharray: 10, 4; +} +.node_hovered { +} + +.port_hovered { + stroke: #ff7f0e; + fill: #ff7f0e; +} +.subflowport { + stroke-dasharray: 5,5; + fill: #eee; + stroke: #999; +} + +.drag_line { + stroke: #ff7f0e; + stroke-width: 5; + fill: none; + pointer-events: none; +} + +.drag_line_hidden { + stroke: #ff7f0e; + stroke-width: 0; + pointer-events: none; + fill: none; +} + +.link_line { + stroke: #7f7f7f; + stroke-width: 4; + fill: none; + pointer-events: none; +} + +.link_subflow { + stroke: #bbb; + stroke-dasharray: 10,5; + stroke-width: 3; +} + +.link_outline { + stroke: #fff; + stroke-width: 6; + cursor: crosshair; + fill: none; + pointer-events: none; +} +.link_background { + stroke: #fff; + opacity: 0; + stroke-width: 25; + cursor: crosshair; + fill: none; +} + +g.link_selected path.link_line { + stroke: #ff7f0e; +} +g.link_unknown path.link_line { + stroke: #f00; + stroke-width: 2; + stroke-dasharray: 10, 4; +} + diff --git a/editor/sass/header.scss b/editor/sass/header.scss new file mode 100644 index 000000000..b6fa12e0e --- /dev/null +++ b/editor/sass/header.scss @@ -0,0 +1,179 @@ +/** + * 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. + **/ + +#header { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 40px; + background: #000; + box-sizing: border-box; + padding: 0px 0px 0px 20px; + color: #C7C7C7; + font-size: 14px; +} + +span.logo { + pointer-events: none; + float: left; + margin-top: 5px; + font-size: 30px; + line-height: 30px; + text-decoration: none; +} +span.logo span { + vertical-align: middle; + font-size: 16px !important; +} +span.logo img { + height: 18px; +} +#header ul.header-toolbar { + padding: 0; + margin: 0; + list-style: none; + float: right; +} + +#header ul.header-toolbar > li { + padding: 0; + margin: 0; + position: relative; +} + +#header ul.header-toolbar > li { + display: inline-block; +} + +.button { + @include disable-selection; +} + +#header .button { + min-width: 20px; + text-align: center; + line-height: 40px; + display: inline-block; + font-size: 14px; + padding: 0px 12px; + text-decoration: none; + color: #C7C7C7; + margin: auto 5px; + vertical-align: middle; + border-left: 2px solid #000; + border-right: 2px solid #000; +} +#header .button:not(.disabled):hover { + border-color: #323232; +} + +#btn-deploy { + background: #8C101C; /*#d24741;*/ + color: #eee !important; +} +#btn-deploy + a { + background: #8C101C; /*#BA403B;*/ + color: #eee; +} +#btn-deploy + a:hover { + background: #6E0A1E; /*#AD3C38;*/ + color: #eee; +} +#btn-deploy + a:active { + background: #4C0A17; /*#aa1f19;*/ + color: #ccc; +} +span.deploy-button-group.open > #btn-deploy + a { + background: #121212 !important; +} + +#btn-deploy:not(.disabled):hover { + background: #6E0A1E; /*#ca3f39;*/ +} + + +#btn-deploy:not(.disabled):active { + background: #4C0A17 /*#aa1f19*/ !important; +} +#btn-deploy:not(.disabled):active { + color: #ccc !important; +} + +#btn-deploy.disabled { + cursor: default; + background: #444; + color: #999 !important; +} + +#btn-deploy.disabled + a { + background: #444; + color: #ddd; +} +#btn-deploy.disabled + a:hover { + background: #555; + color: #ddd; +} +#btn-deploy.disabled + a:active { + background: #444; + color: #ddd; +} +span.deploy-button-group.open > #btn-deploy.disabled + a { + background: #121212 !important; +} + + +#btn-deploy img { + margin-right: 8px; +} +#btn-deploy.disabled img { + opacity: 0.3; +} + +.button-group { + display: inline-block; + margin: auto 15px; + vertical-align: middle; + background: #555; + clear: both; +} +.button-group > a { + float: left; + line-height: 22px; + font-size: 14px; + text-decoration: none; + display: inline-block; + padding: 4px 8px; + color: #ccc; + margin: 0; +} +.button-group > a:last-child { +} + +#header .button { + font-size: 20px !important; +} +#header .button:active, #header .button.active { + background: #121212; +} +#header .button:focus { + outline: none; +} +#header li.open .button { + background: #121212; + border-color: #121212; +} + diff --git a/editor/sass/jquery.scss b/editor/sass/jquery.scss new file mode 100644 index 000000000..47eb4e06c --- /dev/null +++ b/editor/sass/jquery.scss @@ -0,0 +1,53 @@ +/** + * 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. + **/ + +/* jQuery Theme overrides */ +.ui-tabs .ui-tabs-panel { + padding: 0px; +} + +.ui-autocomplete { + max-height: 250px; + overflow-x: hidden; + overflow-y: scroll; +} + +.ui-dialog { + border-radius: 1px; + border: 1px solid #eee; + background: #fff; + padding: 0; + box-shadow: 2px 2px 12px rgba(0,0,0,0.2); +} +.ui-dialog .ui-dialog-content { + padding: 25px 25px 10px 25px; +} +.ui-dialog .ui-dialog-titlebar { + padding: 10px; + background: #f0f0f0; + border: none; + border-bottom: 2px solid #888; + border-radius: 0; +} +.ui-corner-all { + border-radius: 2px; +} +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { + background: #f3f3f3; +} +.ui-dialog-no-close .ui-dialog-titlebar-close { + display: none; +} diff --git a/editor/sass/keyboard.scss b/editor/sass/keyboard.scss new file mode 100644 index 000000000..6c05e5046 --- /dev/null +++ b/editor/sass/keyboard.scss @@ -0,0 +1,40 @@ +/** + * 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. + **/ + +#keyboard-help-dialog { + font-size: 0.9em; +} +.keyboard-shortcuts { + padding: 10px; +} +.keyboard-shortcuts td { + padding: 7px 5px; + margin-bottom: 10px; + white-space: pre; +} +.keyboard-shortcuts td:first-child { + text-align: right; + padding-right: 10px; +} +.help-key { + border: 1px solid #ddd; + padding: 4px; + border-radius: 3px; + background: #f6f6f6; + font-family: Courier, monospace; + box-shadow: #999 1px 1px 1px; +} + diff --git a/editor/sass/library.scss b/editor/sass/library.scss new file mode 100644 index 000000000..50429d92e --- /dev/null +++ b/editor/sass/library.scss @@ -0,0 +1,33 @@ +/** + * 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. + **/ + +#node-select-library { + overflow: hidden; +} +#node-select-library ul { + list-style: none; + padding: 0px; + margin: 2px; +} +#node-select-library li { + cursor: pointer; +} +#node-select-library li.list-selected { + background: #eee; +} +#node-select-library li.list-hover { + background: #ffffd0; +} diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss new file mode 100644 index 000000000..0bc507c23 --- /dev/null +++ b/editor/sass/mixins.scss @@ -0,0 +1,29 @@ +/** + * 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. + **/ + +@mixin disable-selection { + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin component-border { + border: 1px solid #000; + border-radius: 3px; +} + diff --git a/editor/sass/notifications.scss b/editor/sass/notifications.scss new file mode 100644 index 000000000..f14c8c7fb --- /dev/null +++ b/editor/sass/notifications.scss @@ -0,0 +1,32 @@ +/** + * 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. + **/ + + +.notification { + position: absolute; +} +#notifications { + z-index: 10000; + width: 500px; + margin-left: -250px; + left: 50%; + position: absolute; + top: 1px; +} +#notifications .alert { + box-shadow: 0 0 1px 1px; + margin-bottom: 5px; +} diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss new file mode 100644 index 000000000..a3f8193e1 --- /dev/null +++ b/editor/sass/palette.scss @@ -0,0 +1,201 @@ +/** + * 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. + **/ + + +#palette { + position: absolute; + top: 5px; left:10px; bottom: 10px; + background: #f3f3f3; + width: 170px; + text-align: center; + @include disable-selection; + @include component-border; + +} +.palette-scroll { + display: none; + position: absolute; + top: 0; + left:0; + right: 0; + bottom: 35px; + padding: 5px; + overflow-y: auto; + box-sizing:border-box; + -moz-box-sizing: border-box; +} +.palette-spinner { + padding-top: 40px; +} +#palette-search { + position: absolute; + display: none; + bottom: 0; + left:0; + right:0; + overflow: hidden; + background: #f3f3f3; + text-align: center; + height: 35px; + padding: 3px; + border-top: 1px solid #999; + box-sizing:border-box; + -moz-box-sizing: border-box; +} +#palette-search i.fa-search { + position: absolute; + pointer-events: none; + left: 4px; + top: 10px; +} +#palette-search i.fa-times { + position: absolute; + right: 6px; + top: 10px; +} + +#palette-search-clear { + display: none; + color: #000; +} + +#palette-search input { + border-radius: 0; + border: none; + width: 100%; + box-shadow: none; + -webkit-box-shadow: none; + padding: 3px 17px; + margin: 0px; + height: 30px; + box-sizing:border-box; + -moz-box-sizing: border-box; +} + +#palette-search input:focus { + border: none; + box-shadow: none; + -webkit-box-shadow: none; +} + +.palette-category { + border: 1px solid #999; + border-radius: 3px; + margin-bottom: 5px; +} +.palette-content { + background: #fff; + border-top: 1px solid #aaa; + padding-bottom: 3px; +} + +.palette-header { + background: #f3f3f3; + border-radius: 3px; + cursor: pointer; + text-align: left; + padding: 1px; +} +.palette-header i { + margin: 3px 4px 3px 3px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); +} +.palette-header i.expanded { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); +} +.palette-header span { + clear: both; +} +.palette_label { + margin: 4px 0 4px 28px; + line-height: 20px; + overflow: hidden; + text-align: center; +} +.palette_label_right { + margin: 4px 28px 4px 0; +} + +.palette_node { + cursor:move; + font-size:13px; + background: #ddd; + margin: 10px auto; + height: 25px; + border-radius: 6px; + border: 2px solid #999; + background-position: 5% 50%; + background-repeat: no-repeat; + width: 120px; + background-size: contain; + position: relative; +} +.palette_node:hover { + border-color: #ff7f0e; + background-color: #eee; +} +.palette_port { + position: absolute; + top:8px; + left: -5px; + box-sizing: border-box; + -moz-box-sizing: border-box; + background:#d9d9d9; + border-radius: 3px; + width: 10px; + height: 10px; + border: 1px solid #999; +} +.palette_port_output { + left:auto; + right: -6px; +} + +.palette_node:hover .palette_port { + border-color: #999; + background-color: #eee; +} +.palette_icon_container { + position: absolute; + text-align: center; + top:0; + bottom:0; + left:0; + width: 30px; + border-right: 2px solid rgba(0,0,0,0.1); + background-color: rgba(0,0,0,0.05); +} +.palette_icon_container_right { + left: auto; + right: 0; + border-right: none; + border-left: 2px solid rgba(0,0,0,0.1); +} +.palette_icon { + display: inline-block; + width: 20px; + height: 100%; + background-position: 50% 50%; + background-size: contain; + background-repeat: no-repeat; +} diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss new file mode 100644 index 000000000..2d55fa54f --- /dev/null +++ b/editor/sass/sidebar.scss @@ -0,0 +1,54 @@ +/** + * 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. + **/ + + + +#sidebar { + width: 305px; + position: absolute; + right: 10px; top: 5px; bottom:10px; + background: #fff; + box-sizing: border-box; + -moz-box-sizing: border-box; + @include component-border; +} + +#sidebar.closing { + background: #eee; + border-color: #900; + border-style: dashed; +} + +#sidebar-content { + font-size: 1.2em; + overflow-y: auto; + position: absolute; + top: 30px; left: 0px; right: 0; bottom: 1px; +} + +#sidebar-separator { + width: 15px; + background: url(images/grip.png) no-repeat 50% 50%; + position: absolute; + right: 316px; top: 5px; bottom:10px; + 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; } + diff --git a/editor/sass/style.scss b/editor/sass/style.scss index 5ce93cad0..070ad9296 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -13,6 +13,35 @@ * See the License for the specific language governing permissions and * limitations under the License. **/ + +@import "mixins"; + +@import "jquery"; +@import "bootstrap"; + +@import "dropdownMenu"; + +@import "header"; +@import "palette"; +@import "sidebar"; +@import "workspace"; +@import "workspaceToolbar"; + +@import "notifications"; + +@import "editor"; +@import "library"; + +@import "tabs"; +@import "tab-config"; +@import "tab-info"; + +@import "flow"; + +@import "dragdrop"; + +@import "keyboard"; + body { font: 13px "Helvetica" !important; @@ -20,1167 +49,11 @@ body { background: url("images/pw_maze_white.png"); } -#header { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 40px; - background: #000; - box-sizing: border-box; - padding: 0px 0px 0px 20px; - color: #C7C7C7; - font-size: 14px; -} - - -#dropTarget { - position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; - background: rgba(0,0,0,0.1); - display:table; - width: 100%; - height: 100%; - display: none; -} -#dropTarget div { - display: table-cell; - vertical-align: middle; - text-align: center; - font-size: 40px; - color: #fff; -} -#dropTarget div i { - font-size: 80px; -} -div.btn-group, a.btn { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -span.logo { - pointer-events: none; - float: left; - margin-top: 5px; - font-size: 30px; - line-height: 30px; - text-decoration: none; -} -span.logo span { - vertical-align: middle; - font-size: 16px !important; -} -span.logo img { - height: 18px; -} -#header ul.header-toolbar { - padding: 0; - margin: 0; - list-style: none; - float: right; -} - -#header ul.header-toolbar > li { - padding: 0; - margin: 0; - position: relative; -} - -#header ul.header-toolbar > li { - display: inline-block; -} - -.button { - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#header .button { - min-width: 20px; - text-align: center; - line-height: 40px; - display: inline-block; - font-size: 14px; - padding: 0px 12px; - text-decoration: none; - color: #C7C7C7; - margin: auto 5px; - vertical-align: middle; - border-left: 2px solid #000; - border-right: 2px solid #000; -} -#header .button:not(.disabled):hover { - border-color: #323232; -} - -#btn-deploy { - background: #8C101C; /*#d24741;*/ - color: #eee !important; -} -#btn-deploy + a { - background: #8C101C; /*#BA403B;*/ - color: #eee; -} -#btn-deploy + a:hover { - background: #6E0A1E; /*#AD3C38;*/ - color: #eee; -} -#btn-deploy + a:active { - background: #4C0A17; /*#aa1f19;*/ - color: #ccc; -} -span.deploy-button-group.open > #btn-deploy + a { - background: #121212 !important; -} - -#btn-deploy:not(.disabled):hover { - background: #6E0A1E; /*#ca3f39;*/ -} - - -#btn-deploy:not(.disabled):active { - background: #4C0A17 /*#aa1f19*/ !important; -} -#btn-deploy:not(.disabled):active { - color: #ccc !important; -} - -#btn-deploy.disabled { - cursor: default; - background: #444; - color: #999 !important; -} - -#btn-deploy.disabled + a { - background: #444; - color: #ddd; -} -#btn-deploy.disabled + a:hover { - background: #555; - color: #ddd; -} -#btn-deploy.disabled + a:active { - background: #444; - color: #ddd; -} -span.deploy-button-group.open > #btn-deploy.disabled + a { - background: #121212 !important; -} - - -#btn-deploy img { - margin-right: 8px; -} -#btn-deploy.disabled img { - opacity: 0.3; -} - -.button-group { - display: inline-block; - margin: auto 15px; - vertical-align: middle; - background: #555; - clear: both; -} -.button-group > a { - float: left; - line-height: 22px; - font-size: 14px; - text-decoration: none; - display: inline-block; - padding: 4px 8px; - color: #ccc; - margin: 0; -} -.button-group > a:last-child { -} - -#header .button { - font-size: 20px !important; -} -#header .button:active, #header .button.active { - background: #121212; -} -#header .button:focus { - outline: none; -} -#header li.open .button { - background: #121212; - border-color: #121212; -} - - - -#workspace-toolbar .button { - line-height: 18px; - display: inline-block; - font-size: 12px; - padding: 2px 8px; - text-decoration: none; - border-radius: 3px; - color: #666; - background: #f6f6f6; - vertical-align: middle; - box-shadow: 0 0 2px #888; - margin-right: 5px; -} -#workspace-toolbar .button.disabled { - box-shadow: 0 0 2px #bbb; - color: #aaa; - cursor: default; -} -#workspace-toolbar .button:not(.disabled):hover { - background: #e6e6e6; - box-shadow: 0 0 2px #666; -} -#workspace-toolbar .button:not(.disabled):active { - background: #e0e0e0; - box-shadow: 0 0 2px #444; -} - -#workspace { - margin-left: 160px; - overflow: hidden; -} - -#chart { - overflow: auto; - background: #e3e3e3; - position: absolute; - bottom:0px; - top: 30px; - left:0px; - right:0px; -} -#chart svg:focus { - outline: none; -} -#workspace-toolbar { - display: none; - position: absolute; - top: 30px; - left:0; - right: 20px; - padding: 7px; - border-bottom-right-radius: 5px; - background: #f3f3f3; -} - -#chart-zoom-controls { - padding-top: 3px; - text-align: right; - float: right; -} - -#palette { - background: #f3f3f3; - width: 170px; - text-align: center; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.palette-scroll { - display: none; - position: absolute; - top: 0; - left:0; - right: 0; - bottom: 35px; - padding: 5px; - overflow-y: auto; - box-sizing:border-box; - -moz-box-sizing: border-box; -} -.palette-spinner { - padding-top: 40px; -} -#palette-search { - position: absolute; - display: none; - bottom: 0; - left:0; - right:0; - overflow: hidden; - background: #f3f3f3; - text-align: center; - height: 35px; - padding: 3px; - border-top: 1px solid #999; - box-sizing:border-box; - -moz-box-sizing: border-box; -} -#palette-search i.fa-search { - position: absolute; - pointer-events: none; - left: 4px; - top: 10px; -} -#palette-search i.fa-times { - position: absolute; - right: 6px; - top: 10px; -} - -#palette-search-clear { - display: none; - color: #000; -} - -#palette-search input { - border-radius: 0; - border: none; - width: 100%; - box-shadow: none; - -webkit-box-shadow: none; - padding: 3px 17px; - margin: 0px; - height: 30px; - box-sizing:border-box; - -moz-box-sizing: border-box; -} - -#palette-search input:focus { - border: none; - box-shadow: none; - -webkit-box-shadow: none; -} - -.palette-category { - border: 1px solid #999; - border-radius: 3px; - margin-bottom: 5px; -} -.palette-content { - background: #fff; - border-top: 1px solid #aaa; - padding-bottom: 3px; -} - -.palette-header { - background: #f3f3f3; - border-radius: 3px; - cursor: pointer; - text-align: left; - padding: 1px; -} -.palette-header i { - margin: 3px 4px 3px 3px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -o-transform: rotate(-90deg); -} -.palette-header i.expanded { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -o-transform: rotate(0deg); -} -.palette-header span { - clear: both; -} -.palette_label { - margin: 4px 0 4px 28px; - line-height: 20px; - overflow: hidden; - text-align: center; -} -.palette_label_right { - margin: 4px 28px 4px 0; -} - -.palette_node { - cursor:move; - font-size:13px; - background: #ddd; - margin: 10px auto; - height: 25px; - border-radius: 6px; - border: 2px solid #999; - background-position: 5% 50%; - background-repeat: no-repeat; - width: 120px; - background-size: contain; - position: relative; -} -.palette_node:hover { - border-color: #ff7f0e; - background-color: #eee; -} -.palette_port { - position: absolute; - top:8px; - left: -5px; - box-sizing: border-box; - -moz-box-sizing: border-box; - background:#d9d9d9; - border-radius: 3px; - width: 10px; - height: 10px; - border: 1px solid #999; -} -.palette_port_output { - left:auto; - right: -6px; -} - -.palette_node:hover .palette_port { - border-color: #999; - background-color: #eee; -} -.palette_icon_container { - position: absolute; - text-align: center; - top:0; - bottom:0; - left:0; - width: 30px; - border-right: 2px solid rgba(0,0,0,0.1); - background-color: rgba(0,0,0,0.05); -} -.palette_icon_container_right { - left: auto; - right: 0; - border-right: none; - border-left: 2px solid rgba(0,0,0,0.1); -} -.palette_icon { - display: inline-block; - width: 20px; - height: 100%; - background-position: 50% 50%; - background-size: contain; - background-repeat: no-repeat; -} - -#sidebar { - background: #fff; - box-sizing: border-box; - -moz-box-sizing: border-box; -} -#sidebar.closing { - background: #eee; - border-color: #900; - border-style: dashed; -} - -/* ---------- Layout ---------- */ #main-container { position: absolute; top:50px; left:0; bottom: 0; right:0; overflow:hidden; } -#palette { - position: absolute; - top: 5px; left:10px; bottom: 10px; -} -#workspace { - position: absolute; - margin: 0; - top:5px; left:190px; bottom: 10px; right: 330px; -} -#chart-zoom-controls { - position: absolute; - bottom:30px; right: 350px; -} -#sidebar { - width: 305px; - position: absolute; - right: 10px; top: 5px; bottom:10px; -} -#sidebar-separator { - width: 15px; - background: url(images/grip.png) no-repeat 50% 50%; - position: absolute; - right: 316px; top: 5px; bottom:10px; - 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; } - -/* ---------- end layout ---------- */ - -.lasso { - stroke-width: 2px; - stroke: #ff7f0e; - fill: rgba(20,125,255,0.1); - stroke-dasharray: 10 5; -} - -.group-box { - stroke-width: 1px; - stroke: #aaaaaa; - fill: rgba(208, 211, 238, 0.1); - stroke-dasharray: 3 3; -} -.group-box-active { - fill: #fff; - stroke: #ff7f0e; -} - -.group_label { - stroke-width: 0; - fill: #999; - font-size: 11px; - pointer-events: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.pull-right { - margin-left: 20px; -} - -#workspace, #palette, #sidebar { - border: 1px solid #000; - border-radius: 3px; -} -#sidebar-content { - font-size: 1.2em; - overflow-y: auto; - position: absolute; - top: 30px; left: 0px; right: 0; bottom: 1px; -} - -.node_label_italic { - font-style: italic; -} -.node_label_unknown { - font-style: italic; - fill: #e00 !important; -} -.node_label_white { - fill: #eee !important; -} -.node_label { - stroke-width: 0; - fill: #333; - font-size: 14px; - pointer-events: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.port_label { - stroke-width: 0; - fill: #888; - font-size: 16px; - alignment-baseline: middle; - text-anchor: middle; - pointer-events: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - - -.function_label { - font-size: 12px; -} -.node { - stroke: #999; - cursor: move; - stroke-width: 2; -} -.node_unknown { - stroke-dasharray:10,4; - stroke: #f33; -} -.tool_arrow { - stroke-width: 1; - stroke: #999; - fill: #999; - cursor: pointer; -} -.node_tools { - fill: #ddd; - stroke: #999; - cursor: move; - stroke-width: 1; - cursor: pointer; -} -.node_tools_hovered { - stroke: #ff7f0e; - fill: #eee; -} - -.node_button { - fill: inherit; - -} -.port { - stroke: #999; - stroke-width: 2; - fill: #ddd; - cursor: crosshair; -} - -.port_highlight { - stroke: #6DA332; - stroke-width: 3; - fill: #fff; - pointer-events:none; - fill-opacity: 0.5; -} - - -.node_error { - stroke: #ff0000; - stroke-width: 2; - fill: #ff7f0e; -} - -.node_badge { - stroke: rgb(93, 114, 145); - stroke-width: 1; - fill: rgb(190, 209, 255); -} -.node_badge_label { - stroke-width:0; - fill: #fff; - font-size: 11px; - pointer-events: none; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -} -.node_invalid { - stroke: #ff0000; -} -.node_selected { - stroke: #ff7f0e !important; -} -.node_highlighted { - stroke: #dd1616; - stroke-width: 3; - stroke-dasharray: 10, 4; -} -.node_hovered { -} - -.port_hovered { - stroke: #ff7f0e; - fill: #ff7f0e; -} -.subflowport { - stroke-dasharray: 5,5; - fill: #eee; - stroke: #999; -} - -.drag_line { - stroke: #ff7f0e; - stroke-width: 5; - fill: none; - pointer-events: none; -} - -.drag_line_hidden { - stroke: #ff7f0e; - stroke-width: 0; - pointer-events: none; - fill: none; -} - -.link_line { - stroke: #7f7f7f; - stroke-width: 4; - fill: none; - pointer-events: none; -} - -.link_subflow { - stroke: #bbb; - stroke-dasharray: 10,5; - stroke-width: 3; -} - -.link_outline { - stroke: #fff; - stroke-width: 6; - cursor: crosshair; - fill: none; - pointer-events: none; -} -.link_background { - stroke: #fff; - opacity: 0; - stroke-width: 25; - cursor: crosshair; - fill: none; -} - -g.link_selected path.link_line { - stroke: #ff7f0e; -} -g.link_unknown path.link_line { - stroke: #f00; - stroke-width: 2; - stroke-dasharray: 10, 4; -} - -#shade { - position: absolute; - top:0; - left:0; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.1); - text-align: center; - display: none; -} - -#dialog { -} - -.container { -} - -.notification { - position: absolute; -} -#notifications { - z-index: 10000; - width: 500px; - margin-left: -250px; - left: 50%; - position: absolute; - top: 1px; -} -#notifications .alert { - box-shadow: 0 0 1px 1px; - margin-bottom: 5px; -} - -.dialog-form, #dialog-form, #dialog-config-form { - margin: 0; - height: 100%; -} - - -.form-row { - clear: both; - margin-bottom:10px; -} -.form-row label { - display: inline-block; - width: 100px; -} -.form-row input { - width:70%; -} - -input.input-append-left { - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} -button.input-append-right { - border-top-left-radius: 0px !important; - border-bottom-left-radius: 0px !important; - border-top-right-radius: 4px !important; - border-bottom-right-radius: 4px !important; - margin-left: -1px !important; - padding-left: 4px !important; - padding-right: 4px !important; -} - -.form-tips { - background: lightgoldenrodyellow; - font-size: 12px; - padding: 8px; - border-radius: 5px; - border: 1px solid #999; - max-width: 450px; -} -.form-tips code { - border: none; - padding: auto; -} - -table.node-info { - font-size: 14px; - margin: 5px; - width: 97%; -} -table.node-info tr { - border: 1px solid #ddd; -} -table.node-info tr.blank { - border: none; -} -table.node-info tr.blank td { - padding-top: 8px; - border: none; - font-weight: bold; - padding-left: 0px; -} -table.node-info td:first-child{ - color: #000; - vertical-align: top; - width: 90px; - padding: 3px; - border-right: 1px solid #ddd; -} -table.node-info td:last-child{ - padding-left: 5px; - color: #666; -} - -div.node-info { - margin: 5px; -} -.node-info-property-header { - color: #666; -} - -.node-info-property-header:hover, -.node-info-property-header:focus { - color: #666; - text-decoration: none; -} - - -.input-error { - border-color: rgb(214, 97, 95) !important; -} - -.hidden { - display: none; -} - -.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a { - background: #999; -} - -.dropdown-menu * .fa-check-square { - display: none; - color: #e0e0e0; - margin-left: -25px; - margin-top: 3px; -} -.dropdown-menu * a.active > .fa-check-square { - display: inline-block; -} -.dropdown-menu * .fa-square { - display: inline-block; - color: #e0e0e0; - margin-left: -25px; - margin-top: 3px; -} -.dropdown-menu * a.active > .fa-square { - display: none; -} - - -.dropdown-menu>li.disabled>a:hover>[class^="icon-"] { - background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important; -} -/** Fix for unreachable dropdown menu **/ -.dropdown-menu { - border-radius: 0; - width: 200px !important; - margin-left: 0px !important; -} -.dropdown-menu > li > a > i { - width: 10px; - text-align: center; - margin-left: -8px; -} -.dropdown-menu > li > a { - padding-left: 38px ; - text-indent: -8px ; - white-space: normal !important; -} - -.dropdown-submenu>a:after { - display: none; -} -.dropdown-submenu>a:before { - display: block; - float: left; - width: 0; - height: 0; - margin-top: 5px; - margin-left: -30px; - border-color: transparent; - border-right-color: #e0e0e0; - border-style: solid; - border-width: 5px 5px 5px 0; - content: " "; -} - -.dropdown-submenu.disabled > a:before { - border-right-color: #444; -} -.dropdown-submenu.pull-left>.dropdown-menu { - border-radius: 0; -} - - -.popover-title { display: none; } - -.leftButton { - margin-right: 200px !important; -} -#node-help { - width: 700px; -} -#keyboard-help-dialog { - font-size: 0.9em; -} -.keyboard-shortcuts { - padding: 10px; -} -.keyboard-shortcuts td { - padding: 7px 5px; - margin-bottom: 10px; - white-space: pre; -} -.keyboard-shortcuts td:first-child { - text-align: right; - padding-right: 10px; -} -.help-key { - border: 1px solid #ddd; - padding: 4px; - border-radius: 3px; - background: #f6f6f6; - font-family: Courier, monospace; - box-shadow: #999 1px 1px 1px; -} - -#helpcontent { - padding: 20px; - border: 1px solid #ddd; - border-radius: 10px; - - background: #fff; -} -#helpnavigation { - overflow: hidden; - border: 1px solid #ddd; - border-radius: 10px; - background: #fff; -} -#helpnavigation li a{ - font-size: 1.2em; - padding: 10px; - border-bottom: 1px solid #ddd; -} - -#node-select-library { - overflow: hidden; -} -#node-select-library ul { - list-style: none; - padding: 0px; - margin: 2px; -} -#node-select-library li { - cursor: pointer; -} -#node-select-library li.list-selected { - background: #eee; -} -#node-select-library li.list-hover { - background: #ffffd0; -} -.node-text-editor { - border:1px solid #ccc; - border-radius:5px; - overflow: hidden; - font-size: 16px !important; -} -#workspace-tabs { - margin-right: 28px; -} -#workspace-add-tab { - position: absolute; - top: 0; - right: 0; - height: 29px; - width: 28px; - border-bottom: 1px solid #999; -} -#btn-workspace-add-tab { - display: inline-block; - width: 100%; - background: #e3e3e3; - height: 100%; - line-height: 30px; - text-align: center; - color: #000; -} -#btn-workspace-add-tab:hover { - background: #efefef; -} - -ul.red-ui-tabs { - list-style-type: none; - padding:5px 2px 0px 5px; - margin: 0; - display: block; - height: 24px; - border-bottom: 1px solid #999; - background: #e3e3e3; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul.red-ui-tabs li { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - display: inline-block; - border-left: 1px solid #999; - border-top: 1px solid #999; - border-right: 1px solid #999; - border-bottom: 1px solid #999; - background: #e3e3e3; - margin: 0 5px 0 0; - height: 23px; - line-height: 17px; - max-width: 200px; - width: 14%; - overflow: hidden; - white-space: nowrap; -} - -ul.red-ui-tabs li a.red-ui-tab-label { - display: block; - padding: 3px 16px; - color: #666; -} -ul.red-ui-tabs li { - position: relative; -} - -ul.red-ui-tabs li a.red-ui-tab-close { - background: rgba(227,227,227,0.8); - position: absolute; - right: 2px; - top: 2px; - display: block; - width: 20px; - height: 20px; - line-height: 20px; - text-align: center; - padding: 0px; - border-radius: 5px; - color: #666; -} -ul.red-ui-tabs li a.red-ui-tab-close:hover { - background: #bbb !important; -} -ul.red-ui-tabs li a:hover { - text-decoration: none; - background: #f0f0f0; -} - -ul.red-ui-tabs li.active { - background: #fff; - border-bottom: 1px solid #fff; -} -ul.red-ui-tabs li.active a { - color: #333; -} -ul.red-ui-tabs li.active a.red-ui-tab-close { - background: rgba(255,255,255,0.8); -} -ul.red-ui-tabs li.active a.red-ui-tab-label:hover { - background: #fff; -} -ul.red-ui-tabs li.red-ui-add-tab { - width: 25px; - border-top-right-radius: 15px; - line-height: 22px; -} -ul.red-ui-tabs li.red-ui-add-tab a { - padding: 2px 4px; -} - -ul.tab-config-list { - list-style-type: none; - padding: 3px; - margin: 0; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -ul.tab-config-list li { - max-width: 400px; - font-size: 13px; - background: #f3f3f3; - margin: 10px auto; - border-radius: 3px; - border: 1px solid #ccc; - padding: 3px 8px; -} -div.tab-config-list-type { -} - -div.tab-config-list-entry { - position: relative; - margin: 4px 0; - padding: 8px 4px 8px 10px; - background: #fff; - border: 1px solid #ccc; - border-radius: 4px; - cursor: pointer; -} -div.tab-config-list-entry:hover { - background: #f6f6f6; -} - -div.tab-config-list-label { -} -div.tab-config-list-users { - position: absolute; - right: 3px; - top: 3px; - bottom: 3px; - line-height: 27px; - font-size: 11px; - background: #f6f6f6; - float: right; - border: 1px solid #eee; - border-radius: 3px; - padding: 1px 5px; -} i.spinner { display: inline-block; @@ -1194,120 +67,4 @@ i.spinner { } -/* jQuery Theme overrides */ -.ui-tabs .ui-tabs-panel { - padding: 0px; -} -.ui-autocomplete { - max-height: 250px; - overflow-x: hidden; - overflow-y: scroll; -} - -.ui-dialog { - border-radius: 1px; - border: 1px solid #eee; - background: #fff; - padding: 0; - box-shadow: 2px 2px 12px rgba(0,0,0,0.2); -} -.ui-dialog .ui-dialog-content { - padding: 25px 25px 10px 25px; -} -.ui-dialog .ui-dialog-titlebar { - padding: 10px; - background: #f0f0f0; - border: none; - border-bottom: 2px solid #888; - border-radius: 0; -} -.ui-corner-all { - border-radius: 2px; -} -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - background: #f3f3f3; -} -.ui-dialog-no-close .ui-dialog-titlebar-close { - display: none; -} - -#header ul.dropdown-menu { - background: #121212; - width: 250px !important; - margin-top: 0; -} - -#header ul.dropdown-menu li a { - color: #C7C7C7; - padding: 3px 40px; -} - -#header ul.dropdown-menu li a img { - margin-right: 10px; - padding: 4px; - border: 3px solid rgba(0,0,0,0); -} - -#header ul.dropdown-menu li a.active img { - border: 3px solid #777677; -} - -#header ul.dropdown-menu li a span.menu-label-container { - width: 180px; - vertical-align: top; - display: inline-block; - text-indent: 0px; -} -#header ul.dropdown-menu li a span.menu-label { - font-size: 14px; - display: inline-block; - text-indent: 0px; -} -#header ul.dropdown-menu li a span.menu-sublabel { - color: #aeaeae; - font-size: 13px; - display: inline-block; - text-indent: 0px; -} - -#header ul.dropdown-menu > li:hover > a, -#header ul.dropdown-menu > li:focus > a { - background: #323232 !important; -} - -#header ul.dropdown-menu li.divider { - background: #464646; - border-bottom-color: #323232; -} -#header ul.dropdown-menu li.disabled a { - color: #666; -} - -#header ul.dropdown-menu > li.disabled:hover > a, -#header ul.dropdown-menu > li.disabled:focus > a { - background: none !important; -} - -/* Deploy menu customisations */ -#header ul#btn-deploy-options-submenu { - width: 300px !important; -} -#header ul#btn-deploy-options-submenu li a span.menu-label { - font-size: 16px; - display: inline-block; - text-indent: 0px; -} -#header ul#btn-deploy-options-submenu li a { - padding: 10px 30px; - color: #fff; -} -#header ul#btn-deploy-options-submenu li a > i.fa { - display: none !important; -} - -/* User menu customisations */ -#header ul#btn-usermenu-submenu li a#btn-username > .menu-label { - font-size: 16px; - color: #fff; -} diff --git a/editor/sass/tab-config.scss b/editor/sass/tab-config.scss new file mode 100644 index 000000000..a5ee6c772 --- /dev/null +++ b/editor/sass/tab-config.scss @@ -0,0 +1,63 @@ +/** + * 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. + **/ + +ul.tab-config-list { + list-style-type: none; + padding: 3px; + margin: 0; + @include disable-selection; +} + +ul.tab-config-list li { + max-width: 400px; + font-size: 13px; + background: #f3f3f3; + margin: 10px auto; + border-radius: 3px; + border: 1px solid #ccc; + padding: 3px 8px; +} +div.tab-config-list-type { +} + +div.tab-config-list-entry { + position: relative; + margin: 4px 0; + padding: 8px 4px 8px 10px; + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; +} +div.tab-config-list-entry:hover { + background: #f6f6f6; +} + +div.tab-config-list-label { +} +div.tab-config-list-users { + position: absolute; + right: 3px; + top: 3px; + bottom: 3px; + line-height: 27px; + font-size: 11px; + background: #f6f6f6; + float: right; + border: 1px solid #eee; + border-radius: 3px; + padding: 1px 5px; +} diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss new file mode 100644 index 000000000..d55ff8af1 --- /dev/null +++ b/editor/sass/tab-info.scss @@ -0,0 +1,77 @@ +/** + * 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. + **/ + +table.node-info { + font-size: 14px; + margin: 5px; + width: 97%; +} +table.node-info tr { + border: 1px solid #ddd; +} +table.node-info tr.blank { + border: none; +} +table.node-info tr.blank td { + padding-top: 8px; + border: none; + font-weight: bold; + padding-left: 0px; +} +table.node-info td:first-child{ + color: #000; + vertical-align: top; + width: 90px; + padding: 3px; + border-right: 1px solid #ddd; +} +table.node-info td:last-child{ + padding-left: 5px; + color: #666; +} + +div.node-info { + margin: 5px; +} +.node-info-property-header { + color: #666; +} + +.node-info-property-header:hover, +.node-info-property-header:focus { + color: #666; + text-decoration: none; +} +.node-help { + font-size: 16px; + h1 { + font-weight: normal; + font-size: 1.953em; + margin: 8px auto; + } + h2 { + font-weight: normal; + font-size: 1.563em; + margin: 8px auto; + } + h3, + h4, + h5 { + font-weight: normal; + font-size: 1.25em; + margin: 8px auto; + } +} diff --git a/editor/sass/tabs.scss b/editor/sass/tabs.scss new file mode 100644 index 000000000..385df9dc9 --- /dev/null +++ b/editor/sass/tabs.scss @@ -0,0 +1,101 @@ +/** + * 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. + **/ + +ul.red-ui-tabs { + list-style-type: none; + padding:5px 2px 0px 5px; + margin: 0; + display: block; + height: 24px; + border-bottom: 1px solid #999; + background: #e3e3e3; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +ul.red-ui-tabs li { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + display: inline-block; + border-left: 1px solid #999; + border-top: 1px solid #999; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + background: #e3e3e3; + margin: 0 5px 0 0; + height: 23px; + line-height: 17px; + max-width: 200px; + width: 14%; + overflow: hidden; + white-space: nowrap; +} + +ul.red-ui-tabs li a.red-ui-tab-label { + display: block; + padding: 3px 16px; + color: #666; +} +ul.red-ui-tabs li { + position: relative; +} + +ul.red-ui-tabs li a.red-ui-tab-close { + background: rgba(227,227,227,0.8); + position: absolute; + right: 2px; + top: 2px; + display: block; + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + padding: 0px; + border-radius: 5px; + color: #666; +} +ul.red-ui-tabs li a.red-ui-tab-close:hover { + background: #bbb !important; +} +ul.red-ui-tabs li a:hover { + text-decoration: none; + background: #f0f0f0; +} + +ul.red-ui-tabs li.active { + background: #fff; + border-bottom: 1px solid #fff; +} +ul.red-ui-tabs li.active a { + color: #333; +} +ul.red-ui-tabs li.active a.red-ui-tab-close { + background: rgba(255,255,255,0.8); +} +ul.red-ui-tabs li.active a.red-ui-tab-label:hover { + background: #fff; +} +ul.red-ui-tabs li.red-ui-add-tab { + width: 25px; + border-top-right-radius: 15px; + line-height: 22px; +} +ul.red-ui-tabs li.red-ui-add-tab a { + padding: 2px 4px; +} diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss new file mode 100644 index 000000000..b15771db6 --- /dev/null +++ b/editor/sass/workspace.scss @@ -0,0 +1,76 @@ +/** + * 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. + **/ + +#workspace { + margin-left: 160px; + overflow: hidden; +} + +#chart { + overflow: auto; + background: #e3e3e3; + position: absolute; + bottom:0px; + top: 30px; + left:0px; + right:0px; +} +#chart svg:focus { + outline: none; +} + + +#workspace { + position: absolute; + margin: 0; + top:5px; left:190px; bottom: 10px; right: 330px; +} +#chart-zoom-controls { + position: absolute; + bottom:30px; right: 350px; +} + +#chart-zoom-controls { + padding-top: 3px; + text-align: right; + float: right; +} + +#workspace-tabs { + margin-right: 28px; +} +#workspace-add-tab { + position: absolute; + top: 0; + right: 0; + height: 29px; + width: 28px; + border-bottom: 1px solid #999; +} + +#btn-workspace-add-tab { + display: inline-block; + width: 100%; + background: #e3e3e3; + height: 100%; + line-height: 30px; + text-align: center; + color: #000; +} +#btn-workspace-add-tab:hover { + background: #efefef; +} + diff --git a/editor/sass/workspaceToolbar.scss b/editor/sass/workspaceToolbar.scss new file mode 100644 index 000000000..6fc58e7cc --- /dev/null +++ b/editor/sass/workspaceToolbar.scss @@ -0,0 +1,54 @@ +/** + * 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. + **/ + + +#workspace-toolbar { + display: none; + position: absolute; + top: 30px; + left:0; + right: 20px; + padding: 7px; + border-bottom-right-radius: 5px; + background: #f3f3f3; +} + +#workspace-toolbar .button { + line-height: 18px; + display: inline-block; + font-size: 12px; + padding: 2px 8px; + text-decoration: none; + border-radius: 3px; + color: #666; + background: #f6f6f6; + vertical-align: middle; + box-shadow: 0 0 2px #888; + margin-right: 5px; +} +#workspace-toolbar .button.disabled { + box-shadow: 0 0 2px #bbb; + color: #aaa; + cursor: default; +} +#workspace-toolbar .button:not(.disabled):hover { + background: #e6e6e6; + box-shadow: 0 0 2px #666; +} +#workspace-toolbar .button:not(.disabled):active { + background: #e0e0e0; + box-shadow: 0 0 2px #444; +}