five-bells-visualization/public/bower_components/paper-checkbox/paper-checkbox.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
`paper-checkbox` is a button that can be either checked or unchecked.  User
can tap the checkbox to check or uncheck it.  Usually you use checkboxes
to allow user to select multiple options from a set.  If you have a single
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
instead.

Example:

    <paper-checkbox></paper-checkbox>

    <paper-checkbox checked></paper-checkbox>

Styling checkbox:

To change the ink color for checked state:

    paper-checkbox::shadow #ink[checked] {
      color: #4285f4;
    }

To change the checkbox checked color:

    paper-checkbox::shadow #checkbox.checked {
      background-color: #4285f4;
      border-color: #4285f4;
    }

To change the ink color for unchecked state:

    paper-checkbox::shadow #ink {
      color: #b5b5b5;
    }

To change the checkbox unchecked color:

    paper-checkbox::shadow #checkbox {
      border-color: #b5b5b5;
    }

@group Paper Elements
@element paper-checkbox
@extends paper-radio-button
@homepage github.io
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">

<polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox">
  <template>

    <link rel="stylesheet" href="paper-checkbox.css">

    <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}">

      <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>

      <div id="checkbox" class="{{ {checked: checked} | tokenList }}">
        <div id="checkmark" class="{{ {hidden: !checked} | tokenList }}"></div>
      </div>

    </div>

    <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>

  </template>
  <script>

    Polymer('paper-checkbox', {

      /**
       * Fired when the checked state changes due to user interaction.
       *
       * @event change
       */

      /**
       * Fired when the checked state changes.
       *
       * @event core-change
       */

      toggles: true,

      checkedChanged: function () {
        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
        this.fire('core-change');
      }

    });

  </script>
</polymer-element>