chore: sort Sass components in categories

[ncoden]

Closes:

• [Accordion Menu] $accordionmenu-padding not working properly #10854
• Dropdown submenu not working in flex mode. #9260

Currently, import/includes in foundation.scss are sorted alphabetically. This is a very bad idea.

Import/includes order in Sass matters a lot as the last CSS properties declared will override the first ones. So components should be sorted in a more "generic" to more "specific" components. When a component relies on others (like accordion-menu with menu), these dependencies should be imported and included before.

Changes: Sort CSS includes in the following categories:

1. Global styles
2. Generic components (controls and HTML-oriented components)
3. Basic components (components with enclosed layout styles)
4. Containers (components with side-effects on internal layout)
5. Layout (components with side-effects on external layout)
6. Helpers (highly specific and non-inheritable classes)

⚠️ Breaking changes MAY HAVE been introduced. Tests are required to ensure it did not created bugs.

[ncoden]

@colin-marshall @brettsmason Could you review this ?
(also poke @SassNinja)

[ncoden]

I checked all component and everything looks fine.
@SassNinja Could you make a review ?

[colin-marshall]

@ncoden I like this better, but it seems the categories themselves would be more organized if it could be sorted alphabetically when dependencies don't matter. For example, I think drilldown-menu should come before dropdown-menu. Another example is the sorting of generic components category looks to be completely random, but maybe there are dependencies I'm not seeing.

[ncoden]

@colin-marshall You are right. I'll change that.

[ncoden]

I resolved conflicts with develop, moved typography and forms to the "Global styles" category, and sorted components inside categories alphabetically.