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