skeuocard-rails 0.1.0 → 1.0.0beta

data/vendor/assets/stylesheets/{src/_browser_hacks.scss → _browser_hacks.scss}

@@ -1,19 +1,38 @@
-.ie10 .skeuocard{
+/*
+IE Fixes
+*/
+.ua-ie-10 .skeuocard.js{
   .cc-number input{
     ::-ms-clear { display: none !important; }
   }
+  .flip-tab{
+    @include vendor-prefix(transition, none);
+  }
+}
+
+/*
+Firefox Fixes
+*/
+.ua-firefox .skeuocard.js, .ua-ie-10 .skeuocard.js {
+  input:focus{
+    outline: none;
+    @include vendor-prefix(box-shadow, 0 0 4px $color-field-glow);
+  }
 }
 
 /* 
 Fix for issue with Chrome in which no GPU acceleration will mess with 
 backface visibility in 3d transforms
-see: https://code.google.com/p/chromium/issues/detail?id=127844 
+see: https://code.google.com/p/chromium/issues/detail?id=127844.
+
+Special thanks to @jarthod on Github for help debugging on Linux.
+See https://github.com/kenkeiter/skeuocard/issues/76 for more info.
 */
-.chrome.win .skeuocard {
+.ua-chrome .skeuocard {
   @media screen and (-webkit-transform-3d: 0) {
     .card-body .face{
       -webkit-transition-property: -webkit-transform, opacity;
-      -webkit-transition-duration: 0.25s, 0;
+      -webkit-transition-duration: 0.25s, 0.25s;
       -webkit-transition-timing-function:ease-in-out,ease-in-out;
       -webkit-transition-delay:0, 0;
     }
@@ -27,6 +46,7 @@ see: https://code.google.com/p/chromium/issues/detail?id=127844
     }
     .card-body.flip .face.back{
       opacity: 1;
+      z-index: 2;
     }
   }
 }

data/vendor/assets/stylesheets/{src/_cards.scss → _cards.scss}

@@ -13,17 +13,6 @@ $sprite-front-height: 93.6em;
 // *****************************************************************************
 .skeuocard.js {
 
-  input{
-    border: none;
-    outline: none;
-    @include vendor-prefix(border-radius, 3px);
-  }
-
-  input:focus{
-    outline: none;
-    @include vendor-prefix(box-shadow, 0 0 10px $color-field-glow);
-  }
-
   .face.front {
     background-color: #eee;
     background-image: image-url('products/generic-front.png'), $image-front-background;
@@ -38,15 +27,83 @@ $sprite-front-height: 93.6em;
     background-size: cover;
   }
 
+  .face.valid{
+    @include vendor-prefix(box-shadow, 0 0 10px $color-valid);
+  }
+
+
+
+  /*
+  1. If a field (or group) has focus, regardless of whether it's filled, the
+     inputs should look like inputs.
+  2. Focused inputs within a focused field or group should look focused.
+  3. An un-filled field should always look editable.
+  4. Filled, valid fields should be flat until hover.
+  */
+
+  .cc-field{
+
+    input{
+      border: none;
+      outline: none;
+      background-color: rgba(255, 255, 255, 0.6);
+      @include vendor-prefix(border-radius, 0px);
+      @include vendor-prefix(box-shadow, inset 1px 1px 1px 1px #ccc);
+      @include vendor-prefix(transition, background-color 300ms ease);
+    }
+
+    input:focus{
+      outline: 3px auto $color-field-glow;
+      @include vendor-prefix(box-shadow, none);
+    }
+
+    &.filled.valid:not(.focus){
+      input{
+        @include vendor-prefix(box-shadow, none);
+        background-color: transparent;
+      }
+    }
+
+    &.filled:hover:not(.focus){
+      input{
+        @include vendor-prefix(box-shadow, inset 1px 1px 1px 1px #ccc);
+        background-color: rgba(255, 255, 255, 0.6);
+      }
+    }
+
+  }
+
+  .face.filled .cc-field.invalid{
+    input{
+      @include vendor-prefix(box-shadow, inset 0px 0px 2px 1px $color-invalid);
+      border: 1px solid $color-invalid;
+    }
+
+    input:focus{
+      @include vendor-prefix(box-shadow, none);
+    }
+
+    /*
+    &:after{
+      display: inline-block;
+      width: 1.575em;
+      height: 1.25em;
+      content: "";
+      background: image-url('error-pointer.png') no-repeat center center;
+      background-size: 1.575em 1.25em;
+      padding-left: 4px;
+    }
+    */
+  }
+
   .cc-number{
     position: absolute;
     display: block;
-    //left:36px;
     left: 1.8em;
     top: 8.05em;
+    padding: 0.1em;
     input{
       color: #333;
-      background-color: #fff;
       font-family: $cc-field-family;
       font-size: 1.5em;
       &.group4{ width: 3.2em; }
@@ -58,33 +115,7 @@ $sprite-front-height: 93.6em;
       margin-left: 0.4em;
     }
   }
-}
 
-// *****************************************************************************
-// Base layout for cards
-// This is inherited by card products.
-// *****************************************************************************
-.skeuocard.card-product {
-  .face.front{
-    background-repeat: no-repeat, no-repeat;
-    background-size: cover, cover;
-  }
-  .face.back{
-    background-repeat: no-repeat, no-repeat;
-    background-size: cover, cover;
-  }
-  .cc-number {
-    background-color: transparent;
-    padding: 0.1em;
-    input{
-      color: #333;
-      background-color: transparent;
-      border: none;
-    }
-    input:focus{
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-  }
   .cc-exp {
     position: absolute;
     display: block;
@@ -93,46 +124,48 @@ $sprite-front-height: 93.6em;
       font-size: 1em;
       font-family: $cc-field-family;
       color: #333;
-      background-color: transparent;
-      border: none;
       text-align: center;
       &.group2{ width: 2em; }
       &.group4{ width: 4em; }
     }
   }
+
   .cc-name {
     margin: 0; padding: 0;
     position: absolute;
     display: block;
     font-size: 1em;
     font-family: $cc-field-family;
-    background-color: transparent;
-    border: none;
     text-transform: uppercase;
   }
+
   .cc-cvc {
     margin: 0; padding: 0;
     position: absolute;
     display: block;
     font-size: 1em;
     font-family: $cc-label-family;
-    background-color: transparent;
-    border: none;
-  }
-  .invalid{
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
   }
-  .invalid{
+
+  &.unaccepted .cc-number input{
     outline: none;
-    box-shadow: 0 0 10px $color-invalid;
+    @include vendor-prefix(box-shadow, 0 0 10px $color-invalid);
     @include vendor-prefix(transition, box-shadow linear 0.15s);
-    input:focus{
-      border: 1px solid blue;
-      outline: none;
-      @include vendor-prefix(border-radius, 3px);
-    }
+  }
+}
+
+// *****************************************************************************
+// Base layout for cards
+// This is inherited by card products.
+// *****************************************************************************
+.skeuocard.card-product {
+  .face.front{
+    background-repeat: no-repeat, no-repeat;
+    background-size: cover, cover;
+  }
+  .face.back{
+    background-repeat: no-repeat, no-repeat;
+    background-size: cover, cover;
   }
 }
 
@@ -145,6 +178,7 @@ $sprite-front-height: 93.6em;
   .face.front{
     background-image: image-url('products/visa-front.png'), $image-front-background;
   }
+
   .face.back {
     background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
@@ -210,29 +244,42 @@ $sprite-front-height: 93.6em;
 
   }
 
-  /*
-  &.issuer-simple{
-    .face.front{
-      background-image: image-url('issuers/visa-simple-front.png');
-    }
-    input, .separator {
-      color: #eee;
-      background-color: transparent;
-      text-shadow: 1px 1px 1px #bbb;
-      filter: dropshadow(color=#aaa, offx=1, offy=1);
-      border: none;
-      @include input-placeholder{
-        color: #fff;
-        text-shadow: 1px 1px 1px #ccc;
-        filter: dropshadow(color=#ddd, offx=1, offy=1);
-      };
-    }
-    .cc-number{
-      background-color: transparent;
-    }
+}
+
+// *****************************************************************************
+// China UnionPay card layout
+// *****************************************************************************
+.skeuocard.product-unionpay {
+  @extend .skeuocard.card-product;
+
+  .face.front{
+    background-image: image-url('products/unionpay-front.png'), $image-front-background;
+  }
+  .face.back {
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
-  */
 
+  .cc-number{
+    left: 1.8em;
+    top: 8.05em;
+  }
+
+  .cc-exp{
+    left: 10.9em;
+    top: 11.2em;
+    width: 5em;
+  }
+
+  .cc-name{
+    left: 1.8em;
+    top: 13em;
+  }
+
+  .cc-cvc{
+    top: 7.15em;
+    left: 18.1em;
+    width: 3em;
+  }
 }
 
 // *****************************************************************************
@@ -336,6 +383,41 @@ $sprite-front-height: 93.6em;
   }
 }
 
+// *****************************************************************************
+// Maestro card layout
+// *****************************************************************************
+.skeuocard.product-maestro {
+  @extend .skeuocard.card-product;
+
+  .face.front{
+    background-image: image-url('products/maestro-front.png'), $image-front-background;
+  }
+  .face.back{
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
+  }
+
+  .cc-number{
+    left: 1.8em;
+    top: 8.05em;
+  }
+
+  .cc-name{
+    left: 2.5em;
+    top: 12.2em;
+  }
+
+  .cc-exp{
+    left: 11.5em;
+    top: 10.8em;
+  }
+
+  .cc-cvc{
+    top: 7.15em;
+    left: 18.1em;
+    width: 3em;
+  }
+}
+
 // *****************************************************************************
 // Discover card layout
 // *****************************************************************************
@@ -345,6 +427,7 @@ $sprite-front-height: 93.6em;
   .face.front{
     background-image: image-url('products/discover-front.png'), $image-front-background;
   }
+
   .face.back{
     background-image: image-url('products/visa-back.png'), $image-generic-back;
   }
@@ -363,6 +446,43 @@ $sprite-front-height: 93.6em;
     left: 13.15em;
     top: 11.61em;
   }
