_activity_filter.css.sass

@import compass/css3/box-shadow
@import compass/css3/border-radius
@import compass/css3/images
#activity-filter
  min-width: 350px

  .hd .btn.btn-filter
    padding: 0

  /* Resets */
  fieldset, legend, label
    display: block
    margin: 0

  /* Collapse Toggler */
  legend.header-bar
    min-height: 25px
    height: auto
    border-top: 0
    line-height: 1
    padding: 0
    font-weight: bold
    a[data-toggle=collapse]
      display: block
      padding: 6px 8px
      text-shadow: 0 1px 0 #fff
      color: #4e6185
      &:hover
        color: #769ad1
      &:after
        content: '\f078'
        float: right
        display: inline-block
        font-family: FontAwesome
      &.collapsed:after
        content: '\f053'

  /* Filter By Departments */
  fieldset.department .content,
  fieldset.system .content,
    display: table
    width: 100%
    padding: 10px 10px 0
    border-bottom: solid 1px #dde4ef
    background: #f9f9f9
    ul.system-list
      margin-bottom: 5px
      li
        float: left
        margin-right: 15px
    ul.department-list
      min-width: 165px
      li
        float: left
        width: 50%
        margin-bottom: 6px
    label
      text-shadow: 0 1px 0 #fff
      white-space: nowrap
    input
      margin-right: 5px
    img
      +border-radius(4px)
    li.user-item
      color: #4367a5

  /* Filter By Types */
  fieldset.type .content
    padding: 10px 10px 5px
    border-bottom: solid 1px #becfe5
    background: #f9f9f9
    label
      position: relative
      display: inline-block
      margin-bottom: 8px
      overflow: hidden
      outline: 0
      // Hides original checkbox
      input
        position: absolute
        top: -20px
    /* Button Clicked  */
    label.active
      border: none
      background: #8bc2f5
      box-shadow: none
      /* Different colors according to Filter Types */
      &.btn-filter-email
        background: #8ac2f5
      &.btn-filter-file
        background: #b58ad9
      &.btn-filter-note
        background: #f4d664
      &.btn-filter-task
        background: #f7ba84
      &.btn-filter-invoice
        background: #8acd86
      &.btn-filter-customer-status
        background: #b4cf34
      /* Button Inset Shadow  */
      &:before
        content: ''
        position: absolute
        top: 0
        bottom: 0
        right: 0
        left: 0
        +border-radius(5px)
        +box-shadow(inset 0 1px 2px rgba(#000, 0.2), inset 0 0 1px rgba(#000, 0.1), 0 1px 0 #fff)
      /* Button Text and Number */
      span
        color: #fff
        text-shadow: 0 1px 1px rgba(#000, 0.3), 0 0 1px rgba(#000, 0.3)
        &.num
          border-color: rgba(#000, 0.1)
          padding: 5px 2px 5px 5px
          +box-shadow(none)

  /* Cascade */
  ul.cascade
    li.cascade-item
      display: none
    a[data-toggle=cascade]
      margin-top: -10px
      display: block
      color: #2c81ef
      padding: 5px 0 5px 20px
      position: relative
      &:before
        content: "\f053"
        float: right
        display: inline-block
        font-family: FontAwesome
        height: auto
        position: static
        background: none
        margin-right: 5px
    &.in
      li.cascade-item
        display: block
      a[data-toggle=cascade]
        display: none

  /* Button Row */
  .row-actions
    background: #eaeef5
    position: relative
    &:before
      content: ""
      position: absolute
      top: 0
      left: 0
      right: 0
      height: 8px
      +background-image(linear-gradient(top, rgba(#dbe2ed, 1), rgba(#dbe2ed, 0)))