Change tabs appearance

[atm-john]

1 - Default
2 - Hover
3 - Active
4 - Improve badge visibility

[eldy]

Is look and badge ok on smartphone too ?
On smartphone, the tabs are merged into a combo list.

[atm-john]

Good game ! I forgot the mobile testing part. Now it's fixed !
I added a note for me for the next time.

[librethic-code]

This is an accessibility error! Please keep in mind accessibility rules.
See https://www.sitepoint.com/15-rules-making-accessible-links/ (chapter 11) and https://www.w3.org/TR/WCAG20-TECHS/F73.html

[atm-john]

This is represented by top border of the tab.
I added borders to make tabs more "button like" ( for exemple .butAction have text-decoration )

I'm agree with this type of recommandations for links in text paragraph, but we are not on a text paragraph and it's not the link's normal state.

The hover state change his border top line color saturation, hue and change cursor to pointer.

If hover state style need more visibility for accessibility, I suggest changing hover state by the same of active state (remove bottom border and change top border to a 2px colored style. But actually I don't think it's necessary, don't you ?

[librethic-code]

You're right we are not into textual context. This point related to Dolibarr interface generally…

For tabs IMHO we need more contrast between active tabs and others (don't forget :focus state, using same styles than :hover), not only one border. Cursor changes is not valid when user navigate with keyboard with Tab key.

In any case, we applaud you for this courageous work on Dolibarr theming ;)

[atm-john]

Added : more hover visual effect

[eldy]

Having borders on each tab gives a very loaded screen.
We retreive the look of tab we had in old version of Dolibarr before we removed the borders on tab to follow what bootstrap suggests (see screenshot). Also when we have several tabs on 2 lines (for example on small screen on tablet, we don't see anymore where is the badge (it is at both at top of a title but at bottom of another one. this is minor, this does not happen too frequently). So can you just add a constant so we can keep the "non selected tab" as simple links for people who want a cleaner interface ?

[atm-john]

yeah i see.