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> |
- |