plastik-app-menubar-item.html

<link rel="import" href="../polymer/polymer.html">

<!--
`plastik-app-menubar-item`
Menubar item
-->

<dom-module id="plastik-app-menubar-item">
  <template>
    <style>
      :host {
        padding: 3px 7px 5px 7px;
        margin-top: 2px;
        border: 1px solid transparent;
        outline: none;
      }

      :host:hover {
        background: #eee;
        border-color: #eee;
      }

      :host.expanded {
        background: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .2);
        border-bottom: none;
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        color: black;
      }

      plastik-app-menubar-menu {
        display: none;
      }

      :host.expanded plastik-app-menubar-menu {
        display: block;
      }
    </style>
  </template>

  <script>
    Polymer({

      is: 'plastik-app-menubar-item',

      properties: {},

      listeners: {
        'tap': 'hostTap'
      },

      hostTap: function () {
      },

      ready: function () {
      }
    })
  </script>
</dom-module>