OLD | NEW |
1 /* | 1 /* |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 */ | 9 */ |
10 | 10 |
11 :host { | 11 :host { |
12 display: inline-block; | 12 display: inline-block; |
13 } | 13 } |
14 | 14 |
15 :host([disabled]) { | 15 :host([disabled]) { |
16 opacity: 0.3; | |
17 pointer-events: none; | 16 pointer-events: none; |
18 } | 17 } |
19 | 18 |
20 :host(:focus) { | 19 :host(:focus) { |
21 outline:none; | 20 outline:none; |
22 } | 21 } |
23 | 22 |
24 :host .toggle-bar { | 23 :host .toggle-bar { |
25 background-color: var(--paper-toggle-button-unchecked-bar-color); | 24 background-color: var(--paper-toggle-button-unchecked-bar-color); |
26 } | 25 } |
(...skipping 25 matching lines...) Expand all Loading... |
52 width: 36px; | 51 width: 36px; |
53 height: 14px; | 52 height: 14px; |
54 } | 53 } |
55 | 54 |
56 #toggleBar { | 55 #toggleBar { |
57 position: absolute; | 56 position: absolute; |
58 height: 100%; | 57 height: 100%; |
59 width: 100%; | 58 width: 100%; |
60 border-radius: 8px; | 59 border-radius: 8px; |
61 pointer-events: none; | 60 pointer-events: none; |
62 opacity: 0.26; | 61 opacity: 0.4; |
63 transition: background-color linear .08s; | 62 transition: background-color linear .08s; |
64 } | 63 } |
65 | 64 |
66 :host([checked]) #toggleBar { | 65 :host([checked]) #toggleBar { |
67 opacity: 0.5; | 66 opacity: 0.5; |
68 } | 67 } |
69 | 68 |
| 69 :host([disabled]) #toggleBar { |
| 70 background-color: #000; |
| 71 opacity: 0.12; |
| 72 } |
| 73 |
70 #toggleButton { | 74 #toggleButton { |
71 position: absolute; | 75 position: absolute; |
72 top: -3px; | 76 top: -3px; |
73 height: 20px; | 77 height: 20px; |
74 width: 20px; | 78 width: 20px; |
75 border-radius: 50%; | 79 border-radius: 50%; |
76 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); | 80 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); |
77 transition: -webkit-transform linear .08s, background-color linear .08s; | 81 transition: -webkit-transform linear .08s, background-color linear .08s; |
78 transition: transform linear .08s, background-color linear .08s; | 82 transition: transform linear .08s, background-color linear .08s; |
| 83 will-change: transform; |
79 } | 84 } |
80 | 85 |
81 #toggleButton.dragging { | 86 #toggleButton.dragging { |
82 -webkit-transition: none; | 87 -webkit-transition: none; |
83 transition: none; | 88 transition: none; |
84 } | 89 } |
85 | 90 |
86 :host([checked]) #toggleButton { | 91 :host([checked]) #toggleButton { |
87 -webkit-transform: translate(16px, 0); | 92 -webkit-transform: translate(16px, 0); |
88 transform: translate(16px, 0); | 93 transform: translate(16px, 0); |
89 } | 94 } |
90 | 95 |
| 96 :host([disabled]) #toggleButton { |
| 97 background-color: #bdbdbd; |
| 98 opacity: 1; |
| 99 } |
| 100 |
91 #ink { | 101 #ink { |
92 position: absolute; | 102 position: absolute; |
93 top: -14px; | 103 top: -14px; |
94 left: -14px; | 104 left: -14px; |
95 width: 48px; | 105 width: 48px; |
96 height: 48px; | 106 height: 48px; |
97 pointer-events: none; | 107 opacity: 0.5; |
98 } | 108 } |
OLD | NEW |