Fix image-button styling (fixes #186)

[kris7t]

Seemingly due to Sass having a hard time processing nested placeholder selectors, the styling for toolbutton button.image-button and for toolbutton button.image-button.toggle did not get their :hover, :active, :disabled, :checked, and :checked:disabled styles applied.

As a workaround, I extracted the style for the %flat_button placeholder selector into a mixin, and used the mixing to style toolbutton button. This increases the compiled CSS size by a negligible amount, while allowing the image toolbar buttons to be styled correctly according to their state.

I am unsure whether this is Sass bug, but maybe we should investigate further.

[kris7t]

Still broken even after 582fb9317098ecc11932a2b8c5861f3c3c083120, it looks like the problem isn't the nested placeholder selectors, but trying to @extend a selector to toolbutton button, toolbutton button.image-button, toolbutton button.image-button.toggle. For some reason, Sass thinks that the pseudoselectors inside the extended selector only need to apply to toolbutton button, but not toolbutton button.image-button and toolbutton button.image-button.toggle.

Normally, Sass tries to be smart with specificity for @extend, e.g.

%flat_button {
    & { color: black; }
    &:hover { color: blue; }
}

toolbutton {
    button, button.image-button, button.image-button.toggle {
        @extend %flat_button;
    }
}

gets compiled into

toolbutton button, toolbutton button.image-button, toolbutton button.image-button.toggle {
  color: black; }
toolbutton button:hover, toolbutton button.image-button.toggle:hover {
  color: blue; }

Here, we can (correctly) avoid styling toolbutton button.image-button:hover, because toolbutton button.image-button has the same specificity as toolbutton button:hover, which occurs later. However, in _common.scss, the same situation results in Sass omitting even toolbutton button.image-button.toggle:hover, hence the toggle buttons will not get styled properly.