Merge pull request #434 from tabler/dev-form-layout

form-layouts added

pages/_includes/cards/form/layout.html

+{% assign horizontal = include.horizontal | default: false %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
+	</div>
+	<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>
+				<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>
+				</div>
+			</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>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<input type="password" class="form-control" placeholder="Password">
+					<small class="form-hint">
+						Your password must be 8-20 characters long, contain letters and numbers, and must not contain
+						spaces, special characters, or emoji.
+					</small>
+				</div>
+			</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>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<select class="form-select">
+						<option>Option 1</option>
+					</select>
+				</div>
+			</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>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" checked="">
+						<span class="form-check-label">Option 1</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox">
+						<span class="form-check-label">Option 2</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" disabled="">
+						<span class="form-check-label">Option 3</span>
+					</label>
+				</div>
+			</div>
+
+			<div class="form-footer">
+				<button type="submit" class="btn btn-primary">Submit</button>
+			</div>
+		</form>
+	</div>
+</div>
\ No newline at end of file

pages/_includes/parts/form/select.html

 {% assign options = include.options | default: "One,Two,Three" | split: "," %}
 <div class="mb-3">
-   <div class="form-label">{{ include.label | default: 'Select' }}</div>
-   <select class="form-select"{% if include.multiple %} multiple{% endif %}>
-	   {% for option in options %}
-      <option value="{{ forloop.index }}">{{ option }}</option>
-	   {% endfor %}
-   </select>
+	<div class="form-label">{{ include.label | default: 'Select' }}</div>
+	<select class="form-select" {% if include.multiple %} multiple{% endif %}>
+		{% for option in options %}
+		<option value="{{ forloop.index }}">{{ option }}</option>
+		{% endfor %}
+	</select>
 </div>

pages/form-elements.html

@@ -40,4 +40,12 @@ menu: forms
 			</div>
 		</form>
 	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html %}
+	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
+	</div>
 </div>

pages/tmp3.html

 ---
-tmp: true
 ---
 
-<div class="dropdown d-inline-block">
-	<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonAlias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-		Dropdown button
-	</button>
+<div class="row">
+	<div class="col-md-6">
+		{% include cards/form/layout.html %}
+	</div>
 
-	<ul class="dropdown-menu">
-		<li>
-			<a class="dropdown-item" href="#">Action</a>
-		</li>
-		<li>
-			<a class="dropdown-item" href="#">Another action</a>
-		</li>
-		<li class="dropright">
-			<a class="dropdown-item dropdown-toggle" href="#" id="dropdownSubmenuButton" data-toggle="dropdown">Something else here</a>
-			<div class="dropdown-menu">
-				<a class="dropdown-item" href="#">Action</a>
-				<a class="dropdown-item" href="#">Another action</a>
-				<a class="dropdown-item" href="#">Something else action</a>
-			</div>
-		</li>
-	</ul>
-</div>
-
-<div class="dropdown d-inline-block">
-	<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
-		Dropdown with card
-	</button>
-	{% include cards/card.html class="dropdown-menu" title="Card title" footer=true img-top=true  %}
+	<div class="col-md-6">
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
+	</div>
 </div>
\ No newline at end of file

scss/ui/_buttons.scss

@@ -69,6 +69,10 @@
   padding-right: 1.5em;
   padding-left: 1.5em;
   border-radius: 10rem;
+
+  &[class*="btn-icon"]{
+    padding: 0.375rem 15px;
+  }
 }
 
 .btn-icon {

scss/ui/_forms.scss

@@ -26,14 +26,27 @@ Form label
 Form hint
  */
 .form-hint {
+  display: block;
   font-size: $small-font-size;
   color: $text-muted;
-  margin: 0 0 .75rem;
   line-height: $line-height-sm;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & + .form-control {
+    margin-top: .25rem;
+  }
+
   .form-label + & {
     margin-top: -.5rem;
   }
+
+  .form-control + &,
+  .form-select + & {
+    margin-top: .25rem;
+  }
 }
 
 /**