From fa076fb360cca2683ef42ee43512d0292dade023 Mon Sep 17 00:00:00 2001
From: reinerBa <4329883+reinerBa@users.noreply.github.com>
Date: Mon, 21 Feb 2022 22:03:38 +0100
Subject: [PATCH] Add input-group and button-group

As suggested in issue #159 . The code needs his own file because margin-bottom of inputs is set in the input file, which is parsed after the _button.scss
---
 scss/content/_form-input-group.scss | 44 +++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 scss/content/_form-input-group.scss

diff --git a/scss/content/_form-input-group.scss b/scss/content/_form-input-group.scss
new file mode 100644
index 00000000..21ba95eb
--- /dev/null
+++ b/scss/content/_form-input-group.scss
@@ -0,0 +1,44 @@
+/**
+ * Input group and button group
+ */
+ 
+ .button-group, .input-group {
+  // Stick buttons together
+  display: flex;
+  
+  // Buttons have no margin-bottom set
+  & > button, & > label, & > select, & > input:not([type="checkbox"]):not([type="radio"]) {
+    margin-bottom: 0;
+  }
+
+  // No round corners in button groups
+  & > button:not(:last-child), 
+  & > [role=button]:not(:last-child), 
+  & > input:not(:last-child), 
+  & > select:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    /* border-right: 0;*/
+  }
+  
+  & > [role=button]:not(:first-child), 
+  & > input:not(:first-child), 
+  & > button:not(:first-child), 
+  & > select:not(:first-child){
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0;
+  }
+}
+
+// Radio groups need a text label
+.input-group > [type=radio]~label {
+  margin-right:0;
+}
+
+// The selected radio button will be outlined when outline class is choose and in reverse
+.input-group:not(.outline) > input[type="radio"]:not(:checked)+label[role=button],
+.input-group.outline > input[type="radio"]:checked+label[role=button] {
+  --background-color: transparent;
+  --color: var(--primary);
+}