diff options
Diffstat (limited to 'node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css')
-rw-r--r-- | node_modules/montage/ui/bluemoon/checkbox.reel/checkbox.css | 116 |
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 | } | ||