<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../paper-ripple/paper-ripple.html"> <link rel="import" href="../paper-checked-element-behavior.html"> <dom-module id="paper-radio-button"> <style> :host { display: inline-block; white-space: nowrap; } :host(:focus) { outline: none } #radioContainer { display: inline-block; position: relative; width: 16px; height: 16px; cursor: pointer; vertical-align: middle; } #offRadio { position: absolute; top: 0px; left: 0px; width: 12px; height: 12px; border-radius: 50%; border: solid 2px; border-color: black; transition: border-color 0.28s; } #onRadio { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background-color: red; -webkit-transform: scale(0); transform: scale(0); transition: -webkit-transform ease 0.28s; transition: transform ease 0.28s; } :host([disabled]) { opacity: 0.3; pointer-events: none; } :host([pressed]) #offRadio, :host([active]) #offRadio { border-color: red; } :host([pressed]) #onRadio, :host([active]) #onRadio { -webkit-transform: scale(1); transform: scale(1); } #ink { position: absolute; top: -16px; left: -16px; width: 48px; height: 48px; } </style> <template> <div id="radioContainer"> <div id="offRadio"></div> <div id="onRadio"></div> </div> </template> <script> Polymer({ behaviors: [ Polymer.PaperCheckedElementBehavior ], hostAttributes: { role: 'radio' }, ready: function() { this.toggles = true; }, _createRipple: function() { this._rippleContainer = this.$.radioContainer; return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this); } }); </script> </dom-module>