gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 9f44dc5295)
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
Owen Leonard 2022-11-22 17:10:23 +00:00 committed by Martin Renvoize
parent 714b4e720a
commit dd32b10be5
No known key found for this signature in database
GPG Key ID: 422B469130441A0F
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss
View File

@ -566,11 +566,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 {
@ -579,42 +580,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;
}
}
}