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

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

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 6 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/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>

Powered by Google App Engine
This is Rietveld 408576698