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