diff options
| author | Maxime Quandalle <maxime@quandalle.com> | 2015-08-25 23:39:00 +0200 |
|---|---|---|
| committer | Maxime Quandalle <maxime@quandalle.com> | 2015-08-26 16:49:41 +0200 |
| commit | 9faaf07e0257f622abcaa365408fa836a1cbdea8 (patch) | |
| tree | 8d214055307f66534d442bc2be8493f38a7e0334 /client/components/main/layouts.styl | |
| parent | 46a5e08aa7556b57d6c9b782eb1500811f2c3e6d (diff) | |
| download | wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.tar.gz wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.tar.bz2 wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.zip | |
Implement a modal system
I decided to create my own and not to use a community package, because
1. it's straightforward
2. it's better integrated with our others libs such as EscapeActions
3. monitoring third-party packages evolutions (eg, CSS changes) is a
lot of work.
This is basically the same rationale than for our other generic UI
components such as the Popup/Popover.
This commit also slightly modify the general layout to remove
unnecessary wrapper DOM nodes.
Diffstat (limited to 'client/components/main/layouts.styl')
| -rw-r--r-- | client/components/main/layouts.styl | 26 |
1 files changed, 24 insertions, 2 deletions
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index 5160ee8b..42a70310 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -19,8 +19,6 @@ body position: relative z-index: 0 overflow-y: auto - -#surface display: flex flex-direction: column min-height: 100vh @@ -30,6 +28,30 @@ body position: relative flex: 1 +#modal + position: absolute + top: 0 + bottom: 0 + left: 0 + right: 0 + background: rgba(0, 0, 0, 0.6) + z-index: 100 + overflow-y: auto + + .modal-content + width: 660px + min-height: 160px + margin: 42px auto + border-radius: 4px + background: darken(white, 13%) + z-index: 110 + + .modal-close-btn + display: block + float: right + margin: 12px + font-size: 24px + h1 font-size: 22px line-height: 1.2em |