aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style.reel')
-rw-r--r--js/panels/css-panel/style.reel/style.css184
-rw-r--r--js/panels/css-panel/style.reel/style.html91
-rw-r--r--js/panels/css-panel/style.reel/style.js292
3 files changed, 567 insertions, 0 deletions
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
new file mode 100644
index 00000000..ff410951
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.css
@@ -0,0 +1,184 @@
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
114/* ------------------------
115 Empty Style (Add Style)
116------------------------ */
117.add-style-button {
118 display: none;
119}
120.empty-css-style {
121 cursor: default;
122 -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99);
123 -webkit-transform: translate3d(-120px, 0, 0);
124 overflow: visible;
125}
126.empty-css-style:hover {
127 border-right-style: none;
128}
129.empty-css-style .add-style-button {
130 cursor: pointer;
131 color: #333;
132 display: inline-block;
133 font-family: "Droid Sans", sans-serif;
134 background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%);
135 border-radius: 5px;
136 border: 1px solid #CCC;
137 padding: 1px 10px 0;
138 position: absolute;
139 left: 140px;
140 text-shadow: 1px 1px 0 #FFF;
141 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
142}
143.empty-css-style .add-style-button:hover {
144 background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
145}
146.empty-css-style .add-style-button:active {
147 background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%);
148}
149.empty-css-style .css-property, .empty-css-style .css-value {
150 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
151 opacity: 0;
152}
153.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
154 opacity: 1;
155}
156.empty-css-style.edit-empty-style {
157 border-right-style: none;
158 -webkit-transform: translate3d(0, 0, 0);
159}
160.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
161 color: #adadad;
162}
163.empty-css-style.edit-empty-style .add-style-button {
164 opacity: 0;
165}
166.empty-css-style input[type="checkbox"] {
167 visibility: hidden;
168}
169/* ------------------------
170 Drag/Drop Styles
171------------------------ */
172
173.style-item.dragged {
174 background: none;
175 border-right-style: none;
176 opacity: .85;
177}
178.style-item.dragging {
179 background-color: #f2f2f2;
180 opacity: .55;
181}
182.style-item.drag-enter {
183 border-bottom: 1px solid #CCC;
184} \ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.html b/js/panels/css-panel/style.reel/style.html
new file mode 100644
index 00000000..469c7268
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.html
@@ -0,0 +1,91 @@
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="style.css" type="text/css" rel="stylesheet" media="screen">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/style.reel",
15 "name" : "Style",
16 "properties" : {
17 "element" : {"#" : "container"},
18 "addStyleButton": {"#": "add-style-button"},
19 "propertyField": {"@": "property"},
20 "valueField": {"@": "value"}
21 }
22 },
23 "checkbox": {
24 "module": "montage/ui/checkbox.reel",
25 "name": "Checkbox",
26 "properties": {
27 "element": {"#": "disable-checkbox"},
28 "checked": true
29 },
30 "bindings": {
31 "checked" : {
32 "boundObject": {"@": "owner"},
33 "boundObjectPropertyPath": "enabled",
34 "oneway": false
35 }
36 }
37 },
38 "property": {