aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-02 00:11:51 -0800
committerValerio Virgillito2012-02-02 15:33:42 -0800
commita3024011a91d3941f81481dd4d600e9684eb0fd4 (patch)
tree084b4856910f1db53973dd11617f7ffa03a6dd46 /node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css
parent97255032921178bdfbc25512ddf3e0867e353f7a (diff)
downloadninja-a3024011a91d3941f81481dd4d600e9684eb0fd4.tar.gz
upgrading to Montage v0.6
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css')
-rw-r--r--node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css116
1 files changed, 116 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}