Sidebar.styl 2.2KB

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