Index: polymer_0.5.0/bower_components/paper-button/paper-button.html |
diff --git a/bower_components/paper-button/paper-button.html b/polymer_0.5.0/bower_components/paper-button/paper-button.html |
similarity index 82% |
rename from bower_components/paper-button/paper-button.html |
rename to polymer_0.5.0/bower_components/paper-button/paper-button.html |
index da8dc80444a8370fac52ef276e79354dcbf981b9..a39814ee433e4a41e77cc304782242caf244d287 100644 |
--- a/bower_components/paper-button/paper-button.html |
+++ b/polymer_0.5.0/bower_components/paper-button/paper-button.html |
@@ -20,12 +20,13 @@ Example: |
<paper-button>flat button</paper-button> |
<paper-button raised>raised button</paper-button> |
+ <paper-button noink>No ripple effect</paper-button> |
You may use custom DOM in the button body to create a variety of buttons. For example, to |
create a button with an icon and some text: |
<paper-button> |
- <core-icon icon="favorite"> |
+ <core-icon icon="favorite"></core-icon> |
custom button content |
</paper-button> |
@@ -56,8 +57,6 @@ The opacity of the ripple is not customizable via CSS. |
--> |
<link href="../polymer/polymer.html" rel="import"> |
-<link href="../core-icon/core-icon.html" rel="import"> |
-<link href="../paper-ripple/paper-ripple.html" rel="import"> |
<link href="../paper-shadow/paper-shadow.html" rel="import"> |
<link href="paper-button-base.html" rel="import"> |
@@ -74,7 +73,6 @@ role="button"> |
position: relative; |
box-sizing: border-box; |
min-width: 5.14em; |
- padding: 0.7em 0.57em; |
margin: 0 0.29em; |
background: transparent; |
text-align: center; |
@@ -82,6 +80,8 @@ role="button"> |
text-transform: uppercase; |
outline: none; |
border-radius: 3px; |
+ -moz-user-select: none; |
+ -ms-user-select: none; |
-webkit-user-select: none; |
user-select: none; |
cursor: pointer; |
@@ -89,8 +89,8 @@ role="button"> |
} |
:host([disabled]) { |
- background: #eaeaea !important; |
- color: #a8a8a8 !important; |
+ background: #eaeaea; |
+ color: #a8a8a8; |
cursor: auto; |
pointer-events: none; |
} |
@@ -99,21 +99,40 @@ role="button"> |
text-transform: inherit; |
} |
+ #shadow { |
+ border-radius: inherit; |
+ } |
+ |
#ripple { |
pointer-events: none; |
z-index: -1; |
} |
+ .button-content { |
+ padding: 0.7em 0.57em |
+ } |
+ |
+ polyfill-next-selector { content: '.button-content > a'; } |
+ ::content > a { |
+ height: 100%; |
+ padding: 0.7em 0.57em; |
+ /* flex */ |
+ -ms-flex: 1 1 0.000000001px; |
+ -webkit-flex: 1; |
+ flex: 1; |
+ -webkit-flex-basis: 0.000000001px; |
+ flex-basis: 0.000000001px; |
+ } |
+ |
</style> |
- <template if="{{raisedButton || raised}}"> |
- <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow> |
+ <template if="{{raised}}"> |
+ <paper-shadow id="shadow" fit animated></paper-shadow> |
</template> |
<!-- this div is needed to position the ripple behind text content --> |
- <div relative> |
+ <div class="button-content" relative layout horizontal center-center> |
<content></content> |
- {{label}} |
</div> |
</template> |
@@ -123,8 +142,6 @@ role="button"> |
publish: { |
- label: '', |
- |
/** |
* If true, the button will be styled with a shadow. |
* |
@@ -133,7 +150,6 @@ role="button"> |
* @default false |
*/ |
raised: false, |
- raisedButton: false, |
/** |
* By default the ripple emanates from where the user touched the button. |
@@ -155,18 +171,6 @@ role="button"> |
*/ |
fill: true |
- }, |
- |
- labelChanged: function() { |
- if (this.label) { |
- console.warn('The "label" property is deprecated.'); |
- } |
- }, |
- |
- raisedButtonChanged: function() { |
- if (this.raisedButton) { |
- console.warn('The "raisedButton" property is deprecated.'); |
- } |
} |
}); |