aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/bluemoon/checkbox.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/bluemoon/checkbox.reel')
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css116
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html14
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js452
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark-disabled.svg5
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-dark.svg7
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkmark-light-disabled.svg5
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkmark.svg7
7 files changed, 606 insertions, 0 deletions
diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css
new file mode 100644
index 00000000..2a0c8c99
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css
@@ -0,0 +1,116 @@
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-checkbox {
7 display: inline-block;
8 width: 53px;
9 height: 53px;
10}
11
12.montage-checkbox .background {
13 display: block;
14 position: absolute;
15 width: 53px;
16 height: 53px;
17 border-radius: 27px;
18 background: #CCC;
19 -webkit-box-shadow: inset 0 1px 2px #8D8D8D, 0 2px 2px rgba(255,255,255,.4), 0 -2px 2px rgba(0,0,0,.1);
20 -webkit-transform: scale3d(.5283, .5283, 1);
21}
22
23.montage-checkbox .button {
24 display: block;
25 position: absolute;
26 width: 49px;
27 height: 49px;
28 border-radius: 25px;
29 background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#E6E6E6));
30 -webkit-transform: translate3d(2px, 2px, 0) scale3d(.5283, .5283, 1);
31}
32
33.montage-checkbox .checkmark {
34 display: block;
35 position: absolute;
36 width: 63px;
37 height: 53px;
38 background: url(checkmark.svg) no-repeat 10px 0;
39 background-size: 53px 53px;
40 -webkit-transform-origin: 26.5px 26.5px;
41 -webkit-transform: scale3d(.5283, .5283, 1);
42 opacity: 0;
43}
44
45.montage-checkbox.active .background, .montage-checkbox.active .button, .montage-checkbox.active .checkmark{
46 -webkit-transition-duration: 150ms;
47 -webkit-transition-property: all;
48}
49
50.montage-checkbox .checkmark{
51 -webkit-transition-duration: 360ms;
52}
53
54.montage-checkbox input[type=checkbox] {
55 -webkit-appearance: none;
56 -webkit-tap-highlight-color: transparent;
57 display: inline-block;
58 position: absolute;
59 border: 0;
60 border-radius: 27px;
61 margin: 0;
62 padding: 0;
63 width: 53px;
64 height: 53px;
65 background: transparent;
66}
67
68.montage-checkbox.active .background,
69.montage-checkbox.active .button,
70.montage-checkbox.active .checkmark {
71 -webkit-transform: scale3d(1, 1, 1);
72}
73
74.montage-checkbox.active .button {
75 opacity: 0;
76}
77
78.montage-checkbox.checked .checkmark {
79 opacity: 1;
80}
81
82.montage-checkbox.dark .checkmark {
83 background-image: url(checkmark-dark.svg);
84}
85
86.montage-checkbox.dark .button {
87 background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#5c5c5c));
88}
89
90.montage-checkbox.dark .background {
91 background: #404040;
92 -webkit-box-shadow: inset 0 1px 2px #333, 0 2px 2px rgba(255,255,255,.2), 0 -2px 2px rgba(0,0,0,.1);
93}
94
95.montage-checkbox.disabled .background {
96 margin: 12px 0 0 13px;
97 width: 26px;
98 height: 26px;
99 background: transparent;
100 -webkit-box-shadow: none;
101 border: 1px solid #000;
102 -webkit-transform: none;
103 opacity: .26;
104}
105
106.montage-checkbox.disabled .button {
107 display: none;
108}
109
110.montage-checkbox.disabled .checkmark {
111 background-image: url(checkmark-light-disabled.svg);
112}
113
114.montage-checkbox.dark.disabled .checkmark {
115 background-image: url(checkmark-dark-disabled.svg);
116}
diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html
new file mode 100644
index 00000000..9bbec1b7
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.html
@@ -0,0 +1,14 @@
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="checkbox.css">
11</head>
12<body>
13</body>
14</html>
diff --git a/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js
new file mode 100644
index 00000000..58e5154d
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.js
@@ -0,0 +1,452 @@
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/checkbox.reel"
8 @requires montage/core/core
9 @requires montage/ui/component
10*/
11var Montage = require("montage").Montage,
12 Component = require("ui/component").Component;
13/**
14 @class module:"montage/ui/bluemoon/checkbox.reel".Checkbox
15 @extends module:montage/ui/component.Component
16*/
17exports.Checkbox = Montage.create(Component,/** @lends "module:montage/ui/bluemoon/checkbox.reel".Checkbox# */ {
18 // Configuration
19 /**
20 The distance (squared) beyond which a touch will be considered.
21 @type {Number}
22 @default 256
23 */
24 touchMovementThreshold: {
25 enumerable: false,
26 value: 256
27 },
28 // Elements
29/**
30 Description TODO
31 @private
32*/
33 _nativeCheckbox: {
34 enumerable: false,
35 value: null
36 },
37/**
38 Description TODO
39 @private
40*/
41 _background: {
42 enumerable: false,
43 value: null
44 },
45/**
46 Description TODO
47 @private
48*/
49 _button: {
50 enumerable: false,
51 value: null
52 },
53/**
54 Description TODO
55 @private
56*/
57 _checkmark: {
58 enumerable: false,
59 value: null
60 },
61 // Event Handling APIs
62/**
63 Description TODO
64 @function
65 @param {Event Handler} event handleMousedown
66 */
67 handleMousedown: {
68 enumerable: false,
69 value: function (event) {
70 event.preventDefault();
71
72 if (!this._disabled) {
73 this._acknowledgeIntent("mouse");
74 }
75 }
76 },
77/**