From f8215a6be78fed1d720945644a15a91ce08aac80 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 7 Nov 2017 11:25:20 +0200
Subject: [PATCH] Input groups

Reworked and perfectly legacy-free.
---
 docs/v3/DEVLOG.md            |  4 ++++
 src/mini/_input_control.scss | 37 +++++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index c6d4e13..dc5dc63 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -95,3 +95,7 @@
 - Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
 - Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
 - `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.
+
+## 20171107
+
+- Built `.input-group`s from the ground up, cleaning legacy code and making sure everything works just like before. 
diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss
index 7458e03..5f63c33 100644
--- a/src/mini/_input_control.scss
+++ b/src/mini/_input_control.scss
@@ -2,7 +2,11 @@
   Definitions for forms and input elements.
 */
 // Different elements are styled based on the same set of rules.
-
+$input-group-name:           'input-group' !default;  // Class name for input groups.
+$_include-fluid-input-group: true !default;           // [Hidden] Should fluid input groups be included? (boolean)
+$input-group-fluid-name:     'fluid' !default;        // Class name for fluid input groups.
+$input-group-vertical-name:  'vertical' !default;     // Class name for vertical input groups.
+$input-group-mobile-breakpoint:   767px !default;     // Breakpoint for fluid input group mobile view.
 // Check the `_input_control_mixins.scss` file to find this module's mixins.
 // @import 'input_control_mixins';
 // TODO: Uncomment above as soon as mixins are ready to be used.
@@ -40,3 +44,34 @@ legend {
 label {
   padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
 }
+// Input group styling.
+.#{$input-group-name} {
+  display: inline-block;
+  // Fluid input groups
+  @if $_include-fluid-input-group {
+    &.#{$input-group-fluid-name} {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & > input {
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+      // On mobile
+      @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
+        align-items: stretch;
+        flex-direction: column;
+      }
+    }
+    // Verical input groups
+    &.#{$input-group-vertical-name} {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      & > input {
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+    }
+  }
+}