data-table-checkbox.html

<dom-module id="data-table-checkbox">
  <template>
    <style>
      :host {
        height: 48px;
        flex-basis: 48px;
        flex-grow: 0;
        flex-shrink: 0;
        padding: 0 8px 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #e3e3e3;
      }

      :host([header]) {
        height: 56px;
      }

      :host([hidden]) {
        display: none;
      }

      :host(:focus) {
        outline: none;
      }

      #container {
        position: relative;
        box-sizing: border-box;
        height: 18px;
        width: 18px;
        border: solid 2px;
        border-color: var(--primary-text-color);
        border-radius: 2px;
        pointer-events: none;
        -webkit-transition: background-color 140ms, border-color 140ms;
        transition: background-color 140ms, border-color 140ms;
      }

      :host([checked]) #container {
        border-color: var(--default-primary-color);
        background-color: var(--default-primary-color);
      }

      :host([checked]) .checkmark {
        border-bottom: 2px solid white;
        border-right: 2px solid white;
        width: 36%;
        height: 70%;
        -webkit-transform-origin: 97% 86%;
        transform-origin: 97% 86%;
        -webkit-animation: checkmark-expand 140ms ease-out forwards;
        animation: checkmark-expand 140ms ease-out forwards;
      }

      @-webkit-keyframes checkmark-expand {
        0% {
          -webkit-transform: scale(0, 0) rotate(45deg);
        }
        100% {
          -webkit-transform: scale(1, 1) rotate(45deg);
        }
      }

      @keyframes checkmark-expand {
        0% {
          transform: scale(0, 0) rotate(45deg);
        }
        100% {
          transform: scale(1, 1) rotate(45deg);
        }
      }

      :host([indeterminate]) .checkmark {
        border-bottom: 2px solid var(--primary-text-color);
        width: 60%;
        height: 45%;
        margin-left: 3px;
        -webkit-animation: indeterminate-expand 140ms ease-out forwards;
        animation: indeterminate-expand 140ms ease-out forwards;
      }

      @-webkit-keyframes indeterminate-expand {
        0% {
          -webkit-transform: scale(0, 0);
        }
        100% {
          -webkit-transform: scale(1, 1);
        }
      }

      @keyframes indeterminate-expand {
        0% {
          transform: scale(0, 1);
        }
        100% {
          transform: scale(1, 1);
        }
      }
    </style>

    <div id="container">
      <div class="checkmark"></div>
    </div>

  </template>
  <script>
    Polymer({
      is: 'data-table-checkbox',

      properties: {
        checked: {
          type: Boolean,
          observer: '_checkedChanged',
          reflectToAttribute: true,
          value: false
        },

        indeterminate: {
          type: Boolean,
          reflectToAttribute: true,
          observer: '_indeterminateChanged',
          value: false
        }
      },

      _checkedChanged: function(checked) {
        if (checked) {
          this.indeterminate = false;
        }
      },

      _indeterminateChanged: function(indeterminate) {
        if (indeterminate) {
          this.checked = false;
        }
      }
    });
  </script>
</dom-module>