basic.styl

/* The MIT License */
// Copyright (c) 2012 Matias Meno <[email protected]>
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
// of the Software, and to permit persons to whom the Software is furnished to do
// so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

@import "nib"

.dropzone
.dropzone *
.dropzone-previews
.dropzone-previews *
  box-sizing border-box


.dropzone
  position relative
  border 1px solid rgba(0, 0, 0, 0.08)
  background rgba(0, 0, 0, 0.02)
  padding 1em

  &.clickable
    cursor pointer
    .message
      cursor pointer
    *
      cursor default

  .message
    opacity 1

  &.drag-hover
    border-color rgba(0, 0, 0, 0.15)
    background rgba(0, 0, 0, 0.04)

  &.started
    .message
      display none

.dropzone
.dropzone-previews
  .preview
    background rgba(255, 255, 255, 0.8)
    position relative
    display inline-block
    margin 17px

    vertical-align top

    border 1px solid #acacac

    padding 6px 6px 6px 6px

    .details
      width 100px
      height @width
      position relative
      background #ebebeb
      padding 5px
      margin-bottom 22px

      .filename
        overflow hidden
        height 100%


      img
        absolute top left
        width @width
        height @width

      .size
        absolute bottom -28px left 3px
        height 28px
        line-height @height


    &.error
      .error-mark
        display block
    &.success
      .success-mark
        display block


    &:hover
      .details
        img
          display none
      .success-mark
      .error-mark
        display none


    .success-mark
    .error-mark
      display none
      position absolute

      width 40px
      height 40px

      font-size 30px
      text-align center
      right -10px
      top -10px

    .success-mark
      color #8CC657
    .error-mark
      color #EE162D


    .progress
      position absolute
      top 100px
      left 6px
      right 6px
      height 6px
      background #d7d7d7
      display none

      .upload
        position absolute
        top 0
        bottom 0
        left 0
        width 0%
        background-color #8CC657


    &.processing
      .progress
        display block


    .error-message
      display none
      absolute top -5px left -20px
      background rgba(245, 245, 245, 0.8)
      padding 8px 10px
      color #800
      min-width 140px
      max-width 500px
      z-index 500
    &:hover.error
      .error-message
        display block