aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/css-style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/css-style.reel')
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.css188
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.html87
-rw-r--r--js/panels/css-panel/css-style.reel/css-style.js416
3 files changed, 691 insertions, 0 deletions
diff --git a/js/panels/css-panel/css-style.reel/css-style.css b/js/panels/css-panel/css-style.reel/css-style.css
new file mode 100644
index 00000000..524884bd
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.css
@@ -0,0 +1,188 @@
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 Style item container styles
9------------------------ */
10.style-item {
11 border-bottom: 1px solid rgba(0,0,0,0);
12 /*cursor: url(/js/../images/tools/hand_down.png), default;*/
13 display: block;
14 overflow: hidden;
15 white-space: nowrap;
16 text-overflow: ellipsis;
17}
18.style-item:hover {
19 /*border-right: 3px double #999;*/
20 /*margin-right: 3px;*/
21}
22
23/* ------------------------
24 Invalid Style
25------------------------ */
26.style-item-invalid {
27 background-repeat: no-repeat;
28 background-position: 6px 2px;
29 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
30 opacity: 0.5;
31}
32.style-item.style-item-invalid:hover input {
33 visibility: hidden;
34}
35.style-item-invalid.edit-style-item {
36 opacity: 1;
37}
38/* ------------------------
39 Checkbox
40------------------------ */
41
42.style-item input {
43 height: 10px;
44 width: 10px;
45 margin: 0 6px;
46 visibility: hidden;
47}
48.style-item:hover input, .style-item-disabled input {
49 visibility: visible;
50}
51.style-item-disabled {
52 opacity: .5;
53}
54
55/* ------------------------
56 Property/value styles
57------------------------ */
58
59.css-property, .css-value {
60 border: 1px solid rgba(0,0,0,0);
61 border-radius: 2px;
62 cursor: pointer;
63 margin: 0;
64 outline: none;
65 padding: 0 2px;
66}
67.css-property:hover, .css-value:hover {
68 background-color: #FFDECC;
69}
70.css-property:focus, .css-value:focus {
71 border: 1px solid rgba(0,0,0,0);
72 box-shadow: none;
73}
74.css-property:after {
75 color: #333;
76 content: ":";
77}
78.css-value:after {
79 content: ";";
80}
81.css-property {
82 display: inline-block;
83 color: rgb(200,0,0);
84 max-width: 68%;
85 overflow: hidden;
86 text-overflow: ellipsis;
87}
88.css-value {
89 display: inline;
90}
91
92/* ------------------------
93 Editable Styles
94------------------------ */
95
96.style-item .editable {
97 background-color: transparent;
98 border: 1px solid #999;
99 box-shadow: 1px 1px 1px #CCC;
100 color: #333;
101 cursor: text;
102 display: inline-block;
103 margin-right: 7px;
104 max-width: none;
105 overflow: visible;
106 -webkit-user-select: text;
107}
108.style-item .editable:after {
109 position: relative;
110 margin-right: -7px;
111 right: -1px;
112}
113.style-item .hintable-hint {
114 color: #bdbdbd;
115}
116
117/* ------------------------
118 Empty Style (Add Style)
119------------------------ */
120.add-style-button {
121 display: none;
122}
123.empty-css-style {
124 cursor: default;
125 -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99);
126 -webkit-transform: translate3d(-120px, 0, 0);
127 overflow: visible;
128}
129.empty-css-style:hover {
130 border-right-style: none;
131}
132.empty-css-style .add-style-button {
133 cursor: pointer;
134 color: #333;
135 display: inline-block;
136 font-family: "Droid Sans", sans-serif;
137 background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%);
138 border-radius: 5px;
139 border: 1px solid #CCC;
140 padding: 1px 10px 0;
141 position: absolute;
142 left: 140px;
143 text-shadow: 1px 1px 0 #FFF;
144 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
145}
146.empty-css-style .add-style-button:hover {
147 background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
148}
149.empty-css-style .add-style-button:active {
150 background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%);
151}
152.empty-css-style .css-property, .empty-css-style .css-value {
153 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
154 opacity: 0;
155}
156.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
157 opacity: 1;
158}
159.empty-css-style.edit-empty-style {
160 border-right-style: none;
161 -webkit-transform: translate3d(0, 0, 0);
162}
163.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
164 color: #adadad;
165}
166.empty-css-style.edit-empty-style .add-style-button {
167 opacity: 0;
168 cursor: default;
169}
170.empty-css-style input[type="checkbox"] {
171 visibility: hidden;
172}
173/* ------------------------
174 Drag/Drop Styles
175------------------------ */
176
177.style-item.dragged {
178 background: none;
179 border-right-style: none;
180 opacity: .85;
181}
182.style-item.dragging {
183 background-color: #f2f2f2;
184 opacity: .55;
185}
186.style-item.drag-enter {
187 border-bottom: 1px solid #CCC;
188} \ No newline at end of file
diff --git a/js/panels/css-panel/css-style.reel/css-style.html b/js/panels/css-panel/css-style.reel/css-style.html
new file mode 100644
index 00000000..00cebf39
--- /dev/null
+++ b/js/panels/css-panel/css-style.reel/css-style.html
@@ -0,0 +1,87 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6</copyright> -->
7<html lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link href="css-style.css" type="text/css" rel="stylesheet" media="screen">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "prototype" : "js/panels/css-panel/css-style.reel",
15 "properties" : {
16 "element" : {"#" : "container"},
17 "addStyleButton": {"#": "add-style-button"},
18 "propertyField": {"@": "property"},
19 "valueField": {"@": "value"},
20 "propertyNames" : {"@": "propertyNames"}
21 }
22 },
23 "propertyNames": {
24 "object": "js/panels/CSSPanel/css-property-name-list"
25 },
26 "checkbox": {
2