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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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-button/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-button/paper-button-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">
11 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
10 <link rel="import" href="../paper-material/paper-material.html"> 12 <link rel="import" href="../paper-material/paper-material.html">
11 <link rel="import" href="../paper-ripple/paper-ripple.html">
12 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14 13
15 <!-- 14 <!--
16 Material design: [Buttons](https://www.google.com/design/spec/components/buttons .html) 15 Material design: [Buttons](https://www.google.com/design/spec/components/buttons .html)
17 16
18 `paper-button` is a button. When the user touches the button, a ripple effect em anates 17 `paper-button` is a button. When the user touches the button, a ripple effect em anates
19 from the point of contact. It may be flat or raised. A raised button is styled w ith a 18 from the point of contact. It may be flat or raised. A raised button is styled w ith a
20 shadow. 19 shadow.
21 20
22 Example: 21 Example:
23 22
24 <paper-button>Flat button</paper-button> 23 <paper-button>Flat button</paper-button>
25 <paper-button raised>Raised button</paper-button> 24 <paper-button raised>Raised button</paper-button>
26 <paper-button noink>No ripple effect</paper-button> 25 <paper-button noink>No ripple effect</paper-button>
27 <paper-button toggles>Toggle-able button</paper-button> 26 <paper-button toggles>Toggle-able button</paper-button>
28 27
29 A button that has `toggles` true will remain `active` after being clicked (and 28 A button that has `toggles` true will remain `active` after being clicked (and
30 will have an `active` attribute set). For more information, see the `Polymer.Iro nButtonState` 29 will have an `active` attribute set). For more information, see the `Polymer.Iro nButtonState`
31 behavior. 30 behavior.
32 31
33 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to 32 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to
34 create a button with an icon and some text: 33 create a button with an icon and some text:
35 34
36 <paper-button> 35 <paper-button>
37 <iron-icon icon="favorite"></iron-icon> 36 <iron-icon icon="favorite"></iron-icon>
38 custom button content 37 custom button content
39 </paper-button> 38 </paper-button>
40 39
40 To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already
41 receive focus, you may want to prevent the anchor tag from receiving focus as we ll by setting
42 its tabindex to -1.
43
44 <a href="https://www.polymer-project.org/" tabindex="-1">
45 <paper-button raised>Polymer Project</paper-button>
46 </a>
47
41 ### Styling 48 ### Styling
42 49
43 Style the button with CSS as you would a normal DOM element. 50 Style the button with CSS as you would a normal DOM element.
44 51
45 paper-button.fancy { 52 paper-button.fancy {
46 background: green; 53 background: green;
47 color: yellow; 54 color: yellow;
48 } 55 }
49 56
50 paper-button.fancy:hover { 57 paper-button.fancy:hover {
(...skipping 16 matching lines...) Expand all
67 `--paper-button` | Mixin applied to the button | `{}` 74 `--paper-button` | Mixin applied to the button | `{}`
68 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}` 75 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
69 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}` 76 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
70 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}` 77 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`
71 78
72 @demo demo/index.html 79 @demo demo/index.html
73 --> 80 -->
74 81
75 </head><body><dom-module id="paper-button"> 82 </head><body><dom-module id="paper-button">
76 <template strip-whitespace=""> 83 <template strip-whitespace="">
77
78 <style include="paper-material"> 84 <style include="paper-material">
79 :host { 85 :host {
80 display: inline-block; 86 @apply(--layout-inline);
87 @apply(--layout-center-center);
81 position: relative; 88 position: relative;
82 box-sizing: border-box; 89 box-sizing: border-box;
83 min-width: 5.14em; 90 min-width: 5.14em;
84 margin: 0 0.29em; 91 margin: 0 0.29em;
85 background: transparent; 92 background: transparent;
86 text-align: center; 93 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
94 -webkit-tap-highlight-color: transparent;
87 font: inherit; 95 font: inherit;
88 text-transform: uppercase; 96 text-transform: uppercase;
89 outline-width: 0; 97 outline-width: 0;
90 border-radius: 3px; 98 border-radius: 3px;
91 -moz-user-select: none; 99 -moz-user-select: none;
92 -ms-user-select: none; 100 -ms-user-select: none;
93 -webkit-user-select: none; 101 -webkit-user-select: none;
94 user-select: none; 102 user-select: none;
95 cursor: pointer; 103 cursor: pointer;
96 z-index: 0; 104 z-index: 0;
97 padding: 0.7em 0.57em; 105 padding: 0.7em 0.57em;
98 106
107 @apply(--paper-font-common-base);
99 @apply(--paper-button); 108 @apply(--paper-button);
100 } 109 }
101 110
102 :host([raised].keyboard-focus) { 111 :host([raised].keyboard-focus) {
103 font-weight: bold; 112 font-weight: bold;
104 @apply(--paper-button-raised-keyboard-focus); 113 @apply(--paper-button-raised-keyboard-focus);
105 } 114 }
106 115
107 :host(:not([raised]).keyboard-focus) { 116 :host(:not([raised]).keyboard-focus) {
108 font-weight: bold; 117 font-weight: bold;
109 @apply(--paper-button-flat-keyboard-focus); 118 @apply(--paper-button-flat-keyboard-focus);
110 } 119 }
111 120
112 :host([disabled]) { 121 :host([disabled]) {
113 background: #eaeaea; 122 background: #eaeaea;
114 color: #a8a8a8; 123 color: #a8a8a8;
115 cursor: auto; 124 cursor: auto;
116 pointer-events: none; 125 pointer-events: none;
117 126
118 @apply(--paper-button-disabled); 127 @apply(--paper-button-disabled);
119 } 128 }
120 129
121 paper-ripple { 130 paper-ripple {
122 color: var(--paper-button-ink-color); 131 color: var(--paper-button-ink-color);
123 } 132 }
133 </style>
124 134
125 :host > ::content * {
126 text-transform: inherit;
127 }
128 </style>
129 <content></content> 135 <content></content>
130 </template> 136 </template>
131 </dom-module>
132 137
138 </dom-module>
133 <script src="paper-button-extracted.js"></script></body></html> 139 <script src="paper-button-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-button/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-button/paper-button-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698