2 files changed, 229 insertions, 0 deletions

diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss
new file mode 100644
index 00000000..7473a275
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss
@@ -0,0 +1,220 @@
+@charset "UTF-8";
+
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
+ */
+ 
+// Import theme settings
+@import "../../../../../_scss/imports/themes/default/colors";
+// @import "../../../../../_scss/imports/themes/default/fonts";
+@import "../../../../../_scss/imports/themes/default/mixins";
+
+// Import generic mixins and styles
+@import "../../../../../_scss/imports/scss/mixins";
+// @import "../../../../../_scss/imports/scss/Base";
+
+.layerLabel{
+    width: 100%;
+    color: $color-panel-text;
+    height: 21px;
+    font-family: 'Droid Sans';
+    font-size: 12px;
+    text-shadow: 1px 1px 1px $color-panel-shadow;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+}
+.layerLabel.layerSelected {
+        background-color: $color-panel-hilite-bg;
+        color: $color-panel-hilite-text;
+}
+.layerLabel{
+    width:100%;
+    height:18px;
+    padding-left: 25px;
+    padding-top: 2px;
+    -webkit-box-flex: 1;
+}
+.layerDisclosure{
+    background-image: url('../images/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;
+    -webkit-box-flex: 0;
+}
+.layerHide{
+    background-image: url('../images/eye.png');
+    background-repeat: no-repeat;
+    /*float: right;*/
+    width: 16px;
+    height: 16px;
+    padding-right: 4px;
+    -webkit-box-flex: 0;
+}
+.layerLock{
+    background-image: url('../images/lock_open.png');
+    background-repeat: no-repeat;
+    /*float: right;*/
+    width: 16px;
+    height: 16px;
+    padding-right: 4px;
+    -webkit-box-flex: 0;
+}
+
+/******************************************/
+
+.container-layer {
+        background-color: $color-panel-bg;
+        color: $color-panel-text;
+        font-size: 12px;
+        text-shadow: 1px 1px 1px $color-app-shadow;
+}
+.selected .container-layer {
+        background-color: $color-panel-bg;
+}
+.selected .container-layer .label-layer {
+        background-color: $color-panel-hilite-bg;
+        color: $color-panel-hilite-text;
+}
+
+.userlayers .collapsible-label {
+        display: block;
+        width: 100px;
+    height: 21px;
+    line-height: 20px;
+        color: $color-panel-text;
+        margin-left: 30px;
+        margin-right: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.layerSelected .label-layer {
+        background-color: $color-panel-hilite-bg;
+        color: $color-panel-hilite-text;
+}
+.content-layer {
+        background-color: $color-panel-bg;
+        color: $color-panel-text;
+}
+.content-layer .collapsible-label {
+        background-position: 14px 5px;
+        border-width: 0px;
+}
+.label-layer,
+.label-position,
+.label-transform,
+.label-style {
+        position: relative;
+        border-bottom: 1px solid #505050;
+        cursor: pointer;
+}
+
+.content-layer .collapsible-label,
+.content-layer .collapsible-content {
+        font-size: 11px;
+}
+
+.collapsible-clicker {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: 5px;
+        left: 5px;
+        margin: 0px;
+        padding: 0px;
+    background-image: url(../images/icon-open.png);
+    background-repeat: no-repeat;
+}
+.collapsible-clicker.collapsible-collapsed {
+        background-image: url(../images/icon-collapsed.png);
+}
+.collapsible-content .collapsible-clicker {
+        left: 12px;
+}
+.content-layer.collapsible-collapsed {
+        height: 0px;
+        overflow: hidden;
+}
+
+.label-layer .cssbutton,
+.label-style .cssbutton {
+        width: 14px;
+        height: 14px;
+        overflow: hidden;
+        position: absolute;
+        background-repeat: no-repeat;
+}
+.label-layer .button-lock {
+        background-image: url(../images/icon-lock.png);
+        top: 3px;
+        right: 27px;
+}
+.label-layer .button-visible {
+        background-image: url(../images/icon-eye.png);
+        top: 3px;
+        right: 7px;
+}
+.label-style .button-add {
+        background-image: url(../images/icon-plus.png);
+        width: 15px;
+        height: 15px;
+        top: 3px;
+        right: 11px;
+}
+.label-style .button-delete {
+        background-image: url(../images/icon-minus.png);
+        width: 15px;
+        height: 15px;
+        top: 3px;
+        right: 31px;
+}
+.collapsible-content .layout-table {
+        width: 99.9%;
+}
+.content-layer .collapsible-content {
+        padding-left: 30px;
+}
+.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
+        width: 40%;
+        height: 20px;
+        border-bottom: 1px solid $color-menu-divider;
+        line-height: 20px;
+        text-align: left;
+}
+.collapsible-content .layout-table:first-child {
+        border-top: 1px solid $color-menu-divider;
+}
+.collapsible-transition {
+        -webkit-transition-property: height;
+        -webkit-transition-duration: 200ms;
+        -webkit-transition-timing-function: ease-in;
+}
+
+.editable2 {
+        height: 20px;
+        background-color: $color-panel-hilite-text !IMPORTANT;
+        color: $color-panel-hilite-bg !IMPORTANT;
+        border-width: 0px;
+        font-size: 11px;
+        overflow: hidden;
+    -webkit-user-select: text;
+    text-overflow: clip;
+}
+
+/* styles elements */
+.content-style .item-template {
+        display: none;
+}
+.content-style .layout-row.selected .layout-cell {
+        background-color: $color-panel-hilite-bg;
+        color: $color-panel-hilite-text;
+}
+.style-row {
+        height: 20px;
+}
diff --git a/js/panels/Timeline/Layer.reel/scss/config.rb b/js/panels/Timeline/Layer.reel/scss/config.rb
new file mode 100644
index 00000000..e5a99b70
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/scss/config.rb
@@ -0,0 +1,9 @@
+# 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"
+# To enable relative paths to assets via compass h