wekan/client/components/main/popup.styl

@import 'nib'

$popupWidth = 300px

.pop-over
  background: #fff
  border-radius: 3px
  border: 1px solid #dbdbdb
  border-bottom-color: #c2c2c2
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
  position: absolute
  width: $popupWidth
  z-index: 99999
  margin-top: 5px

  hr
    margin: 4px -10px
    width: $popupWidth

  p,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="file"]
    margin: 4px 0 12px
    width: 100%

  select
    width: 100%
    margin-bottom: 14px

  textarea
    height: 72px

  form a span
    padding: 0 0.5rem

  .header
    height: 36px
    position: relative
    margin-bottom: 8px
    background: #F7F7F7
    border-bottom: 1px solid #dcdcdc
    color: darken(white, 60%)

    .header-title
      display: block
      line-height: 32px
      padding-top: 4px
      margin: 0 10px
      font-weight: bold
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

    .back-btn
      float: left
      overflow: hidden
      width: 30px
      transition: width 0.2s

      i.fa
        margin: 10px
        margin-top: 12px

      &.is-hidden
        width: 0

    .close-btn
      padding: 10px 10px 10px 4px
      position: absolute
      top: 0
      right: 0

  &.no-title .header
    background: none

  .content-wrapper
    width: 100%
    overflow: hidden

  .content-container
    width: 5000px
    max-height: 550px
    transition: transform 0.2s

    .content
      width: $popupWidth - 20px
      padding: 0 10px 10px
      float: left

      &.no-height
        height: 20px

  .quiet
    padding: 6px 6px 4px

  &.search-over
    background: #f0f0f0
    min-height: 114px

    .header
      display: none

    .content
      padding: 8px 4px 8px 10px
      margin-right: 8px

  .at-form
    .at-error, .at-result
      padding: 8px 12px
      margin: -8px -10px 10px

    .at-error
      background: #ef9a9a

    .at-result
      background: #b2dfdb

  .sk-spinner
    margin: 40px auto

  for depth in (1..6)
    .popup-container-depth-{depth}
      transform: translateX(- depth * $popupWidth)

.select-members-list,
.select-avatars-list
  margin-bottom: 8px

.pop-over-list
  li
    display: block
    clear: both

  li > a
    clear: both
    cursor: pointer
    display: block
    font-weight: 700
    padding: 1.5px 10px
    position: relative
    margin: 0 -10px
    text-decoration: none
    overflow:hidden
    line-height:33px

    .item-name
      display: block
      width: auto
      padding-right: 22px

    &:not(.disabled):hover
      background-color: #005377
      color: #fff

      .sub-name,
      .quiet
        color: #eee

      .unread-indicator
        background: #fff

    .sub-name
      color: #8c8c8c
      display: block
      font-size: 12px
      font-weight: 400
      line-height: 15px

    &.current
      background-color: #e2e6e9

    &:active
      background-color: #2e85b8

    &.disabled
      color: #8c8c8c
      cursor: default

      .vis-icon
        opacity: .35

      &:hover
        background: none

        .sub-name,
        .quiet
          color: #8c8c8c

      &:active
        background: none

  &.inset li > a
    border-radius: 3px
    margin: 0

  .pop-over-list.checkable
    .fa-check
      display: none
      position: absolute
      top: 6px
      right: 12px

    li.active a
      padding-right: 28px

      .fa-check
        display: block

.pop-over.miniprofile
  .header
    border-bottom-color: transparent
    height: 30px
    position: absolute
    right: 0
    top: 0
    width: 60px
    z-index: 1

  .header-title
    display: none

  .pop-over-list
    padding-top: 8px

  .miniprofile-header
    margin-top: 8px
    min-height: 56px
    position: relative

    .member,
    .avatar
      position: absolute
      top: 2px
      left: 2px
      height: 50px
      width: @height

    .info
      margin: 0 0 0 64px
      word-wrap: break-word

      h3 a
        text-decoration: none

        &:hover
          text-decoration: underline

@media screen and (max-width: 800px)
  .pop-over
    width: 100%
    height: 100%
    overflow: hidden
    margin-top: 0px
    border: 0px solid #dbdbdb

    .header
      color: white
      background: #2980B9
      height: 48px
      padding: 0px 0px
      border: 0px
      margin: 0px 0px
      width: 100%
      position: absolute
      top: 0px

      .header-title
        font-size: 20px
        font-weight: normal
        padding-top: 8px

      .back-btn
        width: 30px
        padding: 8px 12px 8px 12px

        i.fa
          color: white

      .close-btn
        padding: 10px 12px

        i.fa
          font-size: 24px
          color: white

    .content-wrapper
      width: 100%
      height: calc(100% - 48px)
      overflow-y: scroll
      overflow-x: hidden
      margin: 48px 0px 0px 0px

    .content-container
      width: 1000%
      height: 100%
      max-height: 100%

      .content
        width: calc(10% - 20px)
        height: calc(100% - 20px)
        padding: 10px

        form
          margin: 10px 10px
          width: calc(100% - 20px)

        p,
        textarea,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="file"]
          margin: 4px 0 12px
          width: 100%
          box-sizing: border-box

    .pop-over-list
      li > a
        width: calc(100% - 20px)
        padding: 10px 10px
        margin: 0px 0px
        border-bottom: 1px solid #eee

    hr
      width: 100%
      height: 20px
      margin: 0px 0px
      color: #eee

    for depth in (1..6)
      .popup-container-depth-{depth}
        transform: translateX(- depth * 10%)