/*!
 * 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);
