emojione-emoji.html

<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">

<dom-module id="emojione-emoji">
  <template strip-whitespace>
    <style is="custom-style">
      :host {
        position: relative;
        outline: none;
        height: 48px;
        width: 48px;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 3px;
        cursor: pointer;
        @apply --emojione-emoji-container;
      }
      paper-ripple {
        color: var(--paper-grey-400);
        @apply --emojione-emoji-ripple;
      }

    </style>

    <slot></slot>
  </template>
  <script>
    Polymer({

      is: 'emojione-emoji',

      behaviors: [Polymer.PaperInkyFocusBehavior],

      /**
       * @override the createRipple function in paper ripple
       * https://github.com/PolymerElements/paper-behaviors/blob/master/paper-inky-focus-behavior.html
       */
      _createRipple: function () {
        const ripple = Polymer.PaperRippleBehavior._createRipple();
        ripple.id = 'ink';
        return ripple;
      }
    });
  </script>
</dom-module>