Home | History | Annotate | Download | only in paper-ripple 
      1 <!--
      2     @license
      3     Copyright (c) 2014 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</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.js"></script>
     20   
     21   <link rel="import" href="../core-icons/core-icons.html">
     22   <link rel="import" href="paper-ripple.html">
     23   <link rel="import" href="../font-roboto/roboto.html">
     24   <link rel="import" href="../core-icon/core-icon.html">
     25   
     26   <style shim-shadowdom>
     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 > core-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 > core-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 > core-icon::shadow path {
    115       fill: #db4437;
    116     }
    117     
    118     .icon-button.red > paper-ripple {
    119       color: #db4437;
    120     }
    121     
    122     .icon-button.blue > core-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 > core-icon {
    162       margin: 16px;
    163     }
    164     
    165     .fab > core-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 unresolved>
    245 
    246   <section>
    247   
    248     <div class="button raised">
    249       <div class="center" fit>SUBMIT</div>
    250       <paper-ripple fit></paper-ripple>
    251     </div>
    252     
    253     <div class="button raised grey">
    254       <div class="center" fit>CANCEL</div>
    255       <paper-ripple fit></paper-ripple>
    256     </div>
    257     
    258     <div class="button raised blue">
    259       <div class="center" fit>COMPOSE</div>
    260       <paper-ripple fit></paper-ripple>
    261     </div>
    262     
    263     <div class="button raised green">
    264       <div class="center" fit>OK</div>
    265       <paper-ripple fit></paper-ripple>
    266     </div>
    267     
    268   </section>
    269   
    270   <section>
    271     
    272     <div class="button raised grey narrow">
    273       <div class="center" fit>+1</div>
    274       <paper-ripple fit></paper-ripple>
    275     </div>
    276     
    277     <div class="button raised grey narrow label-blue">
    278       <div class="center" fit>+1</div>
    279       <paper-ripple fit></paper-ripple>
    280     </div>
    281     
    282     <div class="button raised grey narrow label-red">
    283       <div class="center" fit>+1</div>
    284       <paper-ripple fit></paper-ripple>
    285     </div>
    286     
    287   </section>
    288   
    289   <section>
    290     
    291     <div class="icon-button">
    292       <core-icon icon="menu"></core-icon>
    293       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    294     </div>
    295     
    296     <div class="icon-button">
    297       <core-icon icon="more-vert"></core-icon>
    298       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    299     </div>
    300     
    301     <div class="icon-button red">
    302       <core-icon icon="delete"></core-icon>
    303       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    304     </div>
    305     
    306     <div class="icon-button blue">
    307       <core-icon icon="account-box"></core-icon>
    308       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    309     </div>
    310     
    311   </section>
    312   
    313   <section>
    314   
    315     <div class="fab red">
    316       <core-icon icon="add"></core-icon>
    317       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    318     </div>
    319     
    320     <div class="fab blue">
    321       <core-icon icon="mail"></core-icon>
    322       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    323     </div>
    324     
    325     <div class="fab green">
    326       <core-icon icon="create"></core-icon>
    327       <paper-ripple class="circle recenteringTouch" fit></paper-ripple>
    328     </div>
    329   
    330   </section>
    331   
    332   <section>
    333   
    334     <div class="menu">
    335     
    336       <div class="item">
    337         <div class="label" fit>Mark as unread</div>
    338         <paper-ripple fit></paper-ripple>
    339       </div>
    340       <div class="item">
    341         <div class="label" fit>Mark as important</div>
    342         <paper-ripple fit></paper-ripple>
    343       </div>
    344       <div class="item">
    345         <div class="label" fit>Add to Tasks</div>
    346         <paper-ripple fit></paper-ripple>
    347       </div>
    348       <div class="item">
    349         <div class="label" fit>Create event</div>
    350         <paper-ripple fit></paper-ripple>
    351       </div>
    352       
    353     </div>
    354     
    355     <div class="menu blue">
    356     
    357       <div class="item">
    358         <div class="label" fit>Import</div>
    359         <paper-ripple fit></paper-ripple>
    360       </div>
    361       <div class="item">
    362         <div class="label" fit>Export</div>
    363         <paper-ripple fit></paper-ripple>
    364       </div>
    365       <div class="item">
    366         <div class="label" fit>Print</div>
    367         <paper-ripple fit></paper-ripple>
    368       </div>
    369       <div class="item">
    370         <div class="label" fit>Restore contacts</div>
    371         <paper-ripple fit></paper-ripple>
    372       </div>
    373       
    374     </div>
    375   
    376   </section>
    377   
    378   <section>
    379   
    380     <div class="dialog">
    381     
    382       <div class="content">
    383         <div class="title">Permission</div><br>
    384         <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>
    385       </div>
    386     
    387       <div class="button label-blue">
    388         <div class="center" fit>ACCEPT</div>
    389         <paper-ripple fit></paper-ripple>
    390       </div>
    391       
    392       <div class="button">
    393         <div class="center" fit>DECLINE</div>
    394         <paper-ripple fit></paper-ripple>
    395       </div>
    396     
    397     </div>
    398   
    399     <div class="card">
    400     
    401       <paper-ripple class="recenteringTouch" fit></paper-ripple>
    402     
    403     </div>
    404     
    405     <div class="card image">
    406     
    407       <paper-ripple class="recenteringTouch" fit></paper-ripple>
    408     
    409     </div>
    410   
    411   </section>
    412   
    413 </body>
    414 </html>
    415