Sidebar.styl 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. .sidebar-expandbar
  2. position absolute
  3. left 0
  4. display none
  5. border 1px solid darkBlue
  6. border-top-width 2px
  7. padding 11px 15px
  8. background-color blue
  9. z-index 2
  10. &__icon
  11. font-size 18px
  12. text-align center
  13. cursor pointer
  14. &:hover
  15. color white
  16. .sidebar
  17. display none
  18. min-height 100%
  19. background-color secondColor
  20. z-index 1
  21. sidebar-width = 300px
  22. .sidebar-visible
  23. .sidebar-expandbar
  24. left sidebar-width
  25. leftside()
  26. flex-grow 0
  27. height 100%
  28. font-size 18px
  29. background-color rgba(253,253,253,0.3)
  30. .sidebar
  31. &__btnnewworkspace
  32. margin-top 40px
  33. padding 10px
  34. width 100%
  35. &__btn
  36. display block
  37. margin 0 auto
  38. padding 15px 30px
  39. &__navigation
  40. padding 0
  41. &__workspace
  42. padding-left 0
  43. list-style none
  44. &__item
  45. width sidebar-width
  46. &__wrapper
  47. display flex
  48. align-items center
  49. border-bottom 1px solid darkBlue
  50. width 100%
  51. height 100%
  52. background-color blue
  53. cursor pointer
  54. &__number
  55. leftside()
  56. padding 12px
  57. min-width 50px
  58. letter-spacing 2px
  59. &__name
  60. flex-grow 2
  61. padding 10px
  62. font-size 20px
  63. color off-white
  64. white-space nowrap
  65. overflow hidden
  66. text-overflow ellipsis
  67. &__icon
  68. flex-grow 0
  69. padding 10px
  70. color white
  71. &__submenu
  72. margin 0
  73. padding 0
  74. width 100%
  75. background-color fourthColor
  76. overflow hidden
  77. &__dropdown
  78. display flex
  79. align-items center
  80. border-top 1px solid darkBlue
  81. cursor pointer
  82. &:nth-last-child(1)
  83. border-bottom 1px solid darkBlue
  84. &:hover
  85. background-color lightBlue
  86. &__showdropdown
  87. display flex
  88. justify-content space-between
  89. align-items center
  90. padding 0 10px
  91. width 100%
  92. .dropdown__icon
  93. padding 10px 15px
  94. min-width 50px
  95. leftside()