Refactor form styles

Created by: tysongach

This PR refactors the styling of forms. It introduces a new reusable pattern for marking up and styling form elements. That pattern is a field-unit class, which was loosely called a form-field previously.

A form-unit is simply a grouping of elements that create a whole “field” in a form, the most common being a simple label/input pair (classed as field-unit__label and field-unit__field now). But a form-unit can have many children beyond field-unit__label and field-unit__field, for example, if we have a hint for the input, we could add a field-unit__field-hint. It offers a lot of flexibility moving forward and, overall, DRYs up a lot of the styles around forms:

• We used to have to set margins on every type of input a form had (which is a bit of a moving target), e.g. input, select, .selectize, etc. This gets out of hand quickly and results in duplicated margin values all over our CSS. Now that we have a consistent field-unit element which should wrap each whole “field” in a form, we can define the margin here, and only do it once.
• The old components/_form.scss partial, is gone and means we don’t have lots of base element styles outside of the base/ stylesheet directory
• This consistent structure will allow us to more easily make these form fields responsive
• Helps to eliminate specificity issues, some of which were brought up in https://github.com/thoughtbot/administrate/pull/273 and a very similar solution was discussed there.

Some look and feel has been changed in this PR (screenshots below). It wouldn’t be much effort to hit a near exact match to how it looks now, but I’m more concerned with establishing a great base for styling.

Before

After

• Note: This PR depends on #379 getting merged.