Advertisement
Guest User

Untitled

a guest
May 25th, 2015
235
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.63 KB | None | 0 0
  1. <link rel="import" href="../topeka-elements/category-icons.html">
  2. <link rel="import" href="../core-icon/core-icon.html">
  3. <link rel="import" href="../paper-button/paper-button.html">
  4. <link rel="import" href="../paper-input/paper-input.html">
  5. <link rel="import" href="../topeka-elements/topeka-datasource.html">
  6. <link rel="import" href="../topeka-elements/theme.html">
  7. <link rel="import" href="../topeka-elements/topeka-resources.html">
  8. <link rel="import" href="../topeka-elements/topeka-app.html">
  9.  
  10. <polymer-element name="my-element">
  11.  
  12. <template>
  13. <style>
  14. :host {
  15. position: absolute;
  16. width: 100%;
  17. height: 100%;
  18. box-sizing: border-box;
  19. }
  20. #section {
  21. box-sizing: border-box;
  22. width: 420px;
  23. height: 582px;
  24. left: 510px;
  25. top: 90px;
  26. position: absolute;
  27. }
  28. #toolbar {
  29. box-sizing: border-box;
  30. height: 15%;
  31. position: relative;
  32. color: rgb(255, 255, 255);
  33. font-size: 48px;
  34. background-color: rgb(0, 187, 211);
  35. }
  36. #tiles-container {
  37. padding-left: 3px;
  38. height: 85%;
  39. }
  40. #tile-profile {
  41. box-sizing: border-box;
  42. float: left;
  43. height: 30%;
  44. width: 48%;
  45. margin: 3px;
  46. background-color: rgb(204, 204, 204);
  47. }
  48. #core_icon {
  49. height: 128px;
  50. width: 128px;
  51. }
  52. #div {
  53. padding: 8px;
  54. color: rgb(255, 255, 255);
  55. background-color: rgb(170, 170, 170);
  56. }
  57. #tile-general {
  58. box-sizing: border-box;
  59. float: left;
  60. height: 30%;
  61. width: 48%;
  62. margin: 3px;
  63. }
  64. #section2 {
  65. background-color: rgb(255, 255, 141);
  66. }
  67. #core_icon1 {
  68. height: 128px;
  69. width: 128px;
  70. }
  71. #div1 {
  72. padding: 8px;
  73. color: rgb(255, 255, 255);
  74. background-color: rgb(255, 235, 59);
  75. }
  76. #div2 {
  77. box-sizing: border-box;
  78. float: left;
  79. height: 30%;
  80. width: 48%;
  81. margin: 3px;
  82. background-color: rgb(185, 246, 202);
  83. }
  84. #core_icon2 {
  85. height: 128px;
  86. width: 128px;
  87. }
  88. #div3 {
  89. padding: 8px;
  90. color: rgb(255, 255, 255);
  91. background-color: rgb(15, 157, 88);
  92. }
  93. #div4 {
  94. box-sizing: border-box;
  95. float: left;
  96. height: 30%;
  97. width: 48%;
  98. margin: 3px;
  99. background-color: rgb(255, 138, 128);
  100. }
  101. #core_icon3 {
  102. height: 128px;
  103. width: 128px;
  104. }
  105. #div5 {
  106. padding: 8px;
  107. color: rgb(255, 255, 255);
  108. background-color: rgb(219, 68, 55);
  109. }
  110. #div6 {
  111. box-sizing: border-box;
  112. float: left;
  113. height: 30%;
  114. width: 48%;
  115. margin: 3px;
  116. background-color: rgb(130, 177, 255);
  117. }
  118. #core_icon4 {
  119. height: 128px;
  120. width: 128px;
  121. }
  122. #div7 {
  123. padding: 8px;
  124. color: rgb(255, 255, 255);
  125. background-color: rgb(66, 133, 244);
  126. }
  127. #div8 {
  128. box-sizing: border-box;
  129. float: left;
  130. height: 30%;
  131. width: 48%;
  132. margin: 3px;
  133. background-color: rgb(179, 136, 255);
  134. }
  135. #core_icon5 {
  136. height: 128px;
  137. width: 128px;
  138. }
  139. #div9 {
  140. padding: 8px;
  141. color: rgb(255, 255, 255);
  142. background-color: rgb(126, 87, 194);
  143. }
  144. #paper_button {
  145. left: 1210px;
  146. top: 300px;
  147. position: absolute;
  148. }
  149. #paper_input {
  150. left: 1160px;
  151. top: 450px;
  152. position: absolute;
  153. }
  154. #topeka_datasource {
  155. left: 1150px;
  156. top: 630px;
  157. position: absolute;
  158. }
  159. #topeka_datasource1 {
  160. left: 1170px;
  161. top: 650px;
  162. position: absolute;
  163. }
  164. #div10 {
  165. height: 100%;
  166. width: 100%;
  167. overflow: hidden;
  168. left: 1040px;
  169. top: 560px;
  170. position: absolute;
  171. }
  172. #topeka_datasource2 {
  173. left: 1130px;
  174. top: 580px;
  175. position: absolute;
  176. }
  177. </style>
  178. <section id="section" layout vertical designmeta="quiz-demo-grid">
  179. <div id="toolbar" class="tall-toolbar categories" horizontal center-justified center layout>
  180. <span id="span">Quiz Demo</span>
  181. </div>
  182. <div id="tiles-container" class="tiles-container" layout wrap horizontal around-justified center relative>
  183. <div id="tile-profile" class="tile" layout vertical relative>
  184. <section id="section1" class="tile-top" flex layout horizontal center center-justified>
  185. <core-icon icon="category-icons:food" id="core_icon" designmeta="topeka-icon"></core-icon>
  186. </section>
  187. <div id="div" class="tile-bottom">
  188. Category 1
  189. </div>
  190. </div>
  191. <div id="tile-general" class="tile" layout vertical relative>
  192. <section id="section2" class="tile-top" flex layout horizontal center center-justified hero hero-id="top">
  193. <core-icon icon="category-icons:knowledge" id="core_icon1" cross-fade-delayed designmeta="topeka-icon"></core-icon>
  194. </section>
  195. <div id="div1" class="tile-bottom" hero hero-id="bottom">
  196. <span id="span1">General Knowledge</span>
  197. </div>
  198. </div>
  199. <div id="div2" class="tile" layout vertical relative>
  200. <section id="section3" class="tile-top" flex layout horizontal center center-justified>
  201. <core-icon icon="category-icons:history" id="core_icon2" designmeta="topeka-icon"></core-icon>
  202. </section>
  203. <div id="div3" class="tile-bottom">
  204. Category 2
  205. </div>
  206. </div>
  207. <div id="div4" class="tile" layout vertical relative>
  208. <section id="section4" class="tile-top" flex layout horizontal center center-justified>
  209. <core-icon icon="category-icons:geography" id="core_icon3" designmeta="topeka-icon"></core-icon>
  210. </section>
  211. <div id="div5" class="tile-bottom">
  212. Category 3
  213. </div>
  214. </div>
  215. <div id="div6" class="tile" layout vertical relative>
  216. <section id="section5" class="tile-top" flex layout horizontal center center-justified>
  217. <core-icon icon="category-icons:entertainment" id="core_icon4" designmeta="topeka-icon"></core-icon>
  218. </section>
  219. <div id="div7" class="tile-bottom">
  220. Category 4
  221. </div>
  222. </div>
  223. <div id="div8" class="tile" layout vertical relative>
  224. <section id="section6" class="tile-top" flex layout horizontal center center-justified>
  225. <core-icon icon="category-icons:music" id="core_icon5" designmeta="topeka-icon"></core-icon>
  226. </section>
  227. <div id="div9" class="tile-bottom">
  228. Category 5
  229. </div>
  230. </div>
  231. </div>
  232. </section>
  233. <paper-button id="paper_button">button</paper-button>
  234. <paper-input label="Type something..." id="paper_input"></paper-input>
  235. <topeka-datasource url="../topeka-elements/categories.json" id="topeka_datasource" hidden></topeka-datasource>
  236. <topeka-datasource url="../topeka-elements/categories.json" id="topeka_datasource1" hidden></topeka-datasource>
  237. <div id="div10">
  238. <topeka-app selected="profile" connected="{{ $.datasource.connected }}" disableleaderboard id="app" categories="[]" fit vertical layout></topeka-app>
  239. <topeka-datasource url="../topeka-elements/categories.json" id="datasource" hidden></topeka-datasource>
  240. </div>
  241. <topeka-datasource url="../topeka-elements/categories.json" id="topeka_datasource2" hidden></topeka-datasource>
  242. </template>
  243.  
  244. <script>
  245.  
  246. Polymer({
  247.  
  248. });
  249.  
  250. </script>
  251.  
  252. </polymer-element>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement