Add Pay page & layout (#2476)

.changeset/angry-bananas-brake.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added new "Pay" page with dedicated layout, navigation link, and payment form (card + PayPal).

.changeset/late-pugs-breathe2.md

@@ -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.

core/scss/_utilities.scss

@@ -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,

core/scss/_variables.scss

@@ -432,7 +432,7 @@ $grid-gutter-width: 1rem !default;
 
 $container-variations: (
   slim: 16rem,
-  tight: 30rem,
+  tight: 32rem,
   narrow: 61.875rem,
 ) !default;
 

core/scss/ui/_close.scss

@@ -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 {

core/scss/ui/_forms.scss

@@ -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
  */
@@ -248,4 +248,4 @@ Forms on mobile devices
   @include media-breakpoint-down(sm) {
     font-size: 1rem;
   }
-}
+}

preview/pages/pay.html

@@ -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="[email protected]"
+                           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>

shared/data/menu.json

@@ -256,6 +256,10 @@
         "title": "Invoice",
         "url": "invoice.html"
       },
+      "pay": {
+        "title": "Pay",
+        "url": "pay.html"
+      },
       "job-listing": {
         "title": "Job listing",
         "url": "job-listing.html"

shared/includes/ui/form/input-group.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" %}

shared/layouts/pay.html

@@ -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>