fix: Tab buttons

Author: fsbraun

djangocms_frontend/static/djangocms_frontend/css/base.css

@@ -10,8 +10,8 @@
     background-image: none;
     margin-bottom: 0; // For input.btn
     border-radius: $btn-border-radius-base;
-    color: $color;
-    background-color: $background;
+    color: $body-fg;
+    background-color: $body-bg;
     border: 1px solid $border;
     background-clip: padding-box;
     -webkit-appearance: none;
@@ -24,29 +24,28 @@
     }
     &:hover {
         color: $color;
-        background-color: color-mix(in srgb, $background, $body-fg 10%);
-        border-color: color-mix(in srgb, $border, $body-fg 10%);
+        background-color: color-mix(in srgb, $background 40%, $body-bg);
         text-decoration: none;
     }
     &:active,
+    &.active,
     &.cms-btn-active {
         color: $color;
-        background-color: color-mix(in srgb, $background, $body-fg 15%);
-        border-color: color-mix(in srgb, $border, $body-fg 15%);
+        background-color: $background;
         box-shadow: $btn-active-shadow;
 
-        &:hover,
+        &:hover {
+            color: $color;
+            background-color: color-mix(in srgb, $background, $body-fg 10%);
+            border-color: color-mix(in srgb, $border, $body-fg 15%);
+        }
         &:focus,
         &.focus {
             color: $color;
             background-color: color-mix(in srgb, $background, $body-fg 20%);
             border-color: color-mix(in srgb, $border, $body-fg 25%);
         }
     }
-    &:active,
-    &.cms-btn-active {
-        background-image: none;
-    }
     &.cms-btn-disabled,
     &[disabled] {
         &,

private/sass/components/_button.scss

@@ -23,10 +23,7 @@ form ul.djangocms-frontend.nav.nav-pills {
             height: $nav-pills-height;
             line-height: $nav-pills-height;
             display: inline-block;
-            @include button-variant($body-fg, $body-bg, $color-gray, $btn-border-radius-base);
-            &.active {
-                @include button-variant($nav-pills-color, $nav-pills-background, $color-gray, $btn-border-radius-base);
-            }
+            @include button-variant($nav-pills-color, $nav-pills-background, $color-gray, $btn-border-radius-base);
         }
     }
     .nav-link {