+
+  .cc-cvc{
+    top: 7.15em;
+    left: 18.1em;
+    width: 3em;
+  }
+}
+
+// *****************************************************************************
+// JCB card product
+// *****************************************************************************
+.skeuocard.product-jcb {
+  @extend .skeuocard.card-product;
+
+  .face.front{
+    background-image: image-url('products/jcb-front.png'), $image-front-background;
+  }
+
+  .face.back{
+    background-image: image-url('products/visa-back.png'), $image-generic-back;
+  }
+
+  .cc-number{
+    left: 1.8em;
+    top: 8.05em;
+  }
+
+  .cc-name{
+    left: 1.55em;
+    top: 13.575em;
+  }
+
+  .cc-exp{
+    left: 10.65em;
+    top: 11.50em;
+  }
+
   .cc-cvc{
     top: 7.15em;
     left: 18.1em;
@@ -373,9 +493,12 @@ $sprite-front-height: 93.6em;
 /* Preload face images */
 body:after{
     display:none;
-    content: image-url('products/visa-front.png')
+    content: image-url('products/visa-back.png') // most use this
+             image-url('products/visa-front.png')
+             image-url('products/unionpay-front.png')
              image-url('products/amex-front.png')
              image-url('products/discover-front.png')
              image-url('products/mastercard-front.png')
-             image-url('products/dinersclubintl-front.png');
+             image-url('products/dinersclubintl-front.png')
+             image-url('products/jcb-front.png');
 }

data/vendor/assets/stylesheets/{src/skeuocard.reset.scss → skeuocard.reset.scss}

@@ -52,5 +52,9 @@
   input, fieldset{
     line-height: normal;
     height: auto;
+    padding: 0px;
+    margin: 0px;
+    display: inline-block;
+    width: auto;
   }
 }

data/vendor/assets/stylesheets/{src/skeuocard.scss → skeuocard.scss}

@@ -49,7 +49,7 @@ $color-valid: #00CFA7;
       backface-visibility: hidden;
       -webkit-backface-visibility: visible;
       -webkit-backface-visibility: hidden;
-      
+
       @include vendor-prefix(transform-style, preserve-3d);
       -webkit-transition: -webkit-transform 0.25s ease, background-image 0.25s ease;
       -ms-transition: -ms-transform 0.25s ease, background-image 0.25s ease;
@@ -100,22 +100,14 @@ $color-valid: #00CFA7;
     }
   }
 
