diff options
author | Valerio Virgillito | 2012-03-08 13:56:09 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-03-08 13:56:09 -0800 |
commit | 22a66cb6e243a3f1c867b62e3942fd2e828019d9 (patch) | |
tree | 4b2f8bf0d8306964f35435dac3d1f6592b3dee19 /node_modules/montage/ui/toggle-switch.reel | |
parent | cef07085443b7c31e878daaad083b7408c57e104 (diff) | |
download | ninja-22a66cb6e243a3f1c867b62e3942fd2e828019d9.tar.gz |
integrating v0.7 montage into ninja
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'node_modules/montage/ui/toggle-switch.reel')
3 files changed, 602 insertions, 0 deletions
diff --git a/node_modules/montage/ui/toggle-switch.reel/toggle-switch.css b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.css new file mode 100755 index 00000000..5a5385cd --- /dev/null +++ b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.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-switch { | ||
7 | width: 60px; | ||
8 | height: 22px; | ||
9 | } | ||
10 | |||
11 | .montage-toggle-switch .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-switch .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-switch .scroll { | ||
31 | -webkit-transform: translateZ(0); | ||
32 | } | ||
33 | |||
34 | .montage-toggle-switch .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-switch.pressed .circle { | ||
47 | -webkit-transform: scale3d(1, 1, 0) translateZ(0); | ||
48 | } | ||
49 | |||
50 | .montage-toggle-switch .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-switch .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-switch .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-switch .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-switch .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-switch .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-switch .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-switch.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-switch.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-switch.pressed.dark .circle { | ||
140 | -webkit-transform: scale3d(1, 1, 0) translateZ(0); | ||
141 | } | ||
142 | |||
143 | .montage-toggle-switch.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-switch.dark .handler:after { | ||
148 | background-color: rgba(0,0,0,.6); | ||
149 | -webkit-box-shadow: 0 1px 0 #828282; | ||
150 | } | ||
151 | |||
152 | .montage-toggle-switch.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/toggle-switch.reel/toggle-switch.html b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.html new file mode 100755 index 00000000..2aef4a59 --- /dev/null +++ b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.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-switch.css"> | ||
11 | |||
12 | </head> | ||
13 | <body> | ||
14 | |||
15 | </body> | ||
16 | </html> | ||
diff --git a/node_modules/montage/ui/toggle-switch.reel/toggle-switch.js b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.js new file mode 100644 index 00000000..9a27c52b --- /dev/null +++ b/node_modules/montage/ui/toggle-switch.reel/toggle-switch.js | |||
@@ -0,0 +1,424 @@ | |||
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 | @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/toggle-switch.reel".ToggleSwitch | ||
15 | @extends module:montage/ui/component.Component | ||
16 | */ | ||
17 | var ToggleSwitch = exports.ToggleSwitch = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { | ||
18 | |||
19 | |||
20 | _value: { | ||
21 | enumerable: false, | ||
22 | value: false | ||
23 | }, | ||
24 | /** | ||
25 | Description TODO | ||
26 | @type {Function} | ||
27 | @default {Boolean} false | ||