DemocracyOS/app

@import './delete-modal'

boxSize = 6
color = #333
color2 = #999

#forums-wrapper
  .forum
    position relative
    overflow hidden
    padding 12px

    &.status-non-existent
      display none

    &.status-creating
      .status.creating
        display block

    &.status-destroying
      .status.destroying
        display block

    &.status-error
      .status.error
        display block

    .status
      display none
      position absolute
      left 0
      top 0
      width 100%
      height 100%
      background-color rgba(#fff, .9)

      &.error
        color red

      p
        margin 5px 0 3px
        font-size 11px
        color #555
        text-align center

    .loader-wrapper
      margin-top 15px
      text-align center

    .loader
      display inline-block
      margin-right 8px
      margin-left 12px
      border-radius 100%
      width boxSize * 1px
      height boxSize * 1px
      box-shadow boxSize*1px boxSize*1px color2,
        boxSize*-1px boxSize*1px color,
        boxSize*-1px boxSize*-1px color2,
        boxSize*1px boxSize*-1px color
      -webkit-animation spin ease infinite 4s
      animation spin ease infinite 4s

    &:hover
      background-color #f5f5f5

    .actions
      & > *
        cursor pointer
        color inherit

      & > * + *
        margin-left .8em

      .btn-remove
        color #d95e59
        cursor pointer

    .url
      font-weight 100
      color #555
      font-style italic
      font-size .8em

  .btn.purple
    border-radius 4px !important
    font-size 16px
    font-weight bold !important
    height 50px
    line-height 50px
    padding 0 12px !important
    text-transform uppercase

  .heading
    .actions
      position relative
      top -.3em
      margin-bottom 1em
      text-align right
      float right

#forum-delete-modal
  .confirmation-actions
    padding 0

@-webkit-keyframes spin {
  0%,
  100% {
      box-shadow: boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color
  }

  25% {
      box-shadow: boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2
  }

  50% {
      box-shadow: boxSize*-1px boxSize*-1px color2,
      boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color
  }

  75% {
      box-shadow: boxSize*1px boxSize*-1px color,
      boxSize*1px boxSize*1px color2,
      boxSize*-1px boxSize*1px color,
      boxSize*-1px boxSize*-1px color2
  }
}