| OLD | NEW |
| 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"> |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 63 Custom property | Description | Default | 63 Custom property | Description | Default |
| 64 ----------------|-------------|---------- | 64 ----------------|-------------|---------- |
| 65 `--paper-button-flat-focus-color` | Background color of a focused flat button |
`--paper-grey-200` | 65 `--paper-button-flat-focus-color` | Background color of a focused flat button |
`--paper-grey-200` |
| 66 `--paper-button` | Mixin applied to the button | `{}` | 66 `--paper-button` | Mixin applied to the button | `{}` |
| 67 `--paper-button-disabled` | Mixin applied to the disabled button | `{}` | 67 `--paper-button-disabled` | Mixin applied to the disabled button | `{}` |
| 68 | 68 |
| 69 @demo demo/index.html | 69 @demo demo/index.html |
| 70 --> | 70 --> |
| 71 | 71 |
| 72 </head><body><dom-module id="paper-button"> | 72 </head><body><dom-module id="paper-button"> |
| 73 <template> |
| 73 | 74 |
| 74 <style> | 75 <style> |
| 76 :host { |
| 77 display: inline-block; |
| 78 position: relative; |
| 79 box-sizing: border-box; |
| 80 min-width: 5.14em; |
| 81 margin: 0 0.29em; |
| 82 background: transparent; |
| 83 text-align: center; |
| 84 font: inherit; |
| 85 text-transform: uppercase; |
| 86 outline-width: 0; |
| 87 border-radius: 3px; |
| 88 -moz-user-select: none; |
| 89 -ms-user-select: none; |
| 90 -webkit-user-select: none; |
| 91 user-select: none; |
| 92 cursor: pointer; |
| 93 z-index: 0; |
| 75 | 94 |
| 76 :host { | 95 @apply(--paper-button); |
| 77 display: inline-block; | 96 } |
| 78 position: relative; | |
| 79 box-sizing: border-box; | |
| 80 min-width: 5.14em; | |
| 81 margin: 0 0.29em; | |
| 82 background: transparent; | |
| 83 text-align: center; | |
| 84 font: inherit; | |
| 85 text-transform: uppercase; | |
| 86 outline: none; | |
| 87 border-radius: 3px; | |
| 88 -moz-user-select: none; | |
| 89 -ms-user-select: none; | |
| 90 -webkit-user-select: none; | |
| 91 user-select: none; | |
| 92 cursor: pointer; | |
| 93 z-index: 0; | |
| 94 | 97 |
| 95 @apply(--paper-button); | 98 .keyboard-focus { |
| 96 } | 99 font-weight: bold; |
| 100 } |
| 97 | 101 |
| 98 .keyboard-focus { | 102 :host([disabled]) { |
| 99 font-weight: bold; | 103 background: #eaeaea; |
| 100 } | 104 color: #a8a8a8; |
| 105 cursor: auto; |
| 106 pointer-events: none; |
| 101 | 107 |
| 102 :host([disabled]) { | 108 @apply(--paper-button-disabled); |
| 103 background: #eaeaea; | 109 } |
| 104 color: #a8a8a8; | |
| 105 cursor: auto; | |
| 106 pointer-events: none; | |
| 107 | 110 |
| 108 @apply(--paper-button-disabled); | 111 :host([noink]) paper-ripple { |
| 109 } | 112 display: none; |
| 113 } |
| 110 | 114 |
| 111 :host([noink]) paper-ripple { | 115 paper-material { |
| 112 display: none; | 116 border-radius: inherit; |
| 113 } | 117 } |
| 114 | 118 |
| 115 paper-material { | 119 .content > ::content * { |
| 116 border-radius: inherit; | 120 text-transform: inherit; |
| 117 } | 121 } |
| 118 | 122 |
| 119 .content > ::content * { | 123 .content { |
| 120 text-transform: inherit; | 124 padding: 0.7em 0.57em |
| 121 } | 125 } |
| 122 | 126 </style> |
| 123 .content { | |
| 124 padding: 0.7em 0.57em | |
| 125 } | |
| 126 </style> | |
| 127 | |
| 128 <template> | |
| 129 | 127 |
| 130 <paper-ripple></paper-ripple> | 128 <paper-ripple></paper-ripple> |
| 131 | 129 |
| 132 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]"
elevation="[[_elevation]]" animated=""> | 130 <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]"
elevation="[[_elevation]]" animated=""> |
| 133 <content></content> | 131 <content></content> |
| 134 </paper-material> | 132 </paper-material> |
| 135 | 133 |
| 136 </template> | 134 </template> |
| 137 | |
| 138 </dom-module> | 135 </dom-module> |
| 139 | 136 |
| 140 <script src="paper-button-extracted.js"></script></body></html> | 137 <script src="paper-button-extracted.js"></script></body></html> |
| OLD | NEW |