• 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
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