RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/paper-button/test/paper-button.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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>
+  <meta charset="UTF-8">
+  <title>paper-button basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <link rel="import" href="../paper-button.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+<body>
+  <test-fixture id="TrivialButton">
+    <template>
+      <paper-button>Button</paper-button>
+    </template>
+  </test-fixture>
+  <script>
+    suite('<paper-button>', function() {
+      var button;
+      setup(function() {
+        button = fixture('TrivialButton');
+      });
+      test('can be raised imperatively', function(done) {
+        button.raised = true;
+        expect(button.hasAttribute('raised')).to.be.eql(true);
+        Polymer.Base.async(function() {
+          try {
+            expect(button._elevation).to.be.eql(1);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        }, 1);
+      });
+      test('has aria role "button"', function() {
+        expect(button.getAttribute('role')).to.be.eql('button');
+      });
+      test('can be disabled imperatively', function() {
+        button.disabled = true;
+        expect(button.getAttribute('aria-disabled')).to.be.eql('true');
+        expect(button.hasAttribute('disabled')).to.be.eql(true);
+      });
+      test('can be triggered with space', function(done) {
+        button.addEventListener('click', function() {
+          done();
+        });
+        MockInteractions.pressSpace(button);
+      });
+      test('can be triggered with enter', function(done) {
+        button.addEventListener('click', function() {
+          done();
+        });
+        MockInteractions.pressEnter(button);
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-checkbox/README.md ADDED Viewed

@@ -0,0 +1,31 @@
+# paper-checkbox
+`paper-checkbox` is a button that can be either checked or unchecked.  User
+can tap the checkbox to check or uncheck it.  Usually you use checkboxes
+to allow user to select multiple options from a set.  If you have a single
+ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
+instead.
+Example:
+```html
+<paper-checkbox>label</paper-checkbox>
+<paper-checkbox checked>label</paper-checkbox>
+```
+Styling a checkbox:
+```html
+<style is="custom-style">
+  paper-checkbox {
+    /* Unhecked state colors. */
+    --paper-checkbox-unchecked-color: #5a5a5a;
+    --paper-checkbox-unchecked-ink-color: #5a5a5a;
+    /* Checked state colors. */
+    --paper-checkbox-checked-color: #009688;
+    --paper-checkbox-checked-ink-color: #009688;
+  }
+</style>
+```

data/app/assets/components/paper-checkbox/bower.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "paper-checkbox",
+  "version": "1.0.2",
+  "description": "A material design checkbox",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "paper",
+    "checkbox",
+    "control"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-checkbox"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-checkbox",
+  "ignore": [],
+  "devDependencies": {
+    "web-component-tester": "*",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "dependencies": {
+    "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  }
+}

data/app/assets/components/paper-checkbox/demo/index.html ADDED Viewed

@@ -0,0 +1,94 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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>paper-checkbox demo</title>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+    <link rel="import" href="../paper-checkbox.html">
+    <style is="custom-style">
+      paper-checkbox {
+        display: block;
+        margin-bottom: 40px;
+      }
+      paper-checkbox.blue {
+        --paper-checkbox-checked-color: var(--paper-light-blue-500);
+        --paper-checkbox-checked-ink-color: var(--paper-light-blue-500);
+        --paper-checkbox-unchecked-color: var(--paper-light-blue-900);
+        --paper-checkbox-unchecked-ink-color: var(--paper-light-blue-900);
+      }
+      paper-checkbox.red {
+        --paper-checkbox-checked-color: var(--paper-red-500);
+        --paper-checkbox-checked-ink-color: var(--paper-red-500);
+        --paper-checkbox-unchecked-color: var(--paper-red-900);
+        --paper-checkbox-unchecked-ink-color: var(--paper-red-900);
+      }
+      paper-checkbox.green {
+        --paper-checkbox-checked-color: var(--paper-green-500);
+        --paper-checkbox-checked-ink-color: var(--paper-green-500);
+        --paper-checkbox-unchecked-color: var(--paper-green-900);
+        --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
+      }
+      paper-checkbox.orange {
+        --paper-checkbox-checked-color: var(--paper-orange-500);
+        --paper-checkbox-checked-ink-color: var(--paper-orange-500);
+        --paper-checkbox-unchecked-color: var(--paper-orange-900);
+        --paper-checkbox-unchecked-ink-color: var(--paper-orange-900);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="horizontal center-justified layout">
+      <div>
+        <h4>Enabled</h4>
+        <div class="horizontal-section">
+          <paper-checkbox>Oxygen</paper-checkbox>
+          <paper-checkbox>Carbon</paper-checkbox>
+          <paper-checkbox checked>Hydrogen</paper-checkbox>
+          <paper-checkbox checked>Nitrogen</paper-checkbox>
+          <paper-checkbox checked>Calcium</paper-checkbox>
+        </div>
+      </div>
+      <div>
+        <h4>Disabled</h4>
+        <div class="horizontal-section">
+          <paper-checkbox disabled>Oxygen</paper-checkbox>
+          <paper-checkbox disabled>Carbon</paper-checkbox>
+          <paper-checkbox checked disabled>Hydrogen</paper-checkbox>
+          <paper-checkbox checked disabled>Nitrogen</paper-checkbox>
+          <paper-checkbox checked disabled>Calcium</paper-checkbox>
+        </div>
+      </div>
+      <div>
+        <h4>Color</h4>
+        <div class="horizontal-section">
+          <paper-checkbox class="blue" checked>Oxygen</paper-checkbox>
+          <paper-checkbox class="red" checked>Carbon</paper-checkbox>
+          <paper-checkbox class="orange" checked>Hydrogen</paper-checkbox>
+          <paper-checkbox class="green" checked>Nitrogen</paper-checkbox>
+          <paper-checkbox class="blue" checked>Calcium</paper-checkbox>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/app/assets/components/paper-checkbox/index.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 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>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>paper-checkbox</title>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../polymer/polymer.html">
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page></iron-component-page>
+  </body>
+</html>

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

@@ -1,144 +1,149 @@
 /*
-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
+Copyright (c) 2015 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 {
+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: 0;
-}
-.hidden {
-  display: none;
-}
-#checkboxContainer {
-  position: relative;
-  width: 18px;
+  white-space: nowrap;
+}
+:host(:focus) {
+  outline: none;
+}
+.hidden {
+  display: none;
+}
+#checkboxContainer {
+  display: inline-block;
+  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: -15px;
-  left: -15px;
-  width: 48px;
-  height: 48px;
-  color: #5a5f5a;
-}
-#ink[checked] {
-  color: #B2DFDB;
-}
-#checkbox {
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  border: solid 2px #5a5a5a;
-  border-radius: 2px;
-  pointer-events: none;
-  -webkit-transition: background-color 140ms, border-color 140ms;
-  transition: background-color 140ms, border-color 140ms;
-}
-/* checkbox checked animations */
-:host([checked]) #checkmark {
-  -webkit-animation: checkmark-expand 140ms ease-out forwards;
-  animation: checkmark-expand 140ms ease-out forwards;
-}
-@-webkit-keyframes checkmark-expand {
-  0% {
-    top: 9px;
-    left: 6px;
-    width: 0px;
-    height: 0px;
-  }
-  100% {
-    top: -1px;
-    left: 4px;
-    width: 5px;
-    height: 10px;
-  }
-}
-@keyframes checkmark-expand {
-  0% {
-    top: 9px;
-    left: 6px;
-    width: 0px;
-    height: 0px;
-  }
-  100% {
-    top: -1px;
-    left: 4px;
-    width: 5px;
-    height: 10px;
-  }
-}
-#checkbox.checked {
-  background-color: #009688;
-  border-color: #009688;
-}
-#checkmark {
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-  position: absolute;
-  top: -1px;
-  left: 4px;
-  width: 5px;
-  height: 10px;
-  border-style: solid;
-  border-top: none;
-  border-left: none;
-  border-right-width: 2px;
-  border-bottom-width: 2px;
-  border-color: white;
-}
-/* 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 {
-  opacity: 0.33;
-  border-color: #5a5a5a;
-}
-:host([disabled][checked]) #checkbox {
-  background-color: #5a5a5a;
-}
+  transform: translateZ(0);
+  vertical-align: middle;
+}
+:host #ink {
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  width: 48px;
+  height: 48px;
+  color: var(--paper-checkbox-unchecked-ink-color);
+  opacity: 0.6;
+}
+:host #ink[checked] {
+  color: var(--paper-checkbox-checked-ink-color);
+}
+:host #checkbox {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  border: solid 2px;
+  border-color: var(--paper-checkbox-unchecked-color);
+  border-radius: 2px;
+  pointer-events: none;
+  -webkit-transition: background-color 140ms, border-color 140ms;
+  transition: background-color 140ms, border-color 140ms;
+}
+/* checkbox checked animations */
+#checkbox.checked #checkmark {
+  -webkit-animation: checkmark-expand 140ms ease-out forwards;
+  animation: checkmark-expand 140ms ease-out forwards;
+}
+@-webkit-keyframes checkmark-expand {
+  0% {
+    top: 9px;
+    left: 6px;
+    width: 0px;
+    height: 0px;
+  }
+  100% {
+    top: -1px;
+    left: 4px;
+    width: 5px;
+    height: 10px;
+  }
+}
+@keyframes checkmark-expand {
+  0% {
+    top: 9px;
+    left: 6px;
+    width: 0px;
+    height: 0px;
+  }
+  100% {
+    top: -1px;
+    left: 4px;
+    width: 5px;
+    height: 10px;
+  }
+}
+:host #checkbox.checked {
+  background-color: var(--paper-checkbox-checked-color);
+  border-color: var(--paper-checkbox-checked-color);
+}
+:host #checkmark {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  position: absolute;
+  top: -1px;
+  left: 4px;
+  width: 5px;
+  height: 10px;
+  border-style: solid;
+  border-top: none;
+  border-left: none;
+  border-right-width: 2px;
+  border-bottom-width: 2px;
+  border-color: white;
+}
+/* label */
+#checkboxLabel {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 8px;
+  white-space: normal;
+  pointer-events: none;
+  color: var(--paper-checkbox-label-color);
+}
+#checkboxLabel[hidden] {
+  display: none;
+}
+/* disabled state */
+:host([disabled]) {
+  pointer-events: none;
+}
+:host([disabled]) #checkbox {
+  opacity: 0.5;
+  border-color: var(--paper-checkbox-unchecked-color);
+}
+:host([disabled][checked]) #checkbox {
+  background-color: var(--paper-checkbox-unchecked-color);
+  opacity: 0.5;
+}
+:host([disabled]) #checkboxLabel  {
+  opacity: 0.65;
+}