100 lines
1.9 KiB
CSS
100 lines
1.9 KiB
CSS
.container {
|
|
background-color: rgb(240, 240, 240);
|
|
margin: auto;
|
|
/*width: calc(95%);*/
|
|
|
|
border: none;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#checkout-form {
|
|
position: relative;
|
|
/*width: calc(95%);*/
|
|
margin: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
#checkout-form label {
|
|
display: block;
|
|
min-height: 25px;
|
|
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
color: red;
|
|
}
|
|
|
|
#card-number, #card-cvv, #card-expiry {
|
|
background-color: #FFF;
|
|
display: block;
|
|
/*width: calc(90%);*/
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(200, 200, 200, 1);
|
|
padding: 14px 60px 13px 20px;
|
|
margin: auto;
|
|
transition: all 100ms ease-out;
|
|
}
|
|
|
|
/* card images are added to card number */
|
|
#card-number {
|
|
background-image: none;
|
|
|
|
background-origin: content-box;
|
|
background-position: calc(100% + 40px) center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* buttons */
|
|
.bambora-btn {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.bambora-btn {
|
|
position: relative;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: rgba(120, 71, 181, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
display: inline-block;
|
|
transition: all 100ms ease-out;
|
|
padding: 11px 25px;
|
|
}
|
|
|
|
.bambora-btn:hover, .bambora-btn:active {
|
|
background-color: rgba(69, 36, 89, 1);
|
|
}
|
|
|
|
.bambora-btn:active {
|
|
box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.bambora-btn:disabled {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: 1px solid rgba(120, 71, 181, 1);
|
|
color: rgba(120, 71, 181, 1);
|
|
}
|
|
|
|
/* feedback is displayed after tokenization */
|
|
#feedback {
|
|
position: relative;
|
|
left: 15px;
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
border: 0px solid rgba(200, 200, 200, 1);
|
|
border-radius: 4px;
|
|
transition: all 100ms ease-out;
|
|
padding: 11px;
|
|
}
|
|
|
|
#feedback.error {
|
|
color: red;
|
|
border: 1px solid;
|
|
}
|
|
|
|
#feedback.success {
|
|
color: seagreen;
|
|
border: 1px solid;
|
|
}
|