form control flush

pages/_includes/forms/form-elements-6.html

@@ -14,4 +14,15 @@
 		{% include ui/button.html color="secondary" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
 		{% include ui/button.html color="secondary" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
 	</div>
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Form control rounded</label>
+	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
+	{% include ui/form/input-icon.html class="form-control-rounded" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Form control flush</label>
+	<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
 </div>
\ No newline at end of file

scss/ui/_forms.scss

@@ -56,6 +56,19 @@ Form control
   border-color: transparent;
 }
 
+.form-control-rounded {
+  border-radius: 10rem;
+}
+
+.form-control-flush {
+  padding: 0;
+  background: none !important;
+  border-color: transparent !important;
+  resize: none;
+  box-shadow: none !important;
+  line-height: inherit;
+}
+
 .form-footer {
   margin-top: 2rem;
 }