polymer-paper-rails 0.1.0

data/app/assets/components/paper-menu-button/paper-menu-button.css

@@ -0,0 +1,86 @@
+/*
+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.
+*/
+
+:host {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+  background-image: none;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+:host([disabled]) {
+  cursor: auto;
+}
+
+core-icon {
+  position: relative;
+}
+
+core-icon::shadow svg {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+}
+
+:host(:hover) core-icon::shadow svg {
+  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+}
+
+:host([disabled]:hover) core-icon::shadow svg {
+  transform: none;
+  -webkit-transform: none;
+}
+
+:host([disabled]) core-icon::shadow path {
+  fill: #c9c9c9;
+}
+
+#overlay {
+  display: block;
+	position: fixed;
+  border-radius: 3px;
+}
+
+.paper-menu-button-overlay-ink {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 40px;
+	height: 40px;
+	border-radius: 20px;
+  background: #fff;
+  opacity: 0;
+  transform: scale(0);
+  -webkit-transform: scale(0);
+}
+
+:host([halign="right"]) .paper-menu-button-overlay-ink {
+	left: auto;
+	right: 0;
+}
+
+.paper-menu-button-overlay-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	border-radius: 3px;
+  background: #fff;
+  opacity: 0;
+}
+
+#menu {
+	position: relative;
+  margin: 0;
+}

data/app/assets/components/paper-menu-button/paper-menu-button.html.erb

@@ -0,0 +1,128 @@
+<!--
+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
+-->
+<!--
+A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.
+
+Example:
+
+    <paper-menu-button icon="menu">
+      <div>Menu Item 1</div>
+      <div>Menu Item 2</div>
+      <div>Menu Item 3</div>
+    </paper-menu-button>
+
+ @group Paper Elements
+ @element paper-menu-button
+ @extends paper-focusable
+-->
+
+<%= html_import_tag "core/icon/core-icon" %>
+<%= html_import_tag "core/menu/core-menu" %>
+<%= html_import_tag "paper-focusable/paper-focusable" %>
+<%= html_import_tag "paper-shadow/paper-shadow" %>
+<%= html_import_tag "paper-menu-button/paper-menu-button-overlay" %>
+<%= html_import_tag "paper-menu-button/paper-menu-button-transition" %>
+
+<polymer-element name="paper-menu-button-overlay-container" noscript>
+<template>
+  <content></content>
+</template>
+</polymer-element>
+
+<polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
+  <template>
+    <%= stylesheet_link_tag "paper-menu-button/paper-menu-button" %>
+    <paper-menu-button-overlay target="{{$.overlay}}" relatedTarget="{{}}" halign="{{halign}}" valign="{{valign}}" opened="{{opened}}" transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}"></paper-menu-button-overlay>
+    <paper-menu-button-overlay-container id="overlay">
+      <paper-shadow target="{{$.overlayBg}}" z="0" hasPosition></paper-shadow>
+      <div class="paper-menu-button-overlay-ink"></div>
+      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>
+      <core-menu id="menu">
+        <content></content>
+      </core-menu>
+    </paper-menu-button-overlay-container>
+    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>
+  </template>
+  <script>
+    Polymer('paper-menu-button', {
+
+      publish: {
+
+        /**
+         * If true, this menu is currently visible.
+         *
+         * @attribute opened
+         * @type boolean
+         * @default false
+         */
+        opened: { value: false, reflect: true },
+
+        /**
+         * The horizontal alignment of the pulldown menu relative to the button.
+         *
+         * @attribute halign
+         * @type 'left' | 'right'
+         * @default 'left'
+         */
+        halign: { value: 'left', reflect: true },
+
+        /**
+         * The vertical alignment of the pulldown menu relative to the button.
+         *
+         * @attribute valign
+         * @type 'bottom' | 'top'
+         * @default 'top'
+         */
+        valign: {value: 'top', reflect: true}
+      },
+
+      /**
+       * The URL of an image for the icon.  Should not use `icon` property
+       * if you are using this property.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+
+      /**
+       * Specifies the icon name or index in the set of icons available in
+       * the icon set.  Should not use `src` property if you are using this
+       * property.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: '',
+
+      slow: false,
+
+      tapAction: function() {
+        if (this.disabled) {
+          return;
+        }
+
+        this.super();
+        this.toggle();
+      },
+
+      /**
+       * Toggle the opened state of the menu.
+       *
+       * @method toggle
+       */
+      toggle: function() {
+        this.opened = !this.opened;
+      }
+
+    });
+  </script>
+</polymer-element>

