mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
replace awesomplete with React component react-autosuggest
This commit is contained in:
Baptiste Augrain
109
browser/styles/Detail/TagSelect.styl
Normal file
109
browser/styles/Detail/TagSelect.styl
Normal file
@@ -0,0 +1,109 @@
|
||||
.TagSelect
|
||||
.react-autosuggest__input
|
||||
box-sizing border-box
|
||||
border none
|
||||
background-color transparent
|
||||
outline none
|
||||
padding 0 4px
|
||||
font-size 13px
|
||||
|
||||
ul
|
||||
position fixed
|
||||
z-index 999
|
||||
box-sizing border-box
|
||||
list-style none
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
border-radius 4px
|
||||
margin .2em 0 0
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border 1px solid rgba(0,0,0,.3)
|
||||
box-shadow .05em .2em .6em rgba(0,0,0,.2)
|
||||
text-shadow none
|
||||
|
||||
&:empty,
|
||||
&[hidden]
|
||||
display none
|
||||
|
||||
&:before
|
||||
content ""
|
||||
position absolute
|
||||
top -7px
|
||||
left 14px
|
||||
width 0 height 0
|
||||
padding 6px
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border inherit
|
||||
border-right 0
|
||||
border-bottom 0
|
||||
-webkit-transform rotate(45deg)
|
||||
transform rotate(45deg)
|
||||
|
||||
li
|
||||
position relative
|
||||
padding 6px 18px 6px 10px
|
||||
cursor pointer
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color alpha($ui-button--active-backgroundColor, 40%)
|
||||
color $ui-text-color
|
||||
|
||||
body[data-theme="dark"]
|
||||
.TagSelect
|
||||
.react-autosuggest__input
|
||||
color $ui-dark-text-color
|
||||
|
||||
ul
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.TagSelect
|
||||
.react-autosuggest__input
|
||||
color $ui-monokai-text-color
|
||||
|
||||
ul
|
||||
border-color $ui-monokai-borderColor
|
||||
background-color $ui-monokai-noteList-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.TagSelect
|
||||
.react-autosuggest__input
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
ul
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
background-color $ui-solarized-dark-noteList-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-solarized-dark-noteList-backgroundColor
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
body[data-theme="white"]
|
||||
.TagSelect
|
||||
ul
|
||||
background-color $ui-white-noteList-backgroundColor
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-button--active-backgroundColor
|
||||
@@ -1,117 +0,0 @@
|
||||
.awesomplete
|
||||
display inline-block
|
||||
position relative
|
||||
|
||||
.visually-hidden
|
||||
position absolute
|
||||
clip rect(0, 0, 0, 0)
|
||||
|
||||
ul
|
||||
position fixed
|
||||
z-index 1
|
||||
box-sizing border-box
|
||||
list-style none
|
||||
padding 0
|
||||
margin 0
|
||||
|
||||
border-radius 4px
|
||||
margin .2em 0 0
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border 1px solid rgba(0,0,0,.3)
|
||||
box-shadow .05em .2em .6em rgba(0,0,0,.2)
|
||||
text-shadow none
|
||||
|
||||
&:empty,
|
||||
&[hidden]
|
||||
display none
|
||||
|
||||
&:before
|
||||
content ""
|
||||
position absolute
|
||||
top -.43em
|
||||
left 1em
|
||||
width 0 height 0
|
||||
padding .4em
|
||||
background-color $ui-noteList-backgroundColor
|
||||
border inherit
|
||||
border-right 0
|
||||
border-bottom 0
|
||||
-webkit-transform rotate(45deg)
|
||||
transform rotate(45deg)
|
||||
|
||||
li
|
||||
position relative
|
||||
padding 6px 18px 6px 10px
|
||||
cursor pointer
|
||||
|
||||
li:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 20%)
|
||||
color $ui-text-color
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color alpha($ui-button--active-backgroundColor, 40%)
|
||||
color $ui-text-color
|
||||
|
||||
mark
|
||||
background-color rgba(255, 255, 0, 0.8)
|
||||
|
||||
body[data-theme="dark"]
|
||||
.awesomplete ul
|
||||
border-color $ui-dark-borderColor
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
li:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
color $ui-dark-text-color
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
body[data-theme="white"]
|
||||
.awesomplete ul
|
||||
background-color $ui-white-noteList-backgroundColor
|
||||
|
||||
li:hover
|
||||
background-color alpha($ui-button--active-backgroundColor, 60%)
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-button--active-backgroundColor
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.awesomplete ul
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
background-color $ui-solarized-dark-noteList-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-solarized-dark-noteList-backgroundColor
|
||||
|
||||
li:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-dark-button--active-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.awesomplete ul
|
||||
border-color $ui-monokai-borderColor
|
||||
background-color $ui-monokai-noteList-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
|
||||
&:before
|
||||
background-color $ui-dark-noteList-backgroundColor
|
||||
|
||||
li:hover
|
||||
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
|
||||
color $ui-monokai-text-color
|
||||
|
||||
li[aria-selected="true"]
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
Reference in New Issue
Block a user