paper-checkbox.css revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1/*
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8*/
9
10:host {
11  display: inline-block;
12  white-space: nowrap;
13}
14
15:host(:focus) {
16  outline: none;
17}
18
19#checkboxContainer {
20  position: relative;
21  width: 18px;
22  height: 18px;
23  cursor: pointer;
24  -webkit-transform: translateZ(0);
25  transform: translateZ(0);
26}
27
28#checkboxContainer.labeled {
29  display: inline-block;
30  vertical-align: middle;
31}
32
33#ink {
34  position: absolute;
35  top: -15px;
36  left: -15px;
37  width: 48px;
38  height: 48px;
39  color: #5a5f5a;
40}
41
42#ink[checked] {
43  color: #0f9d58;
44}
45
46#checkbox {
47  position: absolute;
48  box-sizing: border-box;
49  top: 0px;
50  left: 0px;
51  width: 18px;
52  height: 18px;
53  border: solid 2px;
54  border-color: #5a5a5a;
55  pointer-events: none;
56}
57
58/* checkbox checked animations */
59#checkbox.checked.box {
60  border: solid 2px;
61  -webkit-animation: box-shrink 140ms ease-out forwards;
62  animation: box-shrink 140ms ease-out forwards;
63}
64
65@-webkit-keyframes box-shrink {
66  0% {
67    -webkit-transform: rotate(0deg);
68    top: 0px;
69    left: 0px;
70    width: 18px;
71    height: 18px;
72  }
73  100% {
74    -webkit-transform: rotate(45deg);
75    top: 13px;
76    left: 5px;
77    width: 4px;
78    height: 4px;
79  }
80}
81
82@keyframes box-shrink {
83  0% {
84    transform: rotate(0deg);
85    top: 0px;
86    left: 0px;
87    width: 18px;
88    height: 18px;
89  }
90  100% {
91    transform: rotate(45deg);
92    top: 13px;
93    left: 5px;
94    width: 4px;
95    height: 4px;
96  }
97}
98
99#checkbox.checked.checkmark {
100  border-left: none;
101  border-top: none;
102  -webkit-animation: checkmark-expand 140ms ease-out forwards;
103  animation: checkmark-expand 140ms ease-out forwards;
104}
105
106@-webkit-keyframes checkmark-expand {
107  0% {
108    -webkit-transform: rotate(45deg);
109    top: 13px;
110    left: 5px;
111    width: 4px;
112    height: 4px;
113  }
114  100% {
115    -webkit-transform: rotate(45deg);
116    top: -4px;
117    left: 6px;
118    width: 10px;
119    height: 21px;
120    border-right-width: 2px;
121    border-bottom-width: 2px;
122  }
123}
124
125@keyframes checkmark-expand {
126  0% {
127    transform: rotate(45deg);
128    top: 13px;
129    left: 5px;
130    width: 4px;
131    height: 4px;
132  }
133  100% {
134    transform: rotate(45deg);
135    top: -4px;
136    left: 6px;
137    width: 10px;
138    height: 21px;
139    border-right-width: 2px;
140    border-bottom-width: 2px;
141  }
142}
143
144#checkbox.checked {
145  -webkit-transform: rotate(45deg);
146  transform: rotate(45deg);
147  top: -4px;
148  left: 6px;
149  width: 10px;
150  height: 21px;
151  border-top: none;
152  border-left: none;
153  border-right-width: 2px;
154  border-bottom-width: 2px;
155  border-color: #0f9d58;
156}
157
158/* checkbox unchecked animations */
159#checkbox.unchecked.checkmark {
160  -webkit-transform: rotate(45deg);
161  transform: rotate(45deg);
162  border-left: none;
163  border-top: none;
164  -webkit-animation: checkmark-shrink 140ms ease-out forwards;
165  animation: checkmark-shrink 140ms ease-out forwards;
166}
167
168@-webkit-keyframes checkmark-shrink {
169  0% {
170    top: -4px;
171    left: 6px;
172    width: 10px;
173    height: 21px;
174    border-right-width: 2px;
175    border-bottom-width: 2px;
176  }
177  100% {
178    top: 13px;
179    left: 5px;
180    width: 4px;
181    height: 4px;
182  }
183}
184
185@keyframes checkmark-shrink {
186  0% {
187    top: -4px;
188    left: 6px;
189    width: 10px;
190    height: 21px;
191    border-right-width: 2px;
192    border-bottom-width: 2px;
193  }
194  100% {
195    top: 13px;
196    left: 5px;
197    width: 4px;
198    height: 4px;
199  }
200}
201
202#checkbox.unchecked.box {
203  -webkit-animation: box-expand 140ms ease-out forwards;
204  animation: box-expand 140ms ease-out forwards;
205}
206
207@-webkit-keyframes box-expand {
208  0% {
209    -webkit-transform: rotate(45deg);
210    top: 13px;
211    left: 5px;
212    width: 4px;
213    height: 4px;
214  }
215  100% {
216    -webkit-transform: rotate(0deg);
217    top: 0px;
218    left: 0px;
219    width: 18px;
220    height: 18px;
221  }
222}
223
224@keyframes box-expand {
225  0% {
226    transform: rotate(45deg);
227    top: 13px;
228    left: 5px;
229    width: 4px;
230    height: 4px;
231  }
232  100% {
233    transform: rotate(0deg);
234    top: 0px;
235    left: 0px;
236    width: 18px;
237    height: 18px;
238  }
239}
240
241/* label */
242#checkboxLabel {
243  position: relative;
244  display: inline-block;
245  vertical-align: middle;
246  padding-left: 8px;
247  white-space: normal;
248  pointer-events: none;
249}
250
251#checkboxLabel[hidden] {
252  display: none;
253}
254
255/* disabled state */
256:host([disabled]) {
257  pointer-events: none;
258}
259
260:host([disabled]) #checkbox {
261  border-color: #eaeaea !important;
262}
263