diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-06-05 21:37:13 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-06-05 21:37:13 +0200 |
commit | dea52907bdbed92c95dec7e7e832ac95d9f9d388 (patch) | |
tree | 22edfa8b3eb623084edcb2e25abb0bd8285b9cc4 /client/components/boards/boardBody.styl | |
parent | 97807abd709f4355964b52105c0931d6671ff20b (diff) | |
download | wekan-dea52907bdbed92c95dec7e7e832ac95d9f9d388.tar.gz wekan-dea52907bdbed92c95dec7e7e832ac95d9f9d388.tar.bz2 wekan-dea52907bdbed92c95dec7e7e832ac95d9f9d388.zip |
Start designing the card details pane
Implement a dynamic overflow to focus sight on the pane.
Diffstat (limited to 'client/components/boards/boardBody.styl')
-rw-r--r-- | client/components/boards/boardBody.styl | 54 |
1 files changed, 32 insertions, 22 deletions
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index 281199e2..68034a16 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -1,21 +1,29 @@ @import 'nib' -.board-wrapper - left: 0 - top: 0 - bottom: 0 - right: 0 - position: absolute - overflow: hidden - - .board-canvas +position() + if arguments[0] == cover position: absolute left: 0 right: 0 top: 0 bottom: 0 + else + position: arguments + +.board-wrapper + position: cover + + .board-canvas + position: cover transition: margin .1s + .board-overlay + position: cover + background: black + opacity: 0.33 + animation: fadeIn 0.2s + z-index: 10 + &.next-sidebar margin-right: 248px @@ -25,16 +33,18 @@ .open-minicard-composer display: none -.lists - align-items: flex-start - display: flex - flex-direction: row - margin-bottom: 10px - overflow-x: auto - overflow-y: hidden - padding-bottom: 10px - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 + .lists + align-items: flex-start + display: flex + flex-direction: row + margin-bottom: 10px + overflow: auto + padding-bottom: 5px + position: cover + + // In order for the card details pane to overlap the header we need to + // virtually increase this container size with the below hack. (Note that it + // is not possible to set overflow-x: auto, overflow-y: hidden as I + // originally tried). + padding-top: 10px + top: -10px |