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

Unified 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, 3 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components-chromium/paper-button/paper-button.html
diff --git a/third_party/polymer/components-chromium/paper-button/paper-button.html b/third_party/polymer/components-chromium/paper-button/paper-button.html
new file mode 100644
index 0000000000000000000000000000000000000000..b02f7bba486ba359b9e9bb86e13a476126098bc9
--- /dev/null
+++ b/third_party/polymer/components-chromium/paper-button/paper-button.html
@@ -0,0 +1,85 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+@group Paper Elements
+
+`paper-button` is a button containing text or an image. When the user touches
+the button, a ripple effect emanates from the point of contact.
+
+A `paper-button` may be flat or raised. A raised button behaves like a piece
+of paper resting on another sheet, and lifts up upon press. Flat buttons do
+not raise up. Add the `raisedButton` attribute to make a raised button.
+
+Example:
+
+ <paper-button label="flat button"></paper-button>
+ <paper-button label="raised button" raisedButton></paper-button>
+
+A button should be styled with a background color, text color, ripple color
+and hover color.
+
+To style the background, text and hover color, apply the `background` and
+`color` CSS properties to the button. To style the ripple color, apply the
+`color` CSS property to the `#ripple` element in the button's shadow root:
+
+ /* Style #my-button blue with white text and darker blue ink. */
+ #my-button {
+ background: #4285f4;
+ color: #fff;
+ }
+
+ #my-button:hover {
+ background: #2a56c6;
+ }
+
+ #my-button::shadow #ripple {
+ color: #2a56c6;
+ }
+
+@element paper-button
+@extends paper-focusable
+-->
+
+<link href="../polymer/polymer.html" rel="import">
+<link href="../core-icon/core-icon.html" rel="import">
+<link href="../paper-focusable/paper-focusable.html" rel="import">
+<link href="../paper-ripple/paper-ripple.html" rel="import">
+<link href="../paper-shadow/paper-shadow.html" rel="import">
+
+<polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon" role="button" assetpath="">
+
+ <template>
+
+ <link href="paper-button.css" rel="stylesheet">
+
+ <template if="{{raisedButton}}">
+ <div fit="" id="shadow-container">
+ <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow>
+ </div>
+ </template>
+
+ <div id="clip">
+ <!-- <div id="focusBg"></div> -->
+ <paper-ripple id="ripple"></paper-ripple>
+ <div id="content">
+ <template if="{{iconSrc || icon}}">
+ <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
+ </template>
+ <template if="{{label}}">
+ <span>{{label}}</span>
+ </template>
+ </div>
+ </div>
+
+ </template>
+
+
+</polymer-element>
+<script src="paper-button-extracted.js"></script>

Powered by Google App Engine
This is Rietveld 408576698