From 43dde98b9a2440097a6c237d5cec8a36bc64cbdf Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 8 Feb 2012 16:09:43 -0800 Subject: Squashed commit of the following: commit 0537f8f29e7b8dd48fd08f20b1533fbe92a54c4b Merge: ab12be4 b6bc8b0 Author: mayhewinator Date: Wed Feb 8 14:46:17 2012 -0800 Merge pull request #25 from mayhewinator/WorkingBranch Adding assets required to be a packaged chrome app commit b6bc8b0bb91382991e6e43ad341304c813124882 Merge: c7b5edf ab12be4 Author: John Mayhew Date: Wed Feb 8 14:39:16 2012 -0800 Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal into WorkingBranch commit c7b5edf0351d678d26b17eb5e2f995a140e209bb Author: John Mayhew Date: Wed Feb 8 14:38:25 2012 -0800 Added manifest.json, and image file required for being a packaged chrome application. Removed the old versions.json and updated the main page to detect if it is running as a chrome app and retrieve the version info from the chrome.app object. If the app is running hosted, the code will use an XHR to load the manifest.json and retrieve the version number from it directly. commit ab12be4e9a0d9fee4450795077b0107983b5682e Merge: 10cdeb5 2e58595 Author: Valerio Virgillito Date: Wed Feb 8 14:03:36 2012 -0800 Merge pull request #23 from joseeight/SCSS Changing _scss folder to scss commit 2e58595d5c58ad9937bfc4f85ba8894970d4719f Author: Jose Antonio Marquez Date: Wed Feb 8 13:56:54 2012 -0800 adding new scss folder commit 7afa8f3fb2f2cede0b227a00ccc2b84267278db6 Author: Jose Antonio Marquez Date: Wed Feb 8 13:54:42 2012 -0800 delete _scss directory commit 10cdeb52403f16d5d4be43a516e8cdfbc866a2a2 Merge: 24f9717 9a404b8 Author: Valerio Virgillito Date: Wed Feb 8 11:33:42 2012 -0800 Merge pull request #21 from mencio/pi_bugs Pi bugs fixes for 964, 616, 1084 commit 24f9717f2714f0497382436c4602736283247cf1 Merge: 763910b 9154cff Author: Valerio Virgillito Date: Wed Feb 8 11:33:22 2012 -0800 Merge pull request #22 from ericguzman/StylesControllerUpdates Styles Controller - Added array of dirty stylesheets and event dispatch ... commit 9154cff2ce10aae54d9a7bd37a9d8b5578b0e297 Author: Eric Guzman Date: Wed Feb 8 10:39:17 2012 -0800 Styles Controller - Added array of dirty stylesheets and event dispatch when a sheet is dirtied. commit 763910b9d074137eb7dee80447b89407ce5750c9 Merge: e557937 329a859 Author: Valerio Virgillito Date: Wed Feb 8 10:18:36 2012 -0800 Merge pull request #20 from mqg734/ToolFixes Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs: commit e5579374ff39b80b8c0c69faba37f6f581758fe0 Author: Valerio Virgillito Date: Tue Feb 7 13:28:17 2012 -0800 updated montage v.0.6 to the latest changes. Signed-off-by: Valerio Virgillito commit 9a404b8a717d0aac0eabb828a4d3cdc8c9c3eed8 Author: Valerio Virgillito Date: Tue Feb 7 17:42:04 2012 -0800 IKNINJA - 1084: Fixing the custom tag. Signed-off-by: Valerio Virgillito commit a930295dfebd7fe7b4db5324b2048e6e7366c6d8 Author: Valerio Virgillito Date: Tue Feb 7 16:12:23 2012 -0800 IKNINJA-616 - Drag and drop images fix for the PI and source Signed-off-by: Valerio Virgillito commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d Author: Nivesh Rajbhandari Date: Tue Feb 7 15:25:11 2012 -0800 Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options. Signed-off-by: Nivesh Rajbhandari commit 65145cebdf4cde2767cbd0489ddcea5863c2ca9e Author: Valerio Virgillito Date: Tue Feb 7 14:53:46 2012 -0800 IKNINJA-964 - Fixed inconsistent element name in PI/CSS panel. Signed-off-by: Valerio Virgillito commit 668510892537eaaeb2e11520831d87b44b2489b7 Merge: 8950b34 c066fb4 Author: Valerio Virgillito Date: Tue Feb 7 14:19:22 2012 -0800 Merge pull request #19 from ericguzman/TreeComponents Tree Components - Added copyright comments commit aec849d91e4b697d496b9ede28b5d89cf2283781 Author: Nivesh Rajbhandari Date: Tue Feb 7 14:18:13 2012 -0800 id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number. Signed-off-by: Nivesh Rajbhandari commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f Author: Nivesh Rajbhandari Date: Tue Feb 7 13:52:54 2012 -0800 Fixing some typos and undeclared variables in GLRectangle and ShapesController. Signed-off-by: Nivesh Rajbhandari commit c066fb41ebee85bacf9b2155366b16831af41d76 Author: Eric Guzman Date: Tue Feb 7 13:46:05 2012 -0800 Tree Components - Added copyright comments commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d Author: Nivesh Rajbhandari Date: Tue Feb 7 13:30:08 2012 -0800 Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines. Signed-off-by: Nivesh Rajbhandari commit 8ad767b61460984a4031ba630f76ac8247a61857 Author: Nivesh Rajbhandari Date: Tue Feb 7 11:42:10 2012 -0800 Fixed PI to support WebGL materials. Signed-off-by: Nivesh Rajbhandari commit 486842239c71e7964f38a09aacda4970f2a82e1a Author: Nivesh Rajbhandari Date: Tue Feb 7 10:58:14 2012 -0800 Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari commit 789eaf5a92c903f27462c69a8890fbec695ab14e Merge: 92ae17b 8950b34 Author: Nivesh Rajbhandari Date: Tue Feb 7 09:36:29 2012 -0800 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a Author: Nivesh Rajbhandari Date: Mon Feb 6 16:35:12 2012 -0800 Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa). Signed-off-by: Nivesh Rajbhandari commit 75486be2839494c9b54833aff8f5eef3f9542151 Author: Nivesh Rajbhandari Date: Mon Feb 6 15:41:48 2012 -0800 Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data. Signed-off-by: Nivesh Rajbhandari commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e Author: Nivesh Rajbhandari Date: Mon Feb 6 14:03:40 2012 -0800 Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI. Signed-off-by: Nivesh Rajbhandari commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981 Author: Nivesh Rajbhandari Date: Mon Feb 6 13:35:30 2012 -0800 Allow users to switch between 2d and webGL mode. Note that this doesn't currently work. Signed-off-by: Nivesh Rajbhandari commit 486d9a31a85dd833a1c798049a00403756703034 Author: Nivesh Rajbhandari Date: Mon Feb 6 11:35:49 2012 -0800 Support use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Jonathan Duran --- scss/config.rb | 11 + scss/imports/codemirror/_codemirror.scss | 75 ++ scss/imports/codemirror/_css.scss | 15 + scss/imports/codemirror/_javascript.scss | 12 + scss/imports/scss/_Base.scss | 231 ++++++ scss/imports/scss/_Components.scss | 33 + scss/imports/scss/_MainWindow.scss | 338 ++++++++ scss/imports/scss/_MenuUI.scss | 75 ++ scss/imports/scss/_PanelUI.scss | 1256 ++++++++++++++++++++++++++++++ scss/imports/scss/_ScrollBars.scss | 158 ++++ scss/imports/scss/_Stage.scss | 194 +++++ scss/imports/scss/_Tools.scss | 487 ++++++++++++ scss/imports/scss/_ToolsSample.scss | 14 + scss/imports/scss/_UserContent.scss | 10 + scss/imports/scss/_mixins.scss | 20 + scss/imports/scss/_toolbar.scss | 290 +++++++ scss/imports/themes/_test.scss | 55 ++ scss/imports/themes/default/_colors.scss | 94 +++ scss/imports/themes/default/_fonts.scss | 7 + scss/imports/themes/default/_mixins.scss | 37 + scss/ninja.scss | 42 + 21 files changed, 3454 insertions(+) create mode 100755 scss/config.rb create mode 100644 scss/imports/codemirror/_codemirror.scss create mode 100644 scss/imports/codemirror/_css.scss create mode 100644 scss/imports/codemirror/_javascript.scss create mode 100644 scss/imports/scss/_Base.scss create mode 100644 scss/imports/scss/_Components.scss create mode 100644 scss/imports/scss/_MainWindow.scss create mode 100644 scss/imports/scss/_MenuUI.scss create mode 100644 scss/imports/scss/_PanelUI.scss create mode 100644 scss/imports/scss/_ScrollBars.scss create mode 100644 scss/imports/scss/_Stage.scss create mode 100644 scss/imports/scss/_Tools.scss create mode 100644 scss/imports/scss/_ToolsSample.scss create mode 100644 scss/imports/scss/_UserContent.scss create mode 100644 scss/imports/scss/_mixins.scss create mode 100644 scss/imports/scss/_toolbar.scss create mode 100644 scss/imports/themes/_test.scss create mode 100644 scss/imports/themes/default/_colors.scss create mode 100644 scss/imports/themes/default/_fonts.scss create mode 100644 scss/imports/themes/default/_mixins.scss create mode 100755 scss/ninja.scss (limited to 'scss') diff --git a/scss/config.rb b/scss/config.rb new file mode 100755 index 00000000..23327bde --- /dev/null +++ b/scss/config.rb @@ -0,0 +1,11 @@ +# Require any additional compass plugins here. +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "../css" +sass_dir = "" +images_dir = "../images/" +javascripts_dir = "../js" +output_style = :compact +line_comments = false +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true diff --git a/scss/imports/codemirror/_codemirror.scss b/scss/imports/codemirror/_codemirror.scss new file mode 100644 index 00000000..281e7a9a --- /dev/null +++ b/scss/imports/codemirror/_codemirror.scss @@ -0,0 +1,75 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +.CodeMirror { + overflow: auto; + height: 300px; + line-height: 1em; + font-family: monospace; + _position: relative; /* IE6 hack */ + background: white; +} + +.CodeMirror-gutter { + position: absolute; left: 0; top: 0; + background-color: #f7f7f7; + border-right: 1px solid #eee; + min-width: 2em; + height: 100%; +} +.CodeMirror-gutter-text { + color: #aaa; + text-align: right; + padding: .4em .2em .4em .4em; +} +.CodeMirror-lines { + padding: .4em; +} + +.CodeMirror pre { + border-width: 0; margin: 0; padding: 0; background: transparent; + font-family: inherit; +} + +.CodeMirror-cursor { + z-index: 10; + position: absolute; + visibility: hidden; + border-left: 1px solid black !important; +} +.CodeMirror-focused .CodeMirror-cursor { + visibility: visible; +} + +span.CodeMirror-selected { + background: #ccc !important; + color: HighlightText !important; +} +.CodeMirror-focused span.CodeMirror-selected { + background: Highlight !important; +} + + +.CodeMirror-matchingbracket {color: #0f0 !important;} +.CodeMirror-nonmatchingbracket {color: #f22 !important;} + +.completions { + position: absolute; + z-index: 10; + overflow: hidden; + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); +} + +.completions select { + background: #fafafa; + outline: none; + border: none; + padding: 0; + margin: 0; + font-family: monospace; +} diff --git a/scss/imports/codemirror/_css.scss b/scss/imports/codemirror/_css.scss new file mode 100644 index 00000000..fb870e84 --- /dev/null +++ b/scss/imports/codemirror/_css.scss @@ -0,0 +1,15 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +span.css-at {color: #708;} +span.css-unit {color: #281;} +span.css-value {color: #708;} +span.css-identifier {color: black;} +span.css-selector {color: #11B;} +span.css-important {color: #00F;} +span.css-colorcode {color: #299;} +span.css-comment {color: #A70;} +span.css-string {color: #A22;} diff --git a/scss/imports/codemirror/_javascript.scss b/scss/imports/codemirror/_javascript.scss new file mode 100644 index 00000000..1124e279 --- /dev/null +++ b/scss/imports/codemirror/_javascript.scss @@ -0,0 +1,12 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +span.js-keyword {color: #90b;} +span.js-atom {color: #291;} +span.js-variabledef {color: #00f;} +span.js-localvariable {color: #049;} +span.js-comment {color: #a70;} +span.js-string {color: #a22;} diff --git a/scss/imports/scss/_Base.scss b/scss/imports/scss/_Base.scss new file mode 100644 index 00000000..8a743174 --- /dev/null +++ b/scss/imports/scss/_Base.scss @@ -0,0 +1,231 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +// + + +//Base.scss +//Base styles for entire application. +//Note that colors and font definitions go in +//_scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + + +.clear { + display: block; + clear: both; + height: 0px; + overflow: hidden; +} +.bold { + font-weight: bold; +} +:focus { + outline: none; + border: none; + -webkit-box-shadow: 0px 0px 1px 1px $color-focus-outline; + +} +.layout-table { + display: table; +} +.layout-row { + display: table-row; +} +.layout-cell { + display: table-cell; +} +.layout-table .flexor div:first-child { + float: left; +} +.layout-table .flexor div:last-child { + float: right; +} + +// Begin: Basic skinning for form fields +// Reset all +input.nj-skinned, +textarea.nj-skinned, +button.nj-skinned, +select.nj-skinned, +select.nj-skinned option { + -webkit-appearance: none; + outline: none; +} + +// Base styles +input[type="text"].nj-skinned, +input[type="password"].nj-skinned, +input[type="search"].nj-skinned, +textarea.nj-skinned, +select.nj-skinned, +select.nj-skinned option { + border: 1px solid $color-input-border; + color: $color-input; + background-color: $color-input-bg; + font-size: 12px; + font-family: 'Droid Sans', sans-serif; +} + +// Disabled styles +input.nj-skinned:disabled, +textarea.nj-skinned:disabled, +select.nj-skinned:disabled, +button.nj-skinned:disabled { + opacity: 0.4; +} + +// Text inputs and select boxes +input[type="text"].nj-skinned, +input[type="password"].nj-skinned, +input[type="search"].nj-skinned, +select.nj-skinned, +select.nj-skinned option { + height: 13px; +} +// +input[type="text"].nj-skinned:focus, +input[type="password"].nj-skinned:focus, +input[type="search"].nj-skinned:focus, +textarea.nj-skinned:focus, +select.nj-skinned:focus, +select.nj-skinned option:focus { + -webkit-box-shadow: 0px 0px 3px $color-focus-outline; +} + + +select.nj-skinned { + background-image: url("../images/dropdown-bg.png"); + background-repeat: no-repeat; + background-position: right center; + font-size: 12px; + height: 16px; + padding-right: 20px; +} + +input[type="search"].nj-skinned { + height: 17px ; + -webkit-box-shadow: none; +} +input[type="search"].nj-skinned::-webkit-search-cancel-button { + -webkit-appearance: none; + font-size: 10px; + height: 10px; + width: 10px; +} +input[type="search"].nj-skinned::-webkit-search-cancel-button:after { + content:"\2716"; +} + +// Buttons +button.nj-skinned { + font-size: 9px; + cursor: pointer; + display: block; + border: 0px; + margin: 0px; + padding: 4px; + border: 1px $color-input-border solid; + background-color: $color-menu-bg; + background-image: -webkit-linear-gradient(top, $color-formgrad-top 0%, $color-formgrad-bottom 100%); + border-radius: 4px; + color: $color-menu-text; + text-transform: uppercase; + cursor: pointer; + text-shadow: 1px 1px 1px $color-app-shadow +} +button.nj-skinned:active { + background-image: -webkit-linear-gradient(top, $color-formgrad-bottom 0%, $color-formgrad-top 100%); +} +button.nj-skinned:hover { + -webkit-box-shadow: 0px 0px 3px $color-focus-outline; +} + +// Radio buttons +input[type="radio"].nj-skinned { + background-color: $color-menu-bg; + background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + color: $color-radio; + border: 2px solid $color-radio-border; + width: 12px; + height: 12px; + overflow: hidden; + border-radius: 10px; + font-size: 16px; + line-height: 7px; + text-indent: -7px; + cursor: pointer; + -webkit-box-shadow: 0px 0px 2px $color-radio-shadow; + -moz-box-shadow: 0px 0px 2px $color-radio-shadow; + box-shadow: 0px 0px 2px $color-radio-shadow; +} +input[type="radio"].nj-skinned:checked { + background: -webkit-radial-gradient(center, + circle cover, + $color-radio 0%, + $color-radio 15%, + $color-radio 30%, + $color-transparent 31%), + -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + border: 2px solid $color-radio-border; +} +input[type="radio"].nj-skinned:hover { + border: 2px solid $color-radio-border; +} +input[type="radio"].nj-skinned:active { + background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); +} +input[type="radio"].nj-skinned:disabled { + background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + border: 2px solid $color-radio-border; + cursor: default; +} +// Checkboxes +input[type="checkbox"].nj-skinned { + background-color: $color-menu-bg; + background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + color: $color-radio; + border: 1px solid $color-radio-border; + width: 10px; + height: 10px; + font-size: 12px; + overflow: visible; + cursor: pointer; + -webkit-box-shadow: 0px 0px 2px $color-radio-shadow; + -moz-box-shadow: 0px 0px 2px $color-radio-shadow; + box-shadow: 0px 0px 2px $color-radio-shadow; + line-height: 9px; +} + +input[type="checkbox"].nj-skinned:checked { + +} +input[type="checkbox"].nj-skinned:checked:after { + content:"\2714"; +} +input[type="checkbox"].nj-skinned:active { + background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); +} +input[type="checkbox"].nj-skinned:disabled { + background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + cursor: default; +} +// End: Basic skinning for form fields + +// Begin: Basic skinning for visual dividers +.nj-divider { + background-color: $color-divider-second; + border-width: 0px; + overflow: hidden; +} +.nj-divider.divider-horizontal { + border-top: 1px solid $color-divider-first; + border-bottom: 1px solid $color-divider-third; + height: 1px; +} +.nj-divider.divider-vertical { + border-left: 1px solid $color-divider-first; + border-right: 1px solid $color-divider-third; + width: 1px; +} +// End: Basic skinning for visual dividers diff --git a/scss/imports/scss/_Components.scss b/scss/imports/scss/_Components.scss new file mode 100644 index 00000000..c4182c73 --- /dev/null +++ b/scss/imports/scss/_Components.scss @@ -0,0 +1,33 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +// + + + +// Begin: Styles for the Tree component + +.tree +{ + -webkit-user-select:none; + cursor:default; + float: left; + padding-left: 0; + color: $color-panel-text; +} + +.tree li +{ + -webkit-margin-before: 0px; + -webkit-margin-after: 0px; + list-style-type:none; +} + +.tree li > text > img +{ + margin-right:8px; + -webkit-transition: -webkit-transform 0.05s linear; +} + +// End: styles for the Tree component \ No newline at end of file diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss new file mode 100644 index 00000000..99028b2a --- /dev/null +++ b/scss/imports/scss/_MainWindow.scss @@ -0,0 +1,338 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +// + + +// MainWindow.scss +// Styles governing the main window and overall layout of the application. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + + + body { + position: absolute; + margin: 0px; + width: 100%; + height:100%; + background-color:$color-app-bg; + overflow: hidden; + -webkit-user-select:none; + font-family: 'Droid Sans', sans-serif; +} + +#appContainer { + position: absolute; + margin: 0px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + width: 100%; + height: 100%; + border-left: 16px solid #000; + border-right: 16px solid #000; + border-top: 28px solid #000; + -webkit-box-sizing: border-box; + max-width:100%; + max-height:100%; +} + +#appContainer > section { + display: -webkit-box; + -webkit-box-flex:0; +} + +#appContainer #appWorkspace { + -webkit-box-flex:1; + -webkit-box-align: stretch; +} + +#appWorkspace { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; + -webkit-box-sizing: stretch; + position:relative; + padding:2px 0px; + border: 1px solid #333; + overflow: hidden; +} + +#topMenu { + background-color: #474747; + position:absolute; + height:28px; + width:100%; + top:0px; + left:0px; + z-index: 9999; +} + +#topPanelContainer, +#leftPanelContainer, +#rightPanelContainer, +#bottomPanelContainer { + background-color: #282828; +} +#topPanelContainer { + overflow: hidden; + margin-bottom:2px; + height:32px; +} + +#bottomPanelContainer { + //border: 1px solid #333; + background: transparent; + height: 150px; + min-height:80px; + max-height:50%; + overflow:auto; + +} + +.panelContainer { + display:block; + -webkit-box-orient: vertical; + position:relative; +} + +#leftPanelContainer { + width:40px; + -webkit-box-align:stretch; + -webkit-box-sizing: border-box; + margin-left:2px; + +} +#rightPanelContainer { + width:253px; + min-width:253px; + max-width:45%; + -webkit-box-sizing: border-box; + right:0px; + margin-right:2px; + border-right:2px solid #282828; +} + +#mainContainer { + -webkit-box-flex:1; + margin: 0px 2px; + display: -webkit-box; + position:relative; +} + +.mainContainerContent { + position:absolute; + display: -webkit-box; + width:100%; + height:100%; + -webkit-box-orient: vertical; + +} + +.mainContainerContent > #mainContent { + -webkit-box-flex:1; + display: -webkit-box; + -webkit-box-orient: horizontal; + margin-top:0px; +} +.mainContainerContent > section { + margin-top: 2px; + -webkit-box-flex:0; +} +.mainContainerContent > section:first-child { + margin-top: 0px; +} + +#documentTabs { + background-color:#4d4d4d; +} + +.splitter { + height:16px; + width:100%; + opacity: 0.4; + background: no-repeat center center url(data:image/png;base64,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) #000; + cursor:pointer; +} + +.leftSplitter, .rightSplitter { + background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAYAAAAoAdW+AAAKRGlDQ1BJQ0MgUHJvZmlsZQAAeAGdlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/xJsCmYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAeklEQVQYGXWQMQ7AIAhFwdFJEw/l7GmdnL2NmyvNb1JiKSUxAd7/AWERIS9yzkKA9qWUZM4pwbrg6L1TjJFe8AQwKbRAoQcAGcOfGWicwWMMKaWcPc1Da4323to4k7DW4lqrK7i3/RPoVzyBQsz6COxdUT+3ZRRe4DAXbpRiJU7E4mcAAAAASUVORK5CYII='); + width:16px; + height:100%; + z-index: 199; + position: absolute; + top:0px; + left:0px; +} +.rightSplitter { + right:0px; + left:auto; +} + +.bottomSplitter, .rightSplitter { + -webkit-transform: rotate(180deg); +} + +.splitter:hover:not(.disabled) { + opacity: 1; +} + + +#leftPanelContainer { + -webkit-box-orient: vertical; +} + +#leftPanelContainer .splitter { + -webkit-transform: rotate(270deg); + width:14px; + height:100%; +} + +.splitter.bottom { + -webkit-transform: rotate(180deg); +} + +#sceneBar { + height:70px; + background-color: #474747; +} + +#mainContainer #rulerTop { + // TODO: temporary background please replace when component is implemented + background: url("../images/temp/ruler-top.png"); + height:15px; + margin-bottom: 0px; +} + +#rulerLeft { + // TODO: temporary background please replace when component is implemented + background: url("../images/temp/ruler-left.png"); + width:16px; +} + +#stateBar { + height:20px; + background-color: #282828; + margin-bottom:0px; +} + +#stageContainer { + -webkit-box-flex:1; + position:relative; +} + +.timelineResizer { + background: #000 center center no-repeat url('data:image/gif;base64,R0lGODlhGQADAMQAAD49PXx8fGppaSYmJl9fXysrKykpKW5uboqJiUxMTGlpaV9eXjo6OoeHhyUkJD09PSoqKmpqaj8/P4qKiiQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdEMUI3NjM1QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdEMUI3NjM2QkQ1QTExRTBBMTJFQzE1RDk5REVFRkI4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0QxQjc2MzNCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0QxQjc2MzRCRDVBMTFFMEExMkVDMTVEOTlERUVGQjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAGQADAAAFH6ABDVRpnujpQAXxKFIUz3JNzwKwMEcz/cCgMIgIJEIAOw=='); + width:100%; + height:6px; + cursor: row-resize; +} +.timelineResizer.collapsed { + height:0px !important; + margin:0px !important; + padding:0px !important; +} + +.rightPanelResizer { + background: #282828 center center no-repeat; //url('data:image/gif;base64,R0lGODlhAwAZALMAABsbGyAgIC0tLTAwMDs7O0xMTFZWVltbW2lpaXZ2dgAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAAoAIf/8SUNDUkdCRzEwMTIAAAUwYXBwbAIgAABtbnRyUkdCIFhZWiAH2QACABkACwAaAAthY3NwQVBQTAAAAABhcHBsAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWFwcGwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtkc2NtAAABCAAAAvJkZXNjAAAD/AAAAG9nWFlaAAAEbAAAABR3dHB0AAAEgAAAABRyWFlaAAAElAAAABRiWFlaAAAEqAAAABRyVFJDAAAEvAAAAA5jcHJ0AAAEzAAAADhjaGFkAAAFBAAAACxn/1RSQwAABLwAAAAOYlRSQwAABLwAAAAObWx1YwAAAAAAAAARAAAADGVuVVMAAAAmAAACfmVzRVMAAAAmAAABgmRhREsAAAAuAAAB6mRlREUAAAAsAAABqGZpRkkAAAAoAAAA3GZyRlUAAAAoAAABKml0SVQAAAAoAAACVm5sTkwAAAAoAAACGG5iTk8AAAAmAAABBHB0QlIAAAAmAAABgnN2U0UAAAAmAAABBGphSlAAAAAaAAABUmtvS1IAAAAWAAACQHpoVFcAAAAWAAABbHpoQ04AAAAWAAAB1HJ1UlUAAAAiAAACpHBsUEwAAAAsAAACxgBZAGwAZQBpAG4AZf8AbgAgAFIARwBCAC0AcAByAG8AZgBpAGkAbABpAEcAZQBuAGUAcgBpAHMAawAgAFIARwBCAC0AcAByAG8AZgBpAGwAUAByAG8AZgBpAGwAIABHAOkAbgDpAHIAaQBxAHUAZQAgAFIAVgBCTgCCLAAgAFIARwBCACAw1zDtMNUwoTCkMOuQGnUoACAAUgBHAEIAIIJyX2ljz4/wAFAAZQByAGYAaQBsACAAUgBHAEIAIABHAGUAbgDpAHIAaQBjAG8AQQBsAGwAZwBlAG0AZQBpAG4AZQBzACAAUgBHAEIALQBQAHIAbwBmAGkAbGZukBoAIABSAEcAQgAgY8+P8GX/h072AEcAZQBuAGUAcgBlAGwAIABSAEcAQgAtAGIAZQBzAGsAcgBpAHYAZQBsAHMAZQBBAGwAZwBlAG0AZQBlAG4AIABSAEcAQgAtAHAAcgBvAGYAaQBlAGzHfLwYACAAUgBHAEIAINUEuFzTDMd8AFAAcgBvAGYAaQBsAG8AIABSAEcAQgAgAEcAZQBuAGUAcgBpAGMAbwBHAGUAbgBlAHIAaQBjACAAUgBHAEIAIABQAHIAbwBmAGkAbABlBB4EMQRJBDgEOQAgBD8EQAQ+BEQEOAQ7BEwAIABSAEcAQgBVAG4AaQB3AGUAcgBzAGEAbABuAHkAIABwAHIAbwBm/wBpAGwAIABSAEcAQgAAZGVzYwAAAAAAAAAUR2VuZXJpYyBSR0IgUHJvZmlsZQAAAAAAAAAAAAAAFEdlbmVyaWMgUkdCIFByb2ZpbGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABadQAArHMAABc0WFlaIAAAAAAAAPNSAAEAAAABFs9YWVogAAAAAAAAdE0AAD3uAAAD0FhZWiAAAAAAAAAoGgAAFZ8AALg2Y3VydgAAAAAAAAABAc0AAHRleHQAAAAAQ29weXJpZ2h0IDIwMDcgQXBwbGUgSW5jLkMsIGFsbCByaWdodHMgcmVzZXJ2ZWQuAHNmMzIAAAAAAAEMQgAABd7///MmAAAHkgAA/ZH///ui///9owAAA9wAAMBsACwAAAAAAwAZAAAEGjAUAgQCJoGh8+4ah4XgN5qemJYqeQoHUAgRADs='); + width:4px; + cursor: col-resize; +} +.rightPanelResizer.collapsed { + width:0px; +} + +.resizeBar { -webkit-transition: all 0.15s linear; } + +// Splitters Collapsed +.panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } +.panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0.1 !important; } +.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; } + +#rightPanelContainer.collapsed, #leftPanelContainer.collapsed { width:0px !important; min-width:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } +#topPanelContainer.collapsed, #bottomPanelContainer.collapsed { height:0px !important; min-height:0px !important; overflow: hidden; border: 0px; margin: 0px; padding: 0px; } +.leftSplitter.collapsed { -webkit-transform:rotate(180deg); } +.rightSplitter.collapsed { -webkit-transform:rotate(0deg); } +.topSplitter.collapsed { -webkit-transform:rotate(180deg); } +.bottomSplitter.collapsed { -webkit-transform:rotate(0deg); } + +// + + +.stageContentShadow { + -webkit-box-shadow: 3px 5px 4px $color-app-shadow; + -moz-box-shadow: 3px 5px 4px $color-app-shadow; + box-shadow: 3px 5px 4px $color-app-shadow; +} + + +// +.baseBox { + display:-webkit-box; + display:-moz-box; + display: box; +} + +// Generic style to make any element unselectable +.unselectable { + -webkit-user-select: none; +} + +.verticalBox { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + box-orient: vertical; +} + +// TODO: REMOVE THIS +#rightPanelContent { + overflow-y:hidden; +} + +.contextMenu { + position:absolute; + z-index:999; +} + +#openDocumentsTabComponent { + height: 25px; + position: relative; + overflow: hidden; + color: white; +} + +#openDocuments { + float: left; + height: 25px; + width: 100%; + font-size: 12px; + list-style: none; + margin: 0; + padding: 0; + position: relative; + text-decoration: none; +} + +#openDocuments li { + border-right: 1px solid black; + cursor: pointer; + display: inline; + float: left; + padding: 0.5em 1em; + text-shadow: 1px 1px 1px #000000; + vertical-align: middle; +} + +#openDocuments li:hover, #openDocuments li:active, #openDocuments li.activeTab { + background-color: #7f7f7f; +} + +#documentBar { + height: 25px; + width: 1000px; + position: relative; + overflow: hidden; + color: white; +} diff --git a/scss/imports/scss/_MenuUI.scss b/scss/imports/scss/_MenuUI.scss new file mode 100644 index 00000000..e1fb149a --- /dev/null +++ b/scss/imports/scss/_MenuUI.scss @@ -0,0 +1,75 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +// + +// MenuUI.scss +// Styles governing the main dropdown menu. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + +.menuBar { + width:100%; + border-style: solid; + border-width: 1px; + height: 22px; + color: $color-menu-text; + background: $color-menu-bg; + border-color: $color-menu-border; +} + +.menuBar ul { + list-style: none; + margin: 0; + padding: 0; + float: left; + cursor: default; +} + +.menuBar li { + font-size: 9pt; + padding: 4px 10px; + display: block; + position: relative; + background : $color-menu-bg; + color : $color-menu-text; +} + +.menuBar li li { + width: 10em; +} +.menuBar li:hover { + background : $color-menu-hilite-bg; + color : $color-menu-hilite-text; +} + +.menuBar li:active { + background : $color-menu-active-bg; +} + +// Styles for positioning and display +Supports fly-out of sub-menus two levels deep only + +.menuBar ul ul { + position: absolute; + z-index: 500; +} + +.menuBar ul ul ul { + position: absolute; + top: 0; + left: 100%; +} + +nav.menuBar ul ul, +nav.menuBar ul li:hover ul ul, +nav.menuBar ul ul li:hover ul ul { + display: none; +} + +nav.menuBar ul li:hover ul, +nav.menuBar ul ul li:hover ul, +nav.menuBar ul ul ul li:hover ul { + display: block; +} \ No newline at end of file diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss new file mode 100644 index 00000000..b029ae96 --- /dev/null +++ b/scss/imports/scss/_PanelUI.scss @@ -0,0 +1,1256 @@ +// +// This file contains proprietary software owned by Motorola Mobility, Inc.
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+// (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +// + +// +// PanelUI.scss +// Styles governing the panels in the UI. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + +// layout for the container of all panels within a dock area +.panelContainer { + margin: 0px; + padding: 0px 0px; + position:relative; + // this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel + // unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning + overflow: auto; +} + +// base layout style for all panels +.panelDisclosureIcon +{ + background-image:url("../images/panels/panelDisclosureIcon.png"); + background-repeat:no-repeat; + width:16px; + height:16px; + float:left; + -webkit-transition-property: rotate; + -webkit-transition-duration: 0.2s; + -webkit-transition-timing-function: linear; + padding-right:2px; +} +.panelBackground { + color: $color-panel-text; + background: $color-tool-bg; +} + +.panelCollapseArrowFill { + color: rgba(76,76,76,1); // this is never really used but is set so we can get it via javascript to draw the control via script on the canvas + padding:0px 4px; +} + +.panelContentColor { + background: $color-panel-bg; + border-color: $color-panel-border; +} +.panelCaptionColor { + color: $color-panel-text; +} + +.panelCaption { + padding: 2px 0px; + cursor:default; +} + +.panelContainerTransition { + -moz-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; + -o-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; + -webkit-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; +} + +.panelCloseIcon +{ + background-image:url("../images/panels/closeIcon.png"); + background-repeat:no-repeat; + width:15px; + height:14px; + float:right; + opacity:0.5; +} + +.panelCloseIcon:hover +{ + opacity:1.0; +} + +.toolsPanelContainer +{ + margin-top: -2px; + margin-left: -2px; + padding-top:20px; + padding-left:3px; + padding-right:3px; + width:32px; + + // This is a hack to get the tools panel to extend all the way to the bottom. + padding-bottom:450px; +} + +// sizes for the specific panels + +#toolPropertiesPanel { + height: 32px; + margin:0px; +} + +#timelinePanel { + height: 100%; +} + +// Only used by Animation Presets Panel currently + +.treeComponent +{ + -webkit-user-select: none; + font-size : 11px; + margin-left: 20px; + cursor:default; + color: $color-panel-text; +} + +.treeComponent ul +{ + position: relative; + list-style: none; +} + +// This sets the style for a tree folder's icon +ul.treeComponent > img:first-child +{ + margin-left: -35px; + margin-right: 5px; + -webkit-transition: -webkit-transform 0.1s linear; +} + +.treeComponent li +{ + position: relative; + list-style: none; + border-bottom:1px solid $color-panel-divider; +} + +.treeComponent li img +{ + margin-left: -20px; + padding-right:10px; + vertical-align:middle; + // border-bottom:1px solid #555555; +} + +.treeCategory +{ + font-weight : bold; +} + +.treeItem { + font-weight : normal; + vertical-align:middle; + color: $color-panel-text; +} + +// ====== Used by Properties Panel ====== +// Removed the outline text input style -> Causing problems with the Canvas + +.propertiesPanel +{ + min-height: 300px; + margin-top:4px; +} + +.panelHRule +{ + border:none; + display:block; + float:left; + clear:both; + width:100%; + height:3px; + background-color: $color-panel-divider; +} + +.vr +{ + position:absolute; + display:inline; + border:none; + clear:both; + width:2px; + height:26px; + + background-image: -webkit-gradient( + linear, + left bottom, + right bottom, + color-stop(0.4, $color-menu-border), + color-stop(0.8, $color-panel-shadow) + ) +} + +.panelInputText +{ + resize: none; + color: white; + background-color: $color-panel-input-bg; + border: 1px solid $color-panel-input-border; + width : 100px; + outline: none; +} + +.piCollapsibleSectionHeader +{ + font-size:12px; + padding-left:10px; + vertical-align:top; + height:16px; + background-color: $color-panel-shadow; +} + +// ====== Indexed table row and column classes for Properties Panel layout ====== +.propRow1{ + width:100%; +} +.propRow1Col1{ + width:30%; + text-align:right; +} +.propRow1Col2{ + width:70%; +} + +.propRow2{ + width:100%; +} +.propRow2Col1{ + width:30%; +} +.propRow2Col2{ + width:20%; +} +.propRow2Col3{ + width:20%; +} +.propRow2Col4{ + width:40%; +} + +.propRow3{ + width:100%; +} +.propRow3Col1{ + width:5%; +} +.propRow3Col2{ + width:5%; +} +.propRow3Col3{ + width:20%; +} +.propRow3Col4{ + width:20%; +} +.propRow3Col5{ + width:20%; +} +.propRow3Col6{ + width:30%; +} + +.propRow4{ + width:100%; +} +.propRow4Col1{ + width:30%; +} +.propRow4Col2{ + width:20%; +} +.propRow4Col3{ + width:20%; +} +.propRow4Col4{ + width:40%; +} +.propRow4Col5{ + width:30%; +} +.propRow4Col6{ + width:20%; +} +.propRow4Col7{ + width:20%; +} +.propRow4Col8{ + width:40%; +} + +.testClass{ + background-color:green; + border-radius: 35px; + position:relative; +} + +.topRightCornerIcon{ + -webkit-transform: rotate(90deg); +} +.topLeftCornerIcon{ + -webkit-transform: rotate(0deg); +} +.bottomRightCornerIcon{ + -webkit-transform: rotate(180deg); +} +.bottomLeftCornerIcon{ + -webkit-transform: rotate(270deg); +} + +.splitterBackground { + background: $color-app-bg; +} + + + +// Begin: Project Panel UI classes +.Project-Panel { + height: 100%; +} +#pp-container { + height: 100%; + background-color: $color-tool-bg; + border: 0px; + overflow-y: hidden !IMPORTANT; + position: relative; +} + +#pp-container h3 { + font-weight: normal; + padding-left: 2em; + color: $color-menu-hilite-bg; +} +#pp-col-buttons { + position: absolute; + top: 8px; + left: -1px; + height: 100%; + width: 28px; +} +#pp-col-files { + display: block; + position:absolute; + height:auto; + overflow: hidden; + bottom:0; + top:0; + left:0; + right:0; + border: 2px solid $color-menu-border; + border-bottom-width: 0px; + background-color: $color-menu-bg; + margin-left: 30px; + margin-right: 10px; + margin-bottom: 36px; + +} +// +#pp-container-list, +#pp-container-assets { + height: 310px; + width: 100%; + overflow: auto; +} + + +.pp-scroll-main { + display: block; + position:absolute; + height:auto; + bottom:0; + top:0; + left:0; + right:0; + margin-top:18px; + overflow: auto; +} +.pp-scroll-main .pp-scroll-linked{ + display: block; + position:absolute; + height: auto; + bottom:0; + top:0; + left:0; + right:0; + overflow: visible; + +} +#pp-view-assets { + display: none; +} +// +#pp-container-assets .pp-scroll-linked, +#pp-container-list .pp-scroll-linked { + //width: 420px; +} + + +.pp-header-container { + position: relative; + overflow: hidden; + border-bottom: 1px solid $color-menu-border; + background-color: $color-panel-shadow; + min-width: 390px; +} +.pp-header { + border-right: 1px solid $color-menu-border; + color: $color-panel-text; + padding-top: 4px; + padding-left: 6px; + font-weight: bold; + display: block; + float: left; + overflow: visible; + position: relative; +} +.pp-header .pp-resize-grip { + width: 7px; + height: 18px; + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + cursor: col-resize; + z-index: 10; +} +.pp-header-container .header-file { + min-width: 100px; + width: 160px; +} +.pp-header-container .header-size { + min-width: 50px; + width: 50px; +} +.pp-header-container .header-type { + min-width: 50px; + width: 50px; +} +.pp-header-container .header-date { + min-width: 100px; + width: 120px; +} + +#pp-container-list ul { + margin-top: 0px; + margin-left: 11px; +} +#pp-container-list ul.tree { + border-right: 1px solid $color-menu-divider; +} +#pp-container-list ul.tree > li:first-child > .pp-span-all:first-child { + font-weight: bold; +} + +#pp-container-list ul ul { + margin: 0px; + padding: 0px; + display: block; +} +#pp-container-list li { + padding-top: 3px; + padding-bottom: 3px; + font-size: 11px; + border-bottom: 1px solid $color-menu-divider; + color: $color-menu-text; + width: 100%; +} + +#pp-container-list li.open li:last-child { + border-bottom: 0px; + padding-bottom: 0px; +} +#pp-container-list li.open li:first-child { + border-top: 1px solid $color-menu-divider; +} +#pp-container #pp-container-list li.closed ul { + display: none; + padding-top: 3px; +} +#pp-container-list li.open ul { + display: block; + padding-top: 3px; +} +#pp-container-list li.directory { + cursor: pointer; +} +#pp-container-list li.file { + cursor: default; +} +span.pp-span-all { + display: block; +} +span.pp-span-all:focus { + -webkit-box-shadow: none; + background-color: $color-focus-outline; + border-color: $color-focus-outline; + color: $color-menu-bg; +} + +#pp-view-assets .pp-asset-col { + float: left; +} +#pp-view-assets .pp-col-files { + width: 167px; +} +#pp-view-assets .pp-col-size { + width: 57px; +} +#pp-view-assets .pp-col-type { + width: 57px; +} +#pp-view-assets .pp-col-date { + width: 127px; +} +.pp-sort-arrow { + display: none; +} +.pp-sort .pp-sort-arrow { + display: block; + width: 9px; + height: 5px; + // + margin-right: 10px; + margin-top: 2px; + + background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); + background-repeat: no-repeat; + position: absolute; + top: 5px; + right: 10px; +} +.pp-sort.sort-ascending .pp-sort-arrow { + background-position: 0 0; +} +.pp-sort.sort-descending .pp-sort-arrow { + background-position: 0px -5px; +} +#pp-view-assets .pp-asset-col div { + color: $color-panel-text; + padding-left: 5px; + border-bottom: 1px solid $color-menu-divider; + padding-top: 3px; + padding-bottom: 3px; + font-size: 11px; + overflow: hidden; + text-overflow: ellipsis; + border-right: 1px solid $color-menu-divider; +} +#pp-view-assets .focused { + background-color: #ccc; +} +#pp-view-assets :focus { + -webkit-box-shadow: none; +} + +#pp-view-assets #pp-container-assets :focus, +#pp-view-assets #pp-container-assets .focused { + background-color: $color-focus-outline; + border-color: $color-focus-outline; + color: $color-menu-bg; +} + +// Icons! +#pp-container-list li, +#pp-container-list span.span-space { + background-repeat: no-repeat; +} +#pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space { + background-image:url("../images/panels/project-panel/icon-file-folderopen.png"); + background-position: 100% 0px; +} +#pp-container-list li.directory.closed >span.pp-span-all> span.pp-col-files > span.span-space { + background-image:url("../images/panels/project-panel/icon-file-folderclosed.png"); + background-position: 100% 0px; +} +#pp-container-list li.file span.span-space { + background-image: url("../images/panels/project-panel/icon-file-misc.png"); + background-position: 100% 0px +} +#pp-container-list li.file.png span.span-space, +#pp-container-list li.file.gif span.span-space, +#pp-container-list li.file.jpg span.span-space, +#pp-container-list li.file.jpeg span.span-space, +#pp-view-assets .pp-col-files .pp-type-image { + background-image: url("../images/panels/project-panel/icon-file-image.png"); +} +#pp-container-list li.file.html span.span-space, +#pp-container-list li.file.htm span.span-space, +#pp-container-list li.file.js span.span-space, +#pp-container-list li.file.css span.span-space, +#pp-view-assets .pp-col-files .pp-type-script { + background-image: url("../images/panels/project-panel/icon-file-script.png"); +} +#pp-container-list li.file.mp4 span.span-space, +#pp-container-list li.file.avi span.span-space, +#pp-container-list li.file.mpeg span.span-space, +#pp-container-list li.file.mpg span.span-space, +#pp-view-assets .pp-col-files .pp-type-video { + background-image: url("../images/panels/project-panel/icon-file-video.png"); +} +#pp-container-list li.file.mp3 span.span-space, +#pp-container-list li.file.mp4 span.span-space, +#pp-container-list li.file.wav span.span-space, +#pp-view-assets .pp-col-files .pp-type-audio { + background-image: url("../images/panels/project-panel/icon-file-audio.png"); +} + +#pp-view-assets .pp-col-files .pp-type-other { + background-image: url("../images/panels/project-panel/icon-file-misc.png"); +} + +#pp-view-assets .pp-col-files .pp-type-flash { + background-image: url("../images/panels/project-panel/icon-file-flash.png"); +} +#pp-view-assets .pp-col-files .pp-type-component { + background-image: url("../images/panels/project-panel/icon-file-component.png"); +} +#pp-view-assets .pp-col-files .pp-type-tag { + background-image: url("../images/panels/project-panel/icon-file-tag.png"); +} +#pp-view-assets .pp-col-files div { + background-repeat: no-repeat; + background-position: 7px 2px; + padding-left: 25px; +} + +#pp-view-assets h3 { + text-align: center; + display: none; +} + +#pp-container-list span.pp-col-files, +#pp-container-list span.pp-col-size, +#pp-container-list span.pp-col-date { + display: block; + float: left; + white-space: nowrap; + overflow: hidden; + line-height: 15px; + text-overflow: ellipsis; +} + +#pp-container-list span.pp-col-size, +#pp-container-list span.pp-col-date { + padding-left: 10px; +} +#pp-container-list span.pp-col-size { + width: 47px; +} +#pp-container-list span.pp-col-date { + width: 97px; +} +#pp-container-list span.pp-col-files { + width: 151px; +} +#pp-container-list span.span-space { + display: block; + float: left; + margin-right: 5px; + height: 15px; +} + + +// Buttons +.pp-button, +#pp-col-buttons .pp-button div { + margin: 0px; + padding: 0px; + width: 26px; + height: 25px; + background-repeat: no-repeat; + overflow: hidden; +} +.pp-button { + margin-top: 5px; + cursor: pointer; + position: relative; + left: 2px; +} +.pp-disabled .pp-button { + cursor: default; + opacity: 0.50; +} +.pp-disabled .pp-button:focus { + -webkit-box-shadow: none; +} +#pp-container-list h3 { + display: none; +} +.pp-disabled #pp-container-list h3 { + display: block; + text-align: center; +} + +.pp-button.active { + background-image: url("../images/panels/project-panel/icon-button-selected.png"); +} +.pp-disabled .pp-button.active { + background-image: none; +} +.pp-button.active:focus { + outline: none; +} +.pp-button:active:focus { + outline: none; +} +.pp-button.button-project div { + background-image: url("../images/panels/project-panel/icon-button-project.png") +} +.pp-button.button-component div { + background-image: url("../images/panels/project-panel/icon-button-component.png") +} +.pp-button.button-script div { + background-image: url("../images/panels/project-panel/icon-button-script.png") +} +.pp-button.button-video div { + background-image: url("../images/panels/project-panel/icon-button-video.png") +} +.pp-button.button-audio div { + background-image: url("../images/panels/project-panel/icon-button-audio.png") +} +.pp-button.button-image div { + background-image: url("../images/panels/project-panel/icon-button-image.png") +} +.pp-button.button-tag div { + background-image: url("../images/panels/project-panel/icon-button-tag.png") +} +.pp-button.button-flash div { + background-image: url("../images/panels/project-panel/icon-button-flash.png") +} +.pp-button.button-showall div { + background-image: url("../images/panels/project-panel/icon-button-showall.png") +} + +#pp-col-buttons .nj-divider.divider-horizontal { + margin-top: 10px; + margin-bottom: 10px; +} +div.pp-button.button-divider div { + height: 1px; + width: 24px; + background-color: $color-tool-separator-middle; + border-top: 1px solid $color-tool-separator-top; + border-bottom: 1px solid $color-tool-separator-bottom; + cursor: default; +} + +.pp-button.button-undefined { + display: none; +} + +// Hide and Show different types of assets +.pp-type-script, +.pp-type-video, +.pp-type-audio, +.pp-type-image, +.pp-type-flash, +.pp-type-other { + display: none; +} +.pp-show-all .pp-asset-col div { + display: block; +} + +.pp-show-scripts .pp-type-script { + display: block; +} +.pp-show-videos .pp-type-video { + display: block; +} +.pp-show-audio .pp-type-audio { + display: block; +} +.pp-show-images .pp-type-image { + display: block; +} +.pp-show-flash .pp-type-flash { + display: block; +} + +// New file flyout +.pp-popup { + position: absolute; + top: -53px; + left: -40px; + width: 80px; + height: 50px; + overflow: hidden; + border-radius: 5px; + background-color: $color-tool-bg; + border: 2px solid $color-app-border; + z-index: 100; + display: none; +} +.pp-popup p { + color: $color-menu-text; + margin: 0px; + padding: 0px; +} +// Search subwidget +#pp-search { + position: absolute; + display: block; + height: 24px; + border: 2px solid $color-menu-border; + background-color: $color-menu-bg; + margin-left: 30px; + margin-right: 10px; + left: 0px; + bottom: 10px; + right: 0px; +} +#pp-search label { + position: absolute; + top: 7px; + left: 12px; + width: 20px; + height: 20px; + background-image: url("../images/panels/project-panel/icon-button-search.png"); + background-repeat: no-repeat; + z-index: 10; +} +#pp-search input { + width: 100%; + height: 16px; + margin-left: 7px; + margin-top: 0px; + padding-left: 15px; + top: -3px; + position: relative; +} +#pp-search div.pp-button { + position: relative; + width: 20px; + height: 20px; + float: right; + margin-left: 5px; + background-repeat: no-repeat; + background-position: 0 2px; + overflow: visible; + top: -6px; +} +#pp-search div.button-add { + background-image: url("../images/panels/project-panel/icon-button-plus.png"); +} +#pp-search div.button-delete { + background-image: url("../images/panels/project-panel/icon-button-delete.png"); +} +#pp-view-assets #pp-container-assets .pp-filter-hidden { + display: none; +} + + +// Inline editor styling +#pp-container-assets input.inline-editor { + height: 11px; + width: 80%; + background-color: $color-panel-hilite-text !IMPORTANT; + color: $color-panel-hilite-bg !IMPORTANT; + top:-2px; + border-width: 0px; + font-size: 11px; +} + + +// End: Tree component for Project Panel + + +.subToolHolderPanel{ + margin-left:42px +} + +.subToolPanel{ + margin-top:-6px +} + +// .marginposition{ + // margin-top:-26px +// } +// Begin: Properties Panel styles + +.properties_panel { + overflow-x: hidden; + color: $color-panel-text; +} + +// Begin: styling the form elements +.properties_panel select { + -webkit-appearance: none; + font-size: 9px; + color: $color-panel-text; + background-color: $color-panel-input-bg; + border: 1px solid $color-panel-input-border; + width : 120px; + height: 15px; + outline: none; + background-image: url("../images/dropdown-bg.png"); + background-repeat: no-repeat; + background-position: right center; +} +.properties_panel select:focus { + outline: none; + border: 1px solid $color-panel-input-border; +} +.properties_panel .layout-table .layout-cell input[type="text"] { + height: 11px; + width: 120px; + font-size: 10px; + border: 1px solid $color-panel-input-border; + background-color: $color-panel-input-bg; + outline: none; +} +.properties_panel input[type="checkbox"] { + position: relative; + top: -2px; +} + +button.panel-button { + -webkit-appearance: none; + font-size: 9px; + color: $color-panel-text; + background-color: $color-panel-input-bg; + border: 1px solid $color-panel-input-border; + cursor: pointer; + margin-left: 75%; +} +.properties_panel .hottextunit input { + width: 40px; + height: 12px; + font-size: 10px; + -webkit-appearance: none; + border-color: $color-panel-input-border; + background-color: $color-panel-input-bg; + color: $color-panel-input; +} +// End: styling the form elements + + +// main section styles +.pp_sectionHeader{ + font-size:12px; + padding-left:37px; + height:15px; + background-color: $color-panel-dividerlabel-bg; + background-image: url("../images/panels/panelDisclosureIcon.png"); + background-repeat: no-repeat; + background-position: 11px 0px; + margin-bottom: 8px; +} + +.pp_section{ + width: 227px; + margin-top: 5px; +} + +// control groups +.pp_group{ + width: 100%; + clear: both; + margin-left: 5px; +} +.pp_propset{ + float: left; + width: auto; + height: 20px; +} +.pp_lock{ + position: absolute; + top: -2px; + left: 25px; +} + +// controls +.pp_proplabel{ + float: left; + width: auto; +} +.pp_proplabel_sm{ + float: left; + width: auto; +} +.pp_inputText { + resize: none; + color: $color-panel-text; + background-color: $color-panel-input-bg; + border: 1px solid $color-panel-input-border; + width : 120px; + height: 10px; + outline: none; + font-size: 11px; + margin-bottom: 9px; + padding-left: 2px; +} +.pp_hottext{ + float: left; + width: auto; +} +.pp_check{ + float: left; + width: auto; +} +.properties_panel label { + display: block; + float: left; + line-height: 12px; + height: 16px; +} +// Style overrides/extensions for tabular layout classes within panels +.panel .layout-cell { + vertical-align: top; + text-align: left; +} +#props_defaultids label, +.panel .layout-table .layout-cell:first-child, +.panel .layout-table.table-2col .layo