input-group-flat

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">

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">

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

@@ -9,8 +9,13 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Your vanity URL</label>
+   <label class="form-label">Your custom URL</label>
-   {% include ui/form/input-group.html prepend="https://example.com/users/" %}
+   {% 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">

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>

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;
+  }
+}