api-console-assets/bower_components/anypoint-behaviors/demo/hoverable-element.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 Mulesoft.

All rights reserved.
-->

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../anypoint-hoverable-behavior.html">

<dom-module id="hoverable-element">
  <template>
    <style>
    :host {
      display: inline-block;;
      vertical-align: middle;
      width: 120px;
      height: 120px;
      margin: 20px;
      border: 1px #989A9B solid;
    }

    :host([hovered]) {
      background-color: #17BC65;
    }

    .hovered {
      display: none;
    }

    .not-hovered {
      display: block;
    }

    :host([hovered]) .hovered {
      display: block;
    }

    :host([hovered]) .not-hovered {
      display: none;
    }

    span {
      text-align: center;
    }
    </style>
    <span class="hovered">Hovered</span>
    <span class="not-hovered">Not hovered</span>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'hoverable-element',
      behaviors: [
        Anypoint.AnypointHoverableBehavior
      ]
    });
  </script>
</dom-module>