polymer-paper-rails 0.1.0

data/app/assets/components/core/transition/core-transition-overlay.css

@@ -0,0 +1,46 @@
+/* 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(.core-transition) {
+  outline: none;
+  overflow: hidden;
+  opacity: 0;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+}
+
+
+:host(.core-transition.core-opened) {
+  opacity: 1;
+  transform: none;
+  -webkit-transform: none;
+}
+
+:host(.core-transition-center) {
+  transform: scale(0.5);
+  -webkit-transform: scale(0.5);
+}
+
+:host(.core-transition-top) {
+  transform: translateY(-200%);
+  -webkit-transform: translateY(-200%);
+}
+
+:host(.core-transition-bottom) {
+  transform: translateY(200%);
+  -webkit-transform: translateY(200%);
+}
+
+:host(.core-transition-left) {
+  transform: translateX(-200%);
+  -webkit-transform: translateX(-200%);
+}
+
+:host(.core-transition-right) {
+  transform: translateX(200%);
+  -webkit-transform: translateX(200%);
+}

data/app/assets/components/core/transition/core-transition.html.erb

@@ -0,0 +1,44 @@
+<!--
+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_import_tag "core/meta/core-meta" %>
+
+<polymer-element name="core-transition" extends="core-meta">
+
+  <script>
+    Polymer('core-transition', {
+
+      type: 'transition',
+
+      go: function(node, state) {
+        this.complete(node);
+      },
+
+      setup: function(node) {
+      },
+
+      teardown: function(node) {
+      },
+
+      complete: function(node) {
+        this.fire('core-transitionend', null, node);
+      },
+
+      listenOnce: function(node, event, fn, args) {
+        var self = this;
+        var listener = function() {
+          fn.apply(self, args);
+          node.removeEventListener(event, listener, false);
+        }
+        node.addEventListener(event, listener, false);
+      }
+
+    });
+  </script>
+</polymer-element>

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

@@ -0,0 +1,115 @@
+:host {
+  display: inline-block;
+  position: relative;
+  border: 0;
+  background: transparent;
+  text-align: center;
+  font: inherit;
+  text-transform: uppercase;
+  outline: none;
+  border-radius: 3px;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+:host(.hover:hover) {
+  background: #e4e4e4;
+}
+
+:host([raisedButton]) {
+  background: #dfdfdf;
+}
+
+:host([raisedButton].hover:hover) {
+  background: #d6d6d6;
+}
+
+:host([disabled]) {
+  background: #eaeaea !important;
+  color: #a8a8a8 !important;
+  cursor: auto;
+}
+
+#shadow-container {
+  border-radius: inherit;
+}
+
+#clip {
+  position: relative;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+/*
+#focusBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  border-radius: inherit;
+  background: #c3c3c3;
+  -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:host([focused]) #focusBg {
+  -webkit-transition: none;
+  transition: none;
+  -webkit-animation: focus-fade 0.7s infinite alternate;
+  animation: focus-fade 0.7s infinite alternate;
+}
+
+@-webkit-keyframes focus-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes focus-fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+*/
+
+#ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  color: #d1d1d1;
+  pointer-events: none;
+}
+
+:host([raisedButton]) #ripple {
+  color: #cecece;
+}
+
+#ripple::shadow canvas {
+  top: 0;
+  left: 0;
+}
+
+#content {
+  /* needed to position the ink behind the content */
+  position: relative;
+}
+
+#icon {
+  margin: 8px;
+}
+
+#content > span {
+  display: inline-block;
+  margin: 0.5em;
+}

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

