Files
hexo-theme-butterfly/source/css/_layout/mobile-sidebar.styl
2020-07-16 19:30:54 +08:00

93 lines
1.8 KiB
Stylus

#mobile-sidebar
#menu_mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#mobile-sidebar-menus
position: fixed
top: 0
right: -250px
z-index: 103
overflow-x: hidden
overflow-y: auto
width: 250px
height: 100%
background: var(--sidebar-bg)
transition: all .5s
& > .mobile_author_icon
padding: 1.3rem 1.5rem 0
text-align: center
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.mobile_post_data
display: table
padding: .6rem .5rem 0
width: 100%
table-layout: fixed
.mobile_data_item
display: table-cell
.mobile_data_link
& > a > div
@extend .limit-one-line
.length_num
color: var(--text-highlight-color)
font-size: .9rem
.headline
display: block
color: var(--font-color)
font-size: .7rem
hr
margin: 1rem auto
.menus_items
padding: 0 .5rem 2rem
.site-page
@extend .limit-one-line
position: relative
display: block
padding: .3rem 1.5rem
color: var(--font-color)
font-size: .8rem
cursor: pointer
i:first-child
width: 30%
text-align: left
span
width: 70%
&:hover
color: $light-blue
.expand
position: absolute
right: 0
padding: .4rem
transition: transform .3s
&.closed
transform: rotate(90deg) !important
.menus_item_child
margin: 0
list-style: none