Added the titles of the input fields
This commit is contained in:
parent
f4d3d53d0c
commit
c09947ef12
3 changed files with 39 additions and 34 deletions
|
@ -524,29 +524,30 @@ a.unlink:hover {
|
|||
}
|
||||
|
||||
.brand {
|
||||
float: left;
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.brand #brand-icon {
|
||||
vertical-align: bottom;
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
.card-number-element {
|
||||
float: left;
|
||||
width: 63%;
|
||||
}
|
||||
|
||||
.card-expiry-element {
|
||||
float: left;
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
.card-cvc-element {
|
||||
float: left;
|
||||
width: 10%;
|
||||
}
|
||||
.card-element {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.card-element label{
|
||||
width:100%;
|
||||
margin-bottom:0px;
|
||||
}
|
||||
.my-input {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#card-errors {
|
||||
clear: both;
|
||||
|
@ -604,21 +605,18 @@ a.unlink:hover {
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.credit-card-element-with-brand {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.brand {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
.card-expiry-element {
|
||||
width: 40%;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.card-cvc-element {
|
||||
width: 15%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.hide-mobile{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -68,7 +68,7 @@ $(document).ready(function () {
|
|||
base: {
|
||||
iconColor: '#666EE8',
|
||||
color: '#31325F',
|
||||
lineHeight: '40px',
|
||||
lineHeight: '25px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-light', sans-serif",
|
||||
fontSize: '14px',
|
||||
|
@ -79,7 +79,7 @@ $(document).ready(function () {
|
|||
invalid: {
|
||||
iconColor: '#eb4d5c',
|
||||
color: '#eb4d5c',
|
||||
lineHeight: '40px',
|
||||
lineHeight: '25px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-regular', sans-serif",
|
||||
fontSize: '14px',
|
||||
|
@ -93,7 +93,7 @@ $(document).ready(function () {
|
|||
base: {
|
||||
iconColor: '#666EE8',
|
||||
color: '#31325F',
|
||||
lineHeight: '40px',
|
||||
lineHeight: '25px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-regular', sans-serif",
|
||||
fontSize: '14px',
|
||||
|
@ -104,7 +104,7 @@ $(document).ready(function () {
|
|||
invalid: {
|
||||
iconColor: '#eb4d5c',
|
||||
color: '#eb4d5c',
|
||||
lineHeight: '40px',
|
||||
lineHeight: '25px',
|
||||
fontWeight: 300,
|
||||
fontFamily: "'lato-regular', sans-serif",
|
||||
fontSize: '14px',
|
||||
|
@ -117,7 +117,7 @@ $(document).ready(function () {
|
|||
|
||||
var cardNumberElement = elements.create('cardNumber', {
|
||||
style: credit_card_text_style,
|
||||
placeholder: "____ ____ ____ ____"
|
||||
placeholder: "Enter your credit card number"
|
||||
});
|
||||
cardNumberElement.mount('#card-number-element');
|
||||
|
||||
|
|
|
@ -108,17 +108,24 @@
|
|||
<form action="" id="payment-form-new" method="POST">
|
||||
<input type="hidden" name="token"/>
|
||||
<div class="group">
|
||||
<div class="credit-card-element-with-brand">
|
||||
<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
|
||||
<div class="card-number-element">
|
||||
<div id="card-number-element" class="field"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-expiry-element">
|
||||
<div id="card-expiry-element" class="field"></div>
|
||||
</div>
|
||||
<div class="card-cvc-element">
|
||||
<div id="card-cvc-element" class="field"></div>
|
||||
<div class="credit-card-goup">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
|
||||
<label>Card Number</label>
|
||||
<div id="card-number-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-expiry-element">
|
||||
<label>Expiry Date</label>
|
||||
<div id="card-expiry-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-6 col-lg-6 hide-mobile"></div>
|
||||
<div class="col-xs-6 col-sm-5 col-md-3 col-lg-3 card-element card-cvc-element">
|
||||
<label>CVC</label>
|
||||
<div id="card-cvc-element" class="field my-input"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
|
||||
<label>Card Type</label>
|
||||
<i class="pf pf-credit-card" id="brand-icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-errors" role="alert"></div>
|
||||
|
|
Loading…
Reference in a new issue