@@ -0,0 +1,210 @@
+<!--
+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
+-->
+
+<!--
+@group Paper Elements
+
+`paper-button` is a button containing text or an image. When the user touches
+the button, a ripple effect emanates from the point of contact.
+
+A `paper-button` may be flat or raised. A raised button behaves like a piece
+of paper resting on another sheet, and lifts up upon press. Flat buttons do
+not raise up. Add the `raisedButton` attribute to make a raised button.
+
+Example:
+
+    <paper-button label="flat button"></paper-button>
+    <paper-button label="raised button" raisedButton></paper-button>
+
+A button should be styled with a background color, text color, ripple color
+and hover color.
+
+To style the background, text and hover color, apply the `background` and
+`color` CSS properties to the button. To style the ripple color, apply the
+`color` CSS property to the `#ripple` element in the button's shadow root:
+
+    /* Style #my-button blue with white text and darker blue ink. */
+    #my-button {
+        background: #4285f4;
+        color: #fff;
+    }
+
+    #my-button:hover {
+        background: #2a56c6;
+    }
+
+    #my-button::shadow #ripple {
+        color: #2a56c6;
+    }
+
+@element paper-button
+@extends paper-focusable
+-->
+
+<%= html_import_tag 'core/icon/core-icon' %>
+<%= html_import_tag 'paper-focusable/paper-focusable' %>
+<%= html_import_tag 'paper-ripple/paper-ripple' %>
+<%= html_import_tag 'paper-shadow/paper-shadow' %>
+
+<polymer-element name="paper-button" extends="paper-focusable" attributes="label raisedButton iconSrc icon"
+role="button">
+
+  <template>
+
+    <%= stylesheet_link_tag 'paper-button/paper-button'%>
+
+    <template if="{{raisedButton}}">
+      <div fit id="shadow-container">
+        <paper-shadow id="shadow" z="{{z}}" animated></paper-shadow>
+      </div>
+    </template>
+
+    <div id="clip">
+      <!-- <div id="focusBg"></div> -->
+      <paper-ripple id="ripple"></paper-ripple>
+      <div id="content">
+        <template if="{{iconSrc || icon}}">
+          <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
+        </template>
+        <template if="{{label}}">
+          <span>{{label}}</span>
+        </template>
+      </div>
+    </div>
+
+  </template>
+
+  <script>
+    Polymer('paper-button', {
+
+      publish: {
+
+        /**
+         * The label of the button.
+         *
+         * @attribute label
+         * @type string
+         * @default ''
+         */
+        label: '',
+
+        /**
+         * If true, the button will be styled as a "raised" button.
+         *
+         * @attribute raisedButton
+         * @type boolean
+         * @default false
+         */
+        raisedButton: {value: false, reflect: true},
+
+        /**
+         * (optional) The URL of an image for an icon to use in the button.
+         * Should not use `icon` property if you are using this property.
+         *
+         * @attribute iconSrc
+         * @type string
+         * @default ''
+         */
+         iconSrc: {value: ''},
+
+         /**
+          * (optional) Specifies the icon name or index in the set of icons
+          * available in the icon set. If using this property, load the icon
+          * set separately where the icon is used. Should not use `src`
+          * if you are using this property.
+          *
+          * @attribute icon
+          * @type string
+          * @default ''
+          */
+         icon: {value: ''}
+
+      },
+
+      z: 1,
+
+      attached: function() {
+        if (this.textContent && !this.textContent.match(/\s+/)) {
+          console.warn('Using textContent to label the button is deprecated. Use the "label" property instead');
+          this.label = this.textContent;
+        }
+      },
+
+      activeChanged: function() {
+        this.super();
+
+        if (this.active) {
+          // FIXME: remove when paper-ripple can have a default 'down' state.
+          if (!this.lastEvent) {
+            var rect = this.getBoundingClientRect();
+            this.lastEvent = {
+              x: rect.left + rect.width / 2,
+              y: rect.top + rect.height / 2
+            }
+          }
+          this.$.ripple.downAction(this.lastEvent);
+        } else {
+          this.$.ripple.upAction();
+        }
+        this.adjustZ();
+      },
+
+      focusedChanged: function() {
+        this.super();
+        this.adjustZ();
+      },
+
+      disabledChanged: function() {
+        this.super();
+        this.adjustZ();
+      },
+
+      // waitForSpillCompleted: function(callback) {
+      //   this.async(callback, null, (this.$.ink.spillCompleted ? 0 : this.duration));
+      // },
+
+      // resetInk: function() {
+      //   this.active = false;
+      //   this.$.ink.reset();
+      // },
+
+      insideButton: function(x, y) {
+        var rect = this.getBoundingClientRect();
+        return (rect.left <= x) && (x <= rect.right) && (rect.top <= y) && (y <= rect.bottom);
+      },
+
+      adjustZ: function() {
+        if (this.focused) {
+          this.classList.add('paper-shadow-animate-z-1-z-2');
+        } else {
+          this.classList.remove('paper-shadow-animate-z-1-z-2');
+
+          if (this.active) {
+            this.z = 2;
+          } else if (this.disabled) {
+            this.z = 0;
+          } else {
+            this.z = 1;
+          }
+
+        }
+      },
+
+      downAction: function(e) {
+        this.super(e);
+        this.lastEvent = e;
+      },
+
+      labelChanged: function() {
+        this.setAttribute('aria-label', this.label);
+      }
+
+    });
+  </script>
+</polymer-element>

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