-  &.valid{
-    .card-body .face{
-      @include vendor-prefix(box-shadow, 0 0 10px $color-valid);
-    }
-  }
-
   .flip-tab{
     position: absolute;
-    -webkit-border-radius: 3.55em;
-    border-radius: 3.55em;
-    cursor: pointer; cursor: hand;
-    height: 3.55em;
+    cursor: pointer;
     width: 13em;
     display: block;
     background: #666;
-    background-size: 1.375em 1.725em;
+    height: 3.55em;
+    @include vendor-prefix(border-radius, 3.55em);
     @include vendor-prefix(transition, all 0.25s ease);
     p{
       margin: 0.6em;
@@ -124,6 +116,10 @@ $color-valid: #00CFA7;
       font-size: 1.0em;
       line-height: 1.2em;
     }
+    p strong{
+      color: #fff;
+      font-weight: bold;
+    }
     &.front{
       right: -1.25em;
       top: 1em;
@@ -135,7 +131,8 @@ $color-valid: #00CFA7;
       &:hover{ left: -1.8em; }
     }
   }
-  .flip-tab.valid-anim{
+
+  .flip-tab.prompt{
     background: $color-valid image-url('card-valid-anim.gif') no-repeat;
     background-size: 2.3em 2.3em;
     &.front{
@@ -155,14 +152,28 @@ $color-valid: #00CFA7;
       }
     }
   }
