Fix all @extends

[RazvanDH]

Some @extends are a bit vague and generate bad CSS that is hard to control.
We should only placeholders and placeholder structures and not classes.

Reason:

.btn { ... }
.btn--large { @extend .btn; }
...
.funky-element .btn { ... }

will output:

.btn, 
.btn--large { 
  ... 
}
.funky-element .btn,
.funky-element .btn--large {
  ...
}

[RazvanDH]

ping @FundingCircle/frontend - to keep in mind when using the @extend

[igoratron]

As a SASS/CSS layman I'd like to have a graph that tracks the size of the CSS over time. If it suddenly explodes it would be easier to notice

[RazvanDH]

@igoratron - you should always check the result of your CSS after you compile Sass. One does not simply write Sass without checking the result, either through a graph or manually.

[igoratron]

Agreed, however at the moment it's not really easy. Or even enforced. Having a graph/test on CI to check if we're not braking this rule would make it easier for me. It might be just me thought -- I think we should graph a lot more :)