impress/app/stylesheets/closet_hangers/_index.sass

@import "partials/context_button"
@import "partials/icon"

body.closet_hangers-index
  #title
    float: left
    margin-bottom: 0

  .flash
    clear: both

  #import-link, #closet-hangers-items-search
    margin-top: .75em

  #import-link
    +awesome-button
    +loud-awesome-button-color
    margin-left: 2em

  #closet-hangers-items-search
    float: right

    input[name=q]
      &.loading
        background:
          image: url(/images/loading.gif)
          position: 2px center
          repeat: no-repeat
        padding-left: $icon-width + 4px

  #closet-hangers-contact
    clear: both
    font-size: 85%
    margin-bottom: 1em
    margin-left: 2em
    min-height: image-height("neomail.png")

    a
      background:
        image: image-url("neomail.png")
        position: left center
        repeat: no-repeat
      padding-left: image-width("neomail.png") + 2px

    input[type=text]
      width: 10em

    label
      font-weight: bold
      margin-right: .5em

      &:after
        content: ":"

  #edit-contact-link-to-replace-form, #cancel-contact-link
    display: none

  .edit-contact-link, #cancel-contact-link
    cursor: pointer
    text-decoration: underline

    &:hover
      text-decoration: none

  #edit-contact-link-to-replace-form
    #contact-link-has-value
      display: none

    #contact-link-no-value
      display: inline

    &.has-value
      #contact-link-has-value
        display: inline

      #contact-link-no-value
        display: none

  #cancel-contact-link
    margin-left: 1em

  #closet-hangers
    clear: both
    text-align: center

    .object
      .quantity
        +opacity(.75)
        background: white
        padding: 2px 4px
        position: absolute
        left: ($object-width - $object-img-size) / 2 + $object-padding
        line-height: 1
        text-align: left
        top: $object-img-size - 20px

        span, input[type=number]
          font-size: 16px
          font-weight: bold

      form
        display: none

  header
    border-bottom: 1px solid $soft-border-color
    display: block
    margin-bottom: .25em
    padding: .25em 0
    position: relative

    h3
      font-size: 250%
      margin: 0

    span.show, span.hide
      color: $soft-text-color
      display: none
      font-size: 85%
      position: absolute
      right: 1em
      bottom: 0

    &:hover
      span.show, span.hide
        color: inherit
        text-decoration: underline

  .closet-hangers-group
    border-top: 1px solid $module-border-color
    margin-bottom: 2em
    padding-bottom: 1em

  &.current-user
    #closet-hangers
      .object:hover
        form
          display: inline

        .closet-hanger-destroy
          position: absolute
          right: ($object-width - $object-img-size) / 2 + $object-padding
          top: 0

          input
            +context-button

        .quantity
          +opacity(1)
          background: transparent
          top: $object-img-size - 24px
          padding: 0

          span
            display: none

          input[type=number]
            padding: 2px
            width: 2em

          input[type=submit]
            font-size: 85%

    &.js
      #closet-hangers
        .object:hover .quantity
          input[type=number]
            width: 2.5em

          input[type=submit]
            display: none

        .object.loading
          background: $module-bg-color
          outline: 1px solid $module-border-color

          .quantity span:after
            content: "…"

      #closet-hangers-contact
        form
          display: none

        .edit-contact-link, #cancel-contact-link
          display: inline

        &.editing
          form
            display: block

          .edit-contact-link
            display: none

      .closet-hangers-group
        header
          cursor: pointer

          .hide
            display: block

        &.hidden
          header .hide, .closet-hangers-group-content
            display: none

          header .show
            display: block