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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html

Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: dzhioev@ review Created 5 years, 2 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-icon-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html b/third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html
index ade2172e1af3db6b135ec44a54f141be875fdf3c..bd4199cb40edc8f7e6eec4627ad4b030e5c62189 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button.html
@@ -15,7 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-ripple/paper-ripple.html">
<!--
-Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
+Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
`paper-icon-button` is a button with an image placed at the center. When the user touches
the button, a ripple effect emanates from the center of the button.
@@ -35,7 +35,7 @@ Example:
<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button src="star.png"></paper-icon-button>
-###Styling
+### Styling
Style the button with CSS as you would a normal DOM element. If you are using the icons
provided by `iron-icons`, they will inherit the foreground color of the button.
@@ -44,21 +44,14 @@ provided by `iron-icons`, they will inherit the foreground color of the button.
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
By default, the ripple is the same color as the foreground at 25% opacity. You may
-customize the color using this selector:
-
- /* make #my-button use a blue ripple instead of foreground color */
- #my-button::shadow #ripple {
- color: blue;
- }
-
-The opacity of the ripple is not customizable via CSS.
+customize the color using the `--paper-icon-button-ink-color` custom property.
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
-`--paper-icon-button-disabled-text` | The color of the disabled button | `--primary-text-color`
-`--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-primary-color`
+`--paper-icon-button-disabled-text` | The color of the disabled button | `--disabled-text-color`
+`--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-color`
`--paper-icon-button` | Mixin for a button | `{}`
`--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
@@ -68,39 +61,44 @@ Custom property | Description | Default
-->
</head><body><dom-module id="paper-icon-button">
- <style>
-
- :host {
- display: inline-block;
- position: relative;
- padding: 8px;
- outline: none;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- z-index: 0;
-
- @apply(--paper-icon-button);
- }
-
- :host #ink {
- color: var(--paper-icon-button-ink-color, --primary-text-color);
- opacity: 0.6;
- }
-
- :host([disabled]) {
- color: var(--paper-icon-button-disabled-text, --disabled-text-color);
- pointer-events: none;
- cursor: auto;
- @apply(--paper-icon-button-disabled);
- }
- </style>
- <template>
- <paper-ripple id="ink" class="circle" center=""></paper-ripple>
+ <template strip-whitespace="">
+ <style>
+ :host {
+ display: inline-block;
+ position: relative;
+ padding: 8px;
+ outline: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ z-index: 0;
+
+ width: 24px;
+ @apply(--paper-icon-button);
+ }
+
+ :host #ink {
+ color: var(--paper-icon-button-ink-color, --primary-text-color);
+ opacity: 0.6;
+ }
+
+ :host([disabled]) {
+ color: var(--paper-icon-button-disabled-text, --disabled-text-color);
+ pointer-events: none;
+ cursor: auto;
+ @apply(--paper-icon-button-disabled);
+ }
+
+ iron-icon {
+ --iron-icon-width: 100%;
+ --iron-icon-height: 100%;
+ }
+ </style>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
</template>
-</dom-module>
+
+ </dom-module>
<script src="paper-icon-button-extracted.js"></script></body></html>
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-icon-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-icon-button/paper-icon-button-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698