Index: third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html |
diff --git a/third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html b/third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html |
index a50a4093ce27ffe87d83b36f255607fb6c0948c1..546614e6a7a35a9adaea26a88dfcfb40c1adc98c 100644 |
--- a/third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html |
+++ b/third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html |
@@ -11,7 +11,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<link rel="import" href="../iron-icon/iron-icon.html"> |
<link rel="import" href="../paper-behaviors/paper-button-behavior.html"> |
<link rel="import" href="../paper-material/paper-material-shared-styles.html"> |
-<link rel="import" href="../paper-ripple/paper-ripple.html"> |
<link rel="import" href="../paper-styles/color.html"> |
<link rel="import" href="../paper-styles/default-theme.html"> |
@@ -51,39 +50,43 @@ Custom property | Description | Default |
@group Paper Elements |
@demo demo/index.html |
- |
--> |
</head><body><dom-module id="paper-fab"> |
<template strip-whitespace=""> |
<style include="paper-material-shared-styles"> |
:host { |
- display: inline-block; |
- position: relative; |
+ @apply(--layout-vertical); |
+ @apply(--layout-center-center); |
+ |
+ background: var(--paper-fab-background, --accent-color); |
+ border-radius: 50%; |
+ box-sizing: border-box; |
+ color: var(--text-primary-color); |
+ cursor: pointer; |
+ height: 56px; |
+ min-width: 0; |
outline: none; |
+ padding: 16px; |
+ position: relative; |
-moz-user-select: none; |
-ms-user-select: none; |
-webkit-user-select: none; |
- -webkit-tap-highlight-color: rgba(0,0,0,0); |
user-select: none; |
- cursor: pointer; |
- |
- box-sizing: border-box; |
- min-width: 0; |
width: 56px; |
- height: 56px; |
- background: var(--paper-fab-background, --accent-color); |
- color: var(--text-primary-color); |
- border-radius: 50%; |
- padding: 16px; |
- |
z-index: 0; |
- @apply(--layout-vertical); |
- @apply(--layout-center-center); |
+ /* NOTE: Both values are needed, since some phones require the value `transparent`. */ |
+ -webkit-tap-highlight-color: rgba(0,0,0,0); |
+ -webkit-tap-highlight-color: transparent; |
+ |
@apply(--paper-fab); |
} |
+ [hidden] { |
+ display: none !important; |
+ } |
+ |
:host([mini]) { |
width: 40px; |
height: 40px; |
@@ -95,6 +98,7 @@ Custom property | Description | Default |
:host([disabled]) { |
color: var(--paper-fab-disabled-text, --paper-grey-500); |
background: var(--paper-fab-disabled-background, --paper-grey-300); |
+ |
@apply(--paper-fab-disabled); |
} |
@@ -102,13 +106,22 @@ Custom property | Description | Default |
@apply(--paper-fab-iron-icon); |
} |
+ span { |
+ width: 100%; |
+ white-space: nowrap; |
+ overflow: hidden; |
+ text-overflow: ellipsis; |
+ text-align: center; |
+ } |
+ |
:host(.keyboard-focus) { |
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900); |
} |
</style> |
- <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon> |
+ <iron-icon id="icon" hidden$="{{!_computeIsIconFab(icon, src)}}" src="[[src]]" icon="[[icon]]"></iron-icon> |
+ <span hidden$="{{_computeIsIconFab(icon, src)}}">{{label}}</span> |
</template> |
-</dom-module> |
+ </dom-module> |
<script src="paper-fab-extracted.js"></script></body></html> |