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.css164
-rw-r--r--js/panels/css-panel/style.reel/style.html77
-rw-r--r--js/panels/css-panel/style.reel/style.js178
3 files changed, 419 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..f8750eea
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.css
@@ -0,0 +1,164 @@
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 Checkbox
25------------------------ */
26
27.style-item input {
28 height: 10px;
29 width: 10px;
30 margin: 0 6px;
31 visibility: hidden;
32}
33.style-item:hover input, .style-item-disabled input {
34 visibility: visible;
35}
36.style-item-disabled {
37 opacity: .5;
38}
39
40/* ------------------------
41 Property/value styles
42------------------------ */
43
44.css-property, .css-value {
45 border: 1px solid rgba(0,0,0,0);
46 border-radius: 2px;
47 cursor: pointer;
48 margin: 0;
49 outline: none;
50 padding: 0 2px;
51}
52.css-property:hover, .css-value:hover {
53 background-color: #FFDECC;
54}
55.css-property:after {
56 color: #333;
57 content: ":";
58}
59.css-value:after {
60 content: ";";
61}
62.css-property {
63 display: inline-block;
64 color: rgb(200,0,0);
65 max-width: 68%;
66 overflow: hidden;
67 text-overflow: ellipsis;
68}
69.css-value {
70 display: inline;
71}
72
73/* ------------------------
74 Editable Styles
75------------------------ */
76
77.style-item .editable {
78 background-color: transparent;
79 border: 1px solid #999;
80 box-shadow: 1px 1px 1px #CCC;
81 color: #333;
82 cursor: text;
83 display: inline-block;
84 margin-right: 7px;
85 max-width: none;
86 overflow: visible;
87 -webkit-user-select: text;
88}
89.style-item .editable:after {
90 position: relative;
91 margin-right: -7px;
92 right: -1px;
93}
94
95/* ------------------------
96 Empty Style (Add Style)
97------------------------ */
98.add-style-button {
99 display: none;
100}
101.empty-css-style {
102 cursor: default;
103 -webkit-transition: -webkit-transform .2s cubic-bezier(0.44, 0.19, 0, 0.99);
104 -webkit-transform: translate3d(-120px, 0, 0);
105}
106.empty-css-style:hover {
107 border-right-style: none;
108}
109.empty-css-style .add-style-button {
110 cursor: pointer;
111 color: #333;
112 display: inline-block;
113 font-family: "Droid Sans", sans-serif;
114 background: -webkit-linear-gradient(top, rgba(242,242,242,1) 1%,rgba(221,221,221,1) 100%);
115 border-radius: 5px;
116 border: 1px solid #CCC;
117 padding: 1px 10px 0;
118 position: absolute;
119 left: 140px;
120 text-shadow: 1px 1px 0 #FFF;
121 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
122}
123.empty-css-style .add-style-button:hover {
124 background: -webkit-linear-gradient(top, rgba(252,252,252,1) 1%,rgba(234,234,234,1) 100%);
125}
126.empty-css-style .add-style-button:active {
127 background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(252,252,252,1) 99%);
128}
129.empty-css-style .css-property, .empty-css-style .css-value {
130 -webkit-transition: opacity .2s cubic-bezier(0.44, 0.19, 0, 0.99);
131 opacity: 0;
132}
133.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
134 opacity: 1;
135}
136.empty-css-style.edit-empty-style {
137 border-right-style: none;
138 -webkit-transform: translate3d(0, 0, 0);
139}
140.empty-css-style.edit-empty-style .css-property, .empty-css-style.edit-empty-style .css-value {
141 color: #adadad;
142}
143.empty-css-style.edit-empty-style .add-style-button {
144 opacity: 0;
145}
146.empty-css-style input[type="checkbox"] {
147 visibility: hidden;
148}
149/* ------------------------
150 Drag/Drop Styles
151------------------------ */
152
153.style-item.dragged {
154 background: none;
155 border-right-style: none;
156 opacity: .85;
157}
158.style-item.dragging {
159 background-color: #f2f2f2;
160 opacity: .55;
161}
162.style-item.drag-enter {
163 border-bottom: 1px solid #CCC;
164} \ 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..0d438ead
--- /dev/null
+++ b/js/panels/css-panel/style.reel/style.html
@@ -0,0 +1,77 @@
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": {
39 "module": "js/components/hintable.reel",
40 "name": "Hintable",
41 "properties": {
42 "startOnEvent": "click",
43 "element": {"#": "property"}
44 },
45 "bindings": {
46 "value" : {
47 "boundObject": {"@": "owner"},
48 "boundObjectPropertyPath": "propertyText",
49 "oneway": true
50 }
51 }
52 },
53 "value": {
54 "module": "js/components/hintable.reel",
55 "name": "Hintable",
56 "properties": {
57 "startOnEvent": "click",
58 "element": {"#": "value"}
59 },
60 "bindings": {
61 "value" : {
62 "boundObject": {"@": "owner"},
63 "boundObjectPropertyPath": "valueText",