BindaCMS/binda

// see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
.fileupload--preview {
  position: relative;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 16px;
  transition: all 0.5s ease;
  border: 1px solid $color-gray-lighter;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;

  p {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 8px;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  video {
    display: none;
  }
}

.fileupload--preview--uploaded {
  animation: fadePreview 0.6s ease-out;
  border: 0;

  p {
    display: none;
  }

  video {
    display: block;
  }
}

@keyframes fadePreview {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

.fileupload--field {
  float: left;

  .control-label-wrap {
    float: left;
  }
}

.fileupload--dashboard {
  float: left;
}

.fileupload input {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  width: 1px; // .1px didn't work so set minimum to 1px
  height: 1px; // .1px didn't work so set minimum to 1px
  opacity: 0;
}

.fileupload label.control-label {
  @extend .b-btn;
  @extend .p;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer; /* "hand" cursor */

  * {
    pointer-events: none;
  }

  // &.control-label--focus {
  //  outline: 1px dotted #000;
  //  outline: -webkit-focus-ring-color auto 5px;
  // }
}

// Override the real .from-group containing the input
.fileupload .form-group {
  padding: 0;
  border: 0;
}

.fileupload--remove-image-btn {
  float: left;
  transition: all 0.3s ease;
  opacity: 1;
}

.fileupload--remove-image-btn--hidden {
  pointer-events: none;
  opacity: 0;
}

.fileupload--details {
  float: left;
  transition: opacity 0.3s ease-out;
  opacity: 1;
}

.fileupload--details--hidden {
  pointer-events: none;
  opacity: 0;
  width: 0; // Odd but needed, otherwise it occupies few transparent pixels...
  display: none;
}

.standard-form--video .fileupload--dimension,
.standard-form--audio .fileupload--dimension {
  display: none;
}

.standard-form--image .fileupload--videolink {
  display: none;
}

.fileupload--preview--hidden {
  display: none;
}