From 03599d72395d2a5992afb1025dfad8f9e8805a6d Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Tue, 31 Jan 2023 21:30:53 -0600
Subject: [PATCH] added required tag to address
---
assets/css/compiled/main.css | 73 +++++++++++++++++++++++++++++++++
layouts/shortcodes/mt-form.html | 11 ++---
2 files changed, 79 insertions(+), 5 deletions(-)
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index f25913b..99cadde 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2478,6 +2478,10 @@ select {
vertical-align: text-bottom;
}
+.align-super {
+ vertical-align: super;
+}
+
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@@ -2646,6 +2650,75 @@ select {
color: rgba(var(--color-primary-800), var(--tw-text-opacity));
}
+.text-secondary-500 {
+ --tw-text-opacity: 1;
+ color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
+}
+
+.text-\[\#aaa\] {
+ --tw-text-opacity: 1;
+ color: rgb(170 170 170 / var(--tw-text-opacity));
+}
+
+.text-\[\#f00\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 0 0 / var(--tw-text-opacity));
+}
+
+.text-\[\#f22\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#d22\] {
+ --tw-text-opacity: 1;
+ color: rgb(221 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#b22\] {
+ --tw-text-opacity: 1;
+ color: rgb(187 34 34 / var(--tw-text-opacity));
+}
+
+.text-\[\#baa\] {
+ --tw-text-opacity: 1;
+ color: rgb(187 170 170 / var(--tw-text-opacity));
+}
+
+.text-\[\#b44\] {
+ --tw-text-opacity: 1;
+ color: rgb(187 68 68 / var(--tw-text-opacity));
+}
+
+.text-\[\#f44\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 68 68 / var(--tw-text-opacity));
+}
+
+.text-\[\#f66\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 102 102 / var(--tw-text-opacity));
+}
+
+.text-\[\#f26\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 34 102 / var(--tw-text-opacity));
+}
+
+.text-\[\#f29\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 34 153 / var(--tw-text-opacity));
+}
+
+.text-\[\#f39\] {
+ --tw-text-opacity: 1;
+ color: rgb(255 51 153 / var(--tw-text-opacity));
+}
+
+.underline {
+ text-decoration-line: underline;
+}
+
.\!no-underline {
text-decoration-line: none !important;
}
diff --git a/layouts/shortcodes/mt-form.html b/layouts/shortcodes/mt-form.html
index 4665d9c..66fd4a0 100644
--- a/layouts/shortcodes/mt-form.html
+++ b/layouts/shortcodes/mt-form.html
@@ -1,4 +1,5 @@
{{ $formClasses := "bg-neutral-500 text-neutral-50 placeholder-neutral-300 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-neutral-500 checked:text-neutral-500" }}
+{{ $requiredField := "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" }}
<script>
function submitForm(e) {
@@ -107,19 +108,19 @@
</div>
</div>
<div class="basis-full flex flex-wrap my-4">
- <label for="street" class="basis-full">What is your address?</label>
+ <label for="street" class="basis-full">What is your address? {{ $requiredField }}</label>
<input type="text" id="street" name="street"
class="basis-full form-input {{ $formClasses }}"
- placeholder="Street Address">
+ placeholder="Street Address" required>
<input type="text" id="city" name="city"
class="flex-auto form-input {{ $formClasses }}"
- placeholder="City">
+ placeholder="City" required>
<input type="text" id="state" name="state"
class="flex-auto form-input {{ $formClasses }}"
- placeholder="State">
+ placeholder="State" required>
<input type="text" id="zip" name="zip"
class="flex-auto form-input {{ $formClasses }}"
- placeholder="Zip Code">
+ placeholder="Zip Code" required>
</div>
<div class="basis-full flex flex-wrap items-center my-8">
<div class="flex-auto flex flex-wrap items-center">