diff options
Diffstat (limited to 'scss/imports/scss/_PanelUI.scss')
-rw-r--r-- | scss/imports/scss/_PanelUI.scss | 1256 |
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..ccac99ca --- /dev/null +++ b/scss/imports/scss/_PanelUI.scss | |||
@@ -0,0 +1,1256 @@ | |||
1 | // <copyright> | ||
2 | // This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | // No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | // </copyright> | ||
6 | |||
7 | // | ||
8 | // PanelUI.scss | ||
9 | // Styles governing the panels in the UI. | ||
10 | // Note that colors and font definitions go in | ||
11 | // _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss | ||
12 | |||
13 | // layout for the container of all panels within a dock area | ||
14 | .panelContainer { | ||
15 | margin: 0px; | ||
16 | padding: 0px 0px; | ||
17 | position:relative; | ||
18 | // this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel | ||
19 | // unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning | ||
20 | overflow: auto; | ||
21 | } | ||
22 | |||
23 | // base layout style for all panels | ||
24 | .panelDisclosureIcon | ||
25 | { | ||
26 | background-image:url("../images/panels/panelDisclosureIcon.png"); | ||
27 | background-repeat:no-repeat; | ||
28 | width:16px; | ||
29 | height:16px; | ||
30 | float:left; | ||
31 | -webkit-transition-property: rotate; | ||
32 | -webkit-transition-duration: 0.2s; | ||
33 | -webkit-transition-timing-function: linear; | ||
34 | padding-right:2px; | ||
35 | } | ||
36 | .panelBackground { | ||
37 | color: $color-panel-text; | ||
38 | background: $color-tool-bg; | ||
39 | } | ||
40 | |||
41 | .panelCollapseArrowFill { | ||
42 | 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 | ||
43 | padding:0px 4px; | ||
44 | } | ||
45 | |||
46 | .panelContentColor { | ||
47 | background: $color-panel-bg; | ||
48 | border-color: $color-panel-border; | ||
49 | } | ||
50 | .panelCaptionColor { | ||
51 | color: $color-panel-text; | ||
52 | } | ||
53 | |||
54 | .panelCaption { | ||
55 | padding: 2px 0px; | ||
56 | cursor:default; | ||
57 | } | ||
58 | |||
59 | .panelContainerTransition { | ||
60 | -moz-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; | ||
61 | -o-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; | ||
62 | -webkit-transition: width 0.3s ease-out, height 0.2s ease-out, opacity 0.2s ease-out; | ||
63 | } | ||
64 | |||
65 | .panelCloseIcon | ||
66 | { | ||
67 | background-image:url("../images/panels/closeIcon.png"); | ||
68 | background-repeat:no-repeat; | ||
69 | width:15px; | ||
70 | height:14px; | ||
71 | float:right; | ||
72 | opacity:0.5; | ||
73 | } | ||
74 | |||
75 | .panelCloseIcon:hover | ||
76 | { | ||
77 | opacity:1.0; | ||
78 | } | ||
79 | |||
80 | .toolsPanelContainer | ||
81 | { | ||
82 | margin-top: -2px; | ||
83 | margin-left: -2px; | ||
84 | padding-top:20px; | ||
85 | padding-left:3px; | ||
86 | padding-right:3px; | ||
87 | width:32px; | ||
88 | |||
89 | // This is a hack to get the tools panel to extend all the way to the bottom. | ||
90 | padding-bottom:450px; | ||
91 | } | ||
92 | |||
93 | // sizes for the specific panels | ||
94 | |||
95 | #toolPropertiesPanel { | ||
96 | height: 32px; | ||
97 | margin:0px; | ||
98 | } | ||
99 | |||
100 | #timelinePanel { | ||
101 | height: 116px; | ||
102 | } | ||
103 | |||
104 | // Only used by Animation Presets Panel currently | ||
105 | |||
106 | .treeComponent | ||
107 | { | ||
108 | -webkit-user-select: none; | ||
109 | font-size : 11px; | ||
110 | margin-left: 20px; | ||
111 | cursor:default; | ||
112 | color: $color-panel-text; | ||
113 | } | ||
114 | |||
115 | .treeComponent ul | ||
116 | { | ||
117 | position: relative; | ||
118 | list-style: none; | ||
119 | } | ||
120 | |||
121 | // This sets the style for a tree folder's icon | ||
122 | ul.treeComponent > img:first-child | ||
123 | { | ||
124 | margin-left: -35px; | ||
125 | margin-right: 5px; | ||
126 | -webkit-transition: -webkit-transform 0.1s linear; | ||
127 | } | ||
128 | |||
129 | .treeComponent li | ||
130 | { | ||
131 | position: relative; | ||
132 | list-style: none; | ||
133 | border-bottom:1px solid $color-panel-divider; | ||
134 | } | ||
135 | |||
136 | .treeComponent li img | ||
137 | { | ||
138 | margin-left: -20px; | ||
139 | padding-right:10px; | ||
140 | vertical-align:middle; | ||
141 | // border-bottom:1px solid #555555; | ||
142 | } | ||
143 | |||
144 | .treeCategory | ||
145 | { | ||
146 | font-weight : bold; | ||
147 | } | ||
148 | |||
149 | .treeItem { | ||
150 | font-weight : normal; | ||
151 | vertical-align:middle; | ||
152 | color: $color-panel-text; | ||
153 | } | ||
154 | |||
155 | // ====== Used by Properties Panel ====== | ||
156 | // Removed the outline text input style -> Causing problems with the Canvas | ||
157 | |||
158 | .propertiesPanel | ||
159 | { | ||
160 | min-height: 300px; | ||
161 | margin-top:4px; | ||
162 | } | ||
163 | |||
164 | .panelHRule | ||
165 | { | ||
166 | border:none; | ||
167 | display:block; | ||
168 | float:left; | ||
169 | clear:both; | ||
170 | width:100%; | ||
171 | height:3px; | ||
172 | background-color: $color-panel-divider; | ||
173 | } | ||
174 | |||
175 | .vr | ||
176 | { | ||
177 | position:absolute; | ||
178 | display:inline; | ||
179 | border:none; | ||
180 | clear:both; | ||
181 | width:2px; | ||
182 | height:26px; | ||
183 | |||
184 | background-image: -webkit-gradient( | ||
185 | linear, | ||
186 | left bottom, | ||
187 | right bottom, | ||
188 | color-stop(0.4, $color-menu-border), | ||
189 | color-stop(0.8, $color-panel-shadow) | ||
190 | ) | ||
191 | } | ||
192 | |||
193 | .panelInputText | ||
194 | { | ||
195 | resize: none; | ||
196 | color: white; | ||
197 | background-color: $color-panel-input-bg; | ||
198 | border: 1px solid $color-panel-input-border; | ||
199 | width : 100px; | ||
200 | outline: none; | ||
201 | } | ||
202 | |||
203 | .piCollapsibleSectionHeader | ||
204 | { | ||
205 | font-size:12px; | ||
206 | padding-left:10px; | ||
207 | vertical-align:top; | ||
208 | height:16px; | ||
209 | background-color: $color-panel-shadow; | ||
210 | } | ||
211 | |||
212 | // ====== Indexed table row and column classes for Properties Panel layout ====== | ||
213 | .propRow1{ | ||
214 | width:100%; | ||
215 | } | ||
216 | .propRow1Col1{ | ||
217 | width:30%; | ||
218 | text-align:right; | ||
219 | } | ||
220 | .propRow1Col2{ | ||
221 | width:70%; | ||
222 | } | ||
223 | |||
224 | .propRow2{ | ||
225 | width:100%; | ||
226 | } | ||
227 | .propRow2Col1{ | ||
228 | width:30%; | ||
229 | } | ||
230 | .propRow2Col2{ | ||
231 | width:20%; | ||
232 | } | ||
233 | .propRow2Col3{ | ||
234 | width:20%; | ||
235 | } | ||
236 | .propRow2Col4{ | ||
237 | width:40%; | ||
238 | } | ||
239 | |||
240 | .propRow3{ | ||
241 | width:100%; | ||
242 | } | ||
243 | .propRow3Col1{ | ||
244 | width:5%; | ||
245 | } | ||
246 | .propRow3Col2{ | ||
247 | width:5%; | ||
248 | } | ||
249 | .propRow3Col3{ | ||
250 | width:20%; | ||
251 | } | ||
252 | .propRow3Col4{ | ||
253 | width:20%; | ||
254 | } | ||