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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab.html

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 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 unified diff | Download patch
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-fab/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="../iron-icon/iron-icon.html"> 11 <link rel="import" href="../iron-icon/iron-icon.html">
12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> 12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
13 <link rel="import" href="../paper-material/paper-material-shared-styles.html"> 13 <link rel="import" href="../paper-material/paper-material-shared-styles.html">
14 <link rel="import" href="../paper-ripple/paper-ripple.html">
15 <link rel="import" href="../paper-styles/color.html"> 14 <link rel="import" href="../paper-styles/color.html">
16 <link rel="import" href="../paper-styles/default-theme.html"> 15 <link rel="import" href="../paper-styles/default-theme.html">
17 16
18 <!-- 17 <!--
19 Material design: [Floating Action Button](https://www.google.com/design/spec/com ponents/buttons-floating-action-button.html) 18 Material design: [Floating Action Button](https://www.google.com/design/spec/com ponents/buttons-floating-action-button.html)
20 19
21 `paper-fab` is a floating action button. It contains an image placed in the cent er and 20 `paper-fab` is a floating action button. It contains an image placed in the cent er and
22 comes in two sizes: regular size and a smaller size by applying the attribute `m ini`. When 21 comes in two sizes: regular size and a smaller size by applying the attribute `m ini`. When
23 the user touches the button, a ripple effect emanates from the center of the but ton. 22 the user touches the button, a ripple effect emanates from the center of the but ton.
24 23
(...skipping 19 matching lines...) Expand all
44 `--paper-fab-keyboard-focus-background` | The background color of the button whe n focused | `--paper-pink-900` 43 `--paper-fab-keyboard-focus-background` | The background color of the button whe n focused | `--paper-pink-900`
45 `--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300` 44 `--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300`
46 `--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500` 45 `--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500`
47 `--paper-fab` | Mixin applied to the button | `{}` 46 `--paper-fab` | Mixin applied to the button | `{}`
48 `--paper-fab-mini` | Mixin applied to a mini button | `{}` 47 `--paper-fab-mini` | Mixin applied to a mini button | `{}`
49 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` 48 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
50 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{} ` 49 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{} `
51 50
52 @group Paper Elements 51 @group Paper Elements
53 @demo demo/index.html 52 @demo demo/index.html
54
55 --> 53 -->
56 54
57 </head><body><dom-module id="paper-fab"> 55 </head><body><dom-module id="paper-fab">
58 <template strip-whitespace=""> 56 <template strip-whitespace="">
59 <style include="paper-material-shared-styles"> 57 <style include="paper-material-shared-styles">
60 :host { 58 :host {
61 display: inline-block; 59 @apply(--layout-vertical);
60 @apply(--layout-center-center);
61
62 background: var(--paper-fab-background, --accent-color);
63 border-radius: 50%;
64 box-sizing: border-box;
65 color: var(--text-primary-color);
66 cursor: pointer;
67 height: 56px;
68 min-width: 0;
69 outline: none;
70 padding: 16px;
62 position: relative; 71 position: relative;
63 outline: none;
64 -moz-user-select: none; 72 -moz-user-select: none;
65 -ms-user-select: none; 73 -ms-user-select: none;
66 -webkit-user-select: none; 74 -webkit-user-select: none;
67 -webkit-tap-highlight-color: rgba(0,0,0,0);
68 user-select: none; 75 user-select: none;
69 cursor: pointer;
70
71 box-sizing: border-box;
72 min-width: 0;
73 width: 56px; 76 width: 56px;
74 height: 56px;
75 background: var(--paper-fab-background, --accent-color);
76 color: var(--text-primary-color);
77 border-radius: 50%;
78 padding: 16px;
79
80 z-index: 0; 77 z-index: 0;
81 78
82 @apply(--layout-vertical); 79 /* NOTE: Both values are needed, since some phones require the value `tr ansparent`. */
83 @apply(--layout-center-center); 80 -webkit-tap-highlight-color: rgba(0,0,0,0);
81 -webkit-tap-highlight-color: transparent;
82
84 @apply(--paper-fab); 83 @apply(--paper-fab);
85 } 84 }
86 85
86 [hidden] {
87 display: none !important;
88 }
89
87 :host([mini]) { 90 :host([mini]) {
88 width: 40px; 91 width: 40px;
89 height: 40px; 92 height: 40px;
90 padding: 8px; 93 padding: 8px;
91 94
92 @apply(--paper-fab-mini); 95 @apply(--paper-fab-mini);
93 } 96 }
94 97
95 :host([disabled]) { 98 :host([disabled]) {
96 color: var(--paper-fab-disabled-text, --paper-grey-500); 99 color: var(--paper-fab-disabled-text, --paper-grey-500);
97 background: var(--paper-fab-disabled-background, --paper-grey-300); 100 background: var(--paper-fab-disabled-background, --paper-grey-300);
101
98 @apply(--paper-fab-disabled); 102 @apply(--paper-fab-disabled);
99 } 103 }
100 104
101 iron-icon { 105 iron-icon {
102 @apply(--paper-fab-iron-icon); 106 @apply(--paper-fab-iron-icon);
103 } 107 }
104 108
109 span {
110 width: 100%;
111 white-space: nowrap;
112 overflow: hidden;
113 text-overflow: ellipsis;
114 text-align: center;
115 }
116
105 :host(.keyboard-focus) { 117 :host(.keyboard-focus) {
106 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900) ; 118 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900) ;
107 } 119 }
108 </style> 120 </style>
109 121
110 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon> 122 <iron-icon id="icon" hidden$="{{!_computeIsIconFab(icon, src)}}" src="[[src] ]" icon="[[icon]]"></iron-icon>
123 <span hidden$="{{_computeIsIconFab(icon, src)}}">{{label}}</span>
111 </template> 124 </template>
112 </dom-module>
113 125
126 </dom-module>
114 <script src="paper-fab-extracted.js"></script></body></html> 127 <script src="paper-fab-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-fab/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-fab/paper-fab-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698