From a39bad832722a10f6556f91e94c3301a41f59bd5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 13:30:49 -0800 Subject: merge new timeline Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/scss/Layer.scss | 220 ++++++++++++++++++++++++++ js/panels/Timeline/Layer.reel/scss/config.rb | 9 ++ 2 files changed, 229 insertions(+) create mode 100644 js/panels/Timeline/Layer.reel/scss/Layer.scss create mode 100644 js/panels/Timeline/Layer.reel/scss/config.rb (limited to 'js/panels/Timeline/Layer.reel/scss') 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 helper functions. Uncomment: +# relative_assets = true -- cgit v1.2.3