fix(modals): correct padding for various header/body/footer layouts

[jzempel]

• BREAKING CHANGE?

Description

Consistent stacking with variable padding based on optional flex children is, well ... hard.

Detail

See "Various Dialog Layouts" section under https://garden.zendesk.com/css-components/modals/ – published for review. Note that, in order to stack consistently, it's left as an exercise to the consumer to add 20px of padding to the bottom of a dialog with no footer.

@Austin94 when this rolls into react-components we should update the three examples under https://garden.zendesk.com/react-components/modals/#!/Modal/5 to style the parent Modal with paddingBottom: 20 (for a total of 40px whitespace at the bottom of the modals).

Checklist

• 👌 style updates are Garden Designer approved (add the
  designer as a reviewer)
• 🌐 component demo is up-to-date (yarn start)
• ✅ all component states are represented
  (.is-hovered, .is-focused, etc.)
• ⬅️ renders as expected with reversed (RTL) direction
• 🤘 renders as expected sans Bedrock (?bedrock=false)
• 💅 provides custom.css example for modifying the
  primary accent color
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11