Home | History | Annotate | Download | only in paper-menu-button 
      1 <!doctype html>
      2 <!--
      3 Copyright 2013 The Polymer Authors. All rights reserved.
      4 Use of this source code is governed by a BSD-style
      5 license that can be found in the LICENSE file.
      6 -->
      7 <html>
      8 <head>
      9   <title>paper-menu-button</title>
     10   <script src="../platform/platform.js"></script>
     11   <link href="../core-icons/core-icons.html" rel="import">
     12   <link href="../paper-icon-button/paper-icon-button.html" rel="import">
     13   <link href="../paper-item/paper-item.html" rel="import">
     14   <link href="../paper-shadow/paper-shadow.html" rel="import">
     15   <link href="paper-menu-button.html" rel="import">
     16   <style>
     17     body {
     18       margin: 0;
     19       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     20       font-size: 14px;
     21       background: #f7f7f7;
     22     }
     23 
     24     .card {
     25       background: #fff;
     26       width: 320px;
     27       height: 480px;
     28       margin: 128px 96px;
     29       border-radius: 3px;
     30     }
     31 
     32     .toolbar {
     33       background: #91a7ff;
     34       position: relative;
     35       padding: 0.5em;
     36       border-radius: 3px 3px 0 0;
     37     }
     38 
     39     .inner {
     40       position: absolute;
     41       top: 0;
     42       left: 0;
     43       bottom: 0;
     44       right: 0;
     45       z-index: -1;
     46     }
     47 
     48     body /deep/ core-icon {
     49       fill: #fff;
     50     }
     51 
     52     body /deep/ paper-item::shadow core-icon {
     53       fill: #000;
     54     }
     55 
     56     core-icon {
     57       fill: #fff;
     58     }
     59 
     60     paper-item core-icon {
     61       fill: #000;
     62     }
     63 
     64   </style>
     65 </head>
     66 <body unresolved>
     67 
     68   <paper-shadow></paper-shadow>
     69 
     70   <div class="card paper-shadow-top-z-1">
     71     <div class="inner paper-shadow-bottom-z-1"></div>
     72     <div layout horizontal class="toolbar paper-shadow-top-z-1">
     73       <div class="inner paper-shadow-bottom-z-1"></div>
     74       <paper-menu-button icon="menu" halign="left">
     75         <paper-item label="Menu Item 1"></paper-item>
     76         <paper-item label="Menu Item 2"></paper-item>
     77         <paper-item label="Menu Item 3"></paper-item>
     78       </paper-menu-button>
     79       <div flex></div>
     80       <paper-icon-button icon="search"></paper-icon-button>
     81       <paper-menu-button icon="more-vert" halign="right" slow>
     82         <paper-item label="Refresh"></paper-item>
     83         <paper-item label="Send Feedback"></paper-item>
     84         <paper-item label="Settings"></paper-item>
     85         <paper-item label="Help"></paper-item>
     86         <paper-item label="Sign Out"></paper-item>
     87       </paper-menu-button>
     88     </div>
     89   </div>
     90 
     91 </body>
     92 </html>
     93