1 files changed, 1256 insertions, 0 deletions

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 @@
+// <copyright>
+// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+// (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+// </copyright>
+
+// 
+// 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%;
+}