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

Tag list layout

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-10-15 15:46:30 +09:00
parent 0637daf645
commit 95586b3156
1 changed files with 28 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
browser/main/SideNav/SideNav.styl
View File

@@ -45,63 +45,18 @@
margin-left 5px
overflow ellipsis
.tag-title
height 65px
position relative
left 15px
p
color $ui-text-color
.tagList
absolute left right
bottom 37px
top 80px
overflow-y auto
.root--folded
@extend .root
width 44px
.top-menu
width 44px - 1
text-align center
&:hover .top-menu-label
transition opacity 0.15s
opacity 1
.top-menu-label
position fixed
display inline-block
height 30px
left 32px
padding 0 10px
margin-top -8px
opacity 0
margin-left 0
overflow hidden
background-color $ui-tooltip-backgroundColor
z-index 10
color white
line-height 30px
border-top-right-radius 2px
border-bottom-right-radius 2px
pointer-events none
font-size 12px
.menu-button, .menu-button--active
text-align center
&:hover .menu-button-label
transition opacity 0.15s
opacity 1
.menu-button-label
position fixed
display inline-block
height 32px
left 44px
padding 0 10px
margin-top -8px
margin-left 0
overflow ellipsis
background-color $ui-tooltip-backgroundColor
z-index 10
color white
line-height 32px
border-top-right-radius 2px
border-bottom-right-radius 2px
pointer-events none
opacity 0
font-size 12px
position relative
body[data-theme="dark"]
.root, .root--folded
@@ -118,3 +73,23 @@ body[data-theme="dark"]
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, &:active:hover
background-color $$ui-dark-button--active-backgroundColor
.tag-title
p
color alpha($ui-dark-text-color, 60%)