Social buttons improvements

[ffoodd]

There are tons of duplicated code in here, where it could be avoided:

• define a parent class (like .btn-social) to prevent duplicated code:

.btn-* {
  height: 2.5rem;
  background-repeat: no-repeat;
  &:hover,
  &:focus {
    outline: none;
  }
}

is duplicated 10 times!!

• Use em isntead of rem to set the height would allow social buttons to respect size variants, since height would be related to font-size…
• inlined SVGs could be improved, related to Icon system using SVG  #182
• there has to be better way than setting inlined SVGs for each state… This is extremely verbose (thus resulting in a much, much bigger file) when we only want to change a few colors… Whether we support IE11 or drop it, we could simplify the code by using mask-image instead of background-image.

To reboot!

[ffoodd]

Last item will be treated separately, along with #182.