Boostnote/browser/main/TopBar/TopBar.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
.root
  position relative
  background-color $ui-noteList-backgroundColor
  height $topBar-height - 1

.root--expanded
  @extend .root

$control-height = 34px

.control
  position absolute
  top 13px
  left 8px
  right 8px
  height $control-height
  overflow hidden
  display flex

.control-search
  height 32px
  flex 1
  background-color white
  position relative

.control-search-icon
  absolute top bottom left
  line-height 32px
  width 35px
  color $ui-inactive-text-color
  background-color $ui-noteList-backgroundColor

.control-search-input
  display block
  absolute top bottom right
  left 30px
  input
    width 100%
    height 100%
    outline none
    border none
    background-color $ui-noteList-backgroundColor

.control-search-optionList
  position fixed
  z-index 200
  width 275px
  height 175px
  overflow-y auto
  background-color $modal-background
  border-radius 2px
  box-shadow 2px 2px 10px gray

.control-search-optionList-item
  height 50px
  border-bottom $ui-border
  transition background-color 0.15s
  padding 5px
  cursor pointer
  overflow ellipsis
  &:hover
    background-color alpha($ui-active-color, 10%)

.control-search-optionList-item-folder
  border-left 4px solid transparent
  padding 2px 5px
  color $ui-text-color
  overflow ellipsis
  font-size 12px
  height 16px
  margin-bottom 4px

.control-search-optionList-item-folder-surfix
  font-size 10px
  margin-left 5px
  color $ui-inactive-text-color

.control-search-optionList-item-type
  font-size 12px
  color $ui-inactive-text-color
  padding-right 3px

.control-search-optionList-empty
  height 150px
  color $ui-inactive-text-color
  line-height 150px
  text-align center

.control-newPostButton
  display block
  width 32px
  height $control-height - 2
  navButtonColor()
  border $ui-border
  border-radius 32px
  font-size 14px
  line-height 28px
  padding 0
  &:active
    border-color $ui-button--active-backgroundColor
  &:hover .control-newPostButton-tooltip
    opacity 1

.control-newPostButton-tooltip
  tooltip()
  position fixed
  pointer-events none
  top 50px
  left 433px
  z-index 200
  padding 5px
  line-height normal
  border-radius 2px
  opacity 0
  transition 0.1s

body[data-theme="dark"]
  .root, .root--expanded
    background-color $ui-dark-noteList-backgroundColor

  .control
    border-color $ui-dark-borderColor
  .control-search
    background-color $dark-background-color

  .control-search-icon
    absolute top bottom left
    line-height 32px
    width 35px
    color $ui-dark-inactive-text-color
    background-color $ui-dark-noteList-backgroundColor

  .control-search-input
    input
      background-color $ui-dark-noteList-backgroundColor
      color $ui-dark-text-color

  .control-search-optionList
    color white
    background-color $ui-dark-button--hover-backgroundColor
    border-color $ui-dark-borderColor
    box-shadow 2px 2px 10px black

  .control-search-optionList-item
    border-color $ui-dark-borderColor
    &:hover
      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
  .control-search-optionList-item-folder
    color $ui-dark-text-color
  .control-search-optionList-item-folder-surfix
    font-size 10px
    margin-left 5px
    color $ui-inactive-text-color
  .control-search-optionList-item-type
    font-size 12px
    color $ui-inactive-text-color
    padding-right 3px
  .control-search-optionList-empty
    color $ui-inactive-text-color

  .control-newPostButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteList-backgroundColor
    &:active
      border-color $ui-dark-button--active-backgroundColor

  .control-newPostButton-tooltip
    darkTooltip()