diff options
Diffstat (limited to 'node_modules/montage/ui/bluemoon/toggle.reel')
3 files changed, 601 insertions, 0 deletions
diff --git a/node_modules/montage/ui/bluemoon/toggle.reel/toggle.css b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.css new file mode 100644 index 00000000..adf3fe14 --- /dev/null +++ b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.css | |||
@@ -0,0 +1,162 @@ | |||
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 | .montage-toggle { | ||
7 | width: 60px; | ||
8 | height: 22px; | ||
9 | } | ||
10 | |||
11 | .montage-toggle .toggle:before { | ||
12 | content: ""; | ||
13 | position: absolute; | ||
14 | left: -13px; | ||
15 | right: -13px; | ||
16 | top: -8px; | ||
17 | bottom: -8px; | ||
18 | border-radius: 30px; | ||
19 | } | ||
20 | |||
21 | .montage-toggle .toggle { | ||
22 | position: absolute; | ||
23 | border-radius: 12px; | ||
24 | height: 20px; | ||
25 | padding: 1px; | ||
26 | background-color: rgba(160,160,160,.4); | ||
27 | -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1); | ||
28 | } | ||
29 | |||
30 | .montage-toggle .scroll { | ||
31 | -webkit-transform: translateZ(0); | ||
32 | } | ||
33 | |||
34 | .montage-toggle .circle { | ||
35 | position: absolute; | ||
36 | margin: -16px 0 0 -16px; | ||
37 | height: 50px; | ||
38 | width: 50px; | ||
39 | border-radius: 26px; | ||
40 | background: #fff; | ||
41 | opacity: .3; | ||
42 | border: 1px solid rgba(0, 0, 0, .5); | ||
43 | -webkit-transform: scale3d(.35, .35, 0) translateZ(0); | ||
44 | } | ||
45 | |||
46 | .montage-toggle.pressed .circle { | ||
47 | -webkit-transform: scale3d(1, 1, 0) translateZ(0); | ||
48 | } | ||
49 | |||
50 | .montage-toggle .handlerbg { | ||
51 | position: absolute; | ||
52 | background: transparent; | ||
53 | position: absolute; | ||
54 | height: 20px; | ||
55 | width: 20px; | ||
56 | border-radius: 11px; | ||
57 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .35); | ||
58 | -webkit-transform: translateZ(0); | ||
59 | } | ||
60 | |||
61 | .montage-toggle .handler { | ||
62 | position: absolute; | ||
63 | width: 20px; | ||
64 | height: 20px; | ||
65 | border-radius: 11px; | ||
66 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6)); | ||
67 | -webkit-transform: translateZ(0); | ||
68 | } | ||
69 | |||
70 | .montage-toggle .handler:after { | ||
71 | content: ""; | ||
72 | position: absolute; | ||
73 | margin: 6px 0 0 6px; | ||
74 | width: 8px; | ||
75 | height: 8px; | ||
76 | border-radius: 4px; | ||
77 | background-color: #909090; | ||
78 | -webkit-box-shadow: inset 0 1px 2px #707070; | ||
79 | -webkit-transform: scale3d(.9, .9, 0) translateZ(0); | ||
80 | } | ||
81 | |||
82 | .montage-toggle .handleronbg { | ||
83 | opacity: 0; | ||
84 | position: absolute; | ||
85 | background: rgba(0,0,0,.3); | ||
86 | margin: -1px 0 0 -1px; | ||
87 | width: 20px; | ||
88 | height: 20px; | ||
89 | border-radius: 11px; | ||
90 | padding: 1px; | ||
91 | -webkit-transform: translateZ(0); | ||
92 | } | ||
93 | |||
94 | .montage-toggle .handleron { | ||
95 | position: absolute; | ||
96 | width: 20px; | ||
97 | height: 20px; | ||
98 | border-radius: 10px; | ||
99 | background: -webkit-gradient(linear, left top, left bottom, from(#10BEFE), to(#0AA3DA)); | ||
100 | -webkit-transform: translateZ(0); | ||
101 | } | ||
102 | |||
103 | .montage-toggle .handleron:after { | ||
104 | content: ""; | ||
105 | position: absolute; | ||
106 | margin: 6px 0 0 6px; | ||
107 | height: 8px; | ||
108 | width: 8px; | ||
109 | border-radius: 4px; | ||
110 | background-color: #07739A; | ||
111 | -webkit-box-shadow: inset 0 1px 2px #04435A; | ||
112 | -webkit-transform: scale3d(.9, .9, 0) translateZ(0); | ||
113 | } | ||
114 | |||
115 | .montage-toggle .handlerdragarea { | ||
116 | position: absolute; | ||
117 | margin: -16px 0 0 -16px; | ||
118 | width: 52px; | ||
119 | height: 52px; | ||
120 | border-radius: 26px; | ||
121 | -webkit-transform: translateZ(0); | ||
122 | } | ||
123 | |||
124 | .montage-toggle.dark .toggle { | ||
125 | padding: 0; | ||
126 | border: 1px solid rgba(0,0,0,.4); | ||
127 | background-color: rgba(40,40,40,.55); | ||
128 | -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1); | ||
129 | } | ||
130 | |||
131 | .montage-toggle.dark .circle { | ||
132 | opacity: .25; | ||
133 | background: rgba(120, 120, 120, .8); | ||
134 | border: 1px solid #000; | ||
135 | -webkit-transform: scale3d(.35, .35, 0) translateZ(0); | ||
136 | -webkit-transition: -webkit-transform 150ms; | ||
137 | } | ||
138 | |||
139 | .montage-toggle.pressed.dark .circle { | ||
140 | -webkit-transform: scale3d(1, 1, 0) translateZ(0); | ||
141 | } | ||
142 | |||
143 | .montage-toggle.dark .handler { | ||
144 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,.3))); | ||
145 | } | ||
146 | |||
147 | .montage-toggle.dark .handler:after { | ||
148 | background-color: rgba(0,0,0,.6); | ||
149 | -webkit-box-shadow: 0 1px 0 #828282; | ||
150 | } | ||
151 | |||
152 | .montage-toggle.dark .handleronbg { | ||
153 | opacity: 0; | ||
154 | position: absolute; | ||
155 | background: transparent; | ||
156 | margin: -1px 0 0 -1px; | ||
157 | width: 20px; | ||
158 | height: 20px; | ||
159 | border-radius: 11px; | ||
160 | padding: 1px; | ||
161 | -webkit-transform: translateZ(0); | ||
162 | } | ||
diff --git a/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html new file mode 100644 index 00000000..33b847ef --- /dev/null +++ b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.html | |||
@@ -0,0 +1,16 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No 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> | ||
8 | <head> | ||
9 | <title></title> | ||
10 | <link rel="stylesheet" type="text/css" href="toggle.css"> | ||
11 | |||
12 | </head> | ||
13 | <body> | ||
14 | |||
15 | </body> | ||
16 | </html> | ||
diff --git a/node_modules/montage/ui/bluemoon/toggle.reel/toggle.js b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.js new file mode 100644 index 00000000..d659931d --- /dev/null +++ b/node_modules/montage/ui/bluemoon/toggle.reel/toggle.js | |||
@@ -0,0 +1,423 @@ | |||
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 | @module "montage/ui/bluemoon/toggle.reel" | ||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage").Montage, | ||
12 | Component = require("ui/component").Component; | ||
13 | /** | ||
14 | @class module:"montage/ui/bluemoon/toggle.reel".Toggle | ||
15 | @extends module:montage/ui/component.Component | ||
16 | */ | ||
17 | var Toggle = exports.Toggle = Montage.create(Component, /** @lends module:"montage/ui/bluemoon/toggle.reel".Toggle# */ { | ||
18 | |||
19 | _value: { | ||
20 | enumerable: false, | ||
21 | value: false | ||
22 | }, | ||
23 | /** | ||
24 | Description TODO | ||
25 | @type {Function} | ||
26 | @default {Boolean} false | ||
27 | */ | ||
28 | value: { | ||
29 | enumerable: true, | ||
30 | get: function() { | ||
31 | return this._value; | ||
32 | }, | ||
33 | set: function(value) { | ||
34 | if (!this._pressed) { | ||
35 |