• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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  <template>
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    </style>
85
86    <div id="radioContainer">
87      <div id="offRadio"></div>
88      <div id="onRadio"></div>
89    </div>
90  </template>
91
92  <script>
93    Polymer({
94      behaviors: [
95        Polymer.PaperCheckedElementBehavior
96      ],
97
98      hostAttributes: {
99        role: 'radio'
100      },
101
102      ready: function() {
103        this.toggles = true;
104      },
105
106      _createRipple: function() {
107        this._rippleContainer = this.$.radioContainer;
108        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
109      }
110    });
111  </script>
112</dom-module>
113