Component styles should be pulled into their own partials and audited

[Kyle-Mendes]

This will take some significant restructuring of the CSS.

Basically, every component should have their own scss partial: _<component>.scss. This should contain all the styles to make that component (and only that component) work.

Then, each component needs to have className namespacing to ensure conflict-less styling and easy overwriting: <Component className="mortar-{component-type}-{component} />

Finally, components that have styles that trickle down to their children (Forms, for example) need to be cleaned up and have some sort of className that trickles them down. <Br.Form.Input className="mortar-form-element mortar-form-input />

The general idea is that all the components will have styles living in their own partials. _DropdownSelect.scss for example. From there, they will be imported into the /components/_all.scss partial, which is in turn imported into main.scss

|-- main.scss
|-- components
|   |-- _all.scss
|   L__ form
|       L__ _DropdownSelect.scss

The component's partial should have all of its styles live completely separately from all other components. So, all classes and ids should only reference that component (I didn't do this in the work pushed to this branch yet).

Anything that needs to be shared with other components / the CMS in general should live in /utils/... or /base/....

|-- main.scss
|-- base
|   L__ _all.scss
|-- components
|   |-- _all.scss
|   L__ form
|       L__ _DropdownSelect.scss
L__ utils
    L__ _all.scss

Requirements

• Componenetized scss partials.
• className Namespacing in the component files
• Parent component namespacing and trickle-down in the scss