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

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 @group Paper Elements
  12
  13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
  14
  15 `paper-button` is a button. When the user touches the button, a ripple effect emanates
  16 from the point of contact. It may be flat or raised. A raised button is styled with a
  17 shadow.
  18
  19 Example:
  20
  21     <paper-button>flat button</paper-button>
  22     <paper-button raised>raised button</paper-button>
  23     <paper-button noink>No ripple effect</paper-button>
  24
  25 You may use custom DOM in the button body to create a variety of buttons. For example, to
  26 create a button with an icon and some text:
  27
  28     <paper-button>
  29       <core-icon icon="favorite"></core-icon>
  30       custom button content
  31     </paper-button>
  32
  33 Styling
  34 -------
  35
  36 Style the button with CSS as you would a normal DOM element.
  37
  38     /* make #my-button green with yellow text */
  39     #my-button {
  40         background: green;
  41         color: yellow;
  42     }
  43
  44 By default, the ripple is the same color as the foreground at 25% opacity. You may
  45 customize the color using this selector:
  46
  47     /* make #my-button use a blue ripple instead of foreground color */
  48     #my-button::shadow #ripple {
  49       color: blue;
  50     }
  51
  52 The opacity of the ripple is not customizable via CSS.
  53
  54 @element paper-button
  55 @extends paper-button-base
  56 @status unstable
  57 -->
  58
  59 <link href="../polymer/polymer.html" rel="import">
  60 <link href="../paper-shadow/paper-shadow.html" rel="import">
  61
  62 <link href="paper-button-base.html" rel="import">
  63
  64 <polymer-element name="paper-button" extends="paper-button-base" attributes="raised recenteringTouch fill"
  65 role="button">
  66
  67   <template>
  68
  69     <style>
  70
  71       :host {
  72         display: inline-block;
  73         position: relative;
  74         box-sizing: border-box;
  75         min-width: 5.14em;
  76         margin: 0 0.29em;
  77         background: transparent;
  78         text-align: center;
  79         font: inherit;
  80         text-transform: uppercase;
  81         outline: none;
  82         border-radius: 3px;
  83         -moz-user-select: none;
  84         -ms-user-select: none;
  85         -webkit-user-select: none;
  86         user-select: none;
  87         cursor: pointer;
  88         z-index: 0;
  89       }
  90
  91       :host([disabled]) {
  92         background: #eaeaea;
  93         color: #a8a8a8;
  94         cursor: auto;
  95         pointer-events: none;
  96       }
  97
  98       ::content * {
  99         text-transform: inherit;
 100       }
 101
 102       #shadow {
 103         border-radius: inherit;
 104       }
 105
 106       #ripple {
 107         pointer-events: none;
 108         z-index: -1;
 109       }
 110
 111       .button-content {
 112         padding: 0.7em 0.57em
 113       }
 114
 115       polyfill-next-selector { content: '.button-content > a'; }
 116       ::content > a {
 117         height: 100%;
 118         padding: 0.7em 0.57em;
 119         /* flex */
 120         -ms-flex: 1 1 0.000000001px;
 121         -webkit-flex: 1;
 122         flex: 1;
 123         -webkit-flex-basis: 0.000000001px;
 124         flex-basis: 0.000000001px;
 125       }
 126
 127     </style>
 128
 129     <template if="{{raised}}">
 130       <paper-shadow id="shadow" fit animated></paper-shadow>
 131     </template>
 132
 133     <!-- this div is needed to position the ripple behind text content -->
 134     <div class="button-content" relative layout horizontal center-center>
 135       <content></content>
 136     </div>
 137
 138   </template>
 139
 140   <script>
 141     Polymer({
 142
 143       publish: {
 144
 145         /**
 146          * If true, the button will be styled with a shadow.
 147          *
 148          * @attribute raised
 149          * @type boolean
 150          * @default false
 151          */
 152         raised: false,
 153
 154         /**
 155          * By default the ripple emanates from where the user touched the button.
 156          * Set this to true to always center the ripple.
 157          *
 158          * @attribute recenteringTouch
 159          * @type boolean
 160          * @default false
 161          */
 162         recenteringTouch: false,
 163
 164         /**
 165          * By default the ripple expands to fill the button. Set this to true to
 166          * constrain the ripple to a circle within the button.
 167          *
 168          * @attribute fill
 169          * @type boolean
 170          * @default true
 171          */
 172         fill: true
 173
 174       }
 175
 176     });
 177   </script>
 178 </polymer-element>