Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(165)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-radio-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-group/bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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" >
11 <link rel="import" href="../paper-styles/default-theme.html"> 11 <link rel="import" href="../paper-styles/default-theme.html">
12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
12 13
13 <!-- 14 <!--
14 Material design: [Radio button](https://www.google.com/design/spec/components/se lection-controls.html#selection-controls-radio-button) 15 Material design: [Radio button](https://www.google.com/design/spec/components/se lection-controls.html#selection-controls-radio-button)
15 16
16 `paper-radio-button` is a button that can be either checked or unchecked. 17 `paper-radio-button` is a button that can be either checked or unchecked.
17 User can tap the radio button to check or uncheck it. 18 User can tap the radio button to check or uncheck it.
18 19
19 Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons 20 Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons
20 are inside a radio group, exactly one radio button in the group can be checked 21 are inside a radio group, exactly one radio button in the group can be checked
21 at any time. 22 at any time.
22 23
23 Example: 24 Example:
24 25
25 <paper-radio-button></paper-radio-button> 26 <paper-radio-button></paper-radio-button>
26 <paper-radio-button>Item label</paper-radio-button> 27 <paper-radio-button>Item label</paper-radio-button>
27 28
28 ### Styling 29 ### Styling
29 30
30 The following custom properties and mixins are available for styling: 31 The following custom properties and mixins are available for styling:
31 32
32 Custom property | Description | Default 33 Custom property | Description | Default
33 ----------------|-------------|---------- 34 ----------------|-------------|----------
34 `--paper-radio-button-unchecked-background-color` | Radio button background colo r when the input is not checked | `transparent` 35 `--paper-radio-button-unchecked-background-color` | Radio button background colo r when the input is not checked | `transparent`
35 `--paper-radio-button-unchecked-color` | Radio button color when the input is no t checked | `--primary-text-color` 36 `--paper-radio-button-unchecked-color` | Radio button color when the input is no t checked | `--primary-text-color`
36 `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when th e input is not checked | `--primary-text-color` 37 `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when th e input is not checked | `--primary-text-color`
37 `--paper-radio-button-checked-color` | Radio button color when the input is chec ked | `--primary-color` 38 `--paper-radio-button-checked-color` | Radio button color when the input is chec ked | `--primary-color`
38 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color` 39 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
40 `--paper-radio-button-size` | Size of the radio button | `16px`
39 `--paper-radio-button-label-color` | Label color | `--primary-text-color` 41 `--paper-radio-button-label-color` | Label color | `--primary-text-color`
40 `--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px` 42 `--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px`
41 43
42 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`. 44 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.
43 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`. 45 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.
44 46
45 @group Paper Elements 47 @group Paper Elements
46 @element paper-radio-button 48 @element paper-radio-button
47 @hero hero.svg 49 @hero hero.svg
48 @demo demo/index.html 50 @demo demo/index.html
49 --> 51 -->
50 52
51 </head><body><dom-module id="paper-radio-button"> 53 </head><body><dom-module id="paper-radio-button">
52 <template strip-whitespace=""> 54 <template strip-whitespace="">
53 <style> 55 <style>
54 :host { 56 :host {
55 display: inline-block; 57 display: inline-block;
58 line-height: 0;
56 white-space: nowrap; 59 white-space: nowrap;
57 cursor: pointer; 60 cursor: pointer;
58 @apply(--paper-font-common-base); 61 @apply(--paper-font-common-base);
62 --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16p x);
59 } 63 }
60 64
61 :host(:focus) { 65 :host(:focus) {
62 outline: none; 66 outline: none;
63 } 67 }
64 68
65 #radioContainer { 69 #radioContainer {
66 display: inline-block; 70 @apply(--layout-inline);
71 @apply(--layout-center-center);
67 position: relative; 72 position: relative;
68 width: 16px; 73 width: var(--calculated-paper-radio-button-size);
69 height: 16px; 74 height: var(--calculated-paper-radio-button-size);
70 vertical-align: middle; 75 vertical-align: middle;
71 } 76 }
72 77
73 #ink { 78 #ink {
74 position: absolute; 79 position: absolute;
75 top: -16px; 80 top: 50%;
76 left: -16px; 81 left: 50%;
77 width: 48px; 82 right: auto;
78 height: 48px; 83 width: calc(3 * var(--calculated-paper-radio-button-size));
84 height: calc(3 * var(--calculated-paper-radio-button-size));
79 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo r); 85 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo r);
80 opacity: 0.6; 86 opacity: 0.6;
81 pointer-events: none; 87 pointer-events: none;
82 } 88 -webkit-transform: translate(-50%, -50%);
83 89 transform: translate(-50%, -50%);
84 :host-context([dir="rtl"]) #ink {
85 right: -15px;
86 left: auto;
87 } 90 }
88 91
89 #ink[checked] { 92 #ink[checked] {
90 color: var(--paper-radio-button-checked-ink-color, --primary-color); 93 color: var(--paper-radio-button-checked-ink-color, --primary-color);
91 } 94 }
92 95
93 #offRadio { 96 #offRadio {
94 position: absolute; 97 position: absolute;
95 box-sizing: content-box; 98 box-sizing: border-box;
96 top: 0px; 99 top: 0;
97 left: 0px; 100 left: 0;
98 right: 0px; 101 right: 0;
99 width: 12px; 102 width: 100%;
100 height: 12px; 103 height: 100%;
101 border-radius: 50%; 104 border-radius: 50%;
102 border: solid 2px; 105 border: solid 2px;
103 background-color: var(--paper-radio-button-unchecked-background-color, t ransparent); 106 background-color: var(--paper-radio-button-unchecked-background-color, t ransparent);
104 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor); 107 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor);
105 transition: border-color 0.28s; 108 transition: border-color 0.28s;
106 } 109 }
107 110
108 #onRadio { 111 #onRadio {
109 position: absolute;
110 box-sizing: content-box; 112 box-sizing: content-box;
111 top: 4px; 113 width: 50%;
112 left: 4px; 114 height: 50%;
113 right: 4px;
114 width: 8px;
115 height: 8px;
116 border-radius: 50%; 115 border-radius: 50%;
117 background-color: var(--paper-radio-button-checked-color, --primary-colo r); 116 background-color: var(--paper-radio-button-checked-color, --primary-colo r);
118 -webkit-transform: scale(0); 117 -webkit-transform: scale(0);
119 transform: scale(0); 118 transform: scale(0);
120 transition: -webkit-transform ease 0.28s; 119 transition: -webkit-transform ease 0.28s;
121 transition: transform ease 0.28s; 120 transition: transform ease 0.28s;
122 will-change: transform; 121 will-change: transform;
123 } 122 }
124 123
125 :host([checked]) #offRadio { 124 :host([checked]) #offRadio {
126 border-color: var(--paper-radio-button-checked-color, --primary-color); 125 border-color: var(--paper-radio-button-checked-color, --primary-color);
127 } 126 }
128 127
129 :host([checked]) #onRadio { 128 :host([checked]) #onRadio {
130 -webkit-transform: scale(1); 129 -webkit-transform: scale(1);
131 transform: scale(1); 130 transform: scale(1);
132 } 131 }
133 132
134 #radioLabel { 133 #radioLabel {
134 line-height: normal;
135 position: relative; 135 position: relative;
136 display: inline-block; 136 display: inline-block;
137 vertical-align: middle; 137 vertical-align: middle;
138 margin-left: var(--paper-radio-button-label-spacing, 10px); 138 margin-left: var(--paper-radio-button-label-spacing, 10px);
139 white-space: normal; 139 white-space: normal;
140 color: var(--paper-radio-button-label-color, --primary-text-color); 140 color: var(--paper-radio-button-label-color, --primary-text-color);
141 } 141 }
142 142
143 :host-context([dir="rtl"]) #radioLabel { 143 :host-context([dir="rtl"]) #radioLabel {
144 margin-left: 0px; 144 margin-left: 0;
145 margin-right: var(--paper-radio-button-label-spacing, 10px); 145 margin-right: var(--paper-radio-button-label-spacing, 10px);
146 } 146 }
147 147
148 #radioLabel[hidden] { 148 #radioLabel[hidden] {
149 display: none; 149 display: none;
150 } 150 }
151 151
152 /* disabled state */ 152 /* disabled state */
153 153
154 :host([disabled]) #offRadio { 154 :host([disabled]) #offRadio {
(...skipping 15 matching lines...) Expand all
170 <div id="radioContainer"> 170 <div id="radioContainer">
171 <div id="offRadio"></div> 171 <div id="offRadio"></div>
172 <div id="onRadio"></div> 172 <div id="onRadio"></div>
173 </div> 173 </div>
174 174
175 <div id="radioLabel"><content></content></div> 175 <div id="radioLabel"><content></content></div>
176 </template> 176 </template>
177 177
178 </dom-module> 178 </dom-module>
179 <script src="paper-radio-button-extracted.js"></script></body></html> 179 <script src="paper-radio-button-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-radio-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-group/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698