1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Files
Boostnote/browser/finder/NoteItem.styl
Dick Choi 6e0def310f update design of Note List
add list style
remove folder info
enhance design
2016-10-12 20:22:13 +09:00

180 lines
3.2 KiB
Stylus

.root
position relative
border-bottom $ui-border
padding 2px 5px
user-select none
cursor pointer
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
.root--active
@extend .root
background-color $ui-active-color
&:hover
background-color $ui-active-color
color white
.info-left-folder
.info-left-folder-surfix
.title
.title-icon
.title-empty
.bottom-tagIcon
.bottom-tagList-item
.bottom-tagList-empty
.bottom-time
color white
.bottom-tagList-item
color white
background-color transparent
.border
absolute top bottom left right
border-style solid
border-width 2px
border-color transparent
transition 0.15s
.info
height 20px
clearfix()
font-size 12px
color $ui-inactive-text-color
line-height 20px
overflow-y hidden
.info-left
float left
overflow ellipsis
.info-left-folder
border-left 4px solid transparent
padding 2px 5px
color $ui-text-color
.info-left-folder-surfix
font-size 10px
margin-left 5px
color $ui-inactive-text-color
.info-right
float right
.title
height 24px
box-sizing border-box
line-height 24px
height 20px
line-height 20px
padding 0 5px 0 0
overflow ellipsis
color $ui-text-color
.title-icon
font-size 12px
color $ui-inactive-text-color
padding-right 3px
.title-empty
font-weight normal
color $ui-inactive-text-color
.bottom
margin-top 2px
height 20px
font-size 12px
line-height 20px
overflow ellipsis
display flex
.bottom-tagIcon
vertical-align middle
color $ui-button-color
height 20px
line-height 20px
.bottom-tagList
flex 1
overflow ellipsis
line-height 20px
.bottom-tagList-item
margin 0 4px
padding 0 4px
height 20px
box-sizing border-box
border-radius 3px
vertical-align middle
border-style solid
border-color $ui-button--focus-borderColor
border-width 0 0 0 3px
background-color $ui-backgroundColor
color $ui-text-color
transition 0.15s
.bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
font-size 10px
.bottom-time
color $ui-inactive-text-color
margin-left 5px
font-size 10px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
.root--active
@extend .root
border-color $ui-dark-borderColor
&:hover
background-color $ui-active-color
.info-left-folder
.info-left-folder-surfix
.title
.title-icon
.title-empty
.bottom-tagIcon
.bottom-tagList-item
.bottom-tagList-empty
.bottom-time
color white
.bottom-tagList-item
color white
background-color transparent
.info
color $ui-dark-inactive-text-color
.info-left-folder
color $ui-dark-text-color
.info-left-folder-surfix
color $ui-dark-inactive-text-color
.title
color $ui-dark-text-color
.title-icon
color $ui-dark-inactive-text-color
.title-empty
color $ui-dark-inactive-text-color
.tagList-empty
color $ui-dark-inactive-text-color
.bottom-tagIcon
color $ui-dark-button-color
.bottom-tagList-item
color $ui-dark-text-color
background-color $ui-dark-backgroundColor
.bottom-tagList-empty
color $ui-dark-inactive-text-color
.bottom-time
color $ui-dark-inactive-text-color