| OLD | NEW |
|---|
| 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"
> |
| (...skipping 20 matching lines...) Expand all Loading... |
| 31 The following custom properties and mixins are available for styling: | 31 The following custom properties and mixins are available for styling: |
| 32 | 32 |
| 33 Custom property | Description | Default | 33 Custom property | Description | Default |
| 34 ----------------|-------------|---------- | 34 ----------------|-------------|---------- |
| 35 `--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` |
| 36 `--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` |
| 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-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 | `--primary-color` | 38 `--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 | `--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` | 40 `--paper-radio-button-size` | Size of the radio button | `16px` |
| 41 `--paper-radio-button-ink-size` | Size of the ripple | `48px` |
| 41 `--paper-radio-button-label-color` | Label color | `--primary-text-color` | 42 `--paper-radio-button-label-color` | Label color | `--primary-text-color` |
| 42 `--paper-radio-button-label-spacing` | Spacing between the label and the button
| `10px` | 43 `--paper-radio-button-label-spacing` | Spacing between the label and the button
| `10px` |
| 43 | 44 |
| 44 This element applies the mixin `--paper-font-common-base` but does not import `p
aper-styles/typography.html`. | 45 This element applies the mixin `--paper-font-common-base` but does not import `p
aper-styles/typography.html`. |
| 45 In order to apply the `Roboto` font to this element, make sure you've imported `
paper-styles/typography.html`. | 46 In order to apply the `Roboto` font to this element, make sure you've imported `
paper-styles/typography.html`. |
| 46 | 47 |
| 47 @group Paper Elements | 48 @group Paper Elements |
| 48 @element paper-radio-button | 49 @element paper-radio-button |
| 49 @hero hero.svg | 50 @hero hero.svg |
| 50 @demo demo/index.html | 51 @demo demo/index.html |
| 51 --> | 52 --> |
| 52 | 53 |
| 53 </head><body><dom-module id="paper-radio-button"> | 54 </head><body><dom-module id="paper-radio-button"> |
| 54 <template strip-whitespace=""> | 55 <template strip-whitespace=""> |
| 55 <style> | 56 <style> |
| 56 :host { | 57 :host { |
| 57 display: inline-block; | 58 display: inline-block; |
| 58 line-height: 0; | 59 line-height: 0; |
| 59 white-space: nowrap; | 60 white-space: nowrap; |
| 60 cursor: pointer; | 61 cursor: pointer; |
| 61 @apply(--paper-font-common-base); | 62 @apply(--paper-font-common-base); |
| 62 --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16p
x); | 63 --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16p
x); |
| 64 /* -1px is a sentinel for the default and is replace in `attached`. */ |
| 65 --calculated-paper-radio-button-ink-size: var(--paper-radio-button-ink-s
ize, -1px); |
| 63 } | 66 } |
| 64 | 67 |
| 65 :host(:focus) { | 68 :host(:focus) { |
| 66 outline: none; | 69 outline: none; |
| 67 } | 70 } |
| 68 | 71 |
| 69 #radioContainer { | 72 #radioContainer { |
| 70 @apply(--layout-inline); | 73 @apply(--layout-inline); |
| 71 @apply(--layout-center-center); | 74 @apply(--layout-center-center); |
| 72 position: relative; | 75 position: relative; |
| 73 width: var(--calculated-paper-radio-button-size); | 76 width: var(--calculated-paper-radio-button-size); |
| 74 height: var(--calculated-paper-radio-button-size); | 77 height: var(--calculated-paper-radio-button-size); |
| 75 vertical-align: middle; | 78 vertical-align: middle; |
| 76 } | 79 } |
| 77 | 80 |
| 78 #ink { | 81 #ink { |
| 79 position: absolute; | 82 position: absolute; |
| 80 top: 50%; | 83 top: 50%; |
| 81 left: 50%; | 84 left: 50%; |
| 82 right: auto; | 85 right: auto; |
| 83 width: calc(3 * var(--calculated-paper-radio-button-size)); | 86 width: var(--calculated-paper-radio-button-ink-size); |
| 84 height: calc(3 * var(--calculated-paper-radio-button-size)); | 87 height: var(--calculated-paper-radio-button-ink-size); |
| 85 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo
r); | 88 color: var(--paper-radio-button-unchecked-ink-color, --primary-text-colo
r); |
| 86 opacity: 0.6; | 89 opacity: 0.6; |
| 87 pointer-events: none; | 90 pointer-events: none; |
| 88 -webkit-transform: translate(-50%, -50%); | 91 -webkit-transform: translate(-50%, -50%); |
| 89 transform: translate(-50%, -50%); | 92 transform: translate(-50%, -50%); |
| 90 } | 93 } |
| 91 | 94 |
| 92 #ink[checked] { | 95 #ink[checked] { |
| 93 color: var(--paper-radio-button-checked-ink-color, --primary-color); | 96 color: var(--paper-radio-button-checked-ink-color, --primary-color); |
| 94 } | 97 } |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 167 <div id="radioContainer"> | 170 <div id="radioContainer"> |
| 168 <div id="offRadio"></div> | 171 <div id="offRadio"></div> |
| 169 <div id="onRadio"></div> | 172 <div id="onRadio"></div> |
| 170 </div> | 173 </div> |
| 171 | 174 |
| 172 <div id="radioLabel"><content></content></div> | 175 <div id="radioLabel"><content></content></div> |
| 173 </template> | 176 </template> |
| 174 | 177 |
| 175 </dom-module> | 178 </dom-module> |
| 176 <script src="paper-radio-button-extracted.js"></script></body></html> | 179 <script src="paper-radio-button-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2526053002:
MD Settings: roll paper-radio-button, 1.2.1 -> 1.3.1 (Closed)
