diff options
Diffstat (limited to 'node_modules/montage-user/ui/toggle-switch.reel/toggle-switch.css')
-rwxr-xr-x | node_modules/montage-user/ui/toggle-switch.reel/toggle-switch.css | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/toggle-switch.reel/toggle-switch.css b/node_modules/montage-user/ui/toggle-switch.reel/toggle-switch.css new file mode 100755 index 00000000..5a5385cd --- /dev/null +++ b/node_modules/montage-user/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 | } | ||