summaryrefslogtreecommitdiffstats
path: root/client/components/sidebar/sidebar.styl
diff options
context:
space:
mode:
authorLiming Xie <liming.xie@gmail.com>2015-12-17 14:23:35 +0800
committerLiming Xie <liming.xie@gmail.com>2015-12-17 14:23:35 +0800
commit354eff9f7bf550f83d55ef2e96b10aab1a70162d (patch)
tree34cba5531d56d4ca51ed5346a5f26e480c4a33c7 /client/components/sidebar/sidebar.styl
parent0954cff5b470712210275a9c0699d85d6579ab54 (diff)
downloadwekan-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/sidebar/sidebar.styl')
-rw-r--r--client/components/sidebar/sidebar.styl48
1 files changed, 48 insertions, 0 deletions
diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index 151a8f19..9007af59 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/client/components/sidebar/sidebar.styl
@@ -19,6 +19,9 @@
overflow-x: hidden
overflow-y: auto
+ .hide-btn
+ display: none
+
h3
color: darken(white, 50%)
font-size: 1em
@@ -130,3 +133,48 @@
margin: 0
margin-bottom: 5px
padding: 0 2px 0 10px
+
+@media screen and (max-width: 800px)
+ .board-sidebar
+ width: 100%
+ right: -@width
+
+ .sidebar-content
+ .hide-btn
+ width: 40px
+ height: @width
+ position: absolute
+ right: 5px
+ top: 5px
+ display: block
+ z-index: 15
+ background: darken(white, 3%)
+ transition: left .1s
+ color: darken(white, 50%)
+ border-radius: 50%
+ border: 1px solid darken(white, 30%)
+ box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
+ color: darken(white, 50%)
+
+ i.fa
+ padding: 8px 16px
+ font-size: 24px
+ font-weight: bold
+
+ .sidebar-tongue
+ width: 40px
+ height: @width
+ left: -@width - 7px
+ top: 5px
+ display: block
+ border-radius: 50%
+ border: 1px solid darken(white, 30%)
+ box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
+ color: darken(white, 50%)
+
+ .board-sidebar.is-open &
+ display: none
+
+ i.fa
+ padding: 8px 0px 8px 16px
+ font-weight: bold