feat: Add styling for button groups

Author: fsbraun

LICENSE

@@ -43,3 +43,6 @@ may be used optionally in an installation of the software:
 * Weather Icons https://erikflowers.github.io/weather-icons/
   (SIL Open Font Licence 1.1 https://openfontlicense.org)
 
+It also uses FontAwesome Free icons for UI interface https://fontawesome.com
+(CC BY 4.0 License https://creativecommons.org/licenses/by/4.0/) - attribution within the
+individual SVG files in djangocms_frontend/contrib/icon/static/djangocms_frontend/icon/vendor/assets

djangocms_frontend/static/djangocms_frontend/css/base.css

@@ -1,4 +1,5 @@
 @import "components/variables";
+@import "components/bs-buttons";
 
 form .form-row div.frontend-button-group.frontend-button-group-block {
     display: flex;
@@ -18,11 +19,15 @@ form .form-row div.frontend-button-group.frontend-button-group-block {
 form .form-row div.frontend-button-group {
     label.btn-grp {
         margin: 3px;
-        padding: 4px 7px;
+
+        &:not(.btn) {
+            padding: 4px 7px;
+        }
+
         text-transform: none;
         text-align: center !important;
-        //border-color: transparent !important;
         outline: 2px solid transparent;
+        outline-offset: 2px;
         width: auto !important;
         font-weight: normal !important;
         display: inline-block;
@@ -51,9 +56,14 @@ form .form-row div.frontend-button-group {
 
     input[type="radio"]:checked + label.btn-grp,
     input[type="checkbox"]:checked + label.btn-grp {
-        outline: 2px solid $color-secondary;
-        border-color: white;
+        outline-color: $color-primary;
         border-radius: 0;
+        border: none;
+    }
+
+    input[property="icon"] + label.btn-grp {
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
     }
 
     input[property="text"]:checked + label.btn-grp,
@@ -65,20 +75,12 @@ form .form-row div.frontend-button-group {
         width: 3.5em !important;
         padding-inline-start: 0 !important;
         padding-inline-end: 0 !important;
-        color: var(--dca-black, $django-dark-color) !important;
+        color: $black !important;
         overflow: hidden;
         white-space: nowrap;
         background: rgba(var(--bs-secondary-rgb), calc(var(--fe-value) / 100));
     }
 
-    input[property="opacity"][value="50"] + label.btn-grp,
-    input[property="opacity"][value="25"] + label.btn-grp,
-    input[property="opacity"][value="10"] + label.btn-grp {
-        @media (prefers-color-scheme: light) {
-            color: black !important;
-        }
-    }
-
     input[property="link-size"][value="btn-lg"] + label.btn-grp {
         padding: 0.5rem 1rem !important;
         font-size: 1.25rem;
@@ -145,7 +147,7 @@ form .form-row div.frontend-button-group {
 
     .btn-white {
         background: white;
-        color: black !important;
+        color: $black !important;
     }
 
     .btn-light {

djangocms_frontend/static/djangocms_frontend/css/button_group.css

@@ -0,0 +1,70 @@
+
+:root {
+    --bs-secondary-rgb: 0, 123, 255;
+    --bs-secondary: #6c757d;
+    --bs-primary: #0d6efd;
+    --bs-gray-600: #6c757d;
+    --bs-gray-900: #212529;
+    --bs-light: #f8f9fa;
+    --bs-dark: #343a40;
+    --bs-white: #fff;
+    --bs-black: #000;
+    --bs-success: #198754;
+    --bs-danger: #dc3545;
+    --bs-warning: #ffc107;
+    --bs-info: #0dcaf0;
+
+    .btn {
+        border-color: var(--bs-secondary);
+        box-shadow: none;
+        transition: all 0.15s ease-in-out;
+
+        &:hover {
+            color: var(--bs-white);
+            filter: saturate(60%);
+        }
+
+        &:focus,
+        &.focus {
+            filter: saturate(80%);
+            text-decoration: none;
+        }
+    }
+
+    .btn {
+        padding: 0.375rem 0.75rem;
+        border-radius: 4px;
+    }
+
+    .btn-primary {
+        color: white;
+        background-color: var(--bs-primary)
+    }
+    .btn-secondary {
+        color: white;
+        background-color: var(--bs-secondary)
+    }
+    .btn-light {
+        background-color: var(--bs-light)
+    }
+    .btn-dark {
+        background-color: var(--bs-dark)
+    }
+    .btn-success {
+        color: white;
+        background-color: var(--bs-success)
+    }
+    .btn-danger {
+        color: $white;
+        background-color: var(--bs-danger)
+    }
+    .btn-warning {
+        color: black;
+        background-color: var(--bs-warning)
+    }
+    .btn-info {
+        color: black;
+        background-color: var(--bs-info)
+    }
+}
+

private/sass/button_group.scss

@@ -19,7 +19,7 @@
 
     // adds basic active effect
     .btn.active {
-        outline: 3px solid $color-secondary;
+        outline: 3px solid $color-primary;
         border-color: #fff !important;
     }
 

private/sass/components/_bs-buttons.scss

@@ -65,6 +65,9 @@ form ul.djangocms-frontend.nav {
         &.active {
             display: block;
         }
+        & > fieldset > h2 {
+            display: none;
+        }
     }
 }
 

private/sass/components/_button-group.scss

@@ -1,4 +1,5 @@
-$color-secondary: var(--dca-secondary, var(--header-bg));
+$color-primary: var(--primary);
+$color-secondary: var(--dca-action-bg, var(--header-bg));
 $color-gray: var(--dca-gray, var(--breadcrumbs-fg, #999));
 $dark-fg: var(--dca-dark-fg, #333);