third_party/polymer/v1_0/components-chromium/paper-radio-button/paper-radio-button.html - Issue 1984963002: Roll Polymer elements

Unified 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, 7 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 side-by-side diff with in-line comments

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 »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 4afdf10c216d7c87eb3aa9d36fcd52b79a4b327e..64a2051ccea7b4c937341dbf1afc416a87efcb91 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

@@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN

--><html><head><link rel="import" href="../polymer/polymer.html">

+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<!--

Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)

@@ -36,6 +37,7 @@ Custom property | Description | Default

`--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`

`--paper-radio-button-checked-color` | Radio button color when the input is checked | `--primary-color`

`--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`

+`--paper-radio-button-size` | Size of the radio button | `16px`

`--paper-radio-button-label-color` | Label color | `--primary-text-color`

`--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px`

@@ -53,9 +55,11 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

<style>

:host {

display: inline-block;

+ line-height: 0;

white-space: nowrap;

cursor: pointer;

@apply(--paper-font-common-base);

+ --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px);

}

:host(:focus) {

@@ -63,27 +67,26 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

}

#radioContainer {

- display: inline-block;

+ @apply(--layout-inline);

+ @apply(--layout-center-center);

position: relative;

- width: 16px;

- height: 16px;

+ width: var(--calculated-paper-radio-button-size);

+ height: var(--calculated-paper-radio-button-size);

vertical-align: middle;

}

#ink {

position: absolute;

- top: -16px;

- left: -16px;

- width: 48px;

- height: 48px;

+ top: 50%;

+ left: 50%;

+ right: auto;

+ width: calc(3 * var(--calculated-paper-radio-button-size));

+ height: calc(3 * var(--calculated-paper-radio-button-size));

color: var(--paper-radio-button-unchecked-ink-color, --primary-text-color);

opacity: 0.6;

pointer-events: none;

- }

- :host-context([dir="rtl"]) #ink {

- right: -15px;

- left: auto;

+ -webkit-transform: translate(-50%, -50%);

+ transform: translate(-50%, -50%);

}

#ink[checked] {

@@ -92,12 +95,12 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

#offRadio {

position: absolute;

- box-sizing: content-box;

- top: 0px;

- left: 0px;

- right: 0px;

- width: 12px;

- height: 12px;

+ box-sizing: border-box;

+ top: 0;

+ left: 0;

+ right: 0;

+ width: 100%;

+ height: 100%;

border-radius: 50%;

border: solid 2px;

background-color: var(--paper-radio-button-unchecked-background-color, transparent);

@@ -106,13 +109,9 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

}

#onRadio {

- position: absolute;

box-sizing: content-box;

- top: 4px;

- left: 4px;

- right: 4px;

- width: 8px;

- height: 8px;

+ width: 50%;

+ height: 50%;

border-radius: 50%;

background-color: var(--paper-radio-button-checked-color, --primary-color);

-webkit-transform: scale(0);

@@ -132,6 +131,7 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

}

#radioLabel {

+ line-height: normal;

position: relative;

display: inline-block;

vertical-align: middle;

@@ -141,7 +141,7 @@ In order to apply the `Roboto` font to this element, make sure you've imported `

}

:host-context([dir="rtl"]) #radioLabel {

- margin-left: 0px;

+ margin-left: 0;

margin-right: var(--paper-radio-button-label-spacing, 10px);

}