public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Fix UX when press a note in note list

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-11-05 19:21:28 +09:00
parent 92eccb635a
commit 2f52233bd0
2 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
browser/components/NoteItem.styl
View File

@@ -59,7 +59,15 @@ $control-height = 30px
.item-star
color $ui-favorite-star-button-color
&:hover
background-color $ui-button--active-backgroundColor
background-color alpha($ui-button--active-backgroundColor, 50%)
color #e74c3c
.menu-button-label
color $ui-text-color
&:active, &:active:hover
background-color alpha($ui-button--active-backgroundColor, 50%)
color #e74c3c
.menu-button-label
color $ui-text-color
.item-title-icon
position relative
@@ -148,6 +156,7 @@ body[data-theme="dark"]
&:hover
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.item-title
.item-title-icon
.item-bottom-time
@@ -155,11 +164,12 @@ body[data-theme="dark"]
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
background-color alpha(#fff, 20%)
color $ui-dark-text-color
&:active
transition 0.15s
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
.item-title
.item-title-icon
.item-bottom-time
@@ -185,6 +195,11 @@ body[data-theme="dark"]
.item-bottom-tagList-item
background-color alpha(white, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
color #c0392b
.item-bottom-tagList-item
background-color alpha(#fff, 20%)
.item-title
color $ui-inactive-text-color

39
browser/components/NoteItemSimple.styl
View File

@@ -37,7 +37,15 @@ $control-height = 30px
.item-simple-title-icon
color $ui-text-color
&:hover
background-color $ui-button--active-backgroundColor
background-color alpha($ui-button--active-backgroundColor, 50%)
color #e74c3c
.menu-button-label
color $ui-text-color
&:active, &:active:hover
background-color alpha($ui-button--active-backgroundColor, 50%)
color #e74c3c
.menu-button-label
color $ui-text-color
.item-simple-title
font-size 13px
@@ -67,33 +75,50 @@ body[data-theme="dark"]
.item-simple
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor
&:hover
transition 0.15s
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
color $ui-dark-text-color
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(#fff, 20%)
color $ui-dark-text-color
&:active
transition 0.15s
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color $ui-dark-text-color
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(white, 10%)
color $ui-dark-text-color
.item-simple--active
border-color $ui-dark-borderColor
background-color $ui-dark-button--active-backgroundColor
.item-simple-wrapper
border-color transparent
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
color $ui-dark-text-color
.item-simple-bottom-tagList-item
background-color transparent
background-color alpha(white, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
color #c0392b
.item-simple-bottom-tagList-item
background-color alpha(#fff, 20%)
.item-simple-title
color $ui-inactive-text-color