polymer-paper-rails 0.2.5 → 0.2.6

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

@@ -16,6 +16,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   outline: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 #checkboxContainer {
   position: relative;
   width: 18px;
@@ -35,229 +39,106 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   top: -15px;
   left: -15px;
   width: 48px;
-  height: 48px;
+  height: 48px;
   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;
+#ink[checked] {
+  color: #B2DFDB;
 }
 
-@-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 {
+  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.checkmark {
-  border-left: none;
-  border-top: none;
+/* 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% {
-    -webkit-transform: rotate(45deg);
-    top: 13px;
-    left: 5px;
-    width: 4px;
-    height: 4px;
+    top: 9px;
+    left: 6px;
+    width: 0px;
+    height: 0px;
   }
   100% {
-    -webkit-transform: rotate(45deg);
-    top: -4px;
-    left: 6px; 
-    width: 10px;
-    height: 21px;
-    border-right-width: 2px;
-    border-bottom-width: 2px;
+    top: -1px;
+    left: 4px;
+    width: 5px;
+    height: 10px;
   }
 }
 
 @keyframes checkmark-expand {
   0% {
-    transform: rotate(45deg);
-    top: 13px;
-    left: 5px;
-    width: 4px;
-    height: 4px;
+    top: 9px;
+    left: 6px;
+    width: 0px;
+    height: 0px;
   }
   100% {
-    transform: rotate(45deg);
-    top: -4px;
-    left: 6px; 
-    width: 10px;
-    height: 21px;
-    border-right-width: 2px;
-    border-bottom-width: 2px;
+    top: -1px;
+    left: 4px;
+    width: 5px;
+    height: 10px;
   }
 }
 
 #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;
+  background-color: #009688;
+  border-color: #009688;
 }
 
-/* checkbox unchecked animations */
-#checkbox.unchecked.checkmark {
+#checkmark {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
-  border-left: none;
+  position: absolute;
+  top: -1px;
+  left: 4px;
+  width: 5px;
+  height: 10px;
+  border-style: solid;
   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;
-  }
+  border-left: none;
+  border-right-width: 2px;
+  border-bottom-width: 2px;
+  border-color: white;
 }
 
 /* label */
 #checkboxLabel {
   position: relative;
-  display: inline-block;
+  display: inline-block;
   vertical-align: middle;
-  padding-left: 8px;
-  white-space: normal;
+  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;
-}
+}
+
+/* disabled state */
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) #checkbox {
+  opacity: 0.33;
+  border-color: #5a5a5a;
+}
+
+:host([disabled][checked]) #checkbox {
+  background-color: #5a5a5a;
+}

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

@@ -6,7 +6,6 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 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
 -->
-
 <!--
 `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
@@ -19,7 +18,7 @@ Example:
     <paper-checkbox></paper-checkbox>
 
     <paper-checkbox checked></paper-checkbox>
-    
+
 Styling checkbox:
 
 To change the ink color for checked state:
@@ -27,10 +26,11 @@ To change the ink color for checked state:
     paper-checkbox::shadow #ink[checked] {
       color: #4285f4;
     }
-    
+
 To change the checkbox checked color:
 
     paper-checkbox::shadow #checkbox.checked {
+      background-color: #4285f4;
       border-color: #4285f4;
     }
 
@@ -40,7 +40,7 @@ To change the ink color for unchecked state:
       color: #b5b5b5;
     }
 
-To change the checbox unchecked color:
+To change the checkbox unchecked color:
 
     paper-checkbox::shadow #checkbox {
       border-color: #b5b5b5;
@@ -52,59 +52,51 @@ To change the checbox unchecked color:
 @homepage github.io
 -->
 
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
 
 <polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox">
-<template>
-
-  <link rel="stylesheet" href="paper-checkbox.css">
-
-  <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}" >
-  
-    <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
-     
-    <div id="checkbox" on-animationend="{{checkboxAnimationEnd}}" on-webkitAnimationEnd="{{checkboxAnimationEnd}}"></div>
-    
-  </div>
-  
-  <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>
-
-</template>
-<script>
-
-  Polymer('paper-checkbox', {
-    
-    /**
-     * Fired when the checked state changes due to user interaction.
-     *
-     * @event change
-     */
-     
-    /**
-     * Fired when the checked state changes.
-     *
-     * @event core-change
-     */
-    
-    toggles: true,
-
-    checkedChanged: function() {
-      var cl = this.$.checkbox.classList;
-      cl.toggle('checked', this.checked);
-      cl.toggle('unchecked', !this.checked);
-      cl.toggle('checkmark', !this.checked);
-      cl.toggle('box', this.checked);
-      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
-      this.fire('core-change');
-    },
-
-    checkboxAnimationEnd: function() {
-      var cl = this.$.checkbox.classList;
-      cl.toggle('checkmark', this.checked && !cl.contains('checkmark'));
-      cl.toggle('box', !this.checked && !cl.contains('box'));
-    }
+  <template>
+
+    <link rel="stylesheet" href="paper-checkbox.css">
+
+    <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}">
+
+      <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
+
+      <div id="checkbox" class="{{ {checked: checked} | tokenList }}">
+        <div id="checkmark" class="{{ {hidden: !checked} | tokenList }}"></div>
+      </div>
+
+    </div>
+
+    <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>
+
+  </template>
+  <script>
+
+    Polymer('paper-checkbox', {
+
+      /**
+       * Fired when the checked state changes due to user interaction.
+       *
+       * @event change
+       */
+
+      /**
+       * Fired when the checked state changes.
+       *
+       * @event core-change
+       */
+
+      toggles: true,
+
+      checkedChanged: function () {
+        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        this.fire('core-change');
+      }
+
+    });
 
-  });
-  
-</script>
+  </script>
 </polymer-element>

data/app/assets/components/paper-dialog/paper-action-dialog.html

@@ -11,7 +11,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>
 
-`paper-action-dialog` is a `paper-dialog` a row of buttons at the bottom that
+`paper-action-dialog` is a `paper-dialog` with a row of buttons at the bottom that
 indicate user action. The action buttons do not scroll with the dialog body.
 
 The buttons should have either the `affirmative` or `dismissive` attribute. See
@@ -37,7 +37,7 @@ Example:
 
 <link href="paper-dialog-base.html" rel="import">
 
-<polymer-element name="paper-action-dialog" extends="paper-dialog-base" role="dialog">
+<polymer-element name="paper-action-dialog" extends="paper-dialog-base" role="dialog" layout vertical>
 
 <template>
 
@@ -67,7 +67,7 @@ Example:
   <paper-shadow z="3" fit></paper-shadow>
 
   <!-- need this because the host needs to be overflow: visible -->
-  <div id="scroller" relative>
+  <div id="scroller" relative flex auto>
     <template if="{{heading}}">
       <h1>{{heading}}</h1>
     </template>