mirror of
https://github.com/valitydev/checkout.git
synced 2024-11-06 02:25:18 +00:00
Merge pull request #3 from rbkmoney/ft/FE-54/addNewFields
FE-54: add new fields: cardholder, phone
This commit is contained in:
andrey
GitHub
commit
886780fdc7
@ -23,7 +23,7 @@ gulp.task('bundlePayframe', ['lint'], () => {
|
||||
entries: 'src/payframe/payframe.js',
|
||||
extensions: ['.js'],
|
||||
debug: true
|
||||
}).transform("babelify").bundle()
|
||||
}).transform('babelify').bundle()
|
||||
.pipe(source('payframe.js'))
|
||||
.pipe(gulp.dest(config.payframeDist))
|
||||
.pipe(livereload());
|
||||
@ -34,7 +34,7 @@ gulp.task('bundlePayform', ['lint'], () => {
|
||||
entries: 'src/payform/payform.js',
|
||||
extensions: ['.js'],
|
||||
debug: true
|
||||
}).transform("babelify").bundle()
|
||||
}).transform('babelify').bundle()
|
||||
.pipe(source('payform.js'))
|
||||
.pipe(gulp.dest(config.payformDist))
|
||||
.pipe(livereload());
|
||||
@ -88,8 +88,9 @@ gulp.task('watch', () => {
|
||||
gulp.watch('src/payform/**/*.js', ['bundlePayform']);
|
||||
gulp.watch('src/payframe/**/*.js', ['bundlePayframe']);
|
||||
gulp.watch('src/payform/payform.pug', ['buildTemplate']);
|
||||
gulp.watch('src/**/*.css', ['copyStyles']);
|
||||
gulp.watch('src/**/*.png', ['copyImages']);
|
||||
gulp.watch('src/**/*.css', ['copyPayformStyles']);
|
||||
gulp.watch('src/**/*.css', ['copyPayframeStyles']);
|
||||
gulp.watch('src/**/*.png', ['copyPayformImages']);
|
||||
});
|
||||
|
||||
gulp.task('build', ['bundlePayframe', 'bundlePayform', 'buildTemplate', 'copyPayformStyles', 'copyPayframeStyles', 'copyPayformImages']);
|
||||
|
||||
@ -358,16 +358,16 @@ input::-ms-clear {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.payform--form {
|
||||
padding: 36px;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
.payform--fieldset {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 15px 0;
|
||||
margin: 15px auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.payform--card-number {
|
||||
.payform--card-number, .payform--card-holder, .payform--email {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -389,20 +389,27 @@ input::-ms-clear {
|
||||
-webkit-transition: box-shadow 0.2s ease-out;
|
||||
transition: box-shadow 0.2s ease-out;
|
||||
}
|
||||
.payform input:focus {
|
||||
border-radius: 4px;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 7px 2px rgba(28,96,191,.7);
|
||||
}
|
||||
.payform--card-number input, .payform--card-number.payform--field__error input:focus {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.payform--card-expire input, .payform--card-expire.payform--field__error input:focus {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.payform--card-cvc input, .payform--card-cvc.payform--field__error input:focus {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.payform input:focus {
|
||||
border-radius: 4px;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 7px 2px rgba(28,96,191,.7);
|
||||
}
|
||||
.payform--field__focus {
|
||||
z-index: 10;
|
||||
}
|
||||
@ -429,7 +436,7 @@ input::-ms-clear {
|
||||
position: relative;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 9px;
|
||||
margin-top: 15px;
|
||||
margin: 15px auto;
|
||||
border-radius: 4px;
|
||||
background-color: #3fb1eb;
|
||||
background-image: -webkit-linear-gradient(to top,rgba(15,110,205,.4),transparent);
|
||||
|
||||
@ -17,6 +17,12 @@ html(lang='en')
|
||||
symbol#Icon-calendar-desktop(viewbox='0 0 30 30')
|
||||
title Calendar
|
||||
path(fill-rule='evenodd', transform='translate(8, 9)', d='M2.0085302,1 C0.899249601,1 0,1.90017617 0,2.99201702 L0,10.007983 C0,11.1081436 0.901950359,12 2.0085302,12 L9.9914698,12 C11.1007504,12 12,11.0998238 12,10.007983 L12,2.99201702 C12,1.8918564 11.0980496,1 9.9914698,1 L2.0085302,1 Z M1.99539757,4 C1.44565467,4 1,4.43788135 1,5.00292933 L1,9.99707067 C1,10.5509732 1.4556644,11 1.99539757,11 L10.0046024,11 C10.5543453,11 11,10.5621186 11,9.99707067 L11,5.00292933 C11,4.44902676 10.5443356,4 10.0046024,4 L1.99539757,4 Z M3,1 L3,2 L4,2 L4,1 L3,1 Z M8,1 L8,2 L9,2 L9,1 L8,1 Z M3,0 L3,1 L4,1 L4,0 L3,0 Z M8,0 L8,1 L9,1 L9,0 L8,0 Z M8,0')
|
||||
symbol#Icon-user-desktop(viewbox='0 0 30 30')
|
||||
title User
|
||||
path(fill-rule='evenodd', transform='translate(7, 8)', d='M11.996684,14 C13.0947221,14 14,13.1101744 13.9999999,12.009095 L14,11.1491834 C14.0000003,9.91850391 13.3623813,9.53591084 10.9228899,8.52151991 C9.65809648,7.99559263 9.07889982,7.67070275 9.05789428,7.60696539 C9.0285739,7.51799818 8.87779879,7.81924073 9.56596152,6.74789493 C10.1158583,5.89180439 10.4051134,4.98207687 10.4051136,3.71797921 C10.4051139,1.68118868 9.60051814,0.485608698 8.21363982,0.121696257 C7.80812531,0.0152905441 7.55676223,9.41263804e-05 6.96135352,9.42910654e-05 C5.00856522,9.483119e-05 3.52263311,1.0188016 3.5226329,3.56578315 C3.52263286,4.68755112 3.79796986,5.52392778 4.34876041,6.49138191 C4.94128002,7.53213241 4.94703121,7.54559374 4.90298986,7.76729822 C4.89714459,7.79672334 4.33356436,8.13608721 3.04999838,8.70234264 C0.704440887,9.73710414 0.00773538487,10.1871597 0.0115913123,11.4408697 C0.0122174355,11.6444427 0.0113716658,11.7911179 0.00963390836,11.8891851 C0.00814961188,11.953822 0.00814961188,11.953822 0.00838740291,11.946099 C-0.0102850819,13.0932349 0.880033796,13.9999998 1.99322919,13.9999998 L11.996684,14 Z M1.00716107,11.9956084 C1.00716107,11.9956084 1.01294346,11.8789576 1.01158658,11.4377941 C1.00719768,10.0107946 5.61918235,9.29435064 5.88382455,7.96213996 C6.14846675,6.62992931 4.52263281,5.90956861 4.5226329,3.56578323 C4.52263309,1.22199787 6.15002134,1.00009452 6.96135379,1.00009429 C7.77268624,1.00009407 9.40511407,0.941891089 9.40511362,3.71797904 C9.40511313,6.49406696 7.69616924,6.66991367 8.10814245,7.9199693 C8.52011565,9.17002493 13.0000003,9.84816832 13,11.1491833 L12.9999999,12.0090951 C13,12.5563568 12.5438559,13 11.9966841,13 L1.99322921,12.9999998 C1.43911312,12.9999998 0.998392539,12.5512468 1.00716107,11.9956084 Z M1.00716107,11.9956084')
|
||||
symbol#Icon-envelope-desktop(viewbox='0 0 30 30')
|
||||
title Envelope
|
||||
path(fill-rule='evenodd', transform='translate(8, 10)', d='M1.86849119,1.00882648 C1.91231938,1.00300503 1.95704343,1 2.00247329,1 L11.9975267,1 C12.0428075,1 12.0874644,1.00306369 12.1312901,1.00899658 L7,5 L1.86849119,1.00882648 Z M1.05353134,1.67496881 C1.01882906,1.77613675 1,1.88463985 1,1.99754465 L1,9.00245535 C1,9.55338405 1.45576096,10 2.00247329,10 L11.9975267,10 C12.5511774,10 13,9.5536886 13,9.00245535 L13,1.99754465 C13,1.88482573 12.9809217,1.77647338 12.9458895,1.67541927 L7,6.29999999 L1.05353134,1.67496881 Z M2.00585866,0 C0.898053512,0 0,0.900176167 0,1.99201702 L0,9.00798298 C0,10.1081436 0.897060126,11 2.00585866,11 L11.9941413,11 C13.1019465,11 14,10.0998238 14,9.00798298 L14,1.99201702 C14,0.891856397 13.1029399,0 11.9941413,0 L2.00585866,0 Z M2.00585866,0')
|
||||
symbol#Icon-lock-desktop(viewbox='0 0 30 30')
|
||||
title Lock
|
||||
path(fill-rule='evenodd', transform='translate(9, 9)', d='M8.8,4 C8.8,1.79086089 7.76640339,4.18628304e-07 5.5,0 C3.23359661,-4.1480896e-07 2.2,1.79086089 2.2,4 L3.2,4 C3.2,2.34314567 3.81102123,0.999999681 5.5,1 C7.18897877,1.00000032 7.80000001,2.34314567 7.80000001,4 L8.8,4 Z M1.99201702,4 C0.891856397,4 0,4.88670635 0,5.99810135 L0,10.0018986 C0,11.1054196 0.900176167,12 1.99201702,12 L9.00798298,12 C10.1081436,12 11,11.1132936 11,10.0018986 L11,5.99810135 C11,4.89458045 10.0998238,4 9.00798298,4 L1.99201702,4 Z M1.99754465,5 C1.44661595,5 1,5.45097518 1,5.99077797 L1,10.009222 C1,10.5564136 1.4463114,11 1.99754465,11 L9.00245535,11 C9.55338405,11 10,10.5490248 10,10.009222 L10,5.99077797 C10,5.44358641 9.5536886,5 9.00245535,5 L1.99754465,5 Z M1.99754465,5')
|
||||
@ -32,23 +38,32 @@ html(lang='en')
|
||||
.payform--description Widget
|
||||
.payform--form
|
||||
form#payform(role='form')
|
||||
.payform--card-number.payform--field__error
|
||||
input(type='tel', value='', inputmode='numeric', placeholder='Card number', autocomplete='cc-number', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--icon
|
||||
svg(focusable='false', role='img', fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-creditCard-desktop')
|
||||
fieldset.payform--fieldset(style='display: none')
|
||||
.payform--email.payform--field__error
|
||||
input(type='email', value='', placeholder='Email', autocomplete='email', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--icon
|
||||
svg(fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-envelope-desktop')
|
||||
fieldset.payform--fieldset
|
||||
.payform--card-expire.payform--field__focus
|
||||
input(type='tel', value='', inputmode='numeric', placeholder='MM / YY', autocomplete='cc-exp', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--card-holder.payform--field__error
|
||||
input(type='text', value='', placeholder='Card holder', autocomplete='off', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--icon
|
||||
svg(focusable='false', role='img', fill='#549928')
|
||||
svg(fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-user-desktop')
|
||||
fieldset.payform--fieldset
|
||||
.payform--card-number.payform--field__error
|
||||
input(type='tel', value='', placeholder='Card number', autocomplete='off', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--icon
|
||||
svg(fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-creditCard-desktop')
|
||||
.payform--card-expire.payform--field__error.payform--field__focus
|
||||
input(type='tel', value='', placeholder='MM / YY', autocomplete='off', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--icon
|
||||
svg(fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-calendar-desktop')
|
||||
.payform--card-cvc
|
||||
input(type='tel', value='', inputmode='numeric', maxlength='4', placeholder='CVC', autocomplete='off', autocorrect='no', autocapitalize='no', spellcheck='no')
|
||||
.payform--card-cvc.payform--field__error
|
||||
input(type='tel', value='', placeholder='CVC', autocomplete='off', autocorrect='no', autocapitalize='no', spellcheck='no', maxlength='4')
|
||||
.payform--icon
|
||||
svg(focusable='false', role='img', fill='#549928')
|
||||
svg(fill='#549928')
|
||||
use(xmlns:xlink='http://www.w3.org/1999/xlink', xlink:href='#Icon-lock-desktop')
|
||||
button.payform--pay-button(type='submit', form='payform')
|
||||
span
|
||||
| Pay
|
||||
span $9.99
|
||||
button.payform--pay-button(type='submit', form='payform') Pay $9.99
|
||||
|
||||
Loading…
Reference in New Issue
Block a user