1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Files
Boostnote/browser/main/SideNav/FolderItem.styl
2016-05-12 21:02:40 +09:00

123 lines
2.2 KiB
Stylus

.root
height 33px
width 100%
position relative
cursor pointer
transition 0.15s
color $nav-inactive-text-color
&:hover
background-color $nav-hover-background
.control
opacity 1
&:active, &:hover:active
background-color $nav-active-background
color $nav-text-color
.root--active
@extend .root
background-color $nav-active-background
color $nav-text-color
&:hover
background-color $nav-active-background
color $nav-text-color
.control
opacity 1
.label
position absolute
left 0
top 0
bottom 0
right 48px
padding-left 20px
line-height 33px
overflow-x hidden
.label-name
margin-left 5px
.control
opacity 0
position absolute
top 0
bottom 0
right 5px
width 24px
transition opacity 0.15s
.control-button
width 24px
height 24px
margin-top 4.5px
border none
border-radius 5px
background-color transparent
color $nav-inactive-text-color
transition color background-color 0.15s
&:hover
background-color $nav-hover-background
&:active
background-color $nav-active-background
color $nav-text-color
.root--edit
@extend .root
.nameInput
absolute top bottom
left 10px
right 10px
height 33px
padding 0 10px
border-radius 5px
border solid 1px $nav-border-color
outline none
&:focus
border-color $focus-border-color
&:disabled
background-color $disabled-input-background
.root--folded
@extend .root
width 44px
&:hover .label-name
width 100px
.label
padding-left 0
text-align center
right 0
.label-icon
width 44px
.label-name
position fixed
height 34px
left 44px
width 0
box-sizing border-box
margin-left 0
overflow ellipsis
background-color $nav-tooltip-background-color
color white
line-height 34px
border-top-right-radius 5px
border-bottom-right-radius 5px
transition width 0.15s
pointer-events none
.control
display none
.root--folded--active
@extend .root--folded
background-color $nav-active-background
color $nav-text-color
&:hover
background-color $nav-active-background
color $nav-text-color
.root--edit--folded
@extend .root--edit
.nameInput
position fixed
top inherit
bottom inherit
width 100px