@@ -0,0 +1,262 @@
+/*
+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;
+}
+
+#checkboxContainer {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+#checkboxContainer.labeled {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#ink {
+  position: absolute;
+  top: -29px;
+  left: -29px;
+  width: 76px;
+  height: 76px;
+  color: #5a5f5a;
+}
+
+#ink[checked] {
+  color: #0f9d58;
+}
+
+#checkbox {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0px;
+  left: 0px;
+  width: 18px;
+  height: 18px;
+  border: solid 2px;
+  border-color: #5a5a5a;
+  pointer-events: none;
+}
+
+/* checkbox checked animations */
+#checkbox.checked.box {
+  border: solid 2px;
+  -webkit-animation: box-shrink 140ms ease-out forwards;
+  animation: box-shrink 140ms ease-out forwards;
+}
+
+@-webkit-keyframes box-shrink {
+  0% {
+    -webkit-transform: rotate(0deg);
+    top: 0px;
+    left: 0px;
+    width: 18px;
+    height: 18px;
+  }
+  100% {
+    -webkit-transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+}
+
+@keyframes box-shrink {
+  0% {
+    transform: rotate(0deg);
+    top: 0px;
+    left: 0px;
+    width: 18px;
+    height: 18px;
+  }
+  100% {
+    transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+}
+
+#checkbox.checked.checkmark {
+  border-left: none;
+  border-top: none;
+  -webkit-animation: checkmark-expand 140ms ease-out forwards;
+  animation: checkmark-expand 140ms ease-out forwards;
+}
+
+@-webkit-keyframes checkmark-expand {
+  0% {
+    -webkit-transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+  100% {
+    -webkit-transform: rotate(45deg);
+    top: -4px;
+    left: 6px;
+    width: 10px;
+    height: 21px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+  }
+}
+
+@keyframes checkmark-expand {
+  0% {
+    transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+  100% {
+    transform: rotate(45deg);
+    top: -4px;
+    left: 6px;
+    width: 10px;
+    height: 21px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+  }
+}
+
+#checkbox.checked {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  top: -4px;
+  left: 6px;
+  width: 10px;
+  height: 21px;
+  border-top: none;
+  border-left: none;
+  border-right-width: 2px;
+  border-bottom-width: 2px;
+  border-color: #0f9d58;
+}
+
+/* checkbox unchecked animations */
+#checkbox.unchecked.checkmark {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border-left: none;
+  border-top: none;
+  -webkit-animation: checkmark-shrink 140ms ease-out forwards;
+  animation: checkmark-shrink 140ms ease-out forwards;
+}
+
+@-webkit-keyframes checkmark-shrink {
+  0% {
+    top: -4px;
+    left: 6px;
+    width: 10px;
+    height: 21px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+  }
+  100% {
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+}
+
+@keyframes checkmark-shrink {
+  0% {
+    top: -4px;
+    left: 6px;
+    width: 10px;
+    height: 21px;
+    border-right-width: 2px;
+    border-bottom-width: 2px;
+  }
+  100% {
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+}
+
+#checkbox.unchecked.box {
+  -webkit-animation: box-expand 140ms ease-out forwards;
+  animation: box-expand 140ms ease-out forwards;
+}
+
+@-webkit-keyframes box-expand {
+  0% {
+    -webkit-transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+  100% {
+    -webkit-transform: rotate(0deg);
+    top: 0px;
+    left: 0px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+@keyframes box-expand {
+  0% {
+    transform: rotate(45deg);
+    top: 13px;
+    left: 5px;
+    width: 4px;
+    height: 4px;
+  }
+  100% {
+    transform: rotate(0deg);
+    top: 0px;
+    left: 0px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+/* label */
+#checkboxLabel {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 8px;
+  white-space: normal;
+  pointer-events: none;
+}
+
+#checkboxLabel[hidden] {
+  display: none;
+}
+
+/* disabled state */
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) #checkbox {
+  border-color: #eaeaea !important;
+}