1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Files
Boostnote/browser/main/SideNav/SideNav.styl
2017-10-21 13:06:04 +09:00

111 lines
2.3 KiB
Stylus

.root
absolute top left bottom
width $sideNav-width
background-color #f9f9f9
user-select none
color $ui-text-color
height: 100vh
display: flex
flex-direction column
.top
padding-bottom 15px
.top-menu
navButtonColor()
position absolute
top 22px
right 5px
&:hover
color $ui-text-color
&:active, &:active:hover
color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
.switch-buttons
background-color transparent
border 1px solid $ui-borderColor
width 110px
height 25px
margin 20px auto 0px auto
border-radius 1px
.non-active-button
navButtonColor()
font-weight 600
width 54px
height 23px
.active-button
@extend .non-active-button
background-color $ui-button--active-backgroundColor
color $ui-text-color
&:hover
background-color alpha($ui-button--active-backgroundColor, 70%)
color alpha($ui-text-color, 70%)
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
.top-menu-label
margin-left 5px
overflow ellipsis
.tabBody
flex 1
display flex
flex-direction column
.tag-title
padding-left 15px
padding-bottom 13px
p
color $ui-text-color
.tagList
overflow-y auto
flex: 1
.root--folded
.swith-buttons
display none
body[data-theme="dark"]
.root, .root--folded
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
color $ui-dark-text-color
.top
border-color $ui-dark-borderColor
.top-menu
navDarkButtonColor()
&:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.switch-buttons
border-color $ui-dark-borderColor
.non-active-button
navDarkButtonColor()
.active-button
@extend .non-active-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 70%)
color alpha($ui-dark-text-color, 70%)
&:active
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.tag-title
p
color alpha($ui-dark-text-color, 60%)