Home | History | Annotate | Download | only in demo 
      1 <!--
      2 @license
      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.github.io/LICENSE.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/CONTRIBUTORS.txt
      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/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="../../polymer/polymer.html">
     12 <link rel="import" href="../paper-checked-element-behavior.html">
     13 
     14 <dom-module id="paper-radio-button">
     15 
     16   <style>
     17   :host {
     18     display: inline-block;
     19     white-space: nowrap;
     20   }
     21 
     22   :host(:focus) {
     23     outline: none
     24   }
     25 
     26   #radioContainer {
     27     display: inline-block;
     28     position: relative;
     29     width: 16px;
     30     height: 16px;
     31     cursor: pointer;
     32     vertical-align: middle;
     33   }
     34 
     35   #offRadio {
     36     position: absolute;
     37     top: 0px;
     38     left: 0px;
     39     width: 12px;
     40     height: 12px;
     41     border-radius: 50%;
     42     border: solid 2px;
     43     border-color: black;
     44     transition: border-color 0.28s;
     45   }
     46 
     47   #onRadio {
     48     position: absolute;
     49     top: 4px;
     50     left: 4px;
     51     width: 8px;
     52     height: 8px;
     53     border-radius: 50%;
     54     background-color: red;
     55     -webkit-transform: scale(0);
     56     transform: scale(0);
     57     transition: -webkit-transform ease 0.28s;
     58     transition: transform ease 0.28s;
     59   }
     60 
     61   :host([disabled]) {
     62     opacity: 0.3;
     63     pointer-events: none;
     64   }
     65 
     66   :host([pressed]) #offRadio,
     67   :host([active]) #offRadio {
     68     border-color: red;
     69   }
     70 
     71   :host([pressed]) #onRadio,
     72   :host([active]) #onRadio {
     73     -webkit-transform: scale(1);
     74     transform: scale(1);
     75   }
     76 
     77   #ink {
     78     position: absolute;
     79     top: -16px;
     80     left: -16px;
     81     width: 48px;
     82     height: 48px;
     83   }
     84 
     85   </style>
     86 
     87   <template>
     88     <div id="radioContainer">
     89       <div id="offRadio"></div>
     90       <div id="onRadio"></div>
     91     </div>
     92   </template>
     93 
     94   <script>
     95 
     96     Polymer({
     97 
     98       behaviors: [
     99         Polymer.PaperCheckedElementBehavior
    100       ],
    101 
    102       hostAttributes: {
    103         role: 'radio'
    104       },
    105 
    106       ready: function() {
    107         this.toggles = true;
    108       },
    109 
    110       _createRipple: function() {
    111         this._rippleContainer = this.$.radioContainer;
    112         return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
    113       }
    114 
    115     });
    116 
    117   </script>
    118 
    119 </dom-module>
    120