First Commit

bambora-asset/css/style.css

@@ -0,0 +1,99 @@
+.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;
+}