aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/scss
diff options
context:
space:
mode:
authorEric Guzman2012-02-13 15:48:37 -0800
committerEric Guzman2012-02-13 15:48:37 -0800
commitb2672478decd3ee3bfacf86b525551c997f9604d (patch)
tree79a88684406d3adf00350246a4da884b97fb0eac /js/panels/Timeline/Layer.reel/scss
parenta738121a921e4c721b280434952b415b9ab3b1a8 (diff)
parent0620e2f788861e824d6e49fa319da4d20b18a556 (diff)
downloadninja-b2672478decd3ee3bfacf86b525551c997f9604d.tar.gz
Merge branch 'refs/heads/master' into StylesControllerUpdates
Conflicts: js/controllers/styles-controller.js
Diffstat (limited to 'js/panels/Timeline/Layer.reel/scss')
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss220
-rw-r--r--js/panels/Timeline/Layer.reel/scss/config.rb9
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 @@
1@charset "UTF-8";
2
3/* Layer.scss
4 * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
5 */
6
7// Import theme settings
8@import "../../../../../_scss/imports/themes/default/colors";
9// @import "../../../../../_scss/imports/themes/default/fonts";
10@import "../../../../../_scss/imports/themes/default/mixins";
11
12// Import generic mixins and styles
13@import "../../../../../_scss/imports/scss/mixins";
14// @import "../../../../../_scss/imports/scss/Base";
15
16.layerLabel{
17 width: 100%;
18 color: $color-panel-text;
19 height: 21px;
20 font-family: 'Droid Sans';
21 font-size: 12px;
22 text-shadow: 1px 1px 1px $color-panel-shadow;
23 display: -webkit-box;
24 -webkit-box-orient: horizontal;
25}
26.layerLabel.layerSelected {
27 background-color: $color-panel-hilite-bg;
28 color: $color-panel-hilite-text;
29}
30.layerLabel{
31 width:100%;
32 height:18px;
33 padding-left: 25px;
34 padding-top: 2px;
35 -webkit-box-flex: 1;
36}
37.layerDisclosure{
38 background-image: url('../images/panelDisclosureIcon.png');
39 background-repeat: no-repeat;
40 width: 16px;
41 height: 16px;
42 /*float: left;*/
43
44 -webkit-transition-property: rotate;
45 -webkit-transition-duration: 0.2s;
46 -webkit-transition-timing-function: linear;
47 padding-right: 2px;
48 -webkit-box-flex: 0;
49}
50.layerHide{
51 background-image: url('../images/eye.png');
52 background-repeat: no-repeat;
53 /*float: right;*/
54 width: 16px;
55 height: 16px;
56 padding-right: 4px;
57 -webkit-box-flex: 0;
58}
59.layerLock{
60 background-image: url('../images/lock_open.png');
61 background-repeat: no-repeat;
62 /*float: right;*/
63 width: 16px;
64 height: 16px;
65 padding-right: 4px;
66 -webkit-box-flex: 0;
67}
68
69/******************************************/
70
71.container-layer {
72 background-color: $color-panel-bg;
73 color: $color-panel-text;
74 font-size: 12px;
75 text-shadow: 1px 1px 1px $color-app-shadow;
76}
77.selected .container-layer {
78 background-color: $color-panel-bg;
79}
80.selected .container-layer .label-layer {
81 background-color: $color-panel-hilite-bg;
82 color: $color-panel-hilite-text;
83}
84
85.userlayers .collapsible-label {
86 display: block;
87 width: 100px;
88 height: 21px;
89 line-height: 20px;
90 color: $color-panel-text;
91 margin-left: 30px;
92 margin-right: 20px;
93 white-space: nowrap;
94 overflow: hidden;
95 text-overflow: ellipsis;
96}
97.layerSelected .label-layer {
98 background-color: $color-panel-hilite-bg;
99 color: $color-panel-hilite-text;
100}
101.content-layer {
102 background-color: $color-panel-bg;
103 color: $color-panel-text;
104}
105.content-layer .collapsible-label {
106 background-position: 14px 5px;
107 border-width: 0px;
108}
109.label-layer,
110.label-position,
111.label-transform,
112.label-style {
113 position: relative;
114 border-bottom: 1px solid #505050;
115 cursor: pointer;
116}
117
118.content-layer .collapsible-label,
119.content-layer .collapsible-content {
120 font-size: 11px;
121}
122
123.collapsible-clicker {
124 position: absolute;
125 width: 10px;
126 height: 10px;
127 top: 5px;
128 left: 5px;
129 margin: 0px;
130 padding: 0px;
131 background-image: url(../images/icon-open.png);
132 background-repeat: no-repeat;
133}
134.collapsible-clicker.collapsible-collapsed {
135 background-image: url(../images/icon-collapsed.png);
136}
137.collapsible-content .collapsible-clicker {
138 left: 12px;
139}
140.content-layer.collapsible-collapsed {
141 height: 0px;
142 overflow: hidden;
143}
144
145.label-layer .cssbutton,
146.label-style .cssbutton {
147 width: 14px;
148 height: 14px;
149 overflow: hidden;
150 position: absolute;
151 background-repeat: no-repeat;
152}
153.label-layer .button-lock {
154 background-image: url(../images/icon-lock.png);
155 top: 3px;
156 right: 27px;
157}
158.label-layer .button-visible {
159 background-image: url(../images/icon-eye.png);
160 top: 3px;
161 right: 7px;
162}
163.label-style .button-add {
164 background-image: url(../images/icon-plus.png);
165 width: 15px;
166 height: 15px;
167 top: 3px;
168 right: 11px;
169}
170.label-style .button-delete {
171 background-image: url(../images/icon-minus.png);
172 width: 15px;
173 height: 15px;
174 top: 3px;
175 right: 31px;
176}
177.collapsible-content .layout-table {
178 width: 99.9%;
179}
180.content-layer .collapsible-content {
181 padding-left: 30px;
182}
183.collapsible-content .collapsible-content .layout-table .layout-row .layout-cell {
184 width: 40%;
185 height: 20px;
186 border-bottom: 1px solid $color-menu-divider;
187 line-height: 20px;
188 text-align: left;
189}
190.collapsible-content .layout-table:first-child {
191 border-top: 1px solid $color-menu-divider;
192}
193.collapsible-transition {
194 -webkit-transition-property: height;
195 -webkit-transition-duration: 200ms;
196 -webkit-transition-timing-function: ease-in;
197}
198
199.editable2 {
200 height: 20px;
201 background-color: $color-panel-hilite-text !IMPORTANT;
202 color: $color-panel-hilite-bg !IMPORTANT;
203 border-width: 0px;
204 font-size: 11px;
205 overflow: hidden;
206 -webkit-user-select: text;
207 text-overflow: clip;
208}
209
210/* styles elements */
211.content-style .item-template {
212 display: none;
213}
214.content-style .layout-row.selected .layout-cell {
215 background-color: $color-panel-hilite-bg;
216 color: $color-panel-hilite-text;
217}
218.style-row {
219 height: 20px;
220}
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 @@
1# Require any additional compass plugins here.
2# Set this to the root of your project when deployed:
3http_path = "/"
4css_dir = "../css"