Rework search icon styles

[andysellick]

What

Rework the sass for the search component SVG icon, which used a mixin with a calc function to determine the correct top and left values based on a given container size. Instead use a simpler effect - set the icon to be the height and width of the parent, but scale it by half (origin defaults to the center). Since the button is 40px and the icon should be 20px this should result in no visual difference.

For the large icon, the search icon should remain the same size, despite the button being 10px larger at 50px. Instead we apply a scale of .4, which results in the same size.

Why

Trying to use the search component in the govuk-dev-docs, which is running on an older version of Sass and doesn't interpret the calc part properly (it outputs it without calculating it, resulting in an invalid CSS value), which looks like this:

This change fixes this.

Visual Changes

Shouldn't be any, thought it might be different by a pixel or so compared to the original but the visual diff passes. I've tested this in a few browsers and it looks like it always did. Anything below IE10 doesn't work (because IE9 didn't support transform) but the result is that the icon is just a bit bigger than it should be. Since we don't support IE I think this falls into the acceptable category of 'looks a bit strange but still works'.

[MartinJJones]

Nice work!, really like the approach here, basing the icon size off the button size.

Checked Percy and no visual changes here either 👍