mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 09:54:24 +04:00
payments ui fixes
This commit is contained in:
codecalm
@@ -1,232 +1,116 @@
|
|||||||
- name: "2checkout Dark"
|
|
||||||
payment: "2checkout-dark"
|
|
||||||
- name: "2checkout"
|
- name: "2checkout"
|
||||||
payment: "2checkout"
|
logo: "2checkout"
|
||||||
- name: "Alipay Dark"
|
|
||||||
payment: "alipay-dark"
|
|
||||||
- name: "Alipay"
|
- name: "Alipay"
|
||||||
payment: "alipay"
|
logo: "alipay"
|
||||||
- name: "Amazon Dark"
|
|
||||||
payment: "amazon-dark"
|
|
||||||
- name: "Amazon"
|
- name: "Amazon"
|
||||||
payment: "amazon"
|
logo: "amazon"
|
||||||
- name: "Americanexpress Dark"
|
|
||||||
payment: "americanexpress-dark"
|
|
||||||
- name: "Americanexpress"
|
- name: "Americanexpress"
|
||||||
payment: "americanexpress"
|
logo: "americanexpress"
|
||||||
- name: "Applepay Dark"
|
|
||||||
payment: "applepay-dark"
|
|
||||||
- name: "Applepay"
|
- name: "Applepay"
|
||||||
payment: "applepay"
|
logo: "applepay"
|
||||||
- name: "Bancontact Dark"
|
|
||||||
payment: "bancontact-dark"
|
|
||||||
- name: "Bancontact"
|
- name: "Bancontact"
|
||||||
payment: "bancontact"
|
logo: "bancontact"
|
||||||
- name: "Bitcoin Dark"
|
|
||||||
payment: "bitcoin-dark"
|
|
||||||
- name: "Bitcoin"
|
- name: "Bitcoin"
|
||||||
payment: "bitcoin"
|
logo: "bitcoin"
|
||||||
- name: "Bitpay Dark"
|
|
||||||
payment: "bitpay-dark"
|
|
||||||
- name: "Bitpay"
|
- name: "Bitpay"
|
||||||
payment: "bitpay"
|
logo: "bitpay"
|
||||||
- name: "Blik Dark"
|
|
||||||
payment: "blik-dark"
|
|
||||||
- name: "Blik"
|
- name: "Blik"
|
||||||
payment: "blik"
|
logo: "blik"
|
||||||
- name: "Cirrus Dark"
|
|
||||||
payment: "cirrus-dark"
|
|
||||||
- name: "Cirrus"
|
- name: "Cirrus"
|
||||||
payment: "cirrus"
|
logo: "cirrus"
|
||||||
- name: "Clickandbuy Dark"
|
|
||||||
payment: "clickandbuy-dark"
|
|
||||||
- name: "Clickandbuy"
|
- name: "Clickandbuy"
|
||||||
payment: "clickandbuy"
|
logo: "clickandbuy"
|
||||||
- name: "Coinkite Dark"
|
|
||||||
payment: "coinkite-dark"
|
|
||||||
- name: "Coinkite"
|
- name: "Coinkite"
|
||||||
payment: "coinkite"
|
logo: "coinkite"
|
||||||
- name: "Dinersclub Dark"
|
|
||||||
payment: "dinersclub-dark"
|
|
||||||
- name: "Dinersclub"
|
- name: "Dinersclub"
|
||||||
payment: "dinersclub"
|
logo: "dinersclub"
|
||||||
- name: "Directdebit Dark"
|
|
||||||
payment: "directdebit-dark"
|
|
||||||
- name: "Directdebit"
|
- name: "Directdebit"
|
||||||
payment: "directdebit"
|
logo: "directdebit"
|
||||||
- name: "Discover Dark"
|
|
||||||
payment: "discover-dark"
|
|
||||||
- name: "Discover"
|
- name: "Discover"
|
||||||
payment: "discover"
|
logo: "discover"
|
||||||
- name: "Dotpay Dark"
|
|
||||||
payment: "dotpay-dark"
|
|
||||||
- name: "Dotpay"
|
- name: "Dotpay"
|
||||||
payment: "dotpay"
|
logo: "dotpay"
|
||||||
- name: "Dwolla Dark"
|
|
||||||
payment: "dwolla-dark"
|
|
||||||
- name: "Dwolla"
|
- name: "Dwolla"
|
||||||
payment: "dwolla"
|
logo: "dwolla"
|
||||||
- name: "Ebay Dark"
|
|
||||||
payment: "ebay-dark"
|
|
||||||
- name: "Ebay"
|
- name: "Ebay"
|
||||||
payment: "ebay"
|
logo: "ebay"
|
||||||
- name: "Eway Dark"
|
|
||||||
payment: "eway-dark"
|
|
||||||
- name: "Eway"
|
- name: "Eway"
|
||||||
payment: "eway"
|
logo: "eway"
|
||||||
- name: "Giropay Dark"
|
|
||||||
payment: "giropay-dark"
|
|
||||||
- name: "Giropay"
|
- name: "Giropay"
|
||||||
payment: "giropay"
|
logo: "giropay"
|
||||||
- name: "Googlewallet Dark"
|
|
||||||
payment: "googlewallet-dark"
|
|
||||||
- name: "Googlewallet"
|
- name: "Googlewallet"
|
||||||
payment: "googlewallet"
|
logo: "googlewallet"
|
||||||
- name: "Ingenico Dark"
|
|
||||||
payment: "ingenico-dark"
|
|
||||||
- name: "Ingenico"
|
- name: "Ingenico"
|
||||||
payment: "ingenico"
|
logo: "ingenico"
|
||||||
- name: "Jcb Dark"
|
|
||||||
payment: "jcb-dark"
|
|
||||||
- name: "Jcb"
|
- name: "Jcb"
|
||||||
payment: "jcb"
|
logo: "jcb"
|
||||||
- name: "Klarna Dark"
|
|
||||||
payment: "klarna-dark"
|
|
||||||
- name: "Klarna"
|
- name: "Klarna"
|
||||||
payment: "klarna"
|
logo: "klarna"
|
||||||
- name: "Laser Dark"
|
|
||||||
payment: "laser-dark"
|
|
||||||
- name: "Laser"
|
- name: "Laser"
|
||||||
payment: "laser"
|
logo: "laser"
|
||||||
- name: "Maestro Dark"
|
|
||||||
payment: "maestro-dark"
|
|
||||||
- name: "Maestro"
|
- name: "Maestro"
|
||||||
payment: "maestro"
|
logo: "maestro"
|
||||||
- name: "Mastercard Dark"
|
|
||||||
payment: "mastercard-dark"
|
|
||||||
- name: "Mastercard"
|
- name: "Mastercard"
|
||||||
payment: "mastercard"
|
logo: "mastercard"
|
||||||
- name: "Monero Dark"
|
|
||||||
payment: "monero-dark"
|
|
||||||
- name: "Monero"
|
- name: "Monero"
|
||||||
payment: "monero"
|
logo: "monero"
|
||||||
- name: "Neteller Dark"
|
|
||||||
payment: "neteller-dark"
|
|
||||||
- name: "Neteller"
|
- name: "Neteller"
|
||||||
payment: "neteller"
|
logo: "neteller"
|
||||||
- name: "Ogone Dark"
|
|
||||||
payment: "ogone-dark"
|
|
||||||
- name: "Ogone"
|
- name: "Ogone"
|
||||||
payment: "ogone"
|
logo: "ogone"
|
||||||
- name: "Okpay Dark"
|
|
||||||
payment: "okpay-dark"
|
|
||||||
- name: "Okpay"
|
- name: "Okpay"
|
||||||
payment: "okpay"
|
logo: "okpay"
|
||||||
- name: "Paybox Dark"
|
|
||||||
payment: "paybox-dark"
|
|
||||||
- name: "Paybox"
|
- name: "Paybox"
|
||||||
payment: "paybox"
|
logo: "paybox"
|
||||||
- name: "Paymill Dark"
|
|
||||||
payment: "paymill-dark"
|
|
||||||
- name: "Paymill"
|
- name: "Paymill"
|
||||||
payment: "paymill"
|
logo: "paymill"
|
||||||
- name: "Payone Dark"
|
|
||||||
payment: "payone-dark"
|
|
||||||
- name: "Payone"
|
- name: "Payone"
|
||||||
payment: "payone"
|
logo: "payone"
|
||||||
- name: "Payoneer Dark"
|
|
||||||
payment: "payoneer-dark"
|
|
||||||
- name: "Payoneer"
|
- name: "Payoneer"
|
||||||
payment: "payoneer"
|
logo: "payoneer"
|
||||||
- name: "Paypal Dark"
|
|
||||||
payment: "paypal-dark"
|
|
||||||
- name: "Paypal"
|
- name: "Paypal"
|
||||||
payment: "paypal"
|
logo: "paypal"
|
||||||
- name: "Paysafecard Dark"
|
|
||||||
payment: "paysafecard-dark"
|
|
||||||
- name: "Paysafecard"
|
- name: "Paysafecard"
|
||||||
payment: "paysafecard"
|
logo: "paysafecard"
|
||||||
- name: "Payu Dark"
|
|
||||||
payment: "payu-dark"
|
|
||||||
- name: "Payu"
|
- name: "Payu"
|
||||||
payment: "payu"
|
logo: "payu"
|
||||||
- name: "Payza Dark"
|
|
||||||
payment: "payza-dark"
|
|
||||||
- name: "Payza"
|
- name: "Payza"
|
||||||
payment: "payza"
|
logo: "payza"
|
||||||
- name: "Przelewy24 Dark"
|
|
||||||
payment: "przelewy24-dark"
|
|
||||||
- name: "Przelewy24"
|
- name: "Przelewy24"
|
||||||
payment: "przelewy24"
|
logo: "przelewy24"
|
||||||
- name: "Ripple Dark"
|
|
||||||
payment: "ripple-dark"
|
|
||||||
- name: "Ripple"
|
- name: "Ripple"
|
||||||
payment: "ripple"
|
logo: "ripple"
|
||||||
- name: "Sage Dark"
|
|
||||||
payment: "sage-dark"
|
|
||||||
- name: "Sage"
|
- name: "Sage"
|
||||||
payment: "sage"
|
logo: "sage"
|
||||||
- name: "Sepa Dark"
|
|
||||||
payment: "sepa-dark"
|
|
||||||
- name: "Sepa"
|
- name: "Sepa"
|
||||||
payment: "sepa"
|
logo: "sepa"
|
||||||
- name: "Shopify Dark"
|
|
||||||
payment: "shopify-dark"
|
|
||||||
- name: "Shopify"
|
- name: "Shopify"
|
||||||
payment: "shopify"
|
logo: "shopify"
|
||||||
- name: "Skrill Dark"
|
|
||||||
payment: "skrill-dark"
|
|
||||||
- name: "Skrill"
|
- name: "Skrill"
|
||||||
payment: "skrill"
|
logo: "skrill"
|
||||||
- name: "Solo Dark"
|
|
||||||
payment: "solo-dark"
|
|
||||||
- name: "Solo"
|
- name: "Solo"
|
||||||
payment: "solo"
|
logo: "solo"
|
||||||
- name: "Square Dark"
|
|
||||||
payment: "square-dark"
|
|
||||||
- name: "Square"
|
- name: "Square"
|
||||||
payment: "square"
|
logo: "square"
|
||||||
- name: "Stripe Dark"
|
|
||||||
payment: "stripe-dark"
|
|
||||||
- name: "Stripe"
|
- name: "Stripe"
|
||||||
payment: "stripe"
|
logo: "stripe"
|
||||||
- name: "Switch Dark"
|
|
||||||
payment: "switch-dark"
|
|
||||||
- name: "Switch"
|
- name: "Switch"
|
||||||
payment: "switch"
|
logo: "switch"
|
||||||
- name: "Tpay Dark"
|
|
||||||
payment: "tpay-dark"
|
|
||||||
- name: "Tpay"
|
- name: "Tpay"
|
||||||
payment: "tpay"
|
logo: "tpay"
|
||||||
- name: "Ukash Dark"
|
|
||||||
payment: "ukash-dark"
|
|
||||||
- name: "Ukash"
|
- name: "Ukash"
|
||||||
payment: "ukash"
|
logo: "ukash"
|
||||||
- name: "Unionpay Dark"
|
|
||||||
payment: "unionpay-dark"
|
|
||||||
- name: "Unionpay"
|
- name: "Unionpay"
|
||||||
payment: "unionpay"
|
logo: "unionpay"
|
||||||
- name: "Verifone Dark"
|
|
||||||
payment: "verifone-dark"
|
|
||||||
- name: "Verifone"
|
- name: "Verifone"
|
||||||
payment: "verifone"
|
logo: "verifone"
|
||||||
- name: "Verisign Dark"
|
|
||||||
payment: "verisign-dark"
|
|
||||||
- name: "Verisign"
|
- name: "Verisign"
|
||||||
payment: "verisign"
|
logo: "verisign"
|
||||||
- name: "Visa Dark"
|
|
||||||
payment: "visa-dark"
|
|
||||||
- name: "Visa"
|
- name: "Visa"
|
||||||
payment: "visa"
|
logo: "visa"
|
||||||
- name: "Webmoney Dark"
|
|
||||||
payment: "webmoney-dark"
|
|
||||||
- name: "Webmoney"
|
- name: "Webmoney"
|
||||||
payment: "webmoney"
|
logo: "webmoney"
|
||||||
- name: "Westernunion Dark"
|
|
||||||
payment: "westernunion-dark"
|
|
||||||
- name: "Westernunion"
|
- name: "Westernunion"
|
||||||
payment: "westernunion"
|
logo: "westernunion"
|
||||||
- name: "Worldpay Dark"
|
|
||||||
payment: "worldpay-dark"
|
|
||||||
- name: "Worldpay"
|
- name: "Worldpay"
|
||||||
payment: "worldpay"
|
logo: "worldpay"
|
||||||
|
|||||||
@@ -8,9 +8,9 @@ done: true
|
|||||||
### Payment
|
### Payment
|
||||||
|
|
||||||
{% example %}
|
{% example %}
|
||||||
{% include ui/payment.html payment="shopify"%}
|
{% include ui/payment.html class="mr-3" payment="shopify"%}
|
||||||
{% include ui/payment.html%}
|
{% include ui/payment.html class="mr-3" payment="visa" %}
|
||||||
{% include ui/payment.html payment="paypal"%}
|
{% include ui/payment.html class="mr-3" payment="paypal"%}
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Payment sizes
|
### Payment sizes
|
||||||
@@ -18,20 +18,21 @@ done: true
|
|||||||
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
|
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.
|
||||||
|
|
||||||
{% example %}
|
{% example %}
|
||||||
{% include ui/payment.html payment="shopify" size="xl"%}
|
{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
|
||||||
{% include ui/payment.html size="lg"%}
|
{% include ui/payment.html class="mr-3" payment="visa" size="lg" %}
|
||||||
{% include ui/payment.html payment="paypal" size="md"%}
|
{% include ui/payment.html class="mr-3" payment="paypal" size="md" %}
|
||||||
{% include ui/payment.html payment="amazon"%}
|
{% include ui/payment.html class="mr-3" payment="amazon" size="sm" %}
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Types
|
### Types
|
||||||
|
|
||||||
<table>
|
<table class="table-vcenter">
|
||||||
{% for payment in site.data.payments %}
|
{% for payment in site.data.payments %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{% include ui/payment.html payment=payment.payment %}</td>
|
|
||||||
<td><code>{{ payment.payment }}</code></td>
|
|
||||||
<td>{{ payment.name }}</td>
|
<td>{{ payment.name }}</td>
|
||||||
</tr>
|
<td><code>{{ payment.logo }}</code></td>
|
||||||
|
<td class="w-1p">{% include ui/payment.html payment=payment.logo %}</td>
|
||||||
|
<td class="w-1p">{% include ui/payment.html payment=payment.logo dark=true %}</td>
|
||||||
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}"></span>
|
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.dark %}-dark{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></span>
|
||||||
|
|||||||
Reference in New Issue
Block a user