Boostnote/browser/main/SideNav/SideNav.styl at master · csseditor/Boostnote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
.root
  absolute top left bottom
  width $sideNav-width
  background-color $ui-backgroundColor
  user-select none
  color $ui-text-color

.top
  height $topBar-height

.top-menu
  navButtonColor()
  height $topBar-height - 1
  padding 0 15px
  font-size 14px
  width 100%
  text-align left

.top-menu-label
  margin-left 5px
  overflow ellipsis

.storageList
  absolute left right
  bottom 37px
  top 160px
  overflow-y auto

.storageList-empty
  padding 0 10px
  margin-top 15px
  line-height 24px
  color $ui-inactive-text-color

.navToggle
  navButtonColor()
  display block
  position absolute
  right 5px
  bottom 5px
  border-radius 16.5px
  height 34px
  width 34px
  line-height 32px
  padding 0

.root--folded
  @extend .root
  width 44px
  .storageList-empty
    white-space nowrap
    transform rotate(90deg)
  .top-menu
    width 44px - 1
    text-align center
    &:hover .top-menu-label
      transition opacity 0.15s
      opacity 1
  .top-menu-label
    position fixed
    display inline-block
    height 30px
    left 32px
    padding 0 10px
    margin-top -8px
    opacity 0
    margin-left 0
    overflow hidden
    background-color $ui-tooltip-backgroundColor
    z-index 10
    color white
    line-height 30px
    border-top-right-radius 2px
    border-bottom-right-radius 2px
    pointer-events none
    font-size 12px
  .menu-button, .menu-button--active
    text-align center
    &:hover .menu-button-label
      transition opacity 0.15s
      opacity 1

  .menu-button-label
    position fixed
    display inline-block
    height 32px
    left 44px
    padding 0 10px
    margin-top -8px
    margin-left 0
    overflow ellipsis
    background-color $ui-tooltip-backgroundColor
    z-index 10
    color white
    line-height 32px
    border-top-right-radius 2px
    border-bottom-right-radius 2px
    pointer-events none
    opacity 0
    font-size 12px

body[data-theme="dark"]
  .root, .root--folded
    border-color $ui-dark-borderColor
    background-color $ui-dark-backgroundColor
    color $ui-dark-text-color

  .top
    border-color $ui-dark-borderColor

  .top-menu
    navDarkButtonColor()

  .storageList-empty
    color $ui-dark-inactive-text-color

  .navToggle
    navDarkButtonColor()