Ugly borders on the mobile + buttons in main navigation

[adamjohnson]

Steps to reproduce the issue

1. Go to a site that uses the Design System + the default dropdown navigation (eg: Academic Integrity)
2. View the site on a small viewport.
3. Expand the mobile navigation menu.

Results

The + buttons for the dropdowns have a browser default, ugly border around them.

Expected results

Borders should look more rad.

After looking into this, the fix is simple. To fix, include these two tint and shade functions to make the borders look awesome again. _wvu-nav-dropdowns.scss already uses these two functions.

Here's the step by step:

1. Create a new file in: scss/mixins called _wvu-tint-shade.scss.
2. Go to the CSS Tricks URL above, copy the two functions, paste them into the file you just made.
3. @import 'mixins/wvu-tint-shade'; on line 60 of styles.scss.
4. Issue fixed, submit pull request. 🎉

[adamjohnson]

Interestingly enough, this also adds borders & a background color change on hover to the main navigation items on non-mobile screens too:

I'm a fan.