mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +00:00
132 lines
2.9 KiB
Stylus
132 lines
2.9 KiB
Stylus
.root
|
|
position relative
|
|
border solid 1px transparent
|
|
line-height 26px
|
|
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 14px
|
|
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 2px 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
|