data/app/assets/components/paper-progress/paper-progress.css

@@ -0,0 +1,35 @@
+/*
+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 {
+  display: inline-block;
+  width: 200px;
+  height: 4px;
+}
+
+#progressContainer {
+  position: relative;
+  height: 100%;
+  background-color: #c8c8c8;
+}
+
+#activeProgress, #secondaryProgress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+#activeProgress {
+  background-color: #0f9d58;
+}
+
+#secondaryProgress {
+  background-color: #87ceac;
+}

data/app/assets/components/paper-progress/paper-progress.html.erb

@@ -0,0 +1,98 @@
+<!--
+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
+-->
+
+<!--
+The progress bars are for situations where the percentage completed can be
+determined. They give users a quick sense of how much longer an operation
+will take.
+
+Example:
+
+    <paper-progress value="10"></paper-progress>
+
+There is also a secondary progress which is useful for displaying intermediate
+progress, such as the buffer level during a streaming playback progress bar.
+
+Example:
+
+    <paper-progress value="10" secondaryProgesss="30"></paper-progress>
+
+Styling progress bar:
+
+To change the active progress bar color:
+
+    paper-progress::shadow #activeProgress {
+      background-color: #e91e63;
+    }
+
+To change the secondary progress bar color:
+
+    paper-progress::shadow #secondaryProgress {
+      background-color: #f8bbd0;
+    }
+
+To change the progress bar background color:
+
+    paper-progress::shadow #progressContainer {
+      background-color: #64ffda;
+    }
+
+@group Paper Elements
+@element paper-progress
+@extends core-range
+@homepage github.io
+-->
+
+<%= html_import_tag "core/range/core-range" %>
+
+<polymer-element name="paper-progress" extends="core-range" attributes="secondaryProgress">
+
+  <template>
+
+    <%= stylesheet_link_tag "paper-progress/paper-progress" %>
+
+    <div id="progressContainer" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="{{min}}" aria-valuemax="{{max}}">
+
+      <div id="secondaryProgress" style="width: {{secondaryRatio}}%;"></div>
+      <div id="activeProgress" style="width: {{ratio}}%;"></div>
+
+    </div>
+
+  </template>
+
+  <script>
+
+    Polymer('paper-progress', {
+
+      /**
+       * The number that represents the current secondary progress.
+       *
+       * @attribute secondaryProgress
+       * @type number
+       * @default 0
+       */
+      secondaryProgress: 0,
+
+      step: 0,
+
+      observe: {
+        'value secondaryProgress min max': 'update'
+      },
+
+      update: function() {
+        this.super();
+        this.secondaryProgress = this.clampValue(this.secondaryProgress);
+        this.secondaryRatio = this.calcRatio(this.secondaryProgress) * 100;
+      }
+
+    });
+
+  </script>
+
+</polymer-element>

data/app/assets/components/paper-radio-button/paper-radio-button.css

@@ -0,0 +1,98 @@
+/*
+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 {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+#radioContainer {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+#radioContainer.labeled {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#ink {
+  position: absolute;
+  top: -17px;
+  left: -17px;
+  width: 50px;
+  height: 50px;
+  color: #5a5a5a;
+}
+
+#ink[checked] {
+  color: #0f9d58;
+}
+
+#offRadio {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: solid 2px;
+  border-color: #5a5a5a;
+}
+
+#onRadio {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #0f9d58;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+  transition: -webkit-transform ease 0.28s;
+  transition: transform ease 0.28s;
+}
+
+#onRadio.fill {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+#radioLabel {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  white-space: normal;
+  pointer-events: none;
+}
+
+#radioLabel[hidden] {
+  display: none;
+}
+
+/* disabled state */
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) #offRadio {
+  border-color: #eaeaea !important;
+}
+
+:host([disabled]) #onRadio {
+  background-color: #eaeaea !important;
+}