85 lines
1.7 KiB
Stylus
85 lines
1.7 KiB
Stylus
/*!
|
||
* Sidebar
|
||
*/
|
||
.sidebar
|
||
float left
|
||
width 330px
|
||
margin-left -350px
|
||
padding-top 20px
|
||
padding-bottom 20px
|
||
.widget
|
||
position relative
|
||
margin-bottom 20px
|
||
clear both
|
||
.widget
|
||
ul
|
||
margin 0
|
||
padding 0
|
||
.widget-hd
|
||
margin 0
|
||
padding 0
|
||
border-bottom 2px solid c-eee
|
||
strong
|
||
position relative
|
||
display inline-block
|
||
bottom -2px
|
||
color #444
|
||
border-bottom 2px solid #ff5e52
|
||
font-weight normal
|
||
.logout
|
||
position relative
|
||
bottom -2px
|
||
font-size 14px
|
||
font-weight normal
|
||
text-decoration underline
|
||
&:hover
|
||
text-decoration none
|
||
.widget-bd
|
||
margin 0
|
||
padding 0
|
||
list-style none
|
||
li
|
||
display block
|
||
padding 10px 0
|
||
line-height 1.5
|
||
border-bottom 1px solid c-eee
|
||
font-size 12px
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
a .avatar
|
||
float left
|
||
width 36px
|
||
height 36px
|
||
margin-right 10px
|
||
border-radius 50%
|
||
transform rotate(0)
|
||
transition .5s
|
||
a:hover .avatar
|
||
transform rotate(360deg)
|
||
opacity .85
|
||
p
|
||
margin 0
|
||
padding 0
|
||
.tags-cloud > a
|
||
margin 0 3px
|
||
position relative
|
||
&::after
|
||
content ''
|
||
display block
|
||
// 开始时候下划线的宽度为100%
|
||
width 100%
|
||
height 2px
|
||
position absolute
|
||
bottom -3px
|
||
left: 0
|
||
background #aaa
|
||
transition all 0.3s ease-in-out
|
||
// 通过transform的缩放scale来让初始时x轴为0
|
||
transform scale3d(0,1,1)
|
||
// 将坐标原点移到元素的中间，以原点为中心进行缩放
|
||
transform-origin 50% 0
|
||
text-decoration underline
|
||
&:hover::after
|
||
transform: scale3d(1,1,1);
|