wekan/client/components/main/popup.styl

@import 'nib'

.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: 300px
  z-index: 99999
  margin-top: 5px

  hr
    margin: 4px -10px
    width: 275px + 2*10px

  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

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

.pop-over-list
  &.navigable li.not-selectable>a:hover,
  li.not-selectable>a:hover
    color: #8c8c8c
    cursor: default

  li > a
    cursor: pointer
    display: block
    font-weight: 700
    padding: 6px 10px
    position: relative
    margin: 0 -10px
    text-decoration: none

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

    &:hover
      background-color: #005377
      color: #fff

      .sub-name,
      .quiet
        color: #eee

      .unread-indicator
        background: #fff

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

    &.current
      background-color: #e2e6e9

    .unread-indicator
      background: #2e85b8
      background: linear-gradient(to bottom, #2e85b8 0, #2b7cab 100%)
      border-radius: 7px
      display: block
      height: 14px
      opacity: 0
      position: absolute
      right: 16px
      top: 8px
      width: 14px

      &.any
        opacity: 1

    &: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

    .icon-check
      display: none
      position: absolute
      top: 6px
      right: 12px

    li.active a
      padding-right: 28px

      .icon-check
        display: block

    &.left-check

      .icon-check
        right: auto
        left: 10px

      li a
        padding-right: 10px
        padding-left: 30px

      li.active a
        padding-right: 10px

  &.normal-weight li>a
    font-weight: 400

  &.navigable

    li > a:hover
      background-color: transparent
      color: #4d4d4d

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

    li.selected > a
      background-color: #005377
      color: #fff

      .sub-name,
      .quiet
        color: #eee

    li.selected > a

      &.current
        background-color: #005377

      .unread-indicator
        background: #fff

      &:active
        background-color: #005377

.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

.mini-profile-info
  margin-top: 8px
  min-height: 56px
  position: relative

  .member-large
    position: absolute
    top: 2px
    left: 2px

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

    h3 a
      text-decoration: none

      &:hover
        text-decoration: underline