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

Unified Diff: third_party/polymer/v0_8/components/paper-button/paper-button.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 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
Index: third_party/polymer/v0_8/components/paper-button/paper-button.html
diff --git a/third_party/polymer/v0_8/components/paper-button/paper-button.html b/third_party/polymer/v0_8/components/paper-button/paper-button.html
index 4fdf75695669991b202190eaa57f9c024f6ffa61..897ccc6022b9d9bb86d2586c70d99862740cccc7 100644
--- a/third_party/polymer/v0_8/components/paper-button/paper-button.html
+++ b/third_party/polymer/v0_8/components/paper-button/paper-button.html
@@ -8,6 +8,11 @@ Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
@@ -30,7 +35,7 @@ create a button with an icon and some text:
custom button content
</paper-button>
-## Styling
+### Styling
Style the button with CSS as you would a normal DOM element.
@@ -50,13 +55,16 @@ customize the color using this selector:
The opacity of the ripple is not customizable via CSS.
--->
+The following custom properties and mixins are also available for styling:
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../paper-material/paper-material.html">
-<link rel="import" href="../paper-ripple/paper-ripple.html">
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
+`--paper-button` | Mixin applied to the button | `{}`
+`--paper-button-disabled` | Mixin applied to the disabled button | `{}`
-<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+@demo demo/index.html
+-->
<dom-module id="paper-button">
@@ -80,6 +88,12 @@ The opacity of the ripple is not customizable via CSS.
user-select: none;
cursor: pointer;
z-index: 0;
+
+ @apply(--paper-button);
+ }
+
+ .keyboard-focus {
+ font-weight: bold;
}
:host([disabled]) {
@@ -87,6 +101,8 @@ The opacity of the ripple is not customizable via CSS.
color: #a8a8a8;
cursor: auto;
pointer-events: none;
+
+ @apply(--paper-button-disabled);
}
:host([noink]) paper-ripple {
@@ -110,7 +126,7 @@ The opacity of the ripple is not customizable via CSS.
<paper-ripple></paper-ripple>
- <paper-material class="content" elevation="[[_elevation]]" animated>
+ <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
<content></content>
</paper-material>
@@ -132,31 +148,30 @@ The opacity of the ripple is not customizable via CSS.
/**
* If true, the button should be styled with a shadow.
- *
- * @attribute raised
- * @type boolean
- * @default false
*/
raised: {
type: Boolean,
reflectToAttribute: true,
value: false,
- observer: '_buttonStateChanged'
+ observer: '_calculateElevation'
}
-
},
- ready: function() {
- if (!this.hasAttribute('role')) {
- this.setAttribute('role', 'button');
+ _calculateElevation: function() {
+ if (!this.raised) {
+ this._elevation = 0;
+ } else {
+ Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
}
},
- _buttonStateChanged: function() {
- this._calculateElevation();
+ _computeContentClass: function(receivedFocusFromKeyboard) {
+ var className = 'content ';
+ if (receivedFocusFromKeyboard) {
+ className += ' keyboard-focus';
+ }
+ return className;
}
-
});
</script>
-

Powered by Google App Engine
This is Rietveld 408576698