CSS background bugfix - added repsonsiveness indications

[DalderupMaurice]

Regular fixes

• fixed css background bug on certain occasions
• Changed cursor on amount values

---

Opinion needed - to keep or not to keep 😄

• removed outlines on click
• added some css animation to indicate responsiveness

Showcase:

UPDATED 29-05-2018

• Added focus ring management
• Updated CSS to be more consistent

Showcase:

[coveralls]

Coverage decreased (-0.02%) to 41.086% when pulling 9e10e7a on DalderupMaurice:chore/css-fix into e1183d4 on CityOfZion:development.

[DalderupMaurice]

Discussed with @FredrikOseberg
Might want to add in the outlines back for access ability reasons

I'd like to hear your opinions :) @slipo @phetter

Thought I'd quickly threw it in with the background issue as it's just a minor change.
If you guys would like to keep the outlines, I can change it back and keep the background css fix in + cursor adjustments ^^

We could also have a middle-way by just restyling the outlines, if we decide to keep them 😄

[FredrikOseberg]

https://a11yproject.com/posts/never-remove-css-outlines/

I don't think we should completely remove outlines, as it's relied upon by many visually impaired users worldwide. Open to consider restyling. Please refer to a11y project to make sure we keep compliant with access ability. As the importance of the internet increases, so does our responsibility to make sure anyone can use it :)

[DalderupMaurice]

We might also consider what-input https://www.npmjs.com/package/what-input
This hides the outline for mouse only, not for keyboard @FredrikOseberg

[DalderupMaurice]

What do you think? @FredrikOseberg
I've updated to see how'd it be with what-input