Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-20436

bootstrap .btn:hover can result in white text on white background for buttons

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Major
    • None
    • 14.4.6
    • None
    • Unknown

    Description

      • On one hand, bootstrap buttons without a variant (so with only class=".btn") do not have a text color set, they just inherit it.
      • On the other hand however, bootstrap buttons without a variant have a color set on hover and focus states: @btn-default-color (for some reason)

      -> So if the inherited color is radically different to the @btn-default-color, this can lead to unreadable texts.

       

      The most common issue happens when default buttons (.btn-default) are defined with light text over dark background in the skin. For buttons without a variant, the inherited color will usually come from the body text color (@text-color), which in most cases is a dark color, so everything displays ok. But on hover, the light @btn-default-color will be used, and we will end up having light text over light background.

      And even if the the @btn-default-color is a dark one, it might be different from the one that is inherited when the button is not hover, and having the button text color changing on hover could be confusing for the user.

       

      One  example of this can be seen in the notifications-macro panel, for the .notification-event-read-button and the .toggle-notification-event-details buttons, where the icons totally disappear on hover when the @btn-default-color is set to white in the theme:

          

       

      A solution to this might be to override bootstrap behavior on hover / focus for buttons without variants, and keep inheriting font color for the button.

      Attachments

        Activity

          People

            Unassigned Unassigned
            cdesableau Clément Desableau
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated: