sidebar.styl 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. @import 'nib'
  2. .sidebar
  3. .sidebar-content
  4. padding: 10px 20px
  5. background: white
  6. box-shadow: -10px 0px 5px -10px darken(white, 30%)
  7. z-index: 10
  8. position: absolute
  9. top: 0
  10. bottom: 0
  11. right: 0
  12. left: 0
  13. overflow-x: hidden
  14. overflow-y: auto
  15. h3
  16. color: darken(white, 50%)
  17. hr
  18. margin: 8px 0
  19. .board-sidebar
  20. width: 248px
  21. position: absolute
  22. top: 0
  23. right: -@width
  24. bottom: 0
  25. transition: top .1s, right .1s, width .1s
  26. &.is-open
  27. right: 0
  28. .board-widget-nav
  29. border-radius: 3px
  30. background: #dcdcdc
  31. overflow: hidden
  32. padding: 0
  33. position: relative
  34. .toggle-widget-nav
  35. border-radius: 3px
  36. color: #8c8c8c
  37. margin: 0
  38. padding: 7px 10px
  39. position: relative
  40. cursor: pointer
  41. .toggle-menu-icon
  42. position: absolute
  43. top: 8px
  44. right: 8px
  45. &:hover
  46. background: #ccc
  47. color: #4d4d4d
  48. .nav-list
  49. display: block
  50. opacity: 1
  51. max-height: 400px
  52. hr
  53. margin: 2px 0
  54. color: #ccc
  55. background: #ccc
  56. .nav-list-item
  57. display: block
  58. font-weight: 700
  59. line-height: 30px
  60. overflow: hidden
  61. padding: 0 8px 0 36px
  62. position: relative
  63. text-decoration: none
  64. .icon-type
  65. left: 10px
  66. position: absolute
  67. top: 6px
  68. &:hover
  69. background: #ccc
  70. .icon-type
  71. color: #686868
  72. .nav-list-sub-item
  73. font-weight: 400
  74. color: #666
  75. &:hover
  76. color: #4d4d4d
  77. &.collapsed
  78. .nav-list
  79. max-height: 0
  80. opacity: 0
  81. hr
  82. margin: 0
  83. .toggle-widget-nav
  84. color: #4d4d4d
  85. .board-widget-title
  86. display: block
  87. min-height: 20px
  88. margin-bottom: 6px
  89. .board-widget-content
  90. position: relative
  91. z-index: 1
  92. .board-widget h4
  93. margin: 5px 0
  94. .board-widget-activity
  95. margin-right: -4px
  96. .sidebar-tongue
  97. display: block
  98. width: 30px
  99. height: @width
  100. left: -@width
  101. position: absolute
  102. top: 12px
  103. z-index: 15
  104. background: white
  105. border-radius: left 3px
  106. box-shadow: -4px 0px 7px -4px darken(white, 30%)
  107. color: darken(white, 50%)
  108. transition: left .1s
  109. i.fa
  110. margin: 9px
  111. transition: transform 0.5s
  112. .board-sidebar.is-open &
  113. left: -@width + 2px
  114. // XXX Bug: we should add a padding left
  115. &:hover
  116. left: -@width + 5px
  117. i.fa
  118. transform: rotate(180deg)
  119. &.is-hidden,
  120. .board-sidebar.is-open &.is-hidden
  121. z-index: 0
  122. left: 5px