diff options
author | Liming Xie <liming.xie@gmail.com> | 2015-12-17 14:23:35 +0800 |
---|---|---|
committer | Liming Xie <liming.xie@gmail.com> | 2015-12-17 14:23:35 +0800 |
commit | 354eff9f7bf550f83d55ef2e96b10aab1a70162d (patch) | |
tree | 34cba5531d56d4ca51ed5346a5f26e480c4a33c7 /client/components/main/popup.styl | |
parent | 0954cff5b470712210275a9c0699d85d6579ab54 (diff) | |
download | wekan-354eff9f7bf550f83d55ef2e96b10aab1a70162d.tar.gz wekan-354eff9f7bf550f83d55ef2e96b10aab1a70162d.tar.bz2 wekan-354eff9f7bf550f83d55ef2e96b10aab1a70162d.zip |
add: support compact mode for mobile web, auto adapt to small screen/window
Diffstat (limited to 'client/components/main/popup.styl')
-rw-r--r-- | client/components/main/popup.styl | 87 |
1 files changed, 86 insertions, 1 deletions
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl index 8a685069..b7c9e264 100644 --- a/client/components/main/popup.styl +++ b/client/components/main/popup.styl @@ -83,7 +83,7 @@ $popupWidth = 300px transition: transform 0.2s .content - width: 300 - 20px + width: $popupWidth - 20px padding: 0 10px 10px float: left @@ -243,3 +243,88 @@ $popupWidth = 300px &:hover text-decoration: underline + +@media screen and (max-width: 800px) + .pop-over + width: 100% + height: 100% + overflow: hidden + margin-top: 0px + border: 0px solid #dbdbdb + + .header + color: white + background: #2980B9 + height: 48px + padding: 0px 0px + border: 0px + margin: 0px 0px + width: 100% + position: absolute + top: 0px + + .header-title + font-size: 20px + font-weight: normal + padding-top: 8px + + .back-btn + width: 30px + padding: 8px 12px 8px 12px + + i.fa + color: white + + .close-btn + padding: 10px 12px + + i.fa + font-size: 24px + color: white + + .content-wrapper + width: 100% + height: calc(100% - 48px) + overflow-y: scroll + overflow-x: hidden + margin: 48px 0px 0px 0px + + .content-container + width: 1000% + height: 100% + max-height: 100% + + .content + width: calc(10% - 20px) + height: calc(100% - 20px) + padding: 10px + + form + margin: 10px 10px + width: calc(100% - 20px) + + p, + textarea, + input[type="text"], + input[type="email"], + input[type="password"], + input[type="file"] + margin: 4px 0 12px + width: 100% + + .pop-over-list + li > a + width: calc(100% - 20px) + padding: 10px 10px + margin: 0px 0px + border-bottom: 1px solid #eee + + hr + width: 100% + height: 20px + margin: 0px 0px + color: #eee + + for depth in (1..6) + .popup-container-depth-{depth} + transform: translateX(- depth * 10%) |