Index: third_party/polymer/components/paper-button/paper-button.html |
diff --git a/third_party/polymer/components/paper-button/paper-button.html b/third_party/polymer/components/paper-button/paper-button.html |
index c5a0d18431c4c75ca13aeb19c2af36e61fa4d845..bf3b083b740d04f5603c1795cd177bd88761ad1a 100644 |
--- a/third_party/polymer/components/paper-button/paper-button.html |
+++ b/third_party/polymer/components/paper-button/paper-button.html |
@@ -9,10 +9,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
--> |
<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"> |
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> |
+<link rel="import" href="../paper-behaviors/paper-button-behavior.html"> |
+<link rel="import" href="../paper-material/paper-material.html"> |
<!-- |
Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html) |
@@ -40,6 +39,14 @@ create a button with an icon and some text: |
custom button content |
</paper-button> |
+To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already |
+receive focus, you may want to prevent the anchor tag from receiving focus as well by setting |
+its tabindex to -1. |
+ |
+ <a href="https://www.polymer-project.org/" tabindex="-1"> |
+ <paper-button raised>Polymer Project</paper-button> |
+ </a> |
+ |
### Styling |
Style the button with CSS as you would a normal DOM element. |
@@ -76,16 +83,17 @@ Custom property | Description | Default |
<dom-module id="paper-button"> |
<template strip-whitespace> |
- |
<style include="paper-material"> |
:host { |
- display: inline-block; |
+ @apply(--layout-inline); |
+ @apply(--layout-center-center); |
position: relative; |
box-sizing: border-box; |
min-width: 5.14em; |
margin: 0 0.29em; |
background: transparent; |
- text-align: center; |
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
+ -webkit-tap-highlight-color: transparent; |
font: inherit; |
text-transform: uppercase; |
outline-width: 0; |
@@ -98,6 +106,7 @@ Custom property | Description | Default |
z-index: 0; |
padding: 0.7em 0.57em; |
+ @apply(--paper-font-common-base); |
@apply(--paper-button); |
} |
@@ -123,50 +132,47 @@ Custom property | Description | Default |
paper-ripple { |
color: var(--paper-button-ink-color); |
} |
- |
- :host > ::content * { |
- text-transform: inherit; |
- } |
</style> |
+ |
<content></content> |
</template> |
-</dom-module> |
- |
-<script> |
- Polymer({ |
- is: 'paper-button', |
- |
- behaviors: [ |
- Polymer.PaperButtonBehavior |
- ], |
- |
- properties: { |
- /** |
- * If true, the button should be styled with a shadow. |
- */ |
- raised: { |
- type: Boolean, |
- reflectToAttribute: true, |
- value: false, |
- observer: '_calculateElevation' |
- } |
- }, |
- _calculateElevation: function() { |
- if (!this.raised) { |
- this._setElevation(0); |
- } else { |
- Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this); |
+ <script> |
+ Polymer({ |
+ is: 'paper-button', |
+ |
+ behaviors: [ |
+ Polymer.PaperButtonBehavior |
+ ], |
+ |
+ properties: { |
+ /** |
+ * If true, the button should be styled with a shadow. |
+ */ |
+ raised: { |
+ type: Boolean, |
+ reflectToAttribute: true, |
+ value: false, |
+ observer: '_calculateElevation' |
+ } |
+ }, |
+ |
+ _calculateElevation: function() { |
+ if (!this.raised) { |
+ this._setElevation(0); |
+ } else { |
+ Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this); |
+ } |
} |
- } |
- /** |
- |
- Fired when the animation finishes. |
- This is useful if you want to wait until |
- the ripple animation finishes to perform some action. |
- @event transitionend |
- @param {{node: Object}} detail Contains the animated node. |
- */ |
- }); |
-</script> |
+ /** |
+ Fired when the animation finishes. |
+ This is useful if you want to wait until |
+ the ripple animation finishes to perform some action. |
+ |
+ @event transitionend |
+ Event param: {{node: Object}} detail Contains the animated node. |
+ */ |
+ }); |
+ </script> |
+</dom-module> |