aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJon Reid2012-04-10 14:51:45 -0700
committerJon Reid2012-04-10 14:51:45 -0700
commit03a3b32b9b0fd2dc8e4b54bfd5282fd1f8fb6ed6 (patch)
treea67e6305b2bd3ee7c7d3aeb5432a2b88d394a16c /js
parent4c492e2f9d01a699aba8ccdd1a2b04238749ea3c (diff)
downloadninja-03a3b32b9b0fd2dc8e4b54bfd5282fd1f8fb6ed6.tar.gz
Timeline: New files.
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.pngbin0 -> 1083 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/images/icon-gear.pngbin0 -> 1397 bytes
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss370
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/config.rb10
4 files changed, 380 insertions, 0 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png
new file mode 100644
index 00000000..64449a5a
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-checkmark.png
Binary files differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png
new file mode 100644
index 00000000..9b324f65
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/images/icon-gear.png
Binary files differ
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
new file mode 100644
index 00000000..5ff710a1
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -0,0 +1,370 @@
1@charset "UTF-8";
2
3/* <copyright>
4 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
5 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
6 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
7 </copyright> */
8
9/* TimelinePanel.scss
10 * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css.
11 */
12
13// Import theme settings
14@import "../../../../../scss/imports/themes/default/colors";
15// @import "../../../../../scss/imports/themes/default/fonts";
16@import "../../../../../scss/imports/themes/default/mixins";
17
18// Import generic mixins and styles
19@import "../../../../../scss/imports/scss/mixins";
20// @import "../../../../../scss/imports/scss/Base";
21
22.tl_container{
23 display: -webkit-box;
24 -webkit-box-orient: vertical;
25 height: 100%;
26}
27.maintimeline{
28 -webkit-box-flex: 1;
29 display: -webkit-box;
30 -webkit-box-orient: horizontal;
31 height : 100%;
32 position: relative;
33 margin-top:1px;
34}
35.leftinside{
36 height: 100%;
37 width: 100%;
38 display: -webkit-box;
39 -webkit-box-orient: vertical;
40 position:absolute;
41 overflow: hidden;
42}
43.rightinside{
44 height: 100%;
45 width: 100%;
46 display: -webkit-box;
47 -webkit-box-orient: vertical;
48 position:absolute;
49}
50.tl_leftpane{
51 min-width: 200px;
52 max-width: 500px;
53 position: relative;
54 overflow: hidden;
55 -webkit-box-flex: 0;
56}
57.tl_rightpane{
58 width: 100%;
59 position: relative;
60 -webkit-box-flex: 1;
61}
62
63#bottomPanelContainer {
64 overflow: hidden !IMPORTANT;
65}
66
67.layout-tracks {
68 width: 100%;
69 height: 100%;
70 padding-bottom: 6px;
71 box-sizing: border-box;
72 overflow: auto;
73 position: relative;
74}
75.tl_layertracks{
76 background-color: $color-tool-bg;
77 height: 100%;
78 width: 100%;
79 -webkit-box-flex: 1;
80 padding-top: 21px;
81 box-sizing: border-box;
82}
83.layerresizer{
84 height: auto;
85 width:6px;
86 border-right-style: solid;
87 border-right-color: $color-divider-third;
88 border-right-width: thin;
89 border-left-style: solid;
90 border-left-color: $color-divider-second;
91 border-left-width: thin;
92 background-color: $color-divider-first;
93 cursor: col-resize;
94 -webkit-box-flex: 0;
95}
96.timelinecontroller{
97 height:20px;
98 background-color: $color-panel-bg;
99 -webkit-box-flex: 0;
100 border-bottom-style: solid;
101 border-bottom-width: thin;
102 border-bottom-color: $color-divider-second;
103}
104.timelinecontrols{
105 width: 100%;
106 padding-left: 6px;
107 padding-top: 2px;
108 height: 18px;
109 background-color: $color-panel-bg;
110 float: left;
111}
112.timetext{
113 float: right;
114 padding-right: 10px;
115 color: white;
116}
117.rewindbutton{
118 background-image: url('../images/play_prev.png');
119 background-repeat: no-repeat;
120 height: 18px;
121 width: 18px;
122 float: left;
123 padding-right: 5px;
124}
125.playbutton{
126 background-image: url('../images/play.png');
127 background-repeat: no-repeat;
128 height: 18px;
129 width: 18px;
130 float: left;
131 padding-right: 5px;
132}
133.pausebutton{
134 background-image: url('../images/pause.png');
135 background-repeat: no-repeat;
136 height: 18px;
137 width: 18px;
138 float: left;
139 padding-right: 5px;
140}
141.forwardbutton{
142 background-image: url('../images/play_next.png');
143 background-repeat: no-repeat;
144 height: 18px;
145 width: 18px;
146 float: left;
147 padding-right: 5px;
148}
149.timelinemarkers{
150 height: 20px;
151 width: 100%;
152 background-color: $color-panel-bg;
153 border-bottom-style: solid;
154 border-bottom-width: thin;
155 border-bottom-color: $color-divider-second;
156 -webkit-box-flex: 0;
157 position: absolute;
158 background-image: url("../images/timetick.jpg");
159 overflow: visible;
160}
161.layout_markers {
162 position: absolute;
163 overflow: hidden;
164 top: 0px;
165 left: 0px;
166 height: 20px;
167 width: 100%;
168 border-bottom-style: solid;
169}
170
171.masterlayer{
172 font-family: 'Droid Sans';
173 font-size: 12px;
174 text-shadow: 1px 1px 1px black;
175 height: 18px;
176 background-color: $color-panel-bg;
177 border-bottom-style: solid;
178 border-bottom-width: thin;
179 border-bottom-color: $color-divider-third;
180 color: $color-panel-text;
181 padding-left: 15px;
182 padding-top: 2px;
183}
184.mastertrack{
185 -webkit-box-flex: 0;
186 color: white;
187 height: 20px;
188 width: 100%;
189 border-bottom-style: solid;
190 border-bottom-width: thin;
191 border-bottom-color: $color-divider-third;
192 background-color: $color-divider-first;
193 background-image: url("../../Track.reel/images/gridline.jpg");
194}
195
196.container-tracks,
197.timelinemarkers,
198.mastertrack {
199 width: 2000px;
200}
201.userlayers{
202 width: 100%;
203 background-color: $color-tool-bg;
204 -webkit-box-flex: 1;
205 overflow: hidden;
206 border-bottom-style: solid;
207 border-bottom-width: thin;
208 border-bottom-color: $color-divider-second;
209}
210.timelinegutter{
211 height: 16px;