| 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-behaviors/paper-checked-element-behavior.html"
> | 10 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html"
> |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 81 #ink { | 81 #ink { |
| 82 position: absolute; | 82 position: absolute; |
| 83 top: 50%; | 83 top: 50%; |
| 84 left: 50%; | 84 left: 50%; |
| 85 right: auto; | 85 right: auto; |
| 86 width: var(--calculated-paper-radio-button-ink-size); | 86 width: var(--calculated-paper-radio-button-ink-size); |
| 87 height: var(--calculated-paper-radio-button-ink-size); | 87 height: var(--calculated-paper-radio-button-ink-size); |
| 88 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo
r); | 88 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo
r); |
| 89 opacity: 0.6; | 89 opacity: 0.6; |
| 90 pointer-events: none; | 90 pointer-events: none; |
| 91 -webkit-transform: translate(-50%, -50%); | |
| 92 transform: translate(-50%, -50%); | 91 transform: translate(-50%, -50%); |
| 93 } | 92 } |
| 94 | 93 |
| 95 #ink[checked] { | 94 #ink[checked] { |
| 96 color: var(--paper-radio-button-checked-ink-color, --primary-color); | 95 color: var(--paper-radio-button-checked-ink-color, --primary-color); |
| 97 } | 96 } |
| 98 | 97 |
| 99 #offRadio, #onRadio { | 98 #offRadio, #onRadio { |
| 100 position: absolute; | 99 position: absolute; |
| 101 box-sizing: border-box; | 100 box-sizing: border-box; |
| 102 top: 0; | 101 top: 0; |
| 103 left: 0; | 102 left: 0; |
| 104 width: 100%; | 103 width: 100%; |
| 105 height: 100%; | 104 height: 100%; |
| 106 border-radius: 50%; | 105 border-radius: 50%; |
| 107 } | 106 } |
| 108 | 107 |
| 109 #offRadio { | 108 #offRadio { |
| 110 border: 2px solid var(--paper-radio-button-unchecked-color, --primary-te
xt-color); | 109 border: 2px solid var(--paper-radio-button-unchecked-color, --primary-te
xt-color); |
| 111 background-color: var(--paper-radio-button-unchecked-background-color, t
ransparent); | 110 background-color: var(--paper-radio-button-unchecked-background-color, t
ransparent); |
| 112 transition: border-color 0.28s; | 111 transition: border-color 0.28s; |
| 113 } | 112 } |
| 114 | 113 |
| 115 #onRadio { | 114 #onRadio { |
| 116 background-color: var(--paper-radio-button-checked-color, --primary-colo
r); | 115 background-color: var(--paper-radio-button-checked-color, --primary-colo
r); |
| 117 -webkit-transform: scale(0); | |
| 118 transform: scale(0); | 116 transform: scale(0); |
| 119 transition: -webkit-transform ease 0.28s; | |
| 120 transition: transform ease 0.28s; | 117 transition: transform ease 0.28s; |
| 121 will-change: transform; | 118 will-change: transform; |
| 122 } | 119 } |
| 123 | 120 |
| 124 :host([checked]) #offRadio { | 121 :host([checked]) #offRadio { |
| 125 border-color: var(--paper-radio-button-checked-color, --primary-color); | 122 border-color: var(--paper-radio-button-checked-color, --primary-color); |
| 126 } | 123 } |
| 127 | 124 |
| 128 :host([checked]) #onRadio { | 125 :host([checked]) #onRadio { |
| 129 -webkit-transform: scale(0.5); | |
| 130 transform: scale(0.5); | 126 transform: scale(0.5); |
| 131 } | 127 } |
| 132 | 128 |
| 133 #radioLabel { | 129 #radioLabel { |
| 134 line-height: normal; | 130 line-height: normal; |
| 135 position: relative; | 131 position: relative; |
| 136 display: inline-block; | 132 display: inline-block; |
| 137 vertical-align: middle; | 133 vertical-align: middle; |
| 138 margin-left: var(--paper-radio-button-label-spacing, 10px); | 134 margin-left: var(--paper-radio-button-label-spacing, 10px); |
| 139 white-space: normal; | 135 white-space: normal; |
| (...skipping 30 matching lines...) Expand all Loading... |
| 170 <div id="radioContainer"> | 166 <div id="radioContainer"> |
| 171 <div id="offRadio"></div> | 167 <div id="offRadio"></div> |
| 172 <div id="onRadio"></div> | 168 <div id="onRadio"></div> |
| 173 </div> | 169 </div> |
| 174 | 170 |
| 175 <div id="radioLabel"><content></content></div> | 171 <div id="radioLabel"><content></content></div> |
| 176 </template> | 172 </template> |
| 177 | 173 |
| 178 </dom-module> | 174 </dom-module> |
| 179 <script src="paper-radio-button-extracted.js"></script></body></html> | 175 <script src="paper-radio-button-extracted.js"></script></body></html> |
| OLD | NEW |