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

  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
    margin: 4px 0 12px
    width: 100%

  .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: 300 - 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

      &::-webkit-scrollbar-button
        display: block
        height: 4px
        width: 4px

  .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
  margin-bottom: 8px

.pop-over-list
  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
      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