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

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 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 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/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button-extracted.js » ('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-ripple/paper-ripple.html">
12 <link rel="import" href="../paper-styles/default-theme.html"> 11 <link rel="import" href="../paper-styles/default-theme.html">
13 12
14 <!-- 13 <!--
15 Material design: [Radio button](https://www.google.com/design/spec/components/se lection-controls.html#selection-controls-radio-button) 14 Material design: [Radio button](https://www.google.com/design/spec/components/se lection-controls.html#selection-controls-radio-button)
16 15
17 `paper-radio-button` is a button that can be either checked or unchecked. 16 `paper-radio-button` is a button that can be either checked or unchecked.
18 User can tap the radio button to check or uncheck it. 17 User can tap the radio button to check or uncheck it.
19 18
20 Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons 19 Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons
21 are inside a radio group, exactly one radio button in the group can be checked 20 are inside a radio group, exactly one radio button in the group can be checked
22 at any time. 21 at any time.
23 22
24 Example: 23 Example:
25 24
26 <paper-radio-button></paper-radio-button> 25 <paper-radio-button></paper-radio-button>
27 <paper-radio-button>Item label</paper-radio-button> 26 <paper-radio-button>Item label</paper-radio-button>
28 27
29 ### Styling 28 ### Styling
30 29
31 The following custom properties and mixins are available for styling: 30 The following custom properties and mixins are available for styling:
32 31
33 Custom property | Description | Default 32 Custom property | Description | Default
34 ----------------|-------------|---------- 33 ----------------|-------------|----------
35 `--paper-radio-button-unchecked-background-color` | Radio button background colo r when the input is not checked | `transparent` 34 `--paper-radio-button-unchecked-background-color` | Radio button background colo r when the input is not checked | `transparent`
36 `--paper-radio-button-unchecked-color` | Radio button color when the input is no t checked | `--primary-text-color` 35 `--paper-radio-button-unchecked-color` | Radio button color when the input is no t 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` 36 `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when th e input is not checked | `--primary-text-color`
38 `--paper-radio-button-checked-color` | Radio button color when the input is chec ked | `--default-primary-color` 37 `--paper-radio-button-checked-color` | Radio button color when the input is chec ked | `--primary-color`
39 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color` 38 `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
40 `--paper-radio-button-label-color` | Label color | `--primary-text-color` 39 `--paper-radio-button-label-color` | Label color | `--primary-text-color`
41 `--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px` 40 `--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px`
42 41
42 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`.
44
43 @group Paper Elements 45 @group Paper Elements
44 @element paper-radio-button 46 @element paper-radio-button
45 @hero hero.svg 47 @hero hero.svg
46 @demo demo/index.html 48 @demo demo/index.html
47 --> 49 -->
48 50
49 </head><body><dom-module id="paper-radio-button"> 51 </head><body><dom-module id="paper-radio-button">
50 <template strip-whitespace=""> 52 <template strip-whitespace="">
51 <style> 53 <style>
52 :host { 54 :host {
53 display: inline-block; 55 display: inline-block;
54 white-space: nowrap; 56 white-space: nowrap;
55 cursor: pointer; 57 cursor: pointer;
58 @apply(--paper-font-common-base);
56 } 59 }
57 60
58 :host(:focus) { 61 :host(:focus) {
59 outline: none; 62 outline: none;
60 } 63 }
61 64
62 #radioContainer { 65 #radioContainer {
63 display: inline-block; 66 display: inline-block;
64 position: relative; 67 position: relative;
65 width: 16px; 68 width: 16px;
(...skipping 11 matching lines...) Expand all
77 opacity: 0.6; 80 opacity: 0.6;
78 pointer-events: none; 81 pointer-events: none;
79 } 82 }
80 83
81 :host-context([dir="rtl"]) #ink { 84 :host-context([dir="rtl"]) #ink {
82 right: -15px; 85 right: -15px;
83 left: auto; 86 left: auto;
84 } 87 }
85 88
86 #ink[checked] { 89 #ink[checked] {
87 color: var(--paper-radio-button-checked-ink-color, --default-primary-col or); 90 color: var(--paper-radio-button-checked-ink-color, --primary-color);
88 } 91 }
89 92
90 #offRadio { 93 #offRadio {
91 position: absolute; 94 position: absolute;
92 box-sizing: content-box; 95 box-sizing: content-box;
93 top: 0px; 96 top: 0px;
94 left: 0px; 97 left: 0px;
95 right: 0px; 98 right: 0px;
96 width: 12px; 99 width: 12px;
97 height: 12px; 100 height: 12px;
98 border-radius: 50%; 101 border-radius: 50%;
99 border: solid 2px; 102 border: solid 2px;
100 background-color: var(--paper-radio-button-unchecked-background-color, t ransparent); 103 background-color: var(--paper-radio-button-unchecked-background-color, t ransparent);
101 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor); 104 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor);
102 transition: border-color 0.28s; 105 transition: border-color 0.28s;
103 } 106 }
104 107
105 #onRadio { 108 #onRadio {
106 position: absolute; 109 position: absolute;
107 box-sizing: content-box; 110 box-sizing: content-box;
108 top: 4px; 111 top: 4px;
109 left: 4px; 112 left: 4px;
110 right: 4px; 113 right: 4px;
111 width: 8px; 114 width: 8px;
112 height: 8px; 115 height: 8px;
113 border-radius: 50%; 116 border-radius: 50%;
114 background-color: var(--paper-radio-button-checked-color, --default-prim ary-color); 117 background-color: var(--paper-radio-button-checked-color, --primary-colo r);
115 -webkit-transform: scale(0); 118 -webkit-transform: scale(0);
116 transform: scale(0); 119 transform: scale(0);
117 transition: -webkit-transform ease 0.28s; 120 transition: -webkit-transform ease 0.28s;
118 transition: transform ease 0.28s; 121 transition: transform ease 0.28s;
119 } 122 }
120 123
121 :host([checked]) #offRadio { 124 :host([checked]) #offRadio {
122 border-color: var(--paper-radio-button-checked-color, --default-primary- color); 125 border-color: var(--paper-radio-button-checked-color, --primary-color);
123 } 126 }
124 127
125 :host([checked]) #onRadio { 128 :host([checked]) #onRadio {
126 -webkit-transform: scale(1); 129 -webkit-transform: scale(1);
127 transform: scale(1); 130 transform: scale(1);
128 } 131 }
129 132
130 #radioLabel { 133 #radioLabel {
131 position: relative; 134 position: relative;
132 display: inline-block; 135 display: inline-block;
133 vertical-align: middle; 136 vertical-align: middle;
134 margin-left: var(--paper-radio-button-label-spacing, 10px); 137 margin-left: var(--paper-radio-button-label-spacing, 10px);
135 white-space: normal; 138 white-space: normal;
136 pointer-events: none;
137 color: var(--paper-radio-button-label-color, --primary-text-color); 139 color: var(--paper-radio-button-label-color, --primary-text-color);
138 } 140 }
139 141
140 :host-context([dir="rtl"]) #radioLabel { 142 :host-context([dir="rtl"]) #radioLabel {
141 margin-left: 0px; 143 margin-left: 0px;
142 margin-right: var(--paper-radio-button-label-spacing, 10px); 144 margin-right: var(--paper-radio-button-label-spacing, 10px);
143 } 145 }
144 146
145 #radioLabel[hidden] { 147 #radioLabel[hidden] {
146 display: none; 148 display: none;
147 } 149 }
148 150
149 /* disabled state */ 151 /* disabled state */
150 :host([disabled]) {
151 pointer-events: none;
152 }
153 152
154 :host([disabled]) #offRadio { 153 :host([disabled]) #offRadio {
155 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor); 154 border-color: var(--paper-radio-button-unchecked-color, --primary-text-c olor);
156 opacity: 0.5; 155 opacity: 0.5;
157 } 156 }
158 157
159 :host([disabled][checked]) #onRadio { 158 :host([disabled][checked]) #onRadio {
160 background-color: var(--paper-radio-button-unchecked-color, --primary-te xt-color); 159 background-color: var(--paper-radio-button-unchecked-color, --primary-te xt-color);
161 opacity: 0.5; 160 opacity: 0.5;
162 } 161 }
163 162
164 :host([disabled]) #radioLabel { 163 :host([disabled]) #radioLabel {
165 /* slightly darker than the button, so that it's readable */ 164 /* slightly darker than the button, so that it's readable */
166 opacity: 0.65; 165 opacity: 0.65;
167 } 166 }
168 </style> 167 </style>
169 168
170 <div id="radioContainer"> 169 <div id="radioContainer">
171 <div id="offRadio"></div> 170 <div id="offRadio"></div>
172 <div id="onRadio"></div> 171 <div id="onRadio"></div>
173 </div> 172 </div>
174 173
175 <div id="radioLabel"><content></content></div> 174 <div id="radioLabel"><content></content></div>
176 </template> 175 </template>
177 176
178 </dom-module> 177 </dom-module>
179 <script src="paper-radio-button-extracted.js"></script></body></html> 178 <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/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698