CSS: Use Bootstrap button styling throughout the CMS

[chillu]

Overview

Replace the jQuery UI button styles with http://v4-alpha.getbootstrap.com/components/forms/

Use flatter styles from https://projects.invisionapp.com/boards/9GX68PTXUQFH/#/1547737. Talk to @clarkepaul and @scott1702 on what's most effective to start on.

Known button occurrences:

• Bottom "save" bar in page editing and grid fields
• CMS Preview
• Grid field inline buttons
• Security section: import/export
• "Insert media" panel

Convert button related styles in framework/admin/scss/_forms.scss to the existing framework/admin/javascript/src/components/form-action, removing styles which are already implemented by Bootstrap.

Retain common classes set through PHP code (FormAction->addExtraClass()) if possible (e.g. ss-ui-action-constructive).

Loading indication for Save/Publish buttons needs to remain, see framework/admin/javascript/src/components/form-action for how this should look with the updated styles.

Related

• Remove all legacy CSS browser hacks
• Use Bootstrap styling throughout the CMS
• Clean out ss-ui-button style use
• Clean out legacy CSS

[clarkepaul]

I have made a little bit of progress on this, but my efforts where too scattered to be put into a PR. I recommend that if anyone picks this up they should take on just a very small part. Buttons have a lot of crossover with other things like loading states, different icon sets, data-icon set up is different, gridfield pagination are effected also and many other places.

[chillu]

@clarkepaul How far through are we with this from your assessment? Buttons at least look flat to me now :D

[clarkepaul]

@chillu single buttons are pretty much complete although there will be edge cases (batch actions, toolbar action wrappers for positioning, view mode actions) where there are legacy styles, I'd say 90% done for button actions CMS wide. We need to find what CSS is still being used in the legacy style sheets and move/rewrite it to the new BEM format.