Attachment 131409 Details for Bug 30190 – Bug 30190: Green buttons turn blue for a second when clicking them

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

Bug-30190-Green-buttons-turn-blue-for-a-second-whe.patch (text/plain), 3.70 KB, created by Katrin Fischer on 2022-03-06 12:56:09 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Katrin Fischer

Created: 2022-03-06 12:56:09 UTC

Size: 3.70 KB

patch

obsolete

>From bfc33e433c28c15d592c3ff1a11c9e3ae66d75ad Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Wed, 2 Mar 2022 14:23:36 +0000
>Subject: [PATCH] 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>
>---
> .../opac-tmpl/bootstrap/css/src/_common.scss  | 42 +++++++++++++++++--
> .../opac-tmpl/bootstrap/css/src/opac.scss     |  2 -
> 2 files changed, 38 insertions(+), 6 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>index 2fd8f66545..a696b9b1c8 100644
>--- 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 ea327506d0..062752a2e7 100644
>--- 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;
>                     }
>                 }
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 30190: 131255 | 131259 | 131409