Home | History | Annotate | Download | only in demo 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 <!doctype html>
     11 <html>
     12 <head>
     13   <title>paper-ripple demo</title>
     14 
     15   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     16   <meta name="mobile-web-app-capable" content="yes">
     17   <meta name="apple-mobile-web-app-capable" content="yes">
     18 
     19   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     20 
     21   <link rel="import" href="../../iron-icons/iron-icons.html">
     22   <link rel="import" href="../paper-ripple.html">
     23   <link rel="import" href="../../paper-styles/typography.html">
     24   <link rel="import" href="../../iron-icon/iron-icon.html">
     25 
     26   <style>
     27 
     28     body {
     29       background-color: #f9f9f9;
     30       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
     31       -webkit-tap-highlight-color: rgba(0,0,0,0);
     32       -webkit-touch-callout: none;
     33     }
     34 
     35     section {
     36       padding: 30px 25px;
     37     }
     38 
     39     section > * {
     40       margin: 10px
     41     }
     42 
     43     /* Button */
     44     .button {
     45       display: inline-block;
     46       position: relative;
     47       width: 120px;
     48       height: 32px;
     49       line-height: 32px;
     50       border-radius: 2px;
     51       font-size: 0.9em;
     52       background-color: #fff;
     53       color: #646464;
     54     }
     55 
     56     .button > paper-ripple {
     57       border-radius: 2px;
     58       overflow: hidden;
     59     }
     60 
     61     .button.narrow {
     62       width: 60px;
     63     }
     64 
     65     .button.grey {
     66       background-color: #eee;
     67     }
     68 
     69     .button.blue {
     70       background-color: #4285f4;
     71       color: #fff;
     72     }
     73 
     74     .button.green {
     75       background-color: #0f9d58;
     76       color: #fff;
     77     }
     78 
     79     .button.raised {
     80       transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     81       transition-delay: 0.2s;
     82       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
     83     }
     84 
     85     .button.raised:active {
     86       box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
     87       transition-delay: 0s;
     88     }
     89 
     90     /* Icon Button */
     91     .icon-button {
     92       position: relative;
     93       display: inline-block;
     94       width: 56px;
     95       height: 56px;
     96     }
     97 
     98     .icon-button > iron-icon {
     99       margin: 16px;
    100       transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    101       transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    102     }
    103 
    104     .icon-button:hover > iron-icon {
    105       -webkit-transform: scale(1.2);
    106       transform: scale(1.2);
    107     }
    108 
    109     .icon-button > paper-ripple {
    110       overflow: hidden;
    111       color: #646464;
    112     }
    113 
    114     .icon-button.red > iron-icon::shadow path {
    115       fill: #db4437;
    116     }
    117 
    118     .icon-button.red > paper-ripple {
    119       color: #db4437;
    120     }
    121 
    122     .icon-button.blue > iron-icon::shadow path {
    123       fill: #4285f4;
    124     }
    125 
    126     .icon-button.blue > paper-ripple {
    127       color: #4285f4;
    128     }
    129 
    130     /* FAB */
    131     .fab {
    132       position: relative;
    133       display: inline-block;
    134       width: 56px;
    135       height: 56px;
    136       border-radius: 50%;
    137       color: #fff;
    138       overflow: hidden;
    139       transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    140       transition-delay: 0.2s;
    141       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    142     }
    143 
    144     .fab.red {
    145       background-color: #d23f31;
    146     }
    147 
    148     .fab.blue {
    149       background-color: #4285f4;
    150     }
    151 
    152     .fab.green {
    153       background-color: #0f9d58;
    154     }
    155 
    156     .fab:active {
    157       box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    158       transition-delay: 0s;
    159     }
    160 
    161     .fab > iron-icon {
    162       margin: 16px;
    163     }
    164 
    165     .fab > iron-icon::shadow path {
    166       fill: #fff;
    167     }
    168 
    169     /* Menu */
    170     .menu {
    171       display: inline-block;
    172       width: 180px;
    173       background-color: #fff;
    174       box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    175     }
    176 
    177     .item {
    178       position: relative;
    179       height: 48px;
    180       line-height: 48px;
    181       color: #646464;
    182       font-size: 0.9em;
    183     }
    184 
    185     .menu.blue > .item {
    186       color: #4285f4;
    187     }
    188 
    189     /* Card, Dialog */
    190     .card, .dialog {
    191       position: relative;
    192       display: inline-block;
    193       width: 300px;
    194       height: 240px;
    195       vertical-align: top;
    196       background-color: #fff;
    197       box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
    198     }
    199 
    200     .dialog {
    201       box-sizing: border-box;
    202       padding: 16px;
    203     }
    204 
    205     .dialog > .content {
    206       height: 170px;
    207       font-size: 0.9em;
    208     }
    209 
    210     .dialog > .content > .title {
    211       font-size: 1.3em;
    212     }
    213 
    214     .dialog > .button {
    215       width: 90px;
    216       float: right;
    217     }
    218 
    219     .card.image {
    220       background: url(http://lorempixel.com/300/240/nature/);
    221       color: #fff;
    222     }
    223 
    224     /* Misc */
    225     .center {
    226       text-align: center;
    227     }
    228 
    229     .label {
    230       padding: 0 16px;
    231     }
    232 
    233     .label-blue {
    234       color: #4285f4;
    235     }
    236 
    237     .label-red {
    238       color: #d23f31;
    239     }
    240 
    241   </style>
    242 
    243 </head>
    244 <body>
    245 
    246   <section>
    247 
    248     <div class="button raised">
    249       <div class="center" fit tabindex="1">SUBMIT</div>
    250       <paper-ripple></paper-ripple>
    251     </div>
    252 
    253     <div class="button raised" noink>
    254       <div class="center" fit tabindex="1">NO INK</div>
    255       <paper-ripple noink></paper-ripple>
    256     </div>
    257 
    258     <div class="button raised grey">
    259       <div class="center" fit tabindex="1">CANCEL</div>
    260       <paper-ripple></paper-ripple>
    261     </div>
    262 
    263     <div class="button raised blue">
    264       <div class="center" fit tabindex="1">COMPOSE</div>
    265       <paper-ripple></paper-ripple>
    266     </div>
    267 
    268     <div class="button raised green">
    269       <div class="center" fit tabindex="1">OK</div>
    270       <paper-ripple></paper-ripple>
    271     </div>
    272 
    273   </section>
    274 
    275   <section>
    276 
    277     <div class="button raised grey narrow">
    278       <div class="center" fit tabindex="1">+1</div>
    279       <paper-ripple></paper-ripple>
    280     </div>
    281 
    282     <div class="button raised grey narrow label-blue">
    283       <div class="center" fit tabindex="1">+1</div>
    284       <paper-ripple></paper-ripple>
    285     </div>
    286 
    287     <div class="button raised grey narrow label-red">
    288       <div class="center" fit tabindex="1">+1</div>
    289       <paper-ripple></paper-ripple>
    290     </div>
    291 
    292   </section>
    293 
    294   <section>
    295 
    296     <div class="icon-button">
    297       <iron-icon icon="menu" tabindex="1"></iron-icon>
    298       <paper-ripple class="circle" recenters></paper-ripple>
    299     </div>
    300 
    301     <div class="icon-button">
    302       <iron-icon icon="more-vert" tabindex="1"></iron-icon>
    303       <paper-ripple class="circle" recenters></paper-ripple>
    304     </div>
    305 
    306     <div class="icon-button red">
    307       <iron-icon icon="delete" tabindex="1"></iron-icon>
    308       <paper-ripple class="circle" recenters></paper-ripple>
    309     </div>
    310 
    311     <div class="icon-button blue">
    312       <iron-icon icon="account-box" tabindex="1"></iron-icon>
    313       <paper-ripple class="circle" recenters></paper-ripple>
    314     </div>
    315 
    316   </section>
    317 
    318   <section>
    319 
    320     <div class="fab red">
    321       <iron-icon icon="add" tabindex="1"></iron-icon>
    322       <paper-ripple class="circle" recenters></paper-ripple>
    323     </div>
    324 
    325     <div class="fab blue">
    326       <iron-icon icon="mail" tabindex="1"></iron-icon>
    327       <paper-ripple class="circle" recenters></paper-ripple>
    328     </div>
    329 
    330     <div class="fab green">
    331       <iron-icon icon="create" tabindex="1"></iron-icon>
    332       <paper-ripple class="circle" recenters></paper-ripple>
    333     </div>
    334 
    335   </section>
    336 
    337   <section>
    338 
    339     <div class="menu">
    340 
    341       <div class="item">
    342         <div class="label" fit tabindex="1">Mark as unread</div>
    343         <paper-ripple></paper-ripple>
    344       </div>
    345       <div class="item">
    346         <div class="label" fit tabindex="1">Mark as important</div>
    347         <paper-ripple></paper-ripple>
    348       </div>
    349       <div class="item">
    350         <div class="label" fit tabindex="1">Add to Tasks</div>
    351         <paper-ripple></paper-ripple>
    352       </div>
    353       <div class="item">
    354         <div class="label" fit tabindex="1">Create event</div>
    355         <paper-ripple></paper-ripple>
    356       </div>
    357 
    358     </div>
    359 
    360     <div class="menu blue">
    361 
    362       <div class="item">
    363         <div class="label" fit tabindex="1">Import</div>
    364         <paper-ripple></paper-ripple>
    365       </div>
    366       <div class="item">
    367         <div class="label" fit tabindex="1">Export</div>
    368         <paper-ripple></paper-ripple>
    369       </div>
    370       <div class="item">
    371         <div class="label" fit tabindex="1">Print</div>
    372         <paper-ripple></paper-ripple>
    373       </div>
    374       <div class="item">
    375         <div class="label" fit tabindex="1">Restore contacts</div>
    376         <paper-ripple></paper-ripple>
    377       </div>
    378 
    379     </div>
    380 
    381   </section>
    382 
    383   <section>
    384 
    385     <div class="dialog">
    386 
    387       <div class="content">
    388         <div class="title">Permission</div><br>
    389         <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    390       </div>
    391 
    392       <div class="button label-blue">
    393         <div class="center" fit tabindex="1">ACCEPT</div>
    394         <paper-ripple></paper-ripple>
    395       </div>
    396 
    397       <div class="button">
    398         <div class="center" fit tabindex="1">DECLINE</div>
    399         <paper-ripple></paper-ripple>
    400       </div>
    401 
    402     </div>
    403 
    404     <div class="card" tabindex="1">
    405       <paper-ripple recenters></paper-ripple>
    406     </div>
    407 
    408     <div class="card image" tabindex="1">
    409       <paper-ripple recenters></paper-ripple>
    410     </div>
    411 
    412   </section>
    413 
    414 </body>
    415 </html>
    416