third_party/polymer/components-chromium/core-pages/demo.html

   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
  14   <meta charset="utf-8">
  15   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16
  17   <title>core-pages</title>
  18
  19   <script src="../webcomponentsjs/webcomponents.js"></script>
  20
  21   <link rel="import" href="core-pages.html">
  22
  23   <style>
  24
  25     html, body {
  26       height: 100%;
  27     }
  28
  29     body {
  30       font-family: sans-serif;
  31     }
  32
  33     core-pages {
  34       width: 300px;
  35       height: 300px;
  36       border: 1px solid black;
  37       -webkit-user-select: none;
  38       border-radius: 5px;
  39     }
  40
  41     core-pages > div {
  42       display: flex;
  43       justify-content: center;
  44       align-items: center;
  45       border-radius: inherit;
  46     }
  47
  48     core-pages.fancy {
  49       border: none;
  50       margin-left: 2em;
  51     }
  52
  53     core-pages.fancy > div {
  54       opacity: 0;
  55       -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
  56       transform: translate3d(-100px, 0, 0) scale(0.9);
  57       transition: all 1s cubic-bezier(.03,.56,.7,.98);
  58       color: white;
  59     }
  60
  61     core-pages.fancy > .one {
  62       background-color: red;
  63     }
  64
  65     core-pages.fancy > .two {
  66       background-color: green;
  67     }
  68
  69     core-pages.fancy > .three {
  70       background-color: blue;
  71     }
  72
  73     core-pages.fancy > .four {
  74       background-color: purple;
  75     }
  76
  77     core-pages.fancy > .five {
  78       background-color: black;
  79     }
  80
  81     core-pages.fancy .core-selected + div {
  82       -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
  83       transform: translate3d(100px, 0, 0) scale(1);
  84     }
  85
  86     core-pages.fancy .core-selected {
  87       opacity: 1;
  88       -webkit-transform: translateX(0);
  89       transform: translateX(0);
  90     }
  91
  92     core-pages.fancy div.begin {
  93       -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
  94       transform: translate3d(100px, 0, 0) scale(0.9);
  95     }
  96
  97   </style>
  98
  99 </head>
 100 <body unresolved fullbleed horizontal center center-justified layout>
 101
 102   <core-pages id="first" selected="0">
 103     <div>One</div>
 104     <div>Two</div>
 105     <div>Three</div>
 106     <div>Four</div>
 107     <div>Five</div>
 108   </core-pages>
 109
 110   <core-pages class="fancy" selected="0">
 111     <div class="one">One</div>
 112     <div class="two">Two</div>
 113     <div class="three">Three</div>
 114     <div class="four">Four</div>
 115     <div class="five">Five</div>
 116   </core-pages>
 117
 118   <script>
 119     document.querySelector('#first').onclick = function(e) {
 120       this.selected = (this.selected + 1) % this.items.length;
 121     };
 122
 123     document.querySelector('core-pages.fancy').onclick = function(e) {
 124       this.selected = (this.selected + 1) % this.items.length;
 125       this.async(function() {
 126         if (this.selectedIndex == 0) {
 127           this.selectedItem.classList.remove('begin');
 128         } else if (this.selectedIndex == this.items.length - 1) {
 129           this.items[0].classList.add('begin');
 130         }
 131       });
 132     };
 133   </script>
 134
 135 </body>
 136 </html>