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

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

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 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
OLDNEW
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10 <!--
11 @group Paper Elements
12
13 `paper-button` is a button containing text or an image. When the user touches
14 the button, a ripple effect emanates from the point of contact.
15
16 A `paper-button` may be flat or raised. A raised button behaves like a piece
17 of paper resting on another sheet, and lifts up upon press. Flat buttons do
18 not raise up. Add the `raisedButton` attribute to make a raised button.
19
20 Example:
21
22 <paper-button label="flat button"></paper-button>
23 <paper-button label="raised button" raisedButton></paper-button>
24
25 A button should be styled with a background color, text color, ripple color
26 and hover color.
27
28 To style the background, text and hover color, apply the `background` and
29 `color` CSS properties to the button. To style the ripple color, apply the
30 `color` CSS property to the `#ripple` element in the button's shadow root:
31
32 /* Style #my-button blue with white text and darker blue ink. */
33 #my-button {
34 background: #4285f4;
35 color: #fff;
36 }
37
38 #my-button:hover {
39 background: #2a56c6;
40 }
41
42 #my-button::shadow #ripple {
43 color: #2a56c6;
44 }
45
46 @element paper-button
47 @extends paper-focusable
48 -->
49
50 <link href="../polymer/polymer.html" rel="import">
51 <link href="../core-icon/core-icon.html" rel="import">
52 <link href="../paper-focusable/paper-focusable.html" rel="import">
53 <link href="../paper-ripple/paper-ripple.html" rel="import">
54 <link href="../paper-shadow/paper-shadow.html" rel="import">
55
56 <polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon" role="button" assetpath="">
57
58 <template>
59
60 <link href="paper-button.css" rel="stylesheet">
61
62 <template if="{{raisedButton}}">
63 <div fit="" id="shadow-container">
64 <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow>
65 </div>
66 </template>
67
68 <div id="clip">
69 <!-- <div id="focusBg"></div> -->
70 <paper-ripple id="ripple"></paper-ripple>
71 <div id="content">
72 <template if="{{iconSrc || icon}}">
73 <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
74 </template>
75 <template if="{{label}}">
76 <span>{{label}}</span>
77 </template>
78 </div>
79 </div>
80
81 </template>
82
83
84 </polymer-element>
85 <script src="paper-button-extracted.js"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698