Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The button class' rendering was modeled after Bulma's buttons, and the code and styling of the scss steals a lot from there:

There are a few problems to fix still, though:

  • The butons do not properly show navigational state (hover, active, focus mainly).

Style sheets and remarks

The styles for the buttons have been stolen from Bulma, mostly. But some fixes were done with mixed results:

  • The is-{color} set of buttons had the following changes:
    • The color of the buttons when hovering for dark buttons was not visible. Root cause was that the hover color was set using "darken", but it's damn difficult to darken black, really. I added a new method "findColorHighlight" which uses the luminance of the color: if the luminance is > .3 then we darken, otherwise we lighten. I also increased percentages a bit.
    • Focus was impossible to see on the darker buttons, because it was done by a whitish shadow. This does not work that well on a white background. I added a method findButtonFocusBorderColor which tries to calculate a border color for the button from its main background color by changing the hue 180 degrees and playing with luminance.