third_party/polymer/components/paper-menu-button/demo.html

   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>