Bug 30190: Green buttons turn blue for a second when clicking them

This patch adds additional CSS to better cover various states of buttons
in the OPAC.

To test, apply the patch and rebuild the OPAC CSS:
https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client

- In the OPAC, test various green buttons in varous states: default,
  hover, and active (the appearance when the button is clicked but
  before the mouse button is released).
- The button should be styled in various shades of green in all cases.
- Test a disabled button by performing a catalog search.
- On the results page, before any checkboxes are checked, the "Save"
  button should look correct.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
index 2fd8f66..a696b9b 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
@@ -203,6 +203,44 @@ caption {
     &:focus {
         box-shadow: 0 0 0 2px lighten($base-theme-color, 10%);
     }
+
+    &.disabled,
+    &:disabled {
+        background-color: lighten($base-theme-color, 5%);
+        border-color: lighten($base-theme-color, 5%);
+        box-shadow: none;
+        color: #fff;
+        cursor: not-allowed;
+        &:hover,
+        &.hover {
+            background-color: lighten($base-theme-color, 5%);
+            border-color: lighten($base-theme-color, 5%);
+            box-shadow: none;
+            color: #fff;
+            cursor: not-allowed;
+        }
+    }
+
+    &:not(:disabled):not(.disabled):active:focus,&
+    &:not(:disabled):not(.disabled).active:focus {
+        box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%);
+    }
+
+    &:not(:disabled):not(.disabled).active,
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled):focus,
+    &:not(:disabled):not(.disabled).focus {
+        background-color: lighten($base-theme-color, 5%);
+        border-color: lighten($base-theme-color, 10%);
+    }
+}
+
+.show > .btn-primary.dropdown-toggle {
+    background-color: lighten($base-theme-color, 5%);
+    border-color: lighten($base-theme-color, 10%);
+    &:focus {
+        box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%);
+    }
 }
 
 .btn-danger {
@@ -948,15 +986,11 @@ button {
 .btn.disabled,
 .btn[disabled] {
     &:hover {
-        color: #333;
-        filter: alpha(opacity=65);
         opacity: 0.65;
     }
     i {
         &.fa,
         &.fa:hover {
-            color: #333;
-            filter: alpha(opacity=65);
             opacity: 0.65;
         }
     }

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index ea32750..062752a 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -500,14 +500,12 @@ th {
         &.disabled,
         &[disabled] {
             color: #333;
-            filter: alpha(opacity=65);
             opacity: 0.65;
 
             &:hover {
                 i {
                     &.fa {
                         color: #333;
-                        filter: alpha(opacity=65);
                         opacity: 0.65;
                     }
                 }