From dc8cad144a05afb443a10bfa8a803e430d54c8e5 Mon Sep 17 00:00:00 2001
From: Kevin Papst <kevinpapst@users.noreply.github.com>
Date: Sat, 30 Jul 2022 12:50:36 +0200
Subject: [PATCH] Required form label for horizontal forms (#1161)

* added required class to showcase in horizontal form

* support for required label class in horizontal form
---
 src/pages/_includes/cards/form/layout.html | 8 ++++----
 src/scss/ui/_forms.scss                    | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/_includes/cards/form/layout.html b/src/pages/_includes/cards/form/layout.html
index d9bf77d3..d8435476 100644
--- a/src/pages/_includes/cards/form/layout.html
+++ b/src/pages/_includes/cards/form/layout.html
@@ -6,7 +6,7 @@
 	<div class="card-body">
 		<form>
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
 					<small class="form-hint">We'll never share your email with anyone else.</small>
@@ -14,7 +14,7 @@
 			</div>
 
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<input type="password" class="form-control" placeholder="Password">
 					<small class="form-hint">
@@ -25,7 +25,7 @@
 			</div>
 
 			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
+				<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<select class="form-select">
 						<option>Option 1</option>
@@ -49,7 +49,7 @@
 			</div>
 
 			<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
-				<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
+				<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<label class="form-check">
 						<input class="form-check-input" type="checkbox" checked="">
diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
index 5481313b..1e9dca60 100644
--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -7,6 +7,7 @@ textarea {
 /**
 Form label
  */
+.col-form-label,
 .form-label {
   display: block;
   font-weight: $font-weight-medium;
-- 
GitLab