update(ripple): centers the md-fab ripple and updates the main template to correct ripple directive

Slow down the ripple's movement towards the center to make it more obvious that the ripple is coming from the mouse cursor.
Rename the diagonalWidth to rippleWidth to be more descriptive.

Close #686.