RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/core-style/demo.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>core-style</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="elements.html">
+  <link rel="import" href="my-theme.html">
+</head>
+<body unresolved fullbleed vertical layout>
+  <core-style ref="main"></core-style>
+  <template is="auto-binding">
+    <my-toolbar>
+      <span flex>core-style</span>
+      <input type="color" value="{{g.theme.colorOne}}">
+      <input type="color" value="{{g.theme.colorTwo}}">
+      <input type="color" value="{{g.theme.colorThree}}">
+      <input type="range" min="1" max="8" value="{{g.columns}}">
+      <button>A button</button>
+    </my-toolbar>
+    <section flex horizontal wrap layout>
+      <template repeat="{{item in items}}">
+        <my-panel>{{item}}</my-panel>
+      </template>
+    </section>
+  </template>
+  <script>
+  (function() {
+    addEventListener('polymer-ready', function() {
+      var items = [];
+        for (var i=0; i < 100; i++) {
+          items.push(i);
+        }
+      CoreStyle.g.items = items;
+      addEventListener('template-bound', function(e) {
+        e.target.g = CoreStyle.g;
+        e.target.items = items;
+      });
+    });
+  })();
+  </script>
+</body>
+</html>

data/app/assets/components/core-style/elements.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="core-style.html">
+<core-style id="my-toolbar">
+  :host {
+    height: 54px;
+    font-size: 1.3rem;
+    background-color: steelblue;
+    color: white;
+  }
+  polyfill-next-selector {
+    content: ':host > *';
+  }
+  ::content > * {
+    margin: 8px;
+  }
+</core-style>
+<polymer-element name="my-toolbar" horizontal center layout noscript>
+  <template>
+    <core-style ref="my-toolbar"></core-style>
+    <content></content>
+  </template>
+</polymer-element>
+<core-style id="my-panel">
+  :host {
+    display: inline-block;
+    height: 200px;
+    width: calc({{ 100 / g.columns }}% - 16px);
+    font-size: 50px;
+    background: gray;
+    margin: 8px;
+  }
+</core-style>
+<script>
+  CoreStyle.g.columns = 3;
+</script>
+<polymer-element name="my-panel" vertical center center-justified layout noscript>
+  <template>
+    <core-style ref="my-panel"></core-style>
+    <content></content>
+  </template>
+</polymer-element>

data/app/assets/components/core-style/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page></core-component-page>
+</body>
+</html>

data/app/assets/components/core-style/my-theme.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="core-style.html">
+<script>
+  CoreStyle.g.theme = {
+    colorOne: '#abcdef',
+    colorTwo: '#123456',
+    colorThree: '#224433'
+  }
+</script>
+<core-style id="main">
+  body {
+    font-family: sans-serif;
+  }
+  section {
+    overflow: auto;
+  }
+  button {
+    border: 1px solid {{g.theme.colorOne | cycle(-50)}};
+    border-radius: 4px;
+    background-color: {{g.theme.colorOne}};
+    color: {{g.theme.colorTwo}};
+  }
+  button:active {
+    border: 1px solid {{g.theme.colorTwo | cycle(50)}};
+    border-radius: 4px;
+    background-color: {{g.theme.colorTwo}};
+    color: {{g.theme.colorOne}};
+  }
+  <template repeat="{{item in g.items}}">
+    my-panel:nth-of-type({{item+1}}) {
+      background-color: {{ g.theme.colorThree | cycle(item * -1) }};
+    }
+  </template>
+</core-style>
+<core-style id="my-toolbar">
+  :host {
+    border-bottom: 8px solid {{g.theme.colorOne}};
+    color: {{g.theme.colorOne | cycle(100)}};
+    background-color: {{g.theme.colorTwo}};
+  }
+</core-style>
+<core-style id="my-panel">
+  :host {
+    box-sizing: border-box;
+    background-color: {{g.theme.colorOne}};
+    border: 8px solid {{g.theme.colorOne | cycle(50)}};
+    color: {{g.theme.colorOne | cycle(-100)}};
+  }
+  :host(:nth-of-type(2n + 1)) {
+    background-color: {{g.theme.colorTwo}};
+    border: 8px solid {{g.theme.colorTwo | cycle(-50)}};
+    color: {{g.theme.colorTwo | cycle(100)}}
+  }
+</core-style>

data/app/assets/components/core-toolbar/README.md ADDED Viewed

@@ -0,0 +1,4 @@
+core-toolbar
+============
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-toolbar) for more information.

data/app/assets/components/core-toolbar/bower.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "name": "core-toolbar",
+  "private": true,
+  "dependencies": {
+    "core-icon-button": "Polymer/core-icon-button#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-toolbar/core-toolbar.css ADDED Viewed

@@ -0,0 +1,110 @@
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+:host {
+  /* technical */
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  /* size */
+  height: 64px;
+  /* typography */
+  font-size: 1.3em;
+  /* background */
+  background-color: #CFD8DC;
+}
+:host(.animate) {
+  /* transition */
+  transition: height 0.18s ease-in;
+}
+:host(.medium-tall) {
+  height: 128px;
+}
+:host(.tall) {
+  height: 192px;
+}
+.toolbar-tools {
+  position: relative;
+  height: 64px;
+  padding: 0 8px;
+  pointer-events: none;
+}
+/* narrow layout */
+:host(.narrow) {
+  height: 56px;
+}
+:host(.narrow.medium-tall) {
+  height: 112px;
+}
+:host(.narrow.tall) {
+  height: 168px;
+}
+:host(.narrow) .toolbar-tools {
+  height: 56px;
+  padding: 0;
+}
+/* middle bar */
+#middleBar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+:host(.tall, .medium-tall) #middleBar {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+}
+/* bottom bar */
+#bottomBar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+/* make elements (e.g. buttons) respond to mouse/touch events */
+polyfill-next-selector { content: '.toolbar-tools > *'; }
+::content > * {
+  pointer-events: auto;
+}
+/* elements spacing */
+polyfill-next-selector { content: '.toolbar-tools > *'; }
+::content > * {
+  margin: 0px 8px;
+}
+/* misc helpers */
+polyfill-next-selector { content: '.toolbar-tools > .fit'; }
+::content > .fit {
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  margin: 0;
+}
+polyfill-next-selector { content: ':host .indent'; }
+::content > .indent {
+  margin-left: 60px;
+}

data/app/assets/components/core-toolbar/core-toolbar.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!--
+`core-toolbar` is a horizontal bar containing elements that can be used for
+label, navigation, search and actions.
+    <core-toolbar>
+      <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
+      <div flex>Title</div>
+      <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
+    </core-toolbar>
+`core-toolbar` has a standard height, but can made be taller by setting `tall`
+class on the `core-toolbar`.  This will make the toolbar 3x the normal height.
+    <core-toolbar class="tall">
+      <core-icon-button icon="menu"></core-icon-button>
+    </core-toolbar>
+Apply `medium-tall` class to make the toolbar medium tall.  This will make the
+toolbar 2x the normal height.
+    <core-toolbar class="medium-tall">
+      <core-icon-button icon="menu"></core-icon-button>
+    </core-toolbar>
+When taller, elements can pin to either the top (default), middle or bottom.
+    <core-toolbar class="tall">
+      <core-icon-button icon="menu"></core-icon-button>
+      <div class="middle indent">Middle Title</div>
+      <div class="bottom indent">Bottom Title</div>
+    </core-toolbar>
+To make an element completely fit at the bottom of the toolbar, use `fit` along
+with `bottom`.
+    <core-toolbar class="tall">
+      <div id="progressBar" class="bottom fit"></div>
+    </core-toolbar>
+@group Polymer Core Elements
+@element core-toolbar
+@homepage github.io
+-->
+<link rel="import" href="../polymer/polymer.html">
+<polymer-element name="core-toolbar" noscript>
+<template>
+  <link rel="stylesheet" href="core-toolbar.css">
+  <div id="bottomBar" class="toolbar-tools" center horizontal layout>
+    <content select=".bottom"></content>
+  </div>
+  <div id="middleBar" class="toolbar-tools" center horizontal layout>
+    <content select=".middle"></content>
+  </div>
+  <div id="topBar" class="toolbar-tools" center horizontal layout>
+    <content></content>
+  </div>
+</template>
+</polymer-element>

data/app/assets/components/core-toolbar/demo.html ADDED Viewed

@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>core-toolbar</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="core-toolbar.html">
+  <link rel="import" href="../core-icon-button/core-icon-button.html">
+  <style shim-shadowdom>
+    body {
+      font-family: sans-serif;
+    }
+    core-toolbar {
+      background-color: #CFA0E9;
+    }
+    core-toolbar.dark-theme {
+      background-color: #7D25AC;
+      color: #f1f1f1;
+      fill: #f1f1f1;
+    }
+  </style>
+</head>
+<body unresolved>
+  <core-toolbar>
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="dark-theme">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar: dark-theme</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar: tall</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu" class="bottom"></core-icon-button>
+    <span flex class="bottom">Toolbar: tall with elements pin to the bottom</span>
+    <core-icon-button icon="refresh" class="bottom"></core-icon-button>
+    <core-icon-button icon="add" class="bottom"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="medium-tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex></span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <span class="bottom indent">Toolbar: medium-tall with label aligns to the bottom</span>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <div flex></div>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <div class="middle indent">label aligns to the middle</div>
+    <div class="bottom indent" style="color: #666; font-size: 18px;">some stuffs align to the bottom</div>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <div flex></div>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <div class="middle indent">element (e.g. progress) fits at the bottom of the toolbar</div>
+    <div class="bottom fit" style="height: 20px; background-color: #0f9d58;"></div>
+  </core-toolbar>
+</body>
+</html>