mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Extract CSS into separate file
This commit is contained in:
Benjamin Beganović
parent
ac65ef820e
commit
8053de40d2
@ -1,7 +1,44 @@
|
|||||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
|
@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
|
||||||
|
|
||||||
|
@section('gateway_head')
|
||||||
|
@include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
|
||||||
|
|
||||||
|
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
|
||||||
|
@endsection
|
||||||
|
|
||||||
@section('gateway_content')
|
@section('gateway_content')
|
||||||
@component('portal.ninja2020.components.general.card-element-single', ['title' => 'Credit card', 'show_title' => false])
|
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
|
||||||
{{ __('texts.checkout_authorize_label') }}
|
{{ ctrans('texts.credit_card') }}
|
||||||
|
@endcomponent
|
||||||
|
|
||||||
|
@component('portal.ninja2020.components.general.card-element-single')
|
||||||
|
<div id="checkout--container">
|
||||||
|
<form class="xl:flex xl:justify-center" id="payment-form" method="POST" action="#">
|
||||||
|
<div class="one-liner">
|
||||||
|
<div class="card-frame">
|
||||||
|
<!-- form will be added here -->
|
||||||
|
</div>
|
||||||
|
<!-- add submit button -->
|
||||||
|
<button id="pay-button" disabled>
|
||||||
|
{{ ctrans('texts.add_payment_method') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="success-payment-message"></p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@endcomponent
|
@endcomponent
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
@section('gateway_footer')
|
||||||
|
<script>
|
||||||
|
class CheckoutCreditCardAuthorization {
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
handle() {
|
||||||
|
console.log('It works...');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
new CheckoutCreditCardAuthorization().handle();
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|||||||
@ -0,0 +1,101 @@
|
|||||||
|
<style>
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before {
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
#payment-form {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-liner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 500;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #13395E;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button:active {
|
||||||
|
background-color: #0B2A49;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button:hover {
|
||||||
|
background-color: #15406B;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button:disabled {
|
||||||
|
background-color: #697887;
|
||||||
|
box-shadow: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button:not(:disabled) {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-frame {
|
||||||
|
border: solid 1px #13395E;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
height: 40px;
|
||||||
|
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-frame.frame--rendered {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-frame.frame--rendered.frame--focus {
|
||||||
|
border: solid 1px #13395E;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-frame.frame--rendered.frame--invalid {
|
||||||
|
border: solid 1px #D96830;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-payment-message {
|
||||||
|
color: #13395E;
|
||||||
|
line-height: 1.4
|
||||||
|
}
|
||||||
|
|
||||||
|
.token {
|
||||||
|
color: #b35e14;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-family: monospace
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 31rem) {
|
||||||
|
.one-liner {
|
||||||
|
flex-direction: row
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-frame {
|
||||||
|
width: 318px;
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
#pay-button {
|
||||||
|
width: 175px;
|
||||||
|
margin-left: 8px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -7,101 +7,7 @@
|
|||||||
<meta name="currency" content="{{ $currency }}">
|
<meta name="currency" content="{{ $currency }}">
|
||||||
<meta name="reference" content="{{ $payment_hash }}">
|
<meta name="reference" content="{{ $payment_hash }}">
|
||||||
|
|
||||||
<style>*, *::after, *::before {
|
@include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
|
||||||
box-sizing: border-box
|
|
||||||
}
|
|
||||||
#payment-form {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.one-liner {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button {
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: #FFF;
|
|
||||||
font-weight: 500;
|
|
||||||
height: 40px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #13395E;
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button:active {
|
|
||||||
background-color: #0B2A49;
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button:hover {
|
|
||||||
background-color: #15406B;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button:disabled {
|
|
||||||
background-color: #697887;
|
|
||||||
box-shadow: none
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button:not(:disabled) {
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-frame {
|
|
||||||
border: solid 1px #13395E;
|
|
||||||
border-radius: 3px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
height: 40px;
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-frame.frame--rendered {
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-frame.frame--rendered.frame--focus {
|
|
||||||
border: solid 1px #13395E;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-frame.frame--rendered.frame--invalid {
|
|
||||||
border: solid 1px #D96830;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-payment-message {
|
|
||||||
color: #13395E;
|
|
||||||
line-height: 1.4
|
|
||||||
}
|
|
||||||
|
|
||||||
.token {
|
|
||||||
color: #b35e14;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-family: monospace
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 31rem) {
|
|
||||||
.one-liner {
|
|
||||||
flex-direction: row
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-frame {
|
|
||||||
width: 318px;
|
|
||||||
margin-bottom: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
#pay-button {
|
|
||||||
width: 175px;
|
|
||||||
margin-left: 8px
|
|
||||||
}
|
|
||||||
}</style>
|
|
||||||
|
|
||||||
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
|
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user