skeuocard-rails 0.0.1

data/vendor/assets/stylesheets/src/_util.scss

@@ -0,0 +1,15 @@
+@mixin input-placeholder {
+    &.placeholder { @content; }
+    &:-moz-placeholder { @content; }
+    &::-moz-placeholder { @content; }
+    &:-ms-input-placeholder { @content; }
+    &::-webkit-input-placeholder { @content; } 
+}
+
+@mixin vendor-prefix($name, $argument) {
+  #{$name}: $argument;
+  -webkit-#{$name}: $argument;
+  -ms-#{$name}: $argument;
+  -moz-#{$name}: $argument;
+  -o-#{$name}: $argument;
+}

data/vendor/assets/stylesheets/src/demo.scss

@@ -0,0 +1,265 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
+
+body {
+  padding:50px;
+  font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color:#777;
+  font-weight:300;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color:#222;
+  margin:0 0 20px;
+}
+
+p, ul, ol, table, pre, dl {
+  margin:0 0 20px;
+}
+
+h1, h2, h3 {
+  line-height:1.1;
+}
+
+h1 {
+  font-size:28px;
+}
+
+h2 {
+  color:#393939;
+}
+
+h3, h4, h5, h6 {
+  color:#494949;
+}
+
+a {
+  color:#39c;
+  font-weight:400;
+  text-decoration:none;
+}
+
+a small {
+  font-size:11px;
+  color:#777;
+  margin-top:-0.6em;
+  display:block;
+}
+
+.wrapper {
+  width:860px;
+  margin:0 auto;
+}
+
+blockquote {
+  border-left:1px solid #e5e5e5;
+  margin:0;
+  padding:0 0 0 20px;
+  font-style:italic;
+}
+
+code, pre {
+  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+  color:#333;
+  font-size:12px;
+}
+
+pre {
+  padding:8px 15px;
+  background: #f8f8f8;  
+  border-radius:5px;
+  border:1px solid #e5e5e5;
+  overflow-x: auto;
+}
+
+table {
+  width:100%;
+  border-collapse:collapse;
+}
+
+th, td {
+  text-align:left;
+  padding:5px 10px;
+  border-bottom:1px solid #e5e5e5;
+}
+
+dt {
+  color:#444;
+  font-weight:700;
+}
+
+th {
+  color:#444;
+}
+
+img {
+  max-width:100%;
+}
+
+header {
+  width:270px;
+  float:left;
+  position:fixed;
+}
+
+header ul {
+  list-style:none;
+  height:40px;
+  
+  padding:0;
+  
+  background: #eee;
+  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
+  background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+  
+  border-radius:5px;
+  border:1px solid #d2d2d2;
+  box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
+  width:270px;
+}
+
+header li {
+  width:89px;
+  float:left;
+  border-right:1px solid #d2d2d2;
+  height:40px;
+}
+
+header ul a {
+  line-height:1;
+  font-size:11px;
+  color:#999;
+  display:block;
+  text-align:center;
+  padding-top:6px;
+  height:40px;
+}
+
+strong {
+  color:#222;
+  font-weight:700;
+}
+
+header ul li + li {
+  width:88px;
+  border-left:1px solid #fff;
+}
+
+header ul li + li + li {
+  border-right:none;
+  width:89px;
+}
+
+header ul a strong {
+  font-size:14px;
+  display:block;
+  color:#222;
+}
+
+section {
+  width:500px;
+  float:right;
+  padding-bottom:50px;
+}
+
+small {
+  font-size:11px;
+}
+
+hr {
+  border:0;
+  background:#e5e5e5;
+  height:1px;
+  margin:0 0 20px;
+}
+
+footer {
+  width:270px;
+  float:left;
+  position:fixed;
+  bottom:50px;
+}
+
+@media print, screen and (max-width: 960px) {
+  
+  div.wrapper {
+    width:auto;
+    margin:0;
+  }
+  
+  header, section, footer {
+    float:none;
+    position:static;
+    width:auto;
+  }
+  
+  header {
+    padding-right:320px;
+  }
+  
+  section {
+    border:1px solid #e5e5e5;
+    border-width:1px 0;
+    padding:20px 0;
+    margin:0 0 20px;
+  }
+  
+  header a small {
+    display:inline;
+  }
+  
+  header ul {
+    position:absolute;
+    right:50px;
+    top:52px;
+  }
+}
+
+@media print, screen and (max-width: 720px) {
+  body {
+    word-wrap:break-word;
+  }
+  
+  header {
+    padding:0;
+  }
+  
+  header ul, header p.view {
+    position:static;
+  }
+  
+  pre, code {
+    word-wrap:normal;
+  }
+}
+
+@media print, screen and (max-width: 480px) {
+  body {
+    padding:15px;
+  }
+  
+  header ul {
+    display:none;
+  }
+}
+
+@media print {
+  body {
+    padding:0.4in;
+    font-size:12pt;
+    color:#444;
+  }
+}
+
+/* Unstyled skeuocard input styling */
+.credit-card-input.no-js{
+  p.no-support-warning{
+    color: #ff0000;
+  }
+  label + input, label + select{
+    display: block;
+  }
+}

data/vendor/assets/stylesheets/src/skeuocard.reset.scss

@@ -0,0 +1,52 @@
+.skeuocard.js {
+  * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+  html,body,div,span,applet,object,iframe,
+  h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+  a,abbr,acronym,address,big,cite,code,
+  del,dfn,em,img,ins,kbd,q,s,samp,
+  small,strike,strong,sub,sup,tt,var,
+  b,u,i,center,
+  dl,dt,dd,ol,ul,li,
+  fieldset,form,label,legend,
+  table,caption,tbody,tfoot,thead,tr,th,td,
+  article,aside,canvas,details,figcaption,figure,
+  footer,header,hgroup,menu,nav,section,summary,
+  time,mark,audio,video{
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    font:inherit;
+    vertical-align:baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,aside,details,figcaption,figure,
+  footer,header,hgroup,menu,nav,section{
+    display:block;
+  }
+  body{
+      line-height:1;
+  }
+  ol,ul{
+      list-style:none;
+  }
+  blockquote,q{
+      quotes:none;
+  }
+  blockquote:before,blockquote:after,
+  q:before,q:after{
+      content:'';
+      content:none;
+  }
+  ins{
+      text-decoration:none;
+  }
+  del{
+      text-decoration:line-through;
+  }
+  table{
+      border-collapse:collapse;
+      border-spacing:0;
+  }
+}

data/vendor/assets/stylesheets/src/skeuocard.scss

@@ -0,0 +1,168 @@
+@import "util";
+
+/* Sizing is 1em = 20px */
+
+@font-face {
+  font-family: 'ocraregular';
+  src: image-url('ocra-webfont.eot');
+  src: image-url('ocra-webfont.eot?#iefix') format('embedded-opentype'),
+       image-url('ocra-webfont.woff') format('woff'),
+       image-url('ocra-webfont.ttf') format('truetype'),
+       image-url('ocra-webfont.svg#ocraregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+$cc-face-width: 24.8em;
+$cc-face-height: 15.6em;
+
+$cc-label-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$cc-field-family: "ocraregular", "OCR A Std", "OCR A", Courier, "Courier New", monospace;
+
+$color-field-glow: #0096de;
+$color-invalid: #ff655a;
+$color-valid: #00CFA7;
+
+.skeuocard.js {
+  width: $cc-face-width;
+  height: $cc-face-height;
+
+  -webkit-perspective: 1000;
+  -moz-perspective: 1000;
+  -o-perspective: 1000;
+  perspective: 1000;
+
+  .card-body {
+    -moz-transform: perspective(1000px);
+    -moz-transform-style: preserve-3d;
+    position: relative;
+
+    .face {
+      -webkit-backface-visibility: hidden;
+      -moz-backface-visibility: hidden;
+      backface-visibility: hidden;
+      -webkit-backface-visibility: visible;
+      -webkit-backface-visibility: hidden;
+
+      -webkit-transform-style: preserve-3d;
+      -moz-transform-style: preserve-3d;
+      -o-transform-style: preserve-3d;
+      -ms-transform-style: preserve-3d;
+      transform-style: preserve-3d;
+
+      -webkit-transition: all 0.25s ease;
+      -moz-transition: all 0.25s ease;
+      -o-transition: all 0.25s ease;
+      -ms-transition: all 0.25s ease;
+      transition: all 0.25s ease;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $cc-face-width;
+      height: $cc-face-height;
+      -webkit-border-radius: 1.15em;
+      border-radius: 1.15em;
+      background-color: #eee;
+      background-size: cover !important;
+      background-position: right bottom;
+      border: 1px solid #ddd;
+    }
+
+    .face.front{
+      -webkit-transform: translate3d(0,0,0);
+      z-index: 2;
+    }
+
+    .face.back{
+      -webkit-transform: rotateY(-180deg);
+      -moz-transform: rotateY(-180deg);
+      -o-transform: rotateY(-180deg);
+      -ms-transform: rotateY(-180deg);
+      transform: rotateY(-180deg);
+    }
+  }
+
+  .card-body.flip {
+    .face.back{
+      -webkit-transform: rotateY(0deg);
+      -moz-transform: rotateY(0deg);
+      -o-transform: rotateY(0deg);
+      -ms-transform: rotateY(0deg);
+      transform: rotateY(0deg);
+    }
+
+    .face.front{
+      -webkit-transform: rotateY(180deg);
+      -moz-transform: rotateY(180deg);
+      -o-transform: rotateY(180deg);
+      transform: rotateY(180deg);
+    }
+  }
+
+  &.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;
+    width: 13em;
+    display: block;
+    background: #666;
+    background-size: 1.375em 1.725em;
+    @include vendor-prefix(transition, all 0.25s ease);
+    p{
+      margin: 0.6em;
+      font-family: $cc-label-family;
+      color: #fff;
+      font-size: 1.0em;
+      line-height: 1.2em;
+    }
+    &.front{
+      right: -1.25em;
+      top: 1em;
+      &:hover{ right: -1.8em; }
+    }
+    &.back{
+      left: -1.25em;
+      top: 1em;
+      &:hover{ left: -1.8em; }
+    }
+  }
+  .flip-tab.valid-anim{
+    background: $color-valid image-url('card-valid-anim.gif') no-repeat;
+    background-size: 2.3em 2.3em;
+    &.front{
+      background-position: 10.05em 0.6em;
+      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;
+      }
+    }
+  }
+  .flip-tab.prompt{
+    background-color: $color-valid;
+  }
+  .flip-tab.warn{
+    background-color: $color-invalid;
+  }
+
+}
+
+@import "_cards";
+@import "_browser_hacks";