mirror of
https://github.com/valitydev/checkout.git
synced 2024-11-06 02:25:18 +00:00
FE-246: integrate new markup for react app
This commit is contained in:
Alexandra Usacheva
parent
bd9842a1b2
commit
2a44436072
@ -1,287 +0,0 @@
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none; }
|
||||
|
||||
*, :after, :before {
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
body {
|
||||
font: 400 12px/16px Helvetica Neue, Helvetica, Arial, sans-serif; }
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
|
||||
a:active, a:hover {
|
||||
outline-width: 0; }
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
|
||||
html [type=button],
|
||||
button,
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
[type=button]:-moz-focusring,
|
||||
[type=reset]:-moz-focusring,
|
||||
[type=submit]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0; }
|
||||
|
||||
[type=number]::-webkit-inner-spin-button,
|
||||
[type=number]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px; }
|
||||
|
||||
[type=search]::-webkit-search-cancel-button,
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: .54; }
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit; }
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
background: none;
|
||||
text-transform: none; }
|
||||
|
||||
input::-ms-clear {
|
||||
display: none; }
|
||||
|
||||
.payform {
|
||||
padding: 20px 35px; }
|
||||
.payform input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 9px 9px 30px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
-webkit-transition: box-shadow 0.2s ease-out;
|
||||
transition: box-shadow 0.2s ease-out; }
|
||||
.payform input:focus {
|
||||
border-radius: 4px !important;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 7px 2px rgba(28, 96, 191, 0.7); }
|
||||
|
||||
.payform--fieldset {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 15px auto;
|
||||
font-size: 0; }
|
||||
|
||||
.payform--card-number,
|
||||
.payform--card-holder,
|
||||
.payform--email {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: 1; }
|
||||
|
||||
.payform--card-expire,
|
||||
.payform--card-cvc {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
z-index: 1; }
|
||||
|
||||
.payform--card-number input {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: -1px; }
|
||||
|
||||
.payform--card-expire input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
|
||||
.payform--card-cvc input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none; }
|
||||
|
||||
.payform--field__error {
|
||||
z-index: 10; }
|
||||
.payform--field__error input {
|
||||
border: 1px solid #ff7076;
|
||||
box-shadow: 0 0 2px 0 rgba(255, 0, 0, 0.5); }
|
||||
|
||||
.payform--field__focus {
|
||||
z-index: 20; }
|
||||
|
||||
.payform--icon {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 30px; }
|
||||
.payform--icon svg {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.payform--error-panel {
|
||||
margin: 15px auto;
|
||||
padding: 9px 10px;
|
||||
font-size: 13px;
|
||||
background: #f5f5f7;
|
||||
border: 1px solid #dfdfdf;
|
||||
color: #444444;
|
||||
border-radius: 4px; }
|
||||
|
||||
.payform--pay-button {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
margin: 15px auto;
|
||||
border-radius: 4px;
|
||||
background-color: #3fb1eb;
|
||||
background-image: -webkit-linear-gradient(to top, rgba(15, 110, 205, 0.4), transparent);
|
||||
background-image: linear-gradient(to top, rgba(15, 110, 205, 0.4), transparent);
|
||||
box-shadow: 0 1px 0 0 rgba(46, 86, 153, 0.15), inset 0 1px 0 0 rgba(46, 86, 153, 0.1), inset 0 -1px 0 0 rgba(46, 86, 153, 0.4);
|
||||
font: 700 16px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
color: #fff;
|
||||
cursor: pointer; }
|
||||
.payform--pay-button:active {
|
||||
background-image: -webkit-linear-gradient(top, #328ac3, #277bbe);
|
||||
background-image: linear-gradient(180deg, #328ac3, #277bbe); }
|
||||
.payform--pay-button[disabled] {
|
||||
background: #828282; }
|
||||
|
||||
.checkout--overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000;
|
||||
opacity: 0.6;
|
||||
z-index: -1; }
|
||||
|
||||
.checkout--container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
font: 12px/16px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
overflow: visible;
|
||||
box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.65); }
|
||||
|
||||
.checkout--header {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 55px 35px 20px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 5px 5px 0 0; }
|
||||
|
||||
.checkout--body {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: #f5f5f7;
|
||||
border-top: 1px solid #d2d2d3;
|
||||
border-radius: 0 0 5px 5px; }
|
||||
|
||||
.checkout--close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 2px;
|
||||
margin: 10px;
|
||||
border: 1px solid #bbbbbb;
|
||||
border-radius: 100%;
|
||||
background-color: #c6c6c6;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.checkout--logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -40%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #fefefe;
|
||||
border-radius: 100%;
|
||||
background: #fefefe center no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden; }
|
||||
|
||||
.checkout--company-name {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
|
||||
.checkout.-large .checkout--container {
|
||||
max-width: 75%;
|
||||
transform: translate(-50%, -50%); }
|
||||
|
||||
.checkout.-large .checkout--header {
|
||||
padding: 9px 40px; }
|
||||
|
||||
.checkout.-large .checkout--logo {
|
||||
opacity: 0; }
|
||||
|
||||
.checkout.-large iframe {
|
||||
width: 100%;
|
||||
height: 70vh; }
|
||||
@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Checkout</title>
|
||||
<link rel="stylesheet" type="text/css" href="checkout.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="checkout">
|
||||
<div class="checkout--overlay"></div>
|
||||
<div class="checkout--container">
|
||||
<div class="checkout--header">
|
||||
<div class="checkout--close-button">
|
||||
<svg width="12" height="12">
|
||||
<polygon points="1,3 1,2 2,1 3,1 6,4 9,1 10,1 11,2 11,3 8,6 11,9 11,10 10,11 9,11 6,8 3,11 1,11 2,11 1,10 1,9 4,6" fill="#e8e8e8" stroke="#bbbcbe" stroke-width="1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="checkout--logo" style="background-image: url('logo.png')"></div>
|
||||
<div class="checkout--company-name">
|
||||
RBKmoney
|
||||
</div>
|
||||
</div>
|
||||
<div class="checkout--body">
|
||||
<form id="payform" class="payform" role="form">
|
||||
<fieldset class="payform--fieldset">
|
||||
<div class="payform--card-holder">
|
||||
<input type="text" id="card-holder" value="" placeholder="Card holder" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no">
|
||||
<div class="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="payform--fieldset">
|
||||
<div class="payform--card-number">
|
||||
<input type="tel" id="card-number" value="" placeholder="Card number" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no">
|
||||
<div class="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<path fill-rule="evenodd" transform="translate(8, 10)" d="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.00247329,1 C1.44882258,1 1,1.4463114 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.44661595 12.544239,1 11.9975267,1 L2.00247329,1 Z M1,3 L1,5 L13,5 L13,3 L1,3 Z M11,8 L11,9 L12,9 L12,8 L11,8 Z M9,8 L9,9 L10,9 L10,8 L9,8 Z M9,8"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payform--card-expire">
|
||||
<input type="tel" id="exp-date" value="" placeholder="MM / YY" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no">
|
||||
<div class="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payform--card-cvc">
|
||||
<input type="tel" id="cvv" value="" placeholder="CVC" autocomplete="off" autocorrect="no" autocapitalize="no" spellcheck="no" maxlength="4">
|
||||
<div class="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="payform--fieldset">
|
||||
<div class="payform--email">
|
||||
<input type="email" id="email" value="" placeholder="Email" autocomplete="email" autocorrect="no" autocapitalize="no" spellcheck="no">
|
||||
<div class="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="payform--error-panel">error</div>
|
||||
<button class="payform--pay-button" type="button" form="payform">Оплатить 1499RUB</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
@ -1,97 +0,0 @@
|
||||
@import "reset.scss";
|
||||
@import "payform.scss";
|
||||
|
||||
.checkout--overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000;
|
||||
opacity: 0.6;
|
||||
z-index: -1;
|
||||
}
|
||||
.checkout--container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
font: 12px/16px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
overflow: visible;
|
||||
box-shadow: 0 12px 30px 0 rgba(0,0,0,0.5), inset 0 1px 0 0 hsla(0,0%,100%,0.65);
|
||||
}
|
||||
.checkout--header {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 55px 35px 20px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.checkout--body {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: #f5f5f7;
|
||||
border-top: 1px solid #d2d2d3;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.checkout--close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 2px;
|
||||
margin: 10px;
|
||||
border: 1px solid #bbbbbb;
|
||||
border-radius: 100%;
|
||||
background-color: #c6c6c6;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.checkout--logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -40%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #fefefe;
|
||||
border-radius: 100%;
|
||||
background: #fefefe center no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 2px 0 rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkout--company-name {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.checkout.-large {
|
||||
.checkout--container {
|
||||
max-width: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.checkout--header {
|
||||
padding: 9px 40px;
|
||||
}
|
||||
.checkout--logo {
|
||||
opacity: 0;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
.payform {
|
||||
padding: 20px 35px;
|
||||
input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 9px 9px 30px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
-webkit-transition: box-shadow 0.2s ease-out;
|
||||
transition: box-shadow 0.2s ease-out;
|
||||
&:focus {
|
||||
border-radius: 4px!important;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 7px 2px rgba(28,96,191,0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.payform--fieldset {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 15px auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.payform--card-number,
|
||||
.payform--card-holder,
|
||||
.payform--email {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.payform--card-expire,
|
||||
.payform--card-cvc {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
.payform--card-number input {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.payform--card-expire input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.payform--card-cvc input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
}
|
||||
.payform--field__error {
|
||||
z-index: 10;
|
||||
input {
|
||||
border: 1px solid #ff7076;
|
||||
box-shadow: 0 0 2px 0 rgba(255,0,0,0.5);
|
||||
}
|
||||
}
|
||||
.payform--field__focus {
|
||||
z-index: 20;
|
||||
}
|
||||
.payform--icon {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.payform--error-panel {
|
||||
margin: 15px auto;
|
||||
padding: 9px 10px;
|
||||
font-size: 13px;
|
||||
background: #f5f5f7;
|
||||
border: 1px solid #dfdfdf;
|
||||
color: #444444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.payform--pay-button {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
margin: 15px auto;
|
||||
border-radius: 4px;
|
||||
background-color: #3fb1eb;
|
||||
background-image: -webkit-linear-gradient(to top,rgba(15,110,205,0.4),transparent);
|
||||
background-image: linear-gradient(to top,rgba(15,110,205,0.4),transparent);
|
||||
box-shadow: 0 1px 0 0 rgba(46,86,153,0.15),inset 0 1px 0 0 rgba(46,86,153,.1),inset 0 -1px 0 0 rgba(46,86,153,0.4);
|
||||
font: 700 16px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
background-image: -webkit-linear-gradient(top, #328ac3, #277bbe);
|
||||
background-image: linear-gradient(180deg, #328ac3, #277bbe)
|
||||
}
|
||||
&[disabled] {
|
||||
background: #828282;
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<meta name='viewport' content='user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1'>
|
||||
<title>Checkout</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iframe src="checkout.html"
|
||||
id="checkout"
|
||||
style="
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
z-index: 100000000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0 none transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
"
|
||||
></iframe>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus et eros eu vestibulum. In ullamcorper vulputate lacus vitae egestas. Pellentesque id blandit mauris. Duis scelerisque feugiat massa, id accumsan elit pharetra id. Nam condimentum ornare ipsum eget porttitor. Mauris vel velit et tellus eleifend scelerisque non eu nunc. Duis vehicula id enim commodo pellentesque. Nam vel neque sem. Curabitur vel lectus ipsum. Mauris libero elit, ullamcorper sit amet nulla ut, luctus varius dolor. Phasellus suscipit nunc lacus, at sagittis ante pretium at. Suspendisse maximus et magna nec blandit. Vestibulum nec ante malesuada, fringilla libero in, finibus leo.</p>
|
||||
<p>Fusce eu eleifend tellus. Aenean pretium posuere ex a ultricies. Quisque felis ex, euismod vel diam vel, finibus posuere neque. Proin tempus eros sed lorem porta interdum. Cras eu tellus elit. Praesent vitae hendrerit est, eget volutpat erat. Suspendisse potenti. Nulla varius purus et venenatis facilisis. Nam at accumsan quam. Nunc est dolor, posuere at pulvinar in, condimentum pretium velit. Fusce sapien enim, dictum feugiat justo sit amet, pulvinar interdum justo. Nulla auctor felis ac enim porta commodo.</p>
|
||||
<p>Curabitur in dictum sapien, faucibus finibus ligula. Morbi eget rhoncus purus. Aliquam consectetur, erat et efficitur placerat, sapien nisl tincidunt ex, non pretium metus nisi nec metus. Curabitur vitae sapien sed magna bibendum porttitor vitae sed sem. Praesent sed tempor ipsum, ac blandit libero. Praesent fringilla eros eget aliquet placerat. Vivamus aliquam, lorem at interdum varius, tortor leo maximus metus, a tempus turpis nibh nec elit. Duis dignissim elementum nisi, et dictum neque condimentum eu. Vestibulum maximus turpis eu est lobortis tempus. Cras ullamcorper, dolor id ornare gravida, magna metus venenatis mi, quis iaculis nisi ante non nunc. Sed est mi, faucibus quis tincidunt tincidunt, volutpat vitae urna. Vivamus sit amet felis sit amet tortor suscipit placerat.</p>
|
||||
<p>Vivamus luctus nunc ante, vel laoreet magna pretium a. Nulla facilisi. In lacinia ex erat, id lobortis libero rutrum quis. Fusce lobortis, neque ac vehicula vulputate, eros mi vulputate nibh, quis maximus ligula augue ac dolor. Pellentesque sagittis ut tellus rhoncus auctor. Pellentesque ornare nec felis ac tincidunt. Sed congue convallis augue at congue. Nam quam metus, interdum eget risus at, placerat lobortis velit. Proin in placerat turpis. Curabitur sagittis mi vitae felis mollis vulputate. Mauris elementum massa sit amet pulvinar pellentesque. Donec porttitor, nunc in faucibus fermentum, nunc nibh viverra augue, sed dignissim arcu lacus vitae enim. Vestibulum quis magna eget risus ornare lacinia.</p>
|
||||
<p>Integer tellus tortor, congue id sollicitudin et, lobortis auctor odio. Duis lorem eros, consectetur eget aliquam non, convallis semper augue. In ullamcorper sem ut ornare efficitur. Donec sed enim tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vehicula neque volutpat, venenatis ante et, egestas ex. Donec ante purus, auctor in scelerisque nec, accumsan eget ipsum. Pellentesque convallis volutpat porttitor.</p>
|
||||
<p>Quisque vel tincidunt leo. Nulla facilisi. Nam in felis rhoncus, cursus eros nec, luctus quam. Aenean sit amet fringilla lorem, eget porttitor quam. Fusce vitae arcu libero. Curabitur orci est, bibendum et posuere vel, aliquam ac tortor. Integer lectus ante, fermentum eget ex id, scelerisque feugiat velit. Vivamus tempor tempor arcu vel aliquet. Duis et metus fringilla, ornare tortor ut, mollis neque. Pellentesque urna orci, pretium nec quam nec, feugiat dapibus nibh. Nullam dictum eget sem sit amet sodales. Integer a elit ut justo dapibus fermentum. Praesent hendrerit ultricies quam, a efficitur dui. Fusce blandit hendrerit ornare. Pellentesque sit amet vehicula dui, ut dignissim eros. Curabitur elementum tellus ac turpis sollicitudin imperdiet.</p>
|
||||
<p>Integer augue dui, ultrices tincidunt vehicula nec, consequat at elit. Nunc sodales dui libero, eget molestie enim dignissim in. Donec non maximus nulla. Curabitur vitae purus non turpis interdum vulputate. Morbi posuere viverra hendrerit. Vestibulum congue, ligula a congue laoreet, dolor tortor hendrerit massa, eu pulvinar massa urna quis tellus. Maecenas ipsum arcu, rhoncus et augue non, bibendum posuere ligula.</p>
|
||||
<p>Phasellus ex mauris, egestas et justo eget, blandit lobortis tellus. Proin tempus ante eu nisl efficitur, et molestie ante tristique. Morbi sapien nunc, rhoncus vitae eleifend a, congue in arcu. Donec faucibus vulputate justo. Maecenas tellus justo, congue id interdum sed, semper eu erat. Ut dui massa, pharetra sed tempus placerat, auctor ac ipsum. Sed tincidunt eros neque, quis finibus turpis bibendum nec. Morbi rhoncus metus libero, facilisis sollicitudin mauris maximus vel. Ut a congue nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sagittis risus vel nulla bibendum porttitor. Integer sollicitudin nisl arcu, id pulvinar erat finibus ut. Nulla eleifend ultricies eleifend. Sed a justo sed nisi suscipit feugiat. Suspendisse sollicitudin porttitor magna id sodales.</p>
|
||||
<p>Nam eu nisi at purus scelerisque tincidunt quis in nulla. Aliquam elementum nec lectus ac maximus. Etiam eu lacinia lorem. Aliquam suscipit ante mi, sit amet vehicula nulla efficitur sed. Nulla massa urna, accumsan in finibus eget, volutpat eget nisl. Quisque nunc ex, ornare in nunc id, tempus vehicula magna. Maecenas dictum sem quam, et volutpat nisl malesuada a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam commodo justo eget pretium mattis. Ut tincidunt commodo diam, eu tristique velit imperdiet interdum.</p>
|
||||
<p>Etiam ut orci ipsum. Vivamus bibendum luctus aliquet. Fusce posuere tincidunt enim a feugiat. Proin sit amet sapien in arcu tempor maximus eget ac libero. Aenean ultricies pretium magna ac euismod. Vestibulum purus tellus, volutpat sit amet lobortis a, ornare nec lacus. Proin pharetra porttitor volutpat. Nam bibendum quam est, vitae volutpat metus scelerisque nec. Aliquam a est mollis, lobortis dolor ut, dapibus nibh. Mauris ante felis, gravida id elit sit amet, tristique laoreet ligula. Nullam justo ipsum, molestie ut risus non, ornare egestas sem. Quisque sed augue diam.</p>
|
||||
<p>In sagittis ligula quis risus elementum efficitur. Integer venenatis tortor eget volutpat sagittis. Phasellus in posuere metus. Praesent rutrum magna lectus, eu egestas lacus posuere at. Aenean dapibus enim quis ligula scelerisque, gravida laoreet ligula sollicitudin. Quisque a dolor quis diam dignissim dictum ac pellentesque urna. Etiam luctus sapien erat, sit amet tempor leo mattis id. Suspendisse convallis id libero vitae volutpat. Nullam arcu ante, porta eget viverra sed, commodo ut metus. Nunc vel metus facilisis, rhoncus lectus ac, ornare enim. Proin vel tellus dolor.</p>
|
||||
<p>Etiam euismod nunc at mi malesuada, sed porttitor turpis ullamcorper. Maecenas eget vestibulum urna, at cursus tortor. Nulla nec lorem nec est tincidunt semper. Aenean porta odio leo, et finibus ante sagittis in. Ut id arcu a eros ornare rutrum at vitae nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sit amet venenatis dui, non tincidunt ex. Sed tincidunt blandit nisi, imperdiet consectetur turpis convallis sed.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -34,6 +34,7 @@
|
||||
"express": "^4.14.0",
|
||||
"extract-text-webpack-plugin": "^2.1.0",
|
||||
"image-webpack-loader": "^3.2.0",
|
||||
"node-sass": "^4.5.1",
|
||||
"sass-loader": "^6.0.3",
|
||||
"style-loader": "^0.15.0",
|
||||
"webpack": "^2.2.1",
|
||||
|
||||
6
src/checkout/app.scss
Normal file
6
src/checkout/app.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "./styles/_variables.scss";
|
||||
@import "./styles/_reset.scss";
|
||||
|
||||
@import "./styles/payform.scss";
|
||||
@import "./styles/checkout.scss";
|
||||
@import "./styles/payframe.scss";
|
||||
@ -1,4 +1,4 @@
|
||||
import './checkout.css';
|
||||
import './app.scss';
|
||||
import 'whatwg-fetch';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import LogoImage from '../images/logo.png';
|
||||
|
||||
class Logo extends React.Component {
|
||||
|
||||
render() {
|
||||
return <div className="payform--logo-image" style={{backgroundImage: 'url("' + this.props.logoUrl + '")'}}></div>
|
||||
return <div className="checkout--logo" style={{backgroundImage: `url(${LogoImage})`}} />
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -97,18 +97,19 @@ class Modal extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="modal">
|
||||
<div className="modal--container">
|
||||
<ModalClose/>
|
||||
<div className="modal--body">
|
||||
<div className="payform">
|
||||
<div className="payform--header">
|
||||
<div className="payform--logo">
|
||||
<Logo logoUrl={this.props.logo}/>
|
||||
</div>
|
||||
<div className="payform--company-name">{this.props.name}</div>
|
||||
return (
|
||||
<div className="checkout">
|
||||
<div className="checkout--overlay" />
|
||||
<div className="checkout--container">
|
||||
<div className="checkout--header">
|
||||
<ModalClose />
|
||||
<Logo logoUrl={this.props.logo}/>
|
||||
<div className="checkout--company-name">
|
||||
{this.props.name}
|
||||
</div>
|
||||
<div className="payform--form">
|
||||
</div>
|
||||
<div className="checkout--body">
|
||||
<div className="payform">
|
||||
<Spinner isShow={this.isInProcess}/>
|
||||
<Checkmark isShow={this.isProcessSuccess}/>
|
||||
<Payform isShow={!this.isInProcess && !this.isProcessSuccess}
|
||||
@ -123,7 +124,7 @@ class Modal extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,13 @@ class ModalClose extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="modal--close" onClick={this.close}/>;
|
||||
return (
|
||||
<div className="checkout--close-button" onClick={this.close}>
|
||||
<svg width="12" height="12">
|
||||
<polygon points="1,3 1,2 2,1 3,1 6,4 9,1 10,1 11,2 11,3 8,6 11,9 11,10 10,11 9,11 6,8 3,11 1,11 2,11 1,10 1,9 4,6" fill="#e8e8e8" stroke="#bbbcbe" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,23 +80,31 @@ class Payform extends React.Component {
|
||||
const cardExpire = state.cardExpire;
|
||||
const cardCvv = state.cardCvv;
|
||||
const email = state.email;
|
||||
return <form id="payform" role="form" ref={(form) => { this.formElement = form; }}>
|
||||
<fieldset className="payform--fieldset">
|
||||
<CardHolder value={cardHolder.value} onChange={this.handleCardHolder} isValid={cardHolder.isValid}/>
|
||||
</fieldset>
|
||||
<fieldset className="payform--fieldset">
|
||||
<CardNumber value={cardNumber.value} onChange={this.handleCardNumber} isValid={cardNumber.isValid}/>
|
||||
<CardExpire value={cardExpire.value} onChange={this.handleCardExpire} isValid={cardExpire.isValid}/>
|
||||
<CardCvv value={cardCvv.value} onChange={this.handleCardCvv} isValid={cardCvv.isValid}/>
|
||||
</fieldset>
|
||||
<fieldset className="payform--fieldset">
|
||||
<Email value={email.value} onChange={this.handleEmail} isValid={email.isValid}/>
|
||||
</fieldset>
|
||||
<ErrorPanel isShow={this.isShowErrorPanel} message={this.errorMessage}/>
|
||||
<button className="payform--pay-button" type="button" form="payform" onClick={this.pay} style={{background: this.props.buttonColor}}
|
||||
disabled={this.isPayButtonDisabled}>Оплатить {this.props.amount}{this.props.currency}
|
||||
</button>
|
||||
</form>
|
||||
return (
|
||||
<form id="payform" role="form" ref={(form) => { this.formElement = form; }}>
|
||||
<fieldset className="payform--fieldset">
|
||||
<CardHolder value={cardHolder.value} onChange={this.handleCardHolder} isValid={cardHolder.isValid}/>
|
||||
</fieldset>
|
||||
<fieldset className="payform--fieldset">
|
||||
<CardNumber value={cardNumber.value} onChange={this.handleCardNumber} isValid={cardNumber.isValid}/>
|
||||
<CardExpire value={cardExpire.value} onChange={this.handleCardExpire} isValid={cardExpire.isValid}/>
|
||||
<CardCvv value={cardCvv.value} onChange={this.handleCardCvv} isValid={cardCvv.isValid}/>
|
||||
</fieldset>
|
||||
<fieldset className="payform--fieldset">
|
||||
<Email value={email.value} onChange={this.handleEmail} isValid={email.isValid}/>
|
||||
</fieldset>
|
||||
<ErrorPanel isShow={this.isShowErrorPanel} message={this.errorMessage}/>
|
||||
<button className="payform--pay-button"
|
||||
type="button"
|
||||
form="payform"
|
||||
onClick={this.pay}
|
||||
style={{background: this.props.buttonColor}}
|
||||
disabled={this.isPayButtonDisabled}
|
||||
>
|
||||
Оплатить {this.props.amount}{this.props.currency}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
static assignValue(prop, value) {
|
||||
|
||||
@ -38,8 +38,8 @@ class CardCvv extends React.Component {
|
||||
onChange={this.handleChange}
|
||||
placeholder="CVC" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no" maxLength="4"/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#549928">
|
||||
<path fillRule="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"></path>
|
||||
<svg fill="#2b2b2b">
|
||||
<path fillRule="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" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,18 +31,22 @@ class CardExpire extends React.Component {
|
||||
|
||||
render() {
|
||||
const value = this.props.value;
|
||||
return <div className="payform--group payform--card-expire">
|
||||
<input id="exp-date" type="tel"
|
||||
ref={(input) => { this.input = input; }}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
placeholder="MM / YY" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no"/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#549928">
|
||||
<path fillRule="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"></path>
|
||||
</svg>
|
||||
return (
|
||||
<div className="payform--card-expire">
|
||||
<input id="exp-date" type="tel"
|
||||
ref={(input) => { this.input = input; }}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
placeholder="MM / YY" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no"
|
||||
/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<path fillRule="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" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,18 +29,21 @@ class CardHolder extends React.Component {
|
||||
|
||||
render() {
|
||||
const value = this.props.value;
|
||||
return <div className="payform--group payform--card-holder">
|
||||
<input id="card-holder" type="text"
|
||||
ref={(input) => { this.input = input; }}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
placeholder="Card holder" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no"/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#549928">
|
||||
<path fillRule="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"></path>
|
||||
</svg>
|
||||
return (
|
||||
<div className="payform--card-holder">
|
||||
<input id="card-holder" type="text"
|
||||
ref={(input) => { this.input = input; }}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
placeholder="Card holder" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no"
|
||||
/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#2b2b2b">
|
||||
<path fillRule="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" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,8 +38,8 @@ class CardNumber extends React.Component {
|
||||
onChange={this.handleChange}
|
||||
placeholder="Card number" autoComplete="off" autoCorrect="no" autoCapitalize="no" spellCheck="no"/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#549928">
|
||||
<path fillRule="evenodd" transform="translate(8, 10)" d="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.00247329,1 C1.44882258,1 1,1.4463114 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.44661595 12.544239,1 11.9975267,1 L2.00247329,1 Z M1,3 L1,5 L13,5 L13,3 L1,3 Z M11,8 L11,9 L12,9 L12,8 L11,8 Z M9,8 L9,9 L10,9 L10,8 L9,8 Z M9,8"></path>
|
||||
<svg fill="#2b2b2b">
|
||||
<path fillRule="evenodd" transform="translate(8, 10)" d="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.00247329,1 C1.44882258,1 1,1.4463114 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.44661595 12.544239,1 11.9975267,1 L2.00247329,1 Z M1,3 L1,5 L13,5 L13,3 L1,3 Z M11,8 L11,9 L12,9 L12,8 L11,8 Z M9,8 L9,9 L10,9 L10,8 L9,8 Z M9,8" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,7 @@ class Email extends React.Component {
|
||||
onChange={this.handleChange}
|
||||
placeholder="Email" autoComplete="email" autoCorrect="no" autoCapitalize="no" spellCheck="no"/>
|
||||
<div className="payform--icon">
|
||||
<svg fill="#549928">
|
||||
<svg fill="#2b2b2b">
|
||||
<path fillRule="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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,9 @@ class ErrorPanel extends React.Component {
|
||||
|
||||
render() {
|
||||
if (this.props.isShow) {
|
||||
return <div className="error-panel">{this.props.message}</div>
|
||||
return (
|
||||
<div className="payform--error-panel">{this.props.message}</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
15
src/checkout/styles/_variables.scss
Normal file
15
src/checkout/styles/_variables.scss
Normal file
@ -0,0 +1,15 @@
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$gray1: #dfdfdf;
|
||||
$gray2: #f5f5f7;
|
||||
$gray3: #444444;
|
||||
$gray4: #828282;
|
||||
$gray5: #e8e8e8;
|
||||
$gray6: #d2d2d3;
|
||||
$gray7: #bbbbbb;
|
||||
$gray8: #c6c6c6;
|
||||
$gray9: #fefefe;
|
||||
$pink: #ff7076;
|
||||
$blue1: #3fb1eb;
|
||||
$blue2: #328ac3;
|
||||
$blue3: #277bbe;
|
||||
@ -1,90 +0,0 @@
|
||||
.checkmark {
|
||||
margin-left: 78px;
|
||||
margin-top: 99px;
|
||||
margin-bottom: 98px;
|
||||
}
|
||||
|
||||
/* animations */
|
||||
|
||||
@-webkit-keyframes checkmark {
|
||||
0% {
|
||||
stroke-dashoffset: 50px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes checkmark {
|
||||
0% {
|
||||
stroke-dashoffset: 50px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark {
|
||||
0% {
|
||||
stroke-dashoffset: 50px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkmark-circle {
|
||||
0% {
|
||||
stroke-dashoffset: 240px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 480px
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes checkmark-circle {
|
||||
0% {
|
||||
stroke-dashoffset: 240px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 480px
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmark-circle {
|
||||
0% {
|
||||
stroke-dashoffset: 240px
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 480px
|
||||
}
|
||||
}
|
||||
|
||||
/* other styles */
|
||||
/* .svg svg {
|
||||
display: none
|
||||
}
|
||||
*/
|
||||
.inlinesvg .svg svg {
|
||||
display: inline
|
||||
}
|
||||
|
||||
/* .svg img {
|
||||
display: none
|
||||
} */
|
||||
|
||||
.icon--order-success svg path {
|
||||
-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
|
||||
animation: checkmark 0.25s ease-in-out 0.7s backwards
|
||||
}
|
||||
|
||||
.icon--order-success svg circle {
|
||||
-webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
|
||||
animation: checkmark-circle 0.6s ease-in-out backwards
|
||||
}
|
||||
108
src/checkout/styles/checkout.scss
Normal file
108
src/checkout/styles/checkout.scss
Normal file
@ -0,0 +1,108 @@
|
||||
.checkout {
|
||||
&--overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $black;
|
||||
opacity: 0.6;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&--container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
background: $white;
|
||||
border-radius: 5px;
|
||||
font: 12px/16px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
overflow: visible;
|
||||
box-shadow: 0 12px 30px 0 rgba(0,0,0,0.5), inset 0 1px 0 0 hsla(0,0%,100%,0.65);
|
||||
}
|
||||
|
||||
&--header {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 55px 35px 20px;
|
||||
background-color: $gray5;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
&--body {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: $gray2;
|
||||
border-top: 1px solid $gray6;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
&--close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 2px;
|
||||
margin: 10px;
|
||||
border: 1px solid $gray7;
|
||||
border-radius: 100%;
|
||||
background-color: $gray8;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&--logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -40%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid $gray9;
|
||||
border-radius: 100%;
|
||||
background: $gray9 center no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 2px 2px 0 rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&--company-name {
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
color: $black;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.-large {
|
||||
.checkout {
|
||||
&--container {
|
||||
max-width: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&--header {
|
||||
padding: 9px 40px;
|
||||
}
|
||||
|
||||
&--logo {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
.error-panel {
|
||||
border-radius: 5px;
|
||||
padding: 9px 10px;
|
||||
font-size: 13px;
|
||||
background: #ff7b7b;
|
||||
}
|
||||
@ -1,460 +0,0 @@
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block
|
||||
}
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline
|
||||
}
|
||||
[hidden],
|
||||
template {
|
||||
display: none
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
dfn {
|
||||
font-style: italic
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000
|
||||
}
|
||||
small {
|
||||
font-size: 80%
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
sub {
|
||||
bottom: -.25em
|
||||
}
|
||||
sup {
|
||||
top: -.5em
|
||||
}
|
||||
img {
|
||||
border-style: none
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
figure {
|
||||
margin: 1em 40px
|
||||
}
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible
|
||||
}
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
margin: 0
|
||||
}
|
||||
optgroup {
|
||||
font-weight: 700
|
||||
}
|
||||
button,
|
||||
input {
|
||||
overflow: visible
|
||||
}
|
||||
button,
|
||||
select {
|
||||
text-transform: none
|
||||
}
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
button,
|
||||
html [type=button] {
|
||||
-webkit-appearance: button
|
||||
}
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0
|
||||
}
|
||||
[type=button]:-moz-focusring,
|
||||
[type=reset]:-moz-focusring,
|
||||
[type=submit]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid silver;
|
||||
margin: 0 2px;
|
||||
padding: .35em .625em .75em
|
||||
}
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal
|
||||
}
|
||||
textarea {
|
||||
overflow: auto
|
||||
}
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
[type=number]::-webkit-inner-spin-button,
|
||||
[type=number]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px
|
||||
}
|
||||
[type=search]::-webkit-search-cancel-button,
|
||||
[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: .54
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit
|
||||
}
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-font-smoothing: antialiased
|
||||
}
|
||||
:focus {
|
||||
outline: none
|
||||
}
|
||||
body {
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: center
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
form {
|
||||
margin: 0
|
||||
}
|
||||
fieldset {
|
||||
margin: 0
|
||||
}
|
||||
fieldset,
|
||||
input {
|
||||
padding: 0;
|
||||
border: 0
|
||||
}
|
||||
input {
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text
|
||||
}
|
||||
input,
|
||||
select {
|
||||
line-height: normal!important;
|
||||
background: none;
|
||||
width: 100%
|
||||
}
|
||||
select {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0
|
||||
}
|
||||
label {
|
||||
color: #5b5b65
|
||||
}
|
||||
input::-ms-clear {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
.preload > * {
|
||||
display: none
|
||||
}
|
||||
.modal {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.modal--overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
-webkit-transition-duration: .2s;
|
||||
transition-duration : .2s;
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
z-index: -1;
|
||||
}
|
||||
.modal--container {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
max-height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: visible;
|
||||
border-radius: 6px;
|
||||
background-color: #f5f5f7;
|
||||
box-shadow: 0 12px 30px 0 rgba(0,0,0,.6),inset 0 1px 0 0 #fff;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.modal--body {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.modal--close {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: url('../images/modal-close@2x.png') 4px 4px no-repeat;
|
||||
background-size: 17px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
.payform {
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.payform--header {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 50px 36px 12px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
text-align: center;
|
||||
background-color: #e8e9eb;
|
||||
}
|
||||
.payform--logo {
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.payform--logo-image {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.payform--logo-image::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: url('../images/logo-overlay@2x.png') no-repeat;
|
||||
background-size: contain;
|
||||
margin: -5px;
|
||||
}
|
||||
.payform--company-name {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.payform--description {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #5b5b65;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.payform--form {
|
||||
padding: 20px 35px;
|
||||
}
|
||||
.payform--fieldset {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 15px auto;
|
||||
font-size: 0;
|
||||
}
|
||||
.payform--card-number, .payform--card-holder, .payform--email {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.payform--card-expire, .payform--card-cvc {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
.payform input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 9px 9px 30px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
border: 1px solid hsla(240,1%,49%,.25);
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
-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--field__focus {
|
||||
z-index: 10;
|
||||
}
|
||||
.payform .payform--field__error input {
|
||||
box-shadow: inset 0 1px 2px transparent,0 1px 0 hsla(0,0%,100%,0),0 0 2px 0 rgba(255,0,0,.5);
|
||||
border-color: #ff7076;
|
||||
border-top-color: #ff5c61;
|
||||
}
|
||||
.payform--icon {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
}
|
||||
.payform--icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.payform--pay-button {
|
||||
position: relative;
|
||||
padding: 7px 5px 9px;
|
||||
margin: 15px auto;
|
||||
border-radius: 4px;
|
||||
background-color: #3fb1eb;
|
||||
background-image: -webkit-linear-gradient(to top,rgba(15,110,205,.4),transparent);
|
||||
background-image: linear-gradient(to top,rgba(15,110,205,.4),transparent);
|
||||
box-shadow: 0 1px 0 0 rgba(46,86,153,.15),inset 0 1px 0 0 rgba(46,86,153,.1),inset 0 -1px 0 0 rgba(46,86,153,.4);
|
||||
font-size: 17px;
|
||||
line-height: 21px;
|
||||
min-height: 37px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.payform--pay-button:active {
|
||||
background-image: -webkit-linear-gradient(top, #328ac3, #277bbe);
|
||||
background-image: linear-gradient(180deg, #328ac3, #277bbe)
|
||||
}
|
||||
.payform--pay-button[disabled] {
|
||||
background: #828282;
|
||||
}
|
||||
132
src/checkout/styles/payform.scss
Normal file
132
src/checkout/styles/payform.scss
Normal file
@ -0,0 +1,132 @@
|
||||
.payform {
|
||||
padding: 20px 35px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 9px 9px 30px;
|
||||
font-size: 15px;
|
||||
color: $black;
|
||||
border: 1px solid $gray1;
|
||||
border-radius: 4px;
|
||||
background: $white;
|
||||
transition: box-shadow 0.2s ease-out;
|
||||
|
||||
&:focus {
|
||||
border-radius: 4px !important;
|
||||
border-color: $white;
|
||||
box-shadow: 0 0 7px 2px rgba(28, 96, 191, 0.7);
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
&--fieldset {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 15px auto;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
&--card-number,
|
||||
&--card-holder,
|
||||
&--email {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--card-expire,
|
||||
&--card-cvc {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--card-number {
|
||||
input {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&--card-expire {
|
||||
input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--card-cvc {
|
||||
input {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--field {
|
||||
&__error {
|
||||
z-index: 10;
|
||||
|
||||
input {
|
||||
border: 1px solid $pink;
|
||||
box-shadow: 0 0 2px 0 rgba(255,0,0,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--error-panel {
|
||||
margin: 15px auto;
|
||||
padding: 9px 10px;
|
||||
font-size: 13px;
|
||||
background: $gray2;
|
||||
border: 1px solid $gray1;
|
||||
color: $gray3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&--pay-button {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
margin: 15px auto;
|
||||
border-radius: 4px;
|
||||
background-color: $blue1;
|
||||
background-image: linear-gradient(to top,rgba(15,110,205,0.4),transparent);
|
||||
box-shadow: 0 1px 0 0 rgba(46,86,153,0.15),inset 0 1px 0 0 rgba(46,86,153,.1),inset 0 -1px 0 0 rgba(46,86,153,0.4);
|
||||
font: 700 16px/20px Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background-image: linear-gradient(180deg, $blue2, $blue3)
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: $gray4;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
src/checkout/styles/payframe.scss
Normal file
65
src/checkout/styles/payframe.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.rbkmoney {
|
||||
&-button {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
visibility: visible !important;
|
||||
background-image: linear-gradient(#28a0e5, #015e94);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 1px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
user-select: none;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
& span {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: #1275ff;
|
||||
background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
&:not(:disabled):active,
|
||||
&.active {
|
||||
background: #005d93
|
||||
}
|
||||
|
||||
&:not(:disabled):active span,
|
||||
&.active span {
|
||||
color: #eee;
|
||||
background: #008cdd;
|
||||
background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
&:disabled span,
|
||||
&.disabled span {
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
}
|
||||
@ -1,186 +0,0 @@
|
||||
@-webkit-keyframes uil-default-anim {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
100% {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes uil-default-anim {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
100% {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(1) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 37px auto;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(2) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.4166666666666667s;
|
||||
animation-delay: -0.4166666666666667s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(3) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.33333333333333337s;
|
||||
animation-delay: -0.33333333333333337s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(4) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.25s;
|
||||
animation-delay: -0.25s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(5) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.16666666666666669s;
|
||||
animation-delay: -0.16666666666666669s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(6) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: -0.08333333333333331s;
|
||||
animation-delay: -0.08333333333333331s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(7) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(8) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0.08333333333333337s;
|
||||
animation-delay: 0.08333333333333337s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(9) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0.16666666666666663s;
|
||||
animation-delay: 0.16666666666666663s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(10) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(11) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0.33333333333333337s;
|
||||
animation-delay: 0.33333333333333337s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.spinner > div:nth-of-type(12) {
|
||||
-webkit-animation: uil-default-anim 1s linear infinite;
|
||||
animation: uil-default-anim 1s linear infinite;
|
||||
-webkit-animation-delay: 0.41666666666666663s;
|
||||
animation-delay: 0.41666666666666663s;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
background: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
.rbkmoney-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
padding: 8px 12px;
|
||||
outline: 0;
|
||||
font: bold 14px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 1px solid #2384c1;
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.rbkmoney-button:not(:disabled):active, .rbkmoney-button.active {
|
||||
color: #eee;
|
||||
border: 1px solid #1d73a4;
|
||||
background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
.rbkmoney-button:disabled, .rbkmoney-button.disabled {
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import './payframe.css';
|
||||
import './payframe.scss';
|
||||
import Iframe from './elements/Iframe';
|
||||
import PayButton from './elements/PayButton';
|
||||
import StyleLink from './elements/StyleLink';
|
||||
|
||||
34
src/payframe/payframe.scss
Normal file
34
src/payframe/payframe.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.rbkmoney {
|
||||
&-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
padding: 8px 12px;
|
||||
outline: 0;
|
||||
font: bold 14px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
border: 1px solid #2384c1;
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(#7dc5ee, #008cdd 85%, #30a2e4);
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:not(:disabled):active, .rbkmoney-button.active {
|
||||
color: #eee;
|
||||
border: 1px solid #1d73a4;
|
||||
background-image: linear-gradient(#008cdd, #008cdd 85%, #239adf);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
&:disabled, .rbkmoney-button.disabled {
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,10 +18,14 @@ module.exports = {
|
||||
{ enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' },
|
||||
{ test: /\.(js|jsx)$/, use: 'babel-loader' },
|
||||
{
|
||||
test: /\.(css|scss)$/,
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader'
|
||||
use: [
|
||||
{ loader: "css-loader" },
|
||||
{ loader: "sass-loader" }
|
||||
],
|
||||
fallback: 'style-loader'
|
||||
|
||||
})
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user