Harmonize light and strong dialogs

Problem with current dialogs:

• light dialogs are often too small > little window with lots of fields to be scrolled
• strong dialogs are often too big > huge window with one field and amply white space
• various glitches on both dialog types (browser resizing, responsiveness, button sizes)
• bad usability
• 2 (fixed) sizes is a concept from M5 which comes from a time where responsiveness hadn't established yet

Solution:

"One responsive dialog size with option light or strong"

1. harmonize size for both light and strong dialogs
   • fixed width: 740px (intermediate size btw current light and strong)
   • min height: 312px
   • flexible height according to the content, max height can span from browser top to bottom (top/bottom spacing 30px)
   • scroll bar only if more content than max height
2. add responsive behavior
   • 2 breakpoints, 3 sizes
3.  light, strong and tabs are configurable options
   • background: light or strong (both block interaction with the part of the interface it covers, note that in the current implementation in M6 only the strong dialogs block the interaction)
   • tab sheet: yes or no (aka complex dialog)

Detailed specs

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5da5d523b61eac2f84fc407e

Note for documentation:

https://documentation.magnolia-cms.com/display/DOCS61/Dialog+types

When to use light or strong dialogs

• strong dialogs ask for data collection
• light dialogs ask for quick input but do not severely interrupt the user

When to use simple or complex dialogs (with or without tabs)

• simple: whenever only few data points need to be collected
• complex: allows to collect larger amounts of data than its simple counterpart