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

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