Boostnote/browser/main/Detail/FolderSelect.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
.root
  position relative
  border solid 1px transparent
  line-height 34px
  vertical-align middle
  border-radius 2px
  transition 0.15s
  user-select none
  &:hover
    background-color $ui-button--hover-backgroundColor

.root--search, .root--focus
  @extend .root
  background-color $ui-noteDetail-backgroundColor = #F4F4F4
  border-color $ui-input--focus-borderColor
  width 100px
  &:hover
    border-color $ui-input--focus-borderColor

.idle
  position relative
  cursor pointer

.idle-label
  right 20px
  overflow ellipsis

.idle-label-name
  font-size 16px
  padding 2px

.idle-label-name-surfix
  font-size 10px
  color $ui-inactive-text-color
  margin-left 5px
.idle-caret
  absolute right top
  height 34px
  width 20px
  line-height 34px

.search
  absolute top left right bottom
  line-height 34px

.search-input
  vertical-align middle
  position relative
  top -2px
  outline none
  border none
  height 20px
  line-height 20px
  background-color transparent
  padding 0 10px

.search-optionList
  position fixed
  max-height 450px
  overflow auto
  z-index 200
  border $ui-border
  background-color white
  border-radius 2px

.search-optionList-item
  height 34px
  width 250px
  box-sizing border-box
  padding 0 5px
  overflow ellipsis
  cursor pointer
  &:hover
    background-color $ui-button--hover-backgroundColor

.search-optionList-item--active
  @extend .search-optionList-item
  background-color $ui-button--active-backgroundColor
  color $ui-button--active-color
  &:hover
    background-color $ui-button--active-backgroundColor
    color $ui-button--active-color
.search-optionList-item-name
  border-left solid 4px transparent
  padding 2px 5px
.search-optionList-item-name-surfix
  font-size 10px
  color $ui-inactive-text-color
  margin-left 5px

body[data-theme="dark"]
  .root
    color $ui-dark-text-color
    &:hover
      color white
      background-color $ui-dark-button--hover-backgroundColor
      border-color $ui-dark-borderColor

  .root--search, .root--focus
    @extend .root
    background-color $ui-dark-button--hover-backgroundColor
    border-color $ui-input--focus-borderColor
    &:hover
      background-color $ui-dark-button--hover-backgroundColor
      border-color $ui-input--focus-borderColor

  .idle-label-name-surfix
    color $ui-dark-inactive-text-color

  .search-input
    color white
    background-color transparent
    border-color $ui-dark-borderColor

  .search-optionList
    color white
    border-color $ui-dark-borderColor
    background-color $ui-dark-button--hover-backgroundColor

  .search-optionList-item
    &:hover
      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)

  .search-optionList-item--active
    background-color $ui-dark-button--active-backgroundColor
    color $ui-dark-button--active-color
    &:hover
      background-color $ui-dark-button--active-backgroundColor
      color $ui-dark-button--active-color
  .search-optionList-item-name-surfix
    color $ui-dark-inactive-text-color