From bfc33e433c28c15d592c3ff1a11c9e3ae66d75ad Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Katrin Fischer --- .../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