/* image-uploader-crop v0.1.1 for jQuery that uses fine-uploader, jcrop
* (c) 2017, MIT licensed. http://tuproyecto.com
* ====================================================================
* Dependencies: jQuery, fine-uploader, jcrop
* Author: TuProyecto.com
* Developer: @krobing
* Created: 04/03/2016
* Website: http://tuproyecto.com
* Description: cropper and uploader of images that uses another libraries
*/

// flexbox to content and columns
// ------------------------------
.__fx-main-content {
  width: 100%;
  -webkit-display: -webkit-box;
  -webkit-display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;

  .__fx-column {
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;

    &:first-of-type {
      margin-left: -10px;
    }

    &:last-of-type {
      margin-right: -10px;
    }
  }
}

// Selector to do clear floats
.iuc__clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// Content uploader and cropper styles
// -----------------------------------
.iuc {
  // Uploader content
  &__image-uploader {
    @extend .iuc__clearfix;

    .iuc__qq-uploader {

      .iuc__qq-upload-button {
        display: inline;
        width: 105px;
        margin-bottom: 10px;
        padding: 7px 10px;
        text-align: center;
        float: left;
        background: #00abc7;
        color: #fff;
        border-radius: 2px;
        border: 1px solid #2dadc2;
        box-shadow: 0 1px 1px rgba(255,255,255,.37) inset,
          1px 0 1px rgba(255,255,255,.07) inset,
          0 1px 0 rgba(0,0,0,.36),
          0 -2px 12px rgba(0,0,0,.08) inset;
        width: auto;

        &.qq-upload-button-hover {
          background: #33b6cc;
        }
      }

      .qq-upload-list-selector {
        visibility: hidden;
        width: 0px;
        height: 0px;
        margin: 0;
        padding: 0;
      }
    }
  }

  // Crop preview
  &__content-image-preview {
    overflow: hidden;
  }
}

// Area crop and drop
// ------------------
*:not(.qq-uploader) {
  .iuc__content-image-to-crop {
    position: relative;
    min-height: 200px;
    max-height: 490px;
    overflow-y: hidden;
    width: inherit;
    border-radius: 6px;
    background-color: #fdfdfd;
    border: 1px dashed #ccc;
    padding: 20px;

    &:before {
      content: attr(iuc__drop-area-text) " ";
      position: absolute;
      font-size: 2em;
      left: 0;
      width: 100%;
      text-align: center;
      top: 50%;
      margin-top: -1em;
      opacity: .25;
    }
  }
}