From 0fd72b8837e752c86689b2e06b8ce00036a97f0e Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Mon, 9 Sep 2019 15:07:23 +0200
Subject: [PATCH] enhanced radio button group with `bg-*` - added active
 override for .btn.bg-* - added radio button group demo in
 pages/UI/buttons.html

---
 build/scss/_mixins.scss |  9 +++++++--
 pages/UI/buttons.html   | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss
index 87d410f55..5b4838e66 100644
--- a/build/scss/_mixins.scss
+++ b/build/scss/_mixins.scss
@@ -314,10 +314,13 @@
         color: darken(color-yiq($color), 7.5%);
       }
 
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
       &:active,
       &.active {
+        background-color: darken($color, 10%) !important;
         border-color: darken($color, 12.5%);
-        color: darken(color-yiq($color), 10%);
+        color: color-yiq(darken($color, 10%));
       }
     }
   }
@@ -344,11 +347,13 @@
         color: darken(color-yiq($color), 7.5%);
       }
 
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
       &:active,
       &.active {
         @include bg-gradient-variant('&', darken($color, 10%));
         border-color: darken($color, 12.5%);
-        color: darken(color-yiq($color), 10%);
+        color: color-yiq(darken($color, 10%));
       }
     }
   }
diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index 57fe45b87..693f2caa8 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1917,6 +1917,42 @@
               <!-- /.card-body -->
             </div>
             <!-- /.card -->
+
+            <!-- Radio Buttons -->
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Radio Button Group</h3>
+              </div>
+              <div class="card-body table-responsive pad">
+                <p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
+                <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                  <label class="btn btn-secondary active">
+                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+                  </label>
+                  <label class="btn btn-secondary">
+                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+                  </label>
+                  <label class="btn btn-secondary">
+                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+                  </label>
+                </div>
+
+                <p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
+                <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                  <label class="btn bg-olive active">
+                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+                  </label>
+                  <label class="btn bg-olive">
+                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+                  </label>
+                  <label class="btn bg-olive">
+                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+                  </label>
+                </div>
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
           </div>
           <!-- /.col -->
         </div>