mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
133 lines
3.0 KiB
Stylus
133 lines
3.0 KiB
Stylus
.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 white
|
|
border-color $ui-borderColor
|
|
|
|
.root--search, .root--focus
|
|
@extend .root
|
|
background-color white
|
|
border-color $ui-input--focus-borderColor
|
|
&:hover
|
|
background-color white
|
|
border-color $ui-input--focus-borderColor
|
|
|
|
.idle
|
|
position relative
|
|
cursor pointer
|
|
.idle-label
|
|
absolute left top
|
|
padding 0 0 0 5px
|
|
right 20px
|
|
overflow ellipsis
|
|
|
|
.idle-label-name
|
|
border-left solid 4px transparent
|
|
padding 2px 5px
|
|
.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
|
|
background-color white
|
|
border-radius 2px
|
|
box-shadow 2px 2px 10px gray
|
|
|
|
.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
|
|
background-color $ui-dark-button--hover-backgroundColor
|
|
box-shadow 2px 2px 10px black
|
|
|
|
.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
|