mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
162 lines
3.6 KiB
Stylus
162 lines
3.6 KiB
Stylus
.root
|
|
position relative
|
|
border solid 1px transparent
|
|
vertical-align middle
|
|
border-radius 2px
|
|
height 30px
|
|
transition 0.15s
|
|
user-select none
|
|
margin-right 10px
|
|
|
|
.root--search, .root--focus
|
|
@extend .root
|
|
border-color $ui-input--focus-borderColor
|
|
|
|
.idle
|
|
position relative
|
|
cursor pointer
|
|
|
|
.idle-label
|
|
right 20px
|
|
overflow ellipsis
|
|
display flex
|
|
align-items center
|
|
|
|
.idle-label-name
|
|
font-size 13px
|
|
font-weight 600
|
|
margin-left 4px
|
|
|
|
.idle-label-name-surfix
|
|
font-size 15px
|
|
color $ui-inactive-text-color
|
|
margin-left 5px
|
|
.idle-caret
|
|
absolute right top
|
|
height 34px
|
|
width 20px
|
|
line-height 34px
|
|
|
|
.search-input
|
|
vertical-align middle
|
|
position relative
|
|
top 0
|
|
font-size 14px
|
|
outline none
|
|
border none
|
|
width 100%
|
|
background-color transparent
|
|
padding 0 10px
|
|
|
|
.search-optionList
|
|
position absolute
|
|
top 30px
|
|
max-height 450px
|
|
min-width 150px
|
|
overflow auto
|
|
z-index 200
|
|
border $ui-border
|
|
background-color white
|
|
border-radius 2px
|
|
padding 10px 6px
|
|
|
|
.search-optionList-item
|
|
width 140px
|
|
height 34px
|
|
display flex
|
|
align-items center
|
|
box-sizing border-box
|
|
padding 0
|
|
margin-bottom 10px
|
|
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 3px transparent
|
|
padding 6px
|
|
.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
|
|
|
|
body[data-theme="monokai"]
|
|
.root
|
|
color $ui-dark-text-color
|
|
&:hover
|
|
color white
|
|
background-color $ui-monokai-button--hover-backgroundColor
|
|
border-color $ui-monokai-borderColor
|
|
|
|
.search-optionList
|
|
color white
|
|
border-color $ui-monokai-borderColor
|
|
background-color $ui-monokai-button-backgroundColor
|
|
|
|
.search-optionList-item
|
|
&:hover
|
|
background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
|
|
|
|
.search-optionList-item--active
|
|
background-color $ui-monokai-button--active-backgroundColor
|
|
color $ui-monokai-button--active-color
|
|
&:hover
|
|
background-color $ui-monokai-button--active-backgroundColor
|
|
color $ui-monokai-button--active-color
|
|
.search-optionList-item-name-surfix
|
|
color $ui-monokai-inactive-text-color
|