input-group-prepend/append fix

pages/_includes/cards/profile-timeline.html

@@ -2,9 +2,7 @@
 	<div class="card-header">
 		<div class="input-group">
 			<input type="text" class="form-control" placeholder="Message">
-			<div class="input-group-append">
-				{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
-			</div>
+			{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
 		</div>
 	</div>
 	<ul class="list-group card-list-group">

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

@@ -28,17 +28,13 @@
 	<label class="form-label">Input group</label>
 	<div class="input-group mb-2">
 		<input type="text" class="form-control" placeholder="Search for…">
-		<span class="input-group-append">
-			<button class="btn btn-secondary" type="button">Go!</button>
-		</span>
+		<button class="btn btn-secondary" type="button">Go!</button>
 	</div>
 	<div class="input-group">
-		<div class="input-group-prepend">
-			<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				Action
-			</button>
-			{% include ui/dropdown-menu.html %}
-		</div>
+		<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			Action
+		</button>
+		{% include ui/dropdown-menu.html %}
 		<input type="text" class="form-control" aria-label="Text input with dropdown button">
 	</div>
 </div>
@@ -46,11 +42,9 @@
 	<label class="form-label">Input group buttons</label>
 	<div class="input-group">
 		<input type="text" class="form-control">
-		<div class="input-group-append">
-			<button type="button" class="btn btn-secondary">Action</button>
-			<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
-			{% include ui/dropdown-menu.html right=true %}
-		</div>
+		<button type="button" class="btn btn-secondary">Action</button>
+		<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
+		{% include ui/dropdown-menu.html right=true %}
 	</div>
 </div>
 

pages/_includes/ui/form/input-group.html

 <div class="input-group{% if include.flat %} input-group-flat{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.prepend %}
-	<div class="input-group-prepend">
-		<span class="input-group-text">
-			{% if include.prepend == "checkbox" or include.prepend == "radio" %}
-				<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
-			{% else %}
-				{{ include.prepend }}
-			{% endif %}
-		</span>
-	</div>
+	<span class="input-group-text">
+		{% if include.prepend == "checkbox" or include.prepend == "radio" %}
+			<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
+		{% else %}
+			{{ include.prepend }}
+		{% endif %}
+	</span>
 	{% endif %}
 	<input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %}>
 	{% if include.append %}
-	<div class="input-group-append">
-		<span class="input-group-text">
-			{% if include.append == "checkbox" or include.append == "radio" %}
-				<input class="form-check-input m-0" type="{{ include.append }}" checked>
-			{% else %}
-				{{ include.append }}
-			{% endif %}
-		</span>
-	</div>
+	<span class="input-group-text">
+		{% if include.append == "checkbox" or include.append == "radio" %}
+			<input class="form-check-input m-0" type="{{ include.append }}" checked>
+		{% else %}
+			{{ include.append }}
+		{% endif %}
+	</span>
 	{% endif %}
 	{% if include.append-link %}
-	<div class="input-group-append">
-		<span class="input-group-text">
-			<a href="#" class="input-group-link">{{ include.append-link }}</a>
-		</span>
-	</div>
+	<span class="input-group-text">
+		<a href="#" class="input-group-link">{{ include.append-link }}</a>
+	</span>
 	{% endif %}
 	{% if include.append-button %}
 	{% assign buttons = include.append-button | split: ',' %}
-	<div class="input-group-append">
-		<span class="input-group-text">
-			{% for button in buttons %}
-			{% assign b = button | split: ':' %}
-			{% assign icon = b[0] %}
-			{% assign description = b[1] %}
+	<span class="input-group-text">
+		{% for button in buttons %}
+		{% assign b = button | split: ':' %}
+		{% assign icon = b[0] %}
+		{% assign description = b[1] %}
 
-			<a href="#" class="link-secondary{% unless forloop.first %} ml-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-toggle="tooltip">{% include ui/icon.html icon=icon %}</a>
-			{% endfor %}
-		</span>
-	</div>
+		<a href="#" class="link-secondary{% unless forloop.first %} ml-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-toggle="tooltip">{% include ui/icon.html icon=icon %}</a>
+		{% endfor %}
+	</span>
 	{% endif %}
 </div>

scss/ui/_forms.scss

@@ -166,14 +166,6 @@ Form switch
 /**
 Input group
  */
-.input-group-prepend .input-group-text {
-  border-right: 0;
-}
-
-.input-group-append .input-group-text {
-  border-left: 0;
-}
-
 .input-group-link {
   font-size: $h5-font-size;
 }
@@ -204,32 +196,18 @@ Input group
     }
   }
 
-  .input-group-prepend {
-    margin-right: 0;
-    border-right: 0;
-    background: $form-check-input-bg;
+  .input-group-text {
+    background: transparent;
+    transition: $input-transition;
 
-    .input-group-text {
+    &:first-child {
       padding-right: 0;
     }
-  }
-
-  .input-group-append {
-    margin-left: 0;
-
-    &:not(:last-child) .input-group-text {
-      border-right: 0;
-    }
 
-    .input-group-text {
+    &:last-child {
       padding-left: 0;
     }
   }
-
-  .input-group-text {
-    background: transparent;
-    transition: $input-transition;
-  }
 }