| 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 --><html><head><link rel="import" href="../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../paper-styles/color.html"> | 10 <link rel="import" href="../paper-styles/color.html"> |
| (...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 89 } | 89 } |
| 90 | 90 |
| 91 /* ID selectors should not be overriden by users. */ | 91 /* ID selectors should not be overriden by users. */ |
| 92 | 92 |
| 93 #toggleContainer { | 93 #toggleContainer { |
| 94 position: relative; | 94 position: relative; |
| 95 width: 36px; | 95 width: 36px; |
| 96 height: 14px; | 96 height: 14px; |
| 97 } | 97 } |
| 98 | 98 |
| 99 #toggleBar { | 99 .toggle-bar { |
| 100 position: absolute; | 100 position: absolute; |
| 101 height: 100%; | 101 height: 100%; |
| 102 width: 100%; | 102 width: 100%; |
| 103 border-radius: 8px; | 103 border-radius: 8px; |
| 104 pointer-events: none; | 104 pointer-events: none; |
| 105 opacity: 0.4; | 105 opacity: 0.4; |
| 106 transition: background-color linear .08s; | 106 transition: background-color linear .08s; |
| 107 } | 107 } |
| 108 | 108 |
| 109 :host([checked]) #toggleBar { | 109 :host([checked]) .toggle-bar { |
| 110 opacity: 0.5; | 110 opacity: 0.5; |
| 111 } | 111 } |
| 112 | 112 |
| 113 :host([disabled]) #toggleBar { | 113 :host([disabled]) .toggle-bar { |
| 114 background-color: #000; | 114 background-color: #000; |
| 115 opacity: 0.12; | 115 opacity: 0.12; |
| 116 } | 116 } |
| 117 | 117 |
| 118 #toggleButton { | 118 .toggle-button { |
| 119 position: absolute; | 119 position: absolute; |
| 120 top: -3px; | 120 top: -3px; |
| 121 height: 20px; | 121 height: 20px; |
| 122 width: 20px; | 122 width: 20px; |
| 123 border-radius: 50%; | 123 border-radius: 50%; |
| 124 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); | 124 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); |
| 125 transition: -webkit-transform linear .08s, background-color linear .08s; | 125 transition: -webkit-transform linear .08s, background-color linear .08s; |
| 126 transition: transform linear .08s, background-color linear .08s; | 126 transition: transform linear .08s, background-color linear .08s; |
| 127 will-change: transform; | 127 will-change: transform; |
| 128 } | 128 } |
| 129 | 129 |
| 130 #toggleButton.dragging { | 130 .toggle-button.dragging { |
| 131 -webkit-transition: none; | 131 -webkit-transition: none; |
| 132 transition: none; | 132 transition: none; |
| 133 } | 133 } |
| 134 | 134 |
| 135 :host([checked]) #toggleButton { | 135 :host([checked]) .toggle-button { |
| 136 -webkit-transform: translate(16px, 0); | 136 -webkit-transform: translate(16px, 0); |
| 137 transform: translate(16px, 0); | 137 transform: translate(16px, 0); |
| 138 } | 138 } |
| 139 | 139 |
| 140 :host([disabled]) #toggleButton { | 140 :host([disabled]) .toggle-button { |
| 141 background-color: #bdbdbd; | 141 background-color: #bdbdbd; |
| 142 opacity: 1; | 142 opacity: 1; |
| 143 } | 143 } |
| 144 | 144 |
| 145 #ink { | 145 .toggle-ink { |
| 146 position: absolute; | 146 position: absolute; |
| 147 top: -14px; | 147 top: -14px; |
| 148 left: -14px; | 148 left: -14px; |
| 149 width: 48px; | 149 width: 48px; |
| 150 height: 48px; | 150 height: 48px; |
| 151 opacity: 0.5; | 151 opacity: 0.5; |
| 152 pointer-events: none; | 152 pointer-events: none; |
| 153 } | 153 } |
| 154 </style> | 154 </style> |
| 155 | 155 |
| 156 <div id="toggleContainer"> | 156 <div id="toggleContainer"> |
| 157 <div id="toggleBar" class="toggle-bar"></div> | 157 <div id="toggleBar" class="toggle-bar"></div> |
| 158 <div id="toggleButton" class="toggle-button"> | 158 <div id="toggleButton" class="toggle-button"> |
| 159 <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ri
pple> | 159 <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ri
pple> |
| 160 </div> | 160 </div> |
| 161 </div> | 161 </div> |
| 162 | 162 |
| 163 </template> | 163 </template> |
| 164 | 164 |
| 165 </dom-module> | 165 </dom-module> |
| 166 <script src="paper-toggle-button-extracted.js"></script></body></html> | 166 <script src="paper-toggle-button-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1363853002:
Update Polymer (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master
