third_party/polymer/v1_0/components/paper-button/paper-button.html

   1 <!--
   2 @license
   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.github.io/LICENSE
   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/CONTRIBUTORS
   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/PATENTS
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../paper-material/paper-material.html">
  13 <link rel="import" href="../paper-ripple/paper-ripple.html">
  14 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
  15
  16 <!--
  17
  18 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
  19
  20 `paper-button` is a button. When the user touches the button, a ripple effect emanates
  21 from the point of contact. It may be flat or raised. A raised button is styled with a
  22 shadow.
  23
  24 Example:
  25
  26     <paper-button>flat button</paper-button>
  27     <paper-button raised>raised button</paper-button>
  28     <paper-button noink>No ripple effect</paper-button>
  29     <paper-button toggles>toggle-able button</paper-button>
  30
  31 A button that has `toggles` true will remain `active` after being clicked (and
  32 will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
  33 behavior.
  34
  35 You may use custom DOM in the button body to create a variety of buttons. For example, to
  36 create a button with an icon and some text:
  37
  38     <paper-button>
  39       <iron-icon icon="favorite"></iron-icon>
  40       custom button content
  41     </paper-button>
  42
  43 ### Styling
  44
  45 Style the button with CSS as you would a normal DOM element.
  46
  47     /* make #my-button green with yellow text */
  48     #my-button {
  49         background: green;
  50         color: yellow;
  51     }
  52
  53 By default, the ripple is the same color as the foreground at 25% opacity. You may
  54 customize the color using this selector:
  55
  56     /* make #my-button use a blue ripple instead of foreground color */
  57     #my-button::shadow paper-ripple {
  58       color: blue;
  59     }
  60
  61 The opacity of the ripple is not customizable via CSS.
  62
  63 The following custom properties and mixins are also available for styling:
  64
  65 Custom property | Description | Default
  66 ----------------|-------------|----------
  67 `--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
  68 `--paper-button` | Mixin applied to the button | `{}`
  69 `--paper-button-disabled` | Mixin applied to the disabled button | `{}`
  70
  71 @demo demo/index.html
  72 -->
  73
  74 <dom-module id="paper-button">
  75
  76   <style>
  77
  78     :host {
  79       display: inline-block;
  80       position: relative;
  81       box-sizing: border-box;
  82       min-width: 5.14em;
  83       margin: 0 0.29em;
  84       background: transparent;
  85       text-align: center;
  86       font: inherit;
  87       text-transform: uppercase;
  88       outline: none;
  89       border-radius: 3px;
  90       -moz-user-select: none;
  91       -ms-user-select: none;
  92       -webkit-user-select: none;
  93       user-select: none;
  94       cursor: pointer;
  95       z-index: 0;
  96
  97       @apply(--paper-button);
  98     }
  99
 100     .keyboard-focus {
 101       font-weight: bold;
 102     }
 103
 104     :host([disabled]) {
 105       background: #eaeaea;
 106       color: #a8a8a8;
 107       cursor: auto;
 108       pointer-events: none;
 109
 110       @apply(--paper-button-disabled);
 111     }
 112
 113     :host([noink]) paper-ripple {
 114       display: none;
 115     }
 116
 117     paper-material {
 118       border-radius: inherit;
 119     }
 120
 121     .content > ::content * {
 122       text-transform: inherit;
 123     }
 124
 125     .content {
 126       padding: 0.7em 0.57em
 127     }
 128   </style>
 129
 130   <template>
 131
 132     <paper-ripple></paper-ripple>
 133
 134     <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
 135       <content></content>
 136     </paper-material>
 137
 138   </template>
 139
 140 </dom-module>
 141
 142 <script>
 143
 144   Polymer({
 145
 146     is: 'paper-button',
 147
 148     behaviors: [
 149       Polymer.PaperButtonBehavior
 150     ],
 151
 152     properties: {
 153
 154       /**
 155        * If true, the button should be styled with a shadow.
 156        */
 157       raised: {
 158         type: Boolean,
 159         reflectToAttribute: true,
 160         value: false,
 161         observer: '_calculateElevation'
 162       }
 163     },
 164
 165     _calculateElevation: function() {
 166       if (!this.raised) {
 167         this._elevation = 0;
 168       } else {
 169         Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
 170       }
 171     },
 172
 173     _computeContentClass: function(receivedFocusFromKeyboard) {
 174       var className = 'content ';
 175       if (receivedFocusFromKeyboard) {
 176         className += ' keyboard-focus';
 177       }
 178       return className;
 179     }
 180   });
 181
 182 </script>