-  .flip-tab.prompt{
-    background-color: $color-valid;
-  }
   .flip-tab.warn{
-    background-color: $color-invalid;
+    background: $color-invalid image-url('card-invalid-indicator.png') no-repeat;
+    background-size: 2.3em 2.3em;
+    &.front{
+      background-position: 10.08em 0.7em;
+      p{
+        margin-right: 2.9em;
+        margin-left: 1.25em;
+        margin-top: 0.6em;
+      }
+    }
+    &.back{
+      background-position: 0.6em 0.6em;
+      p{
+        margin-right: 1.25em;
+        margin-left: 2.9em;
+        margin-top: 0.6em;
+      }
+    }
   }
 
 }
 
 @import "_cards";
-@import "_browser_hacks";
+@import "_browser_hacks";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: skeuocard-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.0.0beta
 platform: ruby
 authors:
 - Thomas Darde
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-08-07 00:00:00.000000000 Z
+date: 2013-09-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -42,6 +42,7 @@ files:
 - vendor/assets/images/card-invalid-indicator.png
 - vendor/assets/images/card-valid-anim.gif
 - vendor/assets/images/card-valid-indicator.png
+- vendor/assets/images/error-pointer.png
 - vendor/assets/images/issuers/visa-chase-sapphire.png
 - vendor/assets/images/issuers/visa-simple-front.png
 - vendor/assets/images/products/amex-front.png
@@ -49,15 +50,18 @@ files:
 - vendor/assets/images/products/discover-front.png
 - vendor/assets/images/products/generic-back.png
 - vendor/assets/images/products/generic-front.png
+- vendor/assets/images/products/jcb-front.png
+- vendor/assets/images/products/maestro-front.png
 - vendor/assets/images/products/mastercard-front.png
+- vendor/assets/images/products/unionpay-front.png
 - vendor/assets/images/products/visa-back.png
 - vendor/assets/images/products/visa-front.png
 - vendor/assets/javascripts/skeuocard.js
-- vendor/assets/stylesheets/src/_browser_hacks.scss
-- vendor/assets/stylesheets/src/_cards.scss
-- vendor/assets/stylesheets/src/_util.scss
-- vendor/assets/stylesheets/src/skeuocard.reset.scss
-- vendor/assets/stylesheets/src/skeuocard.scss
+- vendor/assets/stylesheets/_browser_hacks.scss
+- vendor/assets/stylesheets/_cards.scss
+- vendor/assets/stylesheets/_util.scss
+- vendor/assets/stylesheets/skeuocard.reset.scss
+- vendor/assets/stylesheets/skeuocard.scss
 - MIT-LICENSE
 - Gemfile
 - README.md
@@ -76,9 +80,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - '>'
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.0.3