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

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 1363853002: Update Polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix resources 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-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/hero.svg » ('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 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS
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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS
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="../paper-material/paper-material.html"> 10 <link rel="import" href="../paper-material/paper-material.html">
11 <link rel="import" href="../paper-ripple/paper-ripple.html"> 11 <link rel="import" href="../paper-ripple/paper-ripple.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="../iron-flex-layout/iron-flex-layout.html">
13 14
14 <!-- 15 <!--
15 16
16 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a> 17 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a>
17 18
18 `paper-button` is a button. When the user touches the button, a ripple effect em anates 19 `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 20 from the point of contact. It may be flat or raised. A raised button is styled w ith a
20 shadow. 21 shadow.
21 22
22 Example: 23 Example:
23 24
24 <paper-button>flat button</paper-button> 25 <paper-button>Flat button</paper-button>
25 <paper-button raised>raised button</paper-button> 26 <paper-button raised>Raised button</paper-button>
26 <paper-button noink>No ripple effect</paper-button> 27 <paper-button noink>No ripple effect</paper-button>
27 <paper-button toggles>toggle-able button</paper-button> 28 <paper-button toggles>Toggle-able button</paper-button>
28 29
29 A button that has `toggles` true will remain `active` after being clicked (and 30 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` 31 will have an `active` attribute set). For more information, see the `Polymer.Iro nButtonState`
31 behavior. 32 behavior.
32 33
33 You may use custom DOM in the button body to create a variety of buttons. For ex ample, to 34 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: 35 create a button with an icon and some text:
35 36
36 <paper-button> 37 <paper-button>
37 <iron-icon icon="favorite"></iron-icon> 38 <iron-icon icon="favorite"></iron-icon>
38 custom button content 39 custom button content
39 </paper-button> 40 </paper-button>
40 41
41 ### Styling 42 ### Styling
42 43
43 Style the button with CSS as you would a normal DOM element. 44 Style the button with CSS as you would a normal DOM element.
44 45
45 /* make #my-button green with yellow text */ 46 paper-button.fancy {
46 #my-button { 47 background: green;
47 background: green; 48 color: yellow;
48 color: yellow; 49 }
50
51 paper-button.fancy:hover {
52 background: lime;
53 }
54
55 paper-button[disabled],
56 paper-button[toggles][active] {
57 background: red;
49 } 58 }
50 59
51 By default, the ripple is the same color as the foreground at 25% opacity. You m ay 60 By default, the ripple is the same color as the foreground at 25% opacity. You m ay
52 customize the color using this selector: 61 customize the color using the `--paper-button-ink-color` custom property.
53
54 /* make #my-button use a blue ripple instead of foreground color */
55 #my-button::shadow paper-ripple {
56 color: blue;
57 }
58
59 The opacity of the ripple is not customizable via CSS.
60 62
61 The following custom properties and mixins are also available for styling: 63 The following custom properties and mixins are also available for styling:
62 64
63 Custom property | Description | Default 65 Custom property | Description | Default
64 ----------------|-------------|---------- 66 ----------------|-------------|----------
65 `--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200` 67 `--paper-button-ink-color` | Background color of the ripple | `Based on the butt on's color`
66 `--paper-button` | Mixin applied to the button | `{}` 68 `--paper-button` | Mixin applied to the button | `{}`
67 `--paper-button-disabled` | Mixin applied to the disabled button | `{}` 69 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
70 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
71 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`
68 72
69 @demo demo/index.html 73 @demo demo/index.html
70 --> 74 -->
71 75
72 </head><body><dom-module id="paper-button"> 76 </head><body><dom-module id="paper-button">
73 <template> 77 <template>
74 78
75 <style> 79 <style>
76 :host { 80 :host {
77 display: inline-block; 81 display: inline-block;
78 position: relative; 82 position: relative;
79 box-sizing: border-box; 83 box-sizing: border-box;
80 min-width: 5.14em; 84 min-width: 5.14em;
81 margin: 0 0.29em; 85 margin: 0 0.29em;
82 background: transparent; 86 background: transparent;
83 text-align: center; 87 text-align: center;
84 font: inherit; 88 font: inherit;
85 text-transform: uppercase; 89 text-transform: uppercase;
86 outline-width: 0; 90 outline-width: 0;
87 border-radius: 3px; 91 border-radius: 3px;
88 -moz-user-select: none; 92 -moz-user-select: none;
89 -ms-user-select: none; 93 -ms-user-select: none;
90 -webkit-user-select: none; 94 -webkit-user-select: none;
91 user-select: none; 95 user-select: none;
92 cursor: pointer; 96 cursor: pointer;
93 z-index: 0; 97 z-index: 0;
98 padding: 0.7em 0.57em;
94 99
95 @apply(--paper-button); 100 @apply(--paper-button);
96 } 101 }
97 102
98 .keyboard-focus { 103 :host([raised]) .keyboard-focus {
99 font-weight: bold; 104 font-weight: bold;
105 @apply(--paper-button-raised-keyboard-focus);
106 }
107
108 :host(:not([raised])) .keyboard-focus {
109 font-weight: bold;
110 @apply(--paper-button-flat-keyboard-focus);
100 } 111 }
101 112
102 :host([disabled]) { 113 :host([disabled]) {
103 background: #eaeaea; 114 background: #eaeaea;
104 color: #a8a8a8; 115 color: #a8a8a8;
105 cursor: auto; 116 cursor: auto;
106 pointer-events: none; 117 pointer-events: none;
107 118
108 @apply(--paper-button-disabled); 119 @apply(--paper-button-disabled);
109 } 120 }
110 121
111 :host([noink]) paper-ripple { 122 :host([noink]) paper-ripple {
112 display: none; 123 display: none;
113 } 124 }
114 125
126 paper-ripple {
127 color: var(--paper-button-ink-color);
128 }
129
115 paper-material { 130 paper-material {
116 border-radius: inherit; 131 border-radius: inherit;
132 @apply(--layout-fit);
117 } 133 }
118 134
119 .content > ::content * { 135 .content > ::content * {
120 text-transform: inherit; 136 text-transform: inherit;
121 } 137 }
122
123 .content {
124 padding: 0.7em 0.57em
125 }
126 </style> 138 </style>
127 139
128 <paper-ripple></paper-ripple> 140 <paper-ripple></paper-ripple>
129 141
130 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated=""> 142 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated=""></paper-material>
131 <content></content> 143
132 </paper-material> 144 <content></content>
133 145
134 </template> 146 </template>
135 </dom-module> 147 </dom-module>
136 148
137 <script src="paper-button-extracted.js"></script></body></html> 149 <script src="paper-button-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-button/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-dialog-behavior/hero.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698