OLD | NEW |
1 /* | 1 /* |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 */ | 8 */ |
9 | 9 |
10 :host { | 10 :host { |
11 display: inline-block; | 11 display: inline-block; |
12 } | 12 } |
13 | 13 |
14 :host(:focus) { | 14 :host(:focus) { |
15 outline: none; | 15 outline: none; |
16 } | 16 } |
17 | 17 |
| 18 /* Class selectors can be overridden by users. */ |
| 19 |
| 20 .toggle-bar { |
| 21 background-color: #000000; |
| 22 } |
| 23 |
| 24 .toggle-button { |
| 25 background-color: #f1f1f1; |
| 26 } |
| 27 |
| 28 [checked] .toggle { |
| 29 background-color: #0f9d58; |
| 30 } |
| 31 |
| 32 .toggle-ink { |
| 33 color: #bbb; |
| 34 } |
| 35 |
| 36 [checked] .toggle-ink { |
| 37 color: #0f9d58; |
| 38 } |
| 39 |
| 40 /* ID selectors should not be overriden by users. */ |
| 41 |
18 #toggleContainer { | 42 #toggleContainer { |
19 position: relative; | 43 position: relative; |
20 width: 64px; | 44 width: 36px; |
21 height: 16px; | 45 height: 14px; |
| 46 } |
| 47 |
| 48 #toggleContainer[disabled] { |
| 49 opacity: 0.3; |
| 50 pointer-events: none; |
22 } | 51 } |
23 | 52 |
24 #toggleBar { | 53 #toggleBar { |
25 position: absolute; | 54 position: absolute; |
26 top: 8px; | 55 height: 100%; |
27 left: 16px; | 56 width: 100%; |
28 height: 1px; | 57 border-radius: 8px; |
29 width: 32px; | |
30 background-color: #5a5a5a; | |
31 pointer-events: none; | 58 pointer-events: none; |
| 59 opacity: 0.26; |
| 60 transition: background-color linear .08s; |
32 } | 61 } |
33 | 62 |
34 #toggleBar[checked] { | 63 [checked] #toggleBar { |
35 background-color: #0f9d58; | 64 opacity: 0.5; |
36 } | 65 } |
37 | 66 |
38 #toggleContainer[checked] #checkedBar { | 67 #toggleButton { |
39 width: 100%; | 68 position: absolute; |
| 69 top: -3px; |
| 70 height: 20px; |
| 71 width: 20px; |
| 72 border-radius: 50%; |
| 73 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); |
| 74 transition: -webkit-transform linear .08s, background-color linear .08s; |
| 75 transition: transform linear .08s, background-color linear .08s; |
40 } | 76 } |
41 | 77 |
42 #toggleRadio { | 78 #toggleButton.dragging { |
43 position: absolute; | |
44 left: 0; | |
45 padding: 8px 48px 8px 0; | |
46 margin: -8px -48px -8px 0; | |
47 transition: -webkit-transform linear .08s; | |
48 transition: transform linear .08s; | |
49 } | |
50 | |
51 #toggleRadio[checked] { | |
52 -webkit-transform: translate(48px, 0); | |
53 transform: translate(48px, 0); | |
54 padding: 8px 0 8px 48px; | |
55 margin: -8px 0 -8px -48px; | |
56 } | |
57 | |
58 #toggleRadio.dragging { | |
59 -webkit-transition: none; | 79 -webkit-transition: none; |
60 transition: none; | 80 transition: none; |
61 } | 81 } |
62 | 82 |
63 /* disabled state */ | 83 [checked] #toggleButton { |
64 #toggleContainer[disabled] { | 84 -webkit-transform: translate(16px, 0); |
65 opacity: 0.3; | 85 transform: translate(16px, 0); |
| 86 } |
| 87 |
| 88 #ink { |
| 89 position: absolute; |
| 90 top: -14px; |
| 91 left: -14px; |
| 92 width: 48px; |
| 93 height: 48px; |
66 pointer-events: none; | 94 pointer-events: none; |
67 } | 95 } |
OLD | NEW |