| Index: third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html b/third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html
|
| index ed51ccd9f21e0b0505241f6352b7e2ecba542587..0e5321951d9419e5f5d5d5e4832aff9c697eb6c3 100644
|
| --- a/third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html
|
| +++ b/third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html
|
| @@ -44,10 +44,113 @@ Custom property | Description | Default
|
| -->
|
|
|
| </head><body><dom-module id="paper-radio-button">
|
| + <template>
|
| + <style>
|
| + :host {
|
| + display: inline-block;
|
| + white-space: nowrap;
|
| + }
|
|
|
| - <link rel="import" type="css" href="paper-radio-button.css">
|
| + :host(:focus) {
|
| + outline: none;
|
| + }
|
|
|
| - <template>
|
| + #radioContainer {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 16px;
|
| + height: 16px;
|
| + cursor: pointer;
|
| + vertical-align: middle;
|
| + }
|
| +
|
| + :host #ink {
|
| + position: absolute;
|
| + top: -16px;
|
| + left: -16px;
|
| + width: 48px;
|
| + height: 48px;
|
| + color: var(--paper-radio-button-unchecked-ink-color, --primary-text-color);
|
| + opacity: 0.6;
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host #ink[checked] {
|
| + color: var(--paper-radio-button-checked-ink-color, --default-primary-color);
|
| + }
|
| +
|
| + :host #offRadio {
|
| + position: absolute;
|
| + box-sizing: content-box;
|
| + top: 0px;
|
| + left: 0px;
|
| + width: 12px;
|
| + height: 12px;
|
| + border-radius: 50%;
|
| + border: solid 2px;
|
| + background-color: var(--paper-radio-button-unchecked-background-color, transparent);
|
| + border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
| + transition: border-color 0.28s;
|
| + }
|
| +
|
| + :host #onRadio {
|
| + position: absolute;
|
| + box-sizing: content-box;
|
| + top: 4px;
|
| + left: 4px;
|
| + width: 8px;
|
| + height: 8px;
|
| + border-radius: 50%;
|
| + background-color: var(--paper-radio-button-checked-color, --default-primary-color);
|
| + -webkit-transform: scale(0);
|
| + transform: scale(0);
|
| + transition: -webkit-transform ease 0.28s;
|
| + transition: transform ease 0.28s;
|
| + }
|
| +
|
| + :host([checked]) #offRadio {
|
| + border-color: var(--paper-radio-button-checked-color, --default-primary-color);
|
| + }
|
| +
|
| + :host([checked]) #onRadio {
|
| + -webkit-transform: scale(1);
|
| + transform: scale(1);
|
| + }
|
| +
|
| + #radioLabel {
|
| + position: relative;
|
| + display: inline-block;
|
| + vertical-align: middle;
|
| + margin-left: 10px;
|
| + white-space: normal;
|
| + pointer-events: none;
|
| + color: var(--paper-radio-button-label-color, --primary-text-color);
|
| + }
|
| +
|
| + #radioLabel[hidden] {
|
| + display: none;
|
| + }
|
| +
|
| + /* disabled state */
|
| + :host([disabled]) {
|
| + pointer-events: none;
|
| + }
|
| +
|
| + :host([disabled]) #offRadio {
|
| + border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
| + opacity: 0.5;
|
| + }
|
| +
|
| + :host([disabled][checked]) #onRadio {
|
| + background-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
| + opacity: 0.5;
|
| + }
|
| +
|
| + :host([disabled]) #radioLabel {
|
| + /* slightly darker than the button, so that it's readable */
|
| + opacity: 0.65;
|
| + }
|
| + </style>
|
|
|
| <div id="radioContainer">
|
| <div id="offRadio"></div>
|
|
|