impress/app/assets/stylesheets/closet_hangers/_index.sass

@import "../partials/context_button"
@import "../partials/icon"
@import "../partials/secondary_nav"

body.closet_hangers-index
  +campaign-progress
  +secondary-nav

  #title
    margin-bottom: 0

  #import-link
    +awesome-button
    +loud-awesome-button-color

  #closet-hangers-items-search
    float: right

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

  #closet-hangers-contact
    clear: both
    color: $soft-text-color
    margin-bottom: 1em
    margin-left: 2em
    min-height: image-height("neomail.png")

    a
      +hover-link
      color: inherit
      margin-right: .5em

    a, > form
      background:
        position: left center
        repeat: no-repeat
      padding-left: image-width("neomail.png") + 4px

    a.neomail, > form
      background-image: image-url("neomail.png")

    a.lookup
      background-image: image-url("lookup.png")

    select
      width: 10em

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

      &:after
        content: ":"
  #toggle-help, #toggle-compare
    +awesome-button
    cursor: pointer
    display: none

  #closet-hangers-help.hidden
    display: none

  #closet-hangers-extras
    font-size: 85%
    margin:
      bottom: 2em
      top: 2em
    text-align: center

    a
      +awesome-button
      margin: 0 0.5em

  #closet-hangers-share
    margin-bottom: 1em

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

    input
      width: 30em

  .bulk-actions
    display: none
    text-align: center

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

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

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

      form
        display: none

      &[data-quantity="1"]
        .quantity
          display: none

      a
        /* It's jarring to have line-height gaps in the linkiness. */
        display: block

        &:hover
          text-decoration: underline

      .object
        margin: 0

      label
        display: block

      input[type=checkbox]
        display: none
        position: absolute
        top: 0
        right: ($object-width - $object-img-size) / 2 + $object-padding
        height: 16px
        width: 16px

        &:checked
          display: block

          & + label
            background: $module-bg-color
            outline: 1px solid $module-border-color

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

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

      h3
        font-size: 250%
        margin: 0

      .add-closet-list
        +awesome-button
        bottom: 50%
        margin-bottom: -1em
        position: absolute
        right: 1em

        &:active
          margin-bottom: -1.1em
          top: auto

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

        &:hover
          color: inherit
          text-decoration: underline

  .closet-list
    border-bottom: 1px solid $soft-border-color
    padding: .5em 0
    position: relative

    .visibility-form
      font-size: 85%
      left: .5em
      position: absolute
      text-align: left
      top: .25em
      z-index: 10

      input, select
        font-size: inherit
        margin:
          bottom: 0
          top: 0

      select
        border-color: $background-color

      input[type=submit]
        +context-button
        font-size: inherit
        visibility: hidden

        &:active
          top: 1px

      .visibility-descriptions
        +opacity(.75)
        background: $background-color
        font-style: italic
        list-style: none
        padding: 0 .5em

        li
          display: none

      &:hover
        .visibility-descriptions li.current
          display: block

    header
      display: block
      position: relative

    h4
      +header-text
      font-size: 150%
      line-height: 1
      margin: 0 auto .67em
      width: 50%

    .empty-list
      display: none
      font-style: italic

    .closet-list-controls
      display: none
      position: absolute
      right: 1em
      top: 0

      a, input[type=submit], button
        +context-button

      form
        display: inline

    &[data-hangers-count="0"]
      .empty-list
        display: block

    &.unlisted
      h4
        font:
          size: 125%
          style: italic

    &:hover
      .closet-list-controls
        display: block

      .visibility-form
        input[type=submit]
          visibility: visible

        select
          border-color: $soft-border-color

    &:last-child
      border-bottom: 0

    &.droppable-active
      +border-radius(1em)
      +module
      border-bottom-width: 1px
      border-style: dotted
      margin: 1em 0

      .object
        // totally hiding these elements causes the original element to change
        // position, throwing off the drag
        +opacity(.25)
        &.ui-draggable-dragging
          +opacity(1)

      .closet-list-controls
        display: none

      .closet-list-hangers
        overflow: hidden

      .visibility-form
        display: none

  .closet-hangers-group-autocomplete-item, .closet-list-autocomplete-item
    span
      +opacity(.5)
      font-style: italic
      padding: .2em .4em

  .closet-list-autocomplete-item
    a, span
      font-size: 85%
      padding-left: 2em

  .closet-hangers-group
    &[data-owned=true] .user-wants, &[data-owned=false] .user-owns
      background: $module-bg-color
      font-weight: bold

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

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

          input
            +context-button

        .quantity
          +opacity(1)
          background: transparent
          top: 0
          padding: 0

          span
            display: none

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

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

        input[type=checkbox]
          display: block

    &.js
      #closet-hangers
        .object:hover .quantity
          display: block

          input[type=number]
            width: 2.5em

          input[type=submit]
            display: none

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

          .quantity
            display: block

            span:after
              content: "…"

      .bulk-actions
        border-top: 1px solid $module-border-color
        display: block
        font-size: 85%
        padding: .5em 1em

        .bulk-actions-intro, .bulk-actions-target-desc-singular
          display: none

        .bulk-actions-target-desc
          display: inline-block

        .bulk-actions-options
          display: inline-block
          list-style: none

          > li
            display: inline-block
            margin-left: .75em

            form
              display: inline-block

            &:not(:first-child)::before
              content: " or "
              display: inline-block
              margin-right: .75em

        &[data-target-count="0"]
          .bulk-actions-intro
            display: block

          .bulk-actions-form
            display: none

        &[data-target-count="1"]
          .bulk-actions-target-desc-singular
            display: inline

          .bulk-actions-target-desc-plural
            display: none

      #closet-hangers-contact
        input[type=submit]
          display: none

      .closet-hangers-group
        header
          .show, .hide
            cursor: pointer

          .hide
            display: block

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

          header .show
            display: block

      #toggle-help
        display: inline-block

      .remove-all
        display: none

      .select-all
        display: inline-block

  &.js
    #toggle-compare
      display: inline-block

    #closet-hangers.comparing
      .object
        display: none

      .closet-hangers-group
        &[data-owned=true] .user-wants, &[data-owned=false] .user-owns
          display: inline-block