From 2e58595d5c58ad9937bfc4f85ba8894970d4719f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 8 Feb 2012 13:56:54 -0800 Subject: adding new scss folder --- 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..23ace69b --- /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; + + 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,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'); + 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..21ada556 --- /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: 116px; +} + +// 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 .layout-cell:first-child { + width: 70px; + text-align: right; + margin-right: 7px; +} +.panel .layout-table.table-2col-wide { + width: 100%; +} +.layout-table.table-2col-wide .layout-row { + width: 100%; +} +.panel .layout-table.table-2col-wide .layout-cell { + width: 50%; +} +// Slider properties +.slider_props .layout-table.table-2col-wide .layout-cell:first-child, +.button_props .layout-table.table-2col-wide .layout-cell:first-child, +.hottext_props .layout-table.table-2col-wide .layout-cell:first-child, +.imagecont_props .layout-table.table-2col-wide .layout-cell:first-child, +.toggle_props .layout-table.table-2col-wide .layout-cell:first-child, +.image_props .layout-table.table-2col-wide .layout-cell:first-child { + width: 100%; +} +.image_props .layout-table.table-2col-wide .layout-cell:first-child { + width: 200%; +} +.hottext_props .layout-table.table-2col-wide .layout-cell { + margin-bottom: 6px; +} +.panel .layout-table.table-2col-wide .layout-cell:first-child { + text-align: right; +} +.panel .layout-table.table-2col-wide .layout-cell:last-child { + padding-left: 7px; +} +.panel .layout-table.table-4col .layout-cell:first-child { + width: 30px; + text-align: right; + margin-right: 7px; +} +.panel .layout-table .flexor { + padding-right: 7px; +} + +.panel .layout-table .flexor { + width: 80px; + padding-right: 7px; +} +.panel .layout-table.table-4col .flexor { + width: 55px; +} + + + +.pp_divider { + height: 1px; + overflow: hidden; + background-color: $color-panel-divider-bottom; + border-top: 1px solid $color-panel-divider-top; + margin-left: 4px; + margin-right: 10px; + margin-bottom: 8px; +} +.properties_panel .layout-table { + position: relative; + margin-bottom: 10px; +} + +// Begin: Styles for DivPIProperties +.pp_colorpicker{ + width: 35px; + height: 20px; + overflow: hidden; + text-indent: -9999px; + padding: 0px 0px 0px 0px; + display: block; + float: left; + cursor: pointer; + background-color: #333; + border: solid 1px #000; +} +.pp_strokelabel{ + border: none; + margin: -1px 8px 0px 27px; +} +.pp_filllabel{ + border-width: none; + margin: -1px 8px 0px 34px; +} +// End Styles for DivPIProperties + + + +// End: Properties Panel styles + +// New Panel Layout Stuff + +.panels { + display: -webkit-box; + position:absolute; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + height:100%; + width:100%; +} +.panel .resizeBar { + height:4px; + cursor: row-resize; +} + +.panels .panel { + min-height: 25px; + -webkit-box-flex:0; + display: -webkit-box; + -webkit-box-orient: vertical; + //taking out transitions due to glitching ui -webkit-transition: 0.2s all linear; + background:#282828; + height:200px; + padding:0px 2px; + -webkit-box-sizing:border-box; +} + +.panels .panel .panelBody { + -webkit-box-flex:1; + -webkit-box-sizing:border-box; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + position:relative; + resize: vertical; + overflow: auto; + height:200px; + +} +.panel .panelBodyContent { + -webkit-box-sizing: border-box; + -webkit-box-align:stretch; + position:absolute; + height:100%; + width:100%; +} + +.panel .panelBodyContent .panelObjects { + -webkit-box-sizing: border-box; + position:absolute; + height:100%; + width:100%; +} + +.panel .head { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-align: stretch; + height:25px; + line-height: 25px; +} +.panel .head span { + height:25px; + line-height: 25px; + display: -webkit-box; + -webkit-box-flex:0; +} + +.panel .head .panelTitle { + -webkit-box-flex:1; + color:#FFF; +} + +.panel .head .arrowIcon { + background: url('data:image/png;base64,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') 5px 3px no-repeat; + width:25px; + cursor: pointer; +} +.panel .head.collapsed .arrowIcon { +