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

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 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: dzhioev@ review Created 5 years, 2 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/bower.json ('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-icon/iron-icon.html"> 10 <link rel="import" href="../iron-icon/iron-icon.html">
11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> 11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
12 <link rel="import" href="../paper-styles/default-theme.html"> 12 <link rel="import" href="../paper-styles/default-theme.html">
13 <link rel="import" href="../paper-styles/color.html"> 13 <link rel="import" href="../paper-styles/color.html">
14 <link rel="import" href="../paper-material/paper-material.html"> 14 <link rel="import" href="../paper-material/paper-material.html">
15 <link rel="import" href="../paper-ripple/paper-ripple.html"> 15 <link rel="import" href="../paper-ripple/paper-ripple.html">
16 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> 16 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
17 17
18 <!-- 18 <!--
19 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Button</a> 19 Material design: [Floating Action Button](https://www.google.com/design/spec/com ponents/buttons-floating-action-button.html)
20 20
21 `paper-fab` is a floating action button. It contains an image placed in the cent er and 21 `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 22 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. 23 the user touches the button, a ripple effect emanates from the center of the but ton.
24 24
25 You may import `iron-icons` to use with this element, or provide a URL to a cust om icon. 25 You may import `iron-icons` to use with this element, or provide a URL to a cust om icon.
26 See `iron-iconset` for more information about how to use a custom icon set. 26 See `iron-iconset` for more information about how to use a custom icon set.
27 27
28 Example: 28 Example:
29 29
(...skipping 10 matching lines...) Expand all
40 40
41 Custom property | Description | Default 41 Custom property | Description | Default
42 ----------------|-------------|---------- 42 ----------------|-------------|----------
43 `--paper-fab-background` | The background color of the button | `--accent-color` 43 `--paper-fab-background` | The background color of the button | `--accent-color`
44 `--paper-fab-keyboard-focus-background` | The background color of the button whe n focused | `--paper-pink-900` 44 `--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` 45 `--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` 46 `--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 | `{}` 47 `--paper-fab` | Mixin applied to the button | `{}`
48 `--paper-fab-mini` | Mixin applied to a mini button | `{}` 48 `--paper-fab-mini` | Mixin applied to a mini button | `{}`
49 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` 49 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
50 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{} `
50 51
51 @group Paper Elements 52 @group Paper Elements
52 @demo demo/index.html 53 @demo demo/index.html
53 54
54 --> 55 -->
55 56
56 </head><body><dom-module id="paper-fab"> 57 </head><body><dom-module id="paper-fab">
57 <style> 58 <template strip-whitespace="">
59 <style include="paper-material">
58 60
59 :host { 61 :host {
60 display: inline-block; 62 display: inline-block;
61 position: relative; 63 position: relative;
62 outline: none; 64 outline: none;
63 -moz-user-select: none; 65 -moz-user-select: none;
64 -ms-user-select: none; 66 -ms-user-select: none;
65 -webkit-user-select: none; 67 -webkit-user-select: none;
66 -webkit-tap-highlight-color: rgba(0,0,0,0); 68 -webkit-tap-highlight-color: rgba(0,0,0,0);
67 user-select: none; 69 user-select: none;
68 cursor: pointer; 70 cursor: pointer;
69 71
70 box-sizing: border-box; 72 box-sizing: border-box;
71 min-width: 0; 73 min-width: 0;
72 width: 56px; 74 width: 56px;
73 height: 56px; 75 height: 56px;
74 background: var(--paper-fab-background, --accent-color); 76 background: var(--paper-fab-background, --accent-color);
75 color: var(--text-primary-color); 77 color: var(--text-primary-color);
76 border-radius: 50%; 78 border-radius: 50%;
77 padding: 16px; 79 padding: 16px;
78 80
79 z-index: 0; 81 z-index: 0;
80 82
81 @apply(--paper-fab); 83 @apply(--layout-vertical);
82 } 84 @apply(--layout-center-center);
85 @apply(--paper-fab);
86 }
83 87
84 :host([mini]) { 88 :host([mini]) {
85 width: 40px; 89 width: 40px;
86 height: 40px; 90 height: 40px;
87 padding: 8px; 91 padding: 8px;
88 92
89 @apply(--paper-fab-mini); 93 @apply(--paper-fab-mini);
90 } 94 }
91 95
92 :host([disabled]) { 96 :host([disabled]) {
93 color: var(--paper-fab-disabled-text, --paper-grey-500); 97 color: var(--paper-fab-disabled-text, --paper-grey-500);
94 background: var(--paper-fab-disabled-background, --paper-grey-300); 98 background: var(--paper-fab-disabled-background, --paper-grey-300);
95 @apply(--paper-fab-disabled); 99 @apply(--paper-fab-disabled);
96 } 100 }
97 101
98 paper-material { 102 iron-icon {
99 border-radius: inherit; 103 @apply(--paper-fab-iron-icon);
100 @apply(--layout-fit); 104 }
101 @apply(--layout-vertical);
102 @apply(--layout-center-center);
103 }
104 105
105 .keyboard-focus { 106 :host(.keyboard-focus) {
106 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900); 107 background: var(--paper-fab-keyboard-focus-background, --paper-pink-900) ;
107 } 108 }
108 </style> 109 </style>
109 <template> 110 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
110 <paper-ripple></paper-ripple>
111 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated="">
112 <iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
113 </paper-material>
114 </template> 111 </template>
115 </dom-module> 112 </dom-module>
116 <script src="paper-fab-extracted.js"></script></body></html> 113 <script src="paper-fab-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-fab/bower.json ('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