_activity_list.css.sass

@import compass/css3/box-shadow
@import compass/css3/border-radius
@import compass/css3/user-interface
@import compass/css3/images
@import compass/css3/transition
@import compass/css3/transform
@import keybridge/theme

+keyframes(loading)
  0%
    +transform(rotate(0deg))
  100%
    +transform(rotate(360deg))

#activity-list
  color: #769ad1

  /* Header style */
  .hd .btn.btn-filter
    padding: 7px 10px 5px
  .action-bar
    padding: 5px 5px 5px 8px
    position: relative
    background: #eaeef4
    border-bottom: solid 1px #e3e8f1
    +box-shadow(0 1px 0 #fff)
    &:before
      content: ""
      position: absolute
      top: 0
      left: 0
      right: 0
      height: 6px
      +background-image(linear-gradient(top, rgba(#dbe2ed, 1), rgba(#dbe2ed, 0)))

  /* Footer style including infinite scroll */
  .pages-selector
    visibility: hidden
    height: 40px
    line-height: 40px
    +border-bottom-right-radius(0)

  #infscr-loading
    color: #bdc8d8
    text-shadow: 0 1px 0 #fff
    text-align: center
    margin: 0 auto
    padding: 12px 0
    background: #eaeef4
    +box-shadow(0 1px 0 #fff)
    border: 1px solid #cdd8e8
    +border-radius(5px)
    img
      display: none
    div
      display: inline-block
      vertical-align: middle
      em
        font-style: normal
        font-size: 13px
    &:before
      display: inline-block
      vertical-align: middle
      content: '\f013'
      margin-right: 5px
      font-family: FontAwesome
      font-size: 26px
      +animation(loading, 2s, linear, infinite , both)

  .no-activity
    line-height: 1.5
    padding: 20px 0
    p
      text-align: center
      text-shadow: 0 1px 0 #fff

  .activity-list
    +border-bottom-right-radius(5px)
    background: #f9f9f9
    padding: 20px

  .activity-list-empty
    background: transparent

  /* Individual activity item */
  .activity
    display: table
    width: 100%
    position: relative
    margin-bottom: 10px
    text-shadow: 0 1px 0 #fff
    line-height: 1.4

    /* Range Line */
    &:before
      position: absolute
      content: ''
      width: 3px
      top: 47px
      left: 19px
      bottom: -3px
      background: #ebeef3
      +box-shadow(inset 1px 1px 0 #dbe1ed, 0 1px 0 #fff)
      +border-radius(3px)

    /* Layout for an activity item */
    > .cell
      display: table-cell
      padding-bottom: 10px
      border-bottom: dotted 1px #ccc
      vertical-align: top
      min-height: 40px
      padding-top: 3px

    /* 1st cell: Activity type */
    > .type
      padding: 0 20px 0 0
      border: none
      width: 40px
      .icon
        display: block
        width: 40px
        height: 40px
        position: relative
        background: #a4bbdb
        +box-shadow(inset 0 2px 2px rgba(#000, 0.1), inset 0 0 2px rgba(#000, 0.1), 0 1px 0 #fff)
        +border-radius(20px)
        &:before
          content: ''
          width: 30px
          height: 30px
          position: absolute
          left: 7px
          top: 5px
          overflow: hidden

    /* 2nd cell: Activity content */
    > .content
      padding-bottom: 5px
      +user-select(text)
      max-width: 500px
      overflow: hidden
      text-overflow: ellipsis
      img
        +border-radius(4px)
        max-height: 30px
      .message p img
        margin-bottom: 4px
      .due-date
        color: red
      .product
        font-weight: bold
      .title
        margin-bottom: 8px
        font-weight: bold
        em
          font-style: normal
      ul,
      .detail,
      .class-list,
      .attachments
        margin: 5px 0
      .class-list li
        *:first-child
          width: 15px
        a
          font-weight: bold
          color: #769ad4
      .message
        > p
          line-height: 1.5

    /* 3rd cell: User creating this activity */
    > .user
      min-width: 125px
      text-align: right
      .name
        margin-bottom: 4px
      .created-at
        margin-top: 6px
        line-height: 1.4
        color: #769ad1
        text-align: right
    .tasks
      .btn
        padding: 2px
        margin-right: 0
        margin-left: 3px
        span
          display: inline-block
          overflow: hidden
          width: 16px
          height: 16px
          padding: 0

  li.activity .tasks
    visibility: hidden
  li.activity:hover .tasks
    visibility: visible

    /* Dot points */
    // Memo: Manic moves dot points here. not sure it's okay for all activities.
    .cascade
      &:after
        position: absolute
        content: ''
        top: 60%
        left: 19px
        height: 25px
        border-left: 4px dotted #fff

  // Cascade Utility
  .cascade
    overflow: hidden
    max-height: 50px
    +transition( min-height 1s )

  .tip
    display: block
    padding: 10px 0
    padding-left: 5px
    font-weight: bold
    color: #aebece
    cursor: pointer
    position: relative

    // Arrow
    .icon-chevron-right
      width: 10px
      height: 10px
      display: inline-block
      +transition( all .5s, color 0 )
      &::before
        width: 100%
        text-align: center


    // Shadow
    &:before
      position: absolute
      display: block
      height: 45px
      top: -45px
      right: 0
      left: 0
      content: ''
      z-index: 2
      +background(linear-gradient(top, rgba(#f9f9f9, 0), rgba(#f9f9f9, 0.8)))
      +transition-duration(0.4s)
    &:after
      border-bottom: solid 1px #fff
      content: ''
      position: absolute
      left: 0
      right: 0
      top: -2px
      height: 2px
      z-index: 3
      +background(linear-gradient(left, rgba(#fff, 0), rgba(#bdcfe5, 0.2), rgba(#bdcfe5, 0.2), rgba(#fff, 0)))
      +transition-duration(0.2s)
    // Effect which makes it's be more obvious.
    &:hover
      &:after
        top: -3px
        height: 3px
        +background(linear-gradient(left, rgba(#fff, 0), rgba(#bdcfe5, 0.4), rgba(#bdcfe5, 0.4), rgba(#fff, 0)))
      .icon-chevron-right
        +transform( rotateZ( 90deg ) )

    // Hides shadow and rotate arrow if it's expaned.
    &.cascaded
      border-top: solid 1px #eee
      &:before
        height: 0px
        top: 0
      .icon-chevron-right
        +transform( rotateZ( -90deg ) )

.grid-compact #activity-list
  .header-bar .btn-collapse
    display: none
  .activity > .content
    max-width: 300px