From 2c0196898f2c8814e393dd0de5e713f6439aaf91 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 22 Nov 2022 17:10:23 +0000 Subject: [PATCH] Bug 32323: Correct focus state of some DataTables controls This patch makes changes to the style of some DataTable controls in order to make hover, active, and focus states more consistent. To test, apply the patch and rebuild the staff interface css. View a page that has a DataTable showing controls like "Columns," "Export," and "Configure." For example: Saved reports, Libraries, Overdues. - Click the DataTables search form to put cursor focus there. - Use the tab key to move through the next buttons. - The style should now be more consistent with the appearance of other similar buttons in the staff client. - Test with and without text in the search filter. - Test pages which don't have the full set of controls, e.g. the table of of a patron's checkouts. Signed-off-by: David Nind --- .../intranet-tmpl/prog/css/src/_tables.scss | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss index b286d871ba..ffd22ab654 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss @@ -565,11 +565,12 @@ div, a { &.dt-button { background: transparent none; - border: 0; + border: 1px solid transparent; + border-radius: 4px; color: #000; font-size: 1em; line-height: 1.7em; - margin: 3px 3px 0; + margin: 0 3px 0; padding: 0 .5em; &::before { @@ -578,42 +579,46 @@ a { &.disabled { background: transparent none; - border: 0; + border: 1px solid transparent; color: #999; cursor: default; + &:focus { + border: 1px solid #ADADAD; + } + a, span { background: transparent none; } } - &:active, - &:focus { + &:active:not( .disabled ), + &:focus:not( .disabled ) { background: transparent none; - border: 0; + border: 1px solid #ADADAD; box-shadow: none; text-shadow: none; &:not( .disabled ):hover:not( .disabled ) { - background: transparent none; + background: #EEE none; + border: 1px solid transparent; box-shadow: none; } } &:hover { background: transparent none; - border: 0; + border: 1px solid transparent; &:not( .disabled ) { - background: transparent none; - border: 0; + background: #EEE none; } } &.active:not( .disabled ):hover:not( .disabled ) { - background: transparent none; - box-shadow: none; + background: #EEE none; + border: 1px solid transparent; } } } -- 2.30.2