From ab91ac0f26e7d9a7867f285f0a3a0e0b91c6a76d Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Fri, 10 Jan 2020 23:33:10 +0100
Subject: [PATCH] input-group-flat

---
 pages/_docs/form-elements.md               |  2 +-
 pages/_includes/forms/form-elements-1.html |  1 +
 pages/_includes/forms/form-elements-2.html |  9 +++-
 pages/_includes/ui/form/input-group.html   |  2 +-
 scss/ui/_forms.scss                        | 61 ++++++++++++++++++++++
 5 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md
index 895afd124..95566705c 100644
--- a/pages/_docs/form-elements.md
+++ b/pages/_docs/form-elements.md
@@ -184,7 +184,7 @@ bootstrap-link: components/forms/
 
 <div class="mb-2">
    <label class="form-label">Your vanity URL</label>
-   {% include ui/form/input-group.html prepend="https://example.com/users/" %}
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" %}
 </div>
 
 <div class="mb-2">
diff --git a/pages/_includes/forms/form-elements-1.html b/pages/_includes/forms/form-elements-1.html
index 1f2c13950..addd06123 100644
--- a/pages/_includes/forms/form-elements-1.html
+++ b/pages/_includes/forms/form-elements-1.html
@@ -4,6 +4,7 @@
 </div>
 <div class="mb-3">
    <label class="form-label">Text</label>
+   <div class="form-hint">Here's some more info.</div>
    <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
 </div>
 <div class="mb-3">
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index bf31b4bbc..46a9be17a 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -9,8 +9,13 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Your vanity URL</label>
-   {% include ui/form/input-group.html prepend="https://example.com/users/" %}
+   <label class="form-label">Your custom URL</label>
+   {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
+</div>
+
+<div class="mb-3">
+   <label class="form-label">Your custom subdomain</label>
+   {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
 </div>
 
 <div class="mb-3">
diff --git a/pages/_includes/ui/form/input-group.html b/pages/_includes/ui/form/input-group.html
index 62aa16cfe..51d29f358 100644
--- a/pages/_includes/ui/form/input-group.html
+++ b/pages/_includes/ui/form/input-group.html
@@ -4,7 +4,7 @@
     <span class="input-group-text">{{ include.prepend }}</span>
   </div>
   {% endif %}
-  <input type="text" class="form-control"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
+  <input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
   {% if include.append %}
   <div class="input-group-append">
     <span class="input-group-text">{{ include.append }}</span>
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 11b78db14..f16a05ffa 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -22,6 +22,19 @@ Form label
   font-size: $small-font-size ;
 }
 
+/**
+Form hint
+ */
+.form-hint {
+  font-size: $small-font-size;
+  color: $text-muted;
+  margin: 0 0 .5rem;
+
+  .form-label + & {
+    margin-top: -.75rem;
+  }
+}
+
 /**
 Form control
  */
@@ -113,3 +126,51 @@ Input group
  */
 .input-group-prepend .input-group-text { border-right: 0; }
 .input-group-append .input-group-text { border-left: 0; }
+
+.input-group-flat {
+  &:focus-within {
+    box-shadow: $input-focus-box-shadow;
+    border-radius: $input-border-radius;
+
+    .form-control,
+    .input-group-text {
+      border-color: $input-focus-border-color !important;
+    }
+  }
+
+  .form-control {
+    &:focus {
+      border-color: $input-border-color;
+      box-shadow: none;
+    }
+
+    &:not(:last-child) {
+      border-right: 0;
+    }
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+  }
+
+  .input-group-prepend {
+    margin-right: 0;
+
+    .input-group-text {
+      padding-right: 0;
+    }
+  }
+
+  .input-group-append {
+    margin-left: 0;
+
+    .input-group-text {
+      padding-left: 0;
+    }
+  }
+
+  .input-group-text {
+    background: transparent;
+    transition: $input-transition;
+  }
+}