skeuocard-rails 0.0.2.alpha → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/vendor/assets/images/card-front-background.png +0 -0
- data/vendor/assets/images/products/amex-front.png +0 -0
- data/vendor/assets/images/products/dinersclubintl-front.png +0 -0
- data/vendor/assets/images/products/discover-front.png +0 -0
- data/vendor/assets/images/products/generic-front.png +0 -0
- data/vendor/assets/images/products/mastercard-front.png +0 -0
- data/vendor/assets/images/products/visa-back.png +0 -0
- data/vendor/assets/images/products/visa-front.png +0 -0
- data/vendor/assets/javascripts/skeuocard.js +11 -9
- data/vendor/assets/stylesheets/src/_cards.scss +62 -27
- data/vendor/assets/stylesheets/src/skeuocard.reset.scss +4 -0
- data/vendor/assets/stylesheets/src/skeuocard.scss +9 -15
- metadata +5 -5
- data/vendor/assets/images/issuers/amex-blackcard-front.png +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e4be86aea090ca33b2bfd85349acf5db89f545ec
|
4
|
+
data.tar.gz: 18332365678a2244f807a690ba1d2b8893e12a50
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d864c4bd73f6420a522cb82a80dd30260bd00445bf51341d5a605a2e8df6f62c437aba6ac3af39a57a986de158523776df20458fc5ea11e0be575aff4a60c016
|
7
|
+
data.tar.gz: e51781ce9badf007f42a90a2df4a24b3cc50b9db5a636c140231e80c99ba0bf150ddd5bfc94fe4d344a2aaee4a5c7587030eb8cfe044b382cc74714d75d58149
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -973,14 +973,16 @@
|
|
973
973
|
SegmentedCardNumberInputView.prototype._focusField = function(field, place) {
|
974
974
|
var fieldLen;
|
975
975
|
if (field.length !== 0) {
|
976
|
-
field.focus();
|
977
|
-
if (
|
978
|
-
|
979
|
-
|
980
|
-
|
981
|
-
|
982
|
-
|
983
|
-
|
976
|
+
field[0].focus();
|
977
|
+
if ($(field[0]).is(':visible') && field[0] === document.activeElement) {
|
978
|
+
if (place === 'start') {
|
979
|
+
return field[0].setSelectionRange(0, 0);
|
980
|
+
} else if (place === 'end') {
|
981
|
+
fieldLen = field[0].maxLength;
|
982
|
+
return field[0].setSelectionRange(fieldLen, fieldLen);
|
983
|
+
} else {
|
984
|
+
return field[0].setSelectionRange(place[0], place[1]);
|
985
|
+
}
|
984
986
|
}
|
985
987
|
}
|
986
988
|
};
|
@@ -1465,7 +1467,7 @@
|
|
1465
1467
|
}
|
1466
1468
|
};
|
1467
1469
|
|
1468
|
-
CCProducts[/^
|
1470
|
+
CCProducts[/^3[47]/] = {
|
1469
1471
|
companyName: "American Express",
|
1470
1472
|
companyShortname: "amex",
|
1471
1473
|
cardNumberGrouping: [4, 6, 5],
|
@@ -1,5 +1,13 @@
|
|
1
1
|
@import "util";
|
2
2
|
|
3
|
+
$image-front-background: image-url('card-front-background.png');
|
4
|
+
$image-generic-front: image-url('products/generic-front.png');
|
5
|
+
$image-generic-back: image-url('products/generic-back.png');
|
6
|
+
|
7
|
+
$card-face-width: 24.8em;
|
8
|
+
$card-face-height: 15.6em;
|
9
|
+
$sprite-front-height: 93.6em;
|
10
|
+
|
3
11
|
// *****************************************************************************
|
4
12
|
// Generic card layout
|
5
13
|
// *****************************************************************************
|
@@ -7,8 +15,8 @@
|
|
7
15
|
|
8
16
|
input{
|
9
17
|
border: none;
|
10
|
-
@include vendor-prefix(border-radius, 3px);
|
11
18
|
outline: none;
|
19
|
+
@include vendor-prefix(border-radius, 3px);
|
12
20
|
}
|
13
21
|
|
14
22
|
input:focus{
|
@@ -17,15 +25,22 @@
|
|
17
25
|
}
|
18
26
|
|
19
27
|
.face.front {
|
20
|
-
background: #eee
|
28
|
+
background-color: #eee;
|
29
|
+
background-image: image-url('products/generic-front.png'), $image-front-background;
|
30
|
+
background-repeat: no-repeat;
|
31
|
+
background-size: cover;
|
21
32
|
}
|
33
|
+
|
22
34
|
.face.back {
|
23
|
-
background: #eee
|
35
|
+
background-color: #eee;
|
36
|
+
background-image: image-url('products/generic-back.png');
|
37
|
+
background-repeat: no-repeat;
|
38
|
+
background-size: cover;
|
24
39
|
}
|
25
40
|
|
26
41
|
.cc-number{
|
27
42
|
position: absolute;
|
28
|
-
display: block;
|
43
|
+
display: block;
|
29
44
|
//left:36px;
|
30
45
|
left: 1.8em;
|
31
46
|
top: 8.05em;
|
@@ -50,6 +65,14 @@
|
|
50
65
|
// This is inherited by card products.
|
51
66
|
// *****************************************************************************
|
52
67
|
.skeuocard.card-product {
|
68
|
+
.face.front{
|
69
|
+
background-repeat: no-repeat, no-repeat;
|
70
|
+
background-size: cover, cover;
|
71
|
+
}
|
72
|
+
.face.back{
|
73
|
+
background-repeat: no-repeat, no-repeat;
|
74
|
+
background-size: cover, cover;
|
75
|
+
}
|
53
76
|
.cc-number {
|
54
77
|
background-color: transparent;
|
55
78
|
padding: 0.1em;
|
@@ -63,8 +86,8 @@
|
|
63
86
|
}
|
64
87
|
}
|
65
88
|
.cc-exp {
|
66
|
-
position: absolute;
|
67
|
-
display: block;
|
89
|
+
position: absolute;
|
90
|
+
display: block;
|
68
91
|
input, .separator {
|
69
92
|
margin: 0; padding: 0;
|
70
93
|
font-size: 1em;
|
@@ -79,8 +102,8 @@
|
|
79
102
|
}
|
80
103
|
.cc-name {
|
81
104
|
margin: 0; padding: 0;
|
82
|
-
position: absolute;
|
83
|
-
display: block;
|
105
|
+
position: absolute;
|
106
|
+
display: block;
|
84
107
|
font-size: 1em;
|
85
108
|
font-family: $cc-field-family;
|
86
109
|
background-color: transparent;
|
@@ -89,8 +112,8 @@
|
|
89
112
|
}
|
90
113
|
.cc-cvc {
|
91
114
|
margin: 0; padding: 0;
|
92
|
-
position: absolute;
|
93
|
-
display: block;
|
115
|
+
position: absolute;
|
116
|
+
display: block;
|
94
117
|
font-size: 1em;
|
95
118
|
font-family: $cc-label-family;
|
96
119
|
background-color: transparent;
|
@@ -120,14 +143,14 @@
|
|
120
143
|
@extend .skeuocard.card-product;
|
121
144
|
|
122
145
|
.face.front{
|
123
|
-
background:
|
146
|
+
background-image: image-url('products/visa-front.png'), $image-front-background;
|
124
147
|
}
|
125
148
|
.face.back {
|
126
|
-
background:
|
149
|
+
background-image: image-url('products/visa-back.png'), $image-generic-back;
|
127
150
|
}
|
128
151
|
|
129
152
|
.cc-number{
|
130
|
-
left: 1.8em;
|
153
|
+
left: 1.8em;
|
131
154
|
top: 8.05em;
|
132
155
|
}
|
133
156
|
|
@@ -151,7 +174,7 @@
|
|
151
174
|
// This card puts all required information on the back, rather than the front.
|
152
175
|
&.issuer-chase-sapphire{
|
153
176
|
.face.front{
|
154
|
-
background-image: url('
|
177
|
+
background-image: image-url('issuers/visa-chase-sapphire.png');
|
155
178
|
}
|
156
179
|
.cc-name{
|
157
180
|
left: 1.25em;
|
@@ -174,7 +197,7 @@
|
|
174
197
|
}
|
175
198
|
.cc-exp{
|
176
199
|
left: 3.75em;
|
177
|
-
top: 11.5em;
|
200
|
+
top: 11.5em;
|
178
201
|
input, .separator{
|
179
202
|
font-family: $cc-label-family;
|
180
203
|
&.group2{ width: 1.6em; }
|
@@ -187,9 +210,10 @@
|
|
187
210
|
|
188
211
|
}
|
189
212
|
|
213
|
+
/*
|
190
214
|
&.issuer-simple{
|
191
215
|
.face.front{
|
192
|
-
background-image: url('
|
216
|
+
background-image: image-url('issuers/visa-simple-front.png');
|
193
217
|
}
|
194
218
|
input, .separator {
|
195
219
|
color: #eee;
|
@@ -197,8 +221,8 @@
|
|
197
221
|
text-shadow: 1px 1px 1px #bbb;
|
198
222
|
filter: dropshadow(color=#aaa, offx=1, offy=1);
|
199
223
|
border: none;
|
200
|
-
@include input-placeholder{
|
201
|
-
color: #fff;
|
224
|
+
@include input-placeholder{
|
225
|
+
color: #fff;
|
202
226
|
text-shadow: 1px 1px 1px #ccc;
|
203
227
|
filter: dropshadow(color=#ddd, offx=1, offy=1);
|
204
228
|
};
|
@@ -207,6 +231,7 @@
|
|
207
231
|
background-color: transparent;
|
208
232
|
}
|
209
233
|
}
|
234
|
+
*/
|
210
235
|
|
211
236
|
}
|
212
237
|
|
@@ -217,10 +242,10 @@
|
|
217
242
|
@extend .skeuocard.card-product;
|
218
243
|
|
219
244
|
.face.front {
|
220
|
-
background:
|
245
|
+
background-image: image-url('products/amex-front.png'), $image-front-background;
|
221
246
|
}
|
222
247
|
.face.back{
|
223
|
-
background:
|
248
|
+
background-image: image-url('products/visa-back.png'), $image-generic-back;
|
224
249
|
}
|
225
250
|
|
226
251
|
.cc-number{
|
@@ -252,10 +277,10 @@
|
|
252
277
|
@extend .skeuocard.card-product;
|
253
278
|
|
254
279
|
.face.front{
|
255
|
-
background:
|
280
|
+
background-image: image-url('products/dinersclubintl-front.png'), $image-front-background;
|
256
281
|
}
|
257
282
|
.face.back{
|
258
|
-
background:
|
283
|
+
background-image: image-url('products/visa-back.png'), $image-generic-back;
|
259
284
|
}
|
260
285
|
.cc-number{
|
261
286
|
left: 1.8em;
|
@@ -283,10 +308,10 @@
|
|
283
308
|
@extend .skeuocard.card-product;
|
284
309
|
|
285
310
|
.face.front{
|
286
|
-
background:
|
311
|
+
background-image: image-url('products/mastercard-front.png'), $image-front-background;
|
287
312
|
}
|
288
313
|
.face.back{
|
289
|
-
background:
|
314
|
+
background-image: image-url('products/visa-back.png'), $image-generic-back;
|
290
315
|
}
|
291
316
|
|
292
317
|
.cc-number{
|
@@ -318,10 +343,10 @@
|
|
318
343
|
@extend .skeuocard.card-product;
|
319
344
|
|
320
345
|
.face.front{
|
321
|
-
background:
|
346
|
+
background-image: image-url('products/discover-front.png'), $image-front-background;
|
322
347
|
}
|
323
348
|
.face.back{
|
324
|
-
background:
|
349
|
+
background-image: image-url('products/visa-back.png'), $image-generic-back;
|
325
350
|
}
|
326
351
|
|
327
352
|
.cc-number{
|
@@ -343,4 +368,14 @@
|
|
343
368
|
left: 18.1em;
|
344
369
|
width: 3em;
|
345
370
|
}
|
346
|
-
}
|
371
|
+
}
|
372
|
+
|
373
|
+
/* Preload face images */
|
374
|
+
body:after{
|
375
|
+
display:none;
|
376
|
+
content: image-url('products/visa-front.png')
|
377
|
+
image-url('products/amex-front.png')
|
378
|
+
image-url('products/discover-front.png')
|
379
|
+
image-url('products/mastercard-front.png')
|
380
|
+
image-url('products/dinersclubintl-front.png');
|
381
|
+
}
|
@@ -49,18 +49,13 @@ $color-valid: #00CFA7;
|
|
49
49
|
backface-visibility: hidden;
|
50
50
|
-webkit-backface-visibility: visible;
|
51
51
|
-webkit-backface-visibility: hidden;
|
52
|
-
|
53
|
-
-
|
54
|
-
-
|
55
|
-
-
|
56
|
-
-
|
57
|
-
|
58
|
-
|
59
|
-
-webkit-transition: all 0.25s ease;
|
60
|
-
-moz-transition: all 0.25s ease;
|
61
|
-
-o-transition: all 0.25s ease;
|
62
|
-
-ms-transition: all 0.25s ease;
|
63
|
-
transition: all 0.25s ease;
|
52
|
+
|
53
|
+
@include vendor-prefix(transform-style, preserve-3d);
|
54
|
+
-webkit-transition: -webkit-transform 0.25s ease, background-image 0.25s ease;
|
55
|
+
-ms-transition: -ms-transform 0.25s ease, background-image 0.25s ease;
|
56
|
+
-moz-transition: -moz-transform 0.25s ease, background-image 0.25s ease;
|
57
|
+
-o-transition: -o-transform 0.25s ease, background-image 0.25s ease;
|
58
|
+
transition: transform 0.25s ease, background-image 0.25s ease;
|
64
59
|
|
65
60
|
position: absolute;
|
66
61
|
top: 0;
|
@@ -70,8 +65,7 @@ $color-valid: #00CFA7;
|
|
70
65
|
-webkit-border-radius: 1.15em;
|
71
66
|
border-radius: 1.15em;
|
72
67
|
background-color: #eee;
|
73
|
-
background-size: cover
|
74
|
-
background-position: right bottom;
|
68
|
+
background-size: cover;
|
75
69
|
border: 1px solid #ddd;
|
76
70
|
}
|
77
71
|
|
@@ -171,4 +165,4 @@ $color-valid: #00CFA7;
|
|
171
165
|
}
|
172
166
|
|
173
167
|
@import "_cards";
|
174
|
-
@import "_browser_hacks";
|
168
|
+
@import "_browser_hacks";
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: skeuocard-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Thomas Darde
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-08-
|
11
|
+
date: 2013-08-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|
@@ -38,10 +38,10 @@ files:
|
|
38
38
|
- vendor/assets/fonts/ocra-webfont.ttf
|
39
39
|
- vendor/assets/fonts/ocra-webfont.woff
|
40
40
|
- vendor/assets/images/card-flip-arrow.png
|
41
|
+
- vendor/assets/images/card-front-background.png
|
41
42
|
- vendor/assets/images/card-invalid-indicator.png
|
42
43
|
- vendor/assets/images/card-valid-anim.gif
|
43
44
|
- vendor/assets/images/card-valid-indicator.png
|
44
|
-
- vendor/assets/images/issuers/amex-blackcard-front.png
|
45
45
|
- vendor/assets/images/issuers/visa-chase-sapphire.png
|
46
46
|
- vendor/assets/images/issuers/visa-simple-front.png
|
47
47
|
- vendor/assets/images/products/amex-front.png
|
@@ -76,9 +76,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
76
76
|
version: '0'
|
77
77
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
78
78
|
requirements:
|
79
|
-
- - '
|
79
|
+
- - '>='
|
80
80
|
- !ruby/object:Gem::Version
|
81
|
-
version:
|
81
|
+
version: '0'
|
82
82
|
requirements: []
|
83
83
|
rubyforge_project:
|
84
84
|
rubygems_version: 2.0.3
|
Binary file
|