mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add Pay page & layout (#2476)
This commit is contained in:
Paweł Kuna
GitHub
6
.changeset/angry-bananas-brake.md
Normal file
6
.changeset/angry-bananas-brake.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new "Pay" page with dedicated layout, navigation link, and payment form (card + PayPal).
|
||||
6
.changeset/late-pugs-breathe2.md
Normal file
6
.changeset/late-pugs-breathe2.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Introduced `bg-blur` utility for backdrop blur effects and increased container-tight width for layout flexibility.
|
||||
@@ -110,6 +110,13 @@ $utilities: (
|
||||
null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
|
||||
),
|
||||
),
|
||||
"bg-blur": (
|
||||
property: backdrop-filter,
|
||||
class: bg-blur,
|
||||
values: (
|
||||
null: blur($backdrop-blur)
|
||||
)
|
||||
),
|
||||
"bg-gradient-direction": (
|
||||
property: --#{$prefix}gradient-direction,
|
||||
class: bg-gradient,
|
||||
|
||||
@@ -432,7 +432,7 @@ $grid-gutter-width: 1rem !default;
|
||||
|
||||
$container-variations: (
|
||||
slim: 16rem,
|
||||
tight: 30rem,
|
||||
tight: 32rem,
|
||||
narrow: 61.875rem,
|
||||
) !default;
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
color: var(--#{$prefix}btn-close-color);
|
||||
text-decoration: none;
|
||||
opacity: var(--#{$prefix}btn-close-hover-opacity);
|
||||
background-color: var(--#{$prefix}btn-close-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
@@ -15,7 +15,7 @@ Form label
|
||||
&.required {
|
||||
&:after {
|
||||
content: "*";
|
||||
margin-left: .25rem;
|
||||
margin-left: 0.25rem;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
@@ -39,17 +39,17 @@ Form hint
|
||||
}
|
||||
|
||||
& + .form-control {
|
||||
margin-top: .25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-label + & {
|
||||
margin-top: -.25rem;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
|
||||
.input-group + &,
|
||||
.form-control + &,
|
||||
.form-select + & {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
color: $form-secondary-color;
|
||||
}
|
||||
}
|
||||
@@ -90,18 +90,18 @@ Form control
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
background-color: rgba($black, .1);
|
||||
background-color: rgba($black, 0.1);
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($black, .1);
|
||||
background-color: rgba($black, 0.1);
|
||||
box-shadow: none;
|
||||
border-color: rgba($white, .24);
|
||||
border-color: rgba($white, 0.24);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: rgba($white, .6);
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -144,7 +144,7 @@ Form help
|
||||
justify-content: center;
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: $form-secondary-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
@@ -161,8 +161,6 @@ Form help
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
Input group
|
||||
*/
|
||||
@@ -208,19 +206,21 @@ Input group
|
||||
|
||||
.input-group-text {
|
||||
background: $form-check-input-bg;
|
||||
z-index: 10;
|
||||
@include transition($input-transition);
|
||||
|
||||
&:first-child {
|
||||
padding-right: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
Upload files
|
||||
*/
|
||||
|
||||
106
preview/pages/pay.html
Normal file
106
preview/pages/pay.html
Normal file
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: Pay
|
||||
page-header: Pay
|
||||
layout: pay
|
||||
permalink: pay.html
|
||||
page-libs: [tabler-payments, imask]
|
||||
---
|
||||
|
||||
<div class="bg-dark bg-cover" style="background-image: url({{ page | relative }}/static/bg-cover.jpg)">
|
||||
<div class="bg-dark bg-opacity-75 pt-5 bg-blur">
|
||||
<div class="container container-tight bg-overlay">
|
||||
<img src="{{ page | relative }}/static/bg-cover.jpg" alt="" class="img-fluid rounded-lg rounded-top">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container container-tight">
|
||||
|
||||
<div class="card rounded-top-0 border-top-0">
|
||||
<div class="card-body pt-0">
|
||||
<div class="mb-3 text-center">
|
||||
{% include "ui/avatar.html" person-id=1 size="xl" rounded class="avatar-cover rounded-circle mb-3" %}
|
||||
<div class="mb-4">
|
||||
<h2 class="h2">Front-End Learning</h2>
|
||||
<div class="text-secondary">Learn to build web apps with HTML & CSS. Get started quickly with included templates.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="nav nav-segmented w-100 mb-4" role="tablist">
|
||||
<button href="#tab-card" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="tab-card"
|
||||
aria-selected="true">
|
||||
{% include "ui/icon.html" icon="credit-card" %}
|
||||
<span>Pay With Card</span>
|
||||
</button>
|
||||
<button href="#tab-paypal" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="tab-paypal"
|
||||
aria-selected="false">
|
||||
{% include "ui/icon.html" icon="brand-paypal" %}
|
||||
<span>Pay With PayPal</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active show" id="tab-card" role="tabpanel">
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<label class="form-label" for="card-number">Card Number</label>
|
||||
{% capture html -%}
|
||||
{% include "ui/payment.html" payment="visa" size="xs" %}
|
||||
{%- endcapture %}
|
||||
|
||||
{% include "ui/form/input-group.html" id="card-number-addon" prepend-html=html flat=true placeholder="0000 0000 0000 0000" %}
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label" for="card-expiry">Expiry Date</label>
|
||||
<input type="text" class="form-control" id="card-expiry" placeholder="MM/YY"
|
||||
inputmode="numeric" aria-required="true" maxlength="5"/>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label" for="card-cvc">CVC</label>
|
||||
<input type="text" class="form-control" id="card-cvc" placeholder="CVC" inputmode="numeric"
|
||||
aria-required="true" maxlength="3"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="card-name">Name on Card</label>
|
||||
<input type="text" class="form-control" id="card-name" placeholder="Full name"
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" for="card-email">Email</label>
|
||||
<input type="email" class="form-control" id="card-email" placeholder="you@example.com"
|
||||
aria-required="true" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary w-100">
|
||||
Pay $253
|
||||
</button>
|
||||
<div class="text-secondary text-center small mt-3">You'll be charged $253, including
|
||||
$48 for VAT in Poland</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="tab-paypal" role="tabpanel">
|
||||
<button type="button" class="btn btn-primary w-100">
|
||||
{% include "ui/icon.html" icon="brand-paypal" %}
|
||||
<span class="ms-2">Pay with PayPal - $253</span>
|
||||
</button>
|
||||
<div class="text-secondary text-center small mt-3">You'll be charged $253, including $48 for VAT in
|
||||
Poland</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -256,6 +256,10 @@
|
||||
"title": "Invoice",
|
||||
"url": "invoice.html"
|
||||
},
|
||||
"pay": {
|
||||
"title": "Pay",
|
||||
"url": "pay.html"
|
||||
},
|
||||
"job-listing": {
|
||||
"title": "Job listing",
|
||||
"url": "job-listing.html"
|
||||
|
||||
@@ -8,7 +8,12 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
<input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %} autocomplete="off">
|
||||
{% if include.prepend-html %}
|
||||
<span class="input-group-text">
|
||||
{{ include.prepend-html }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %} autocomplete="off"{% if include.id %} id="{{ include.id }}"{% endif %}>
|
||||
{% if include.append %}
|
||||
<span class="input-group-text">
|
||||
{% if include.append == "checkbox" or include.append == "radio" %}
|
||||
|
||||
17
shared/layouts/pay.html
Normal file
17
shared/layouts/pay.html
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<header class="navbar">
|
||||
<div class="container-fluid">
|
||||
{% include "layout/navbar-logo.html" small-logo %}
|
||||
|
||||
<div>
|
||||
<a href="{{ page | relative }}" class="btn btn-close"></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
{{ content }}
|
||||
</div>
|
||||
BIN
shared/static/bg-cover.jpg
Normal file
BIN
shared/static/bg-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Reference in New Issue
Block a user