locomotivecms/engine

// =============================================================================
// Files
// =============================================================================

// Custom file selector

// Wrapper for the file upload. Should only be used when adding the uploaded
// image left of the file upload.

.file-wrapper {
  position: relative;
  display: block;

  // Adds an image next to the upload.

  .file-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 46px;
    height: 46px;
    vertical-align: middle;
    cursor: pointer;
    border-bottom-left-radius: $border-radius-base;
    border-top-left-radius: $border-radius-base;
    img {
      position: relative;
      z-index: 10;
      width: 46px;
      max-height: 46px;
      border-bottom-left-radius: $border-radius-base;
      border-top-left-radius: $border-radius-base;
    }
    > i,
    .spinner {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 15;
      padding: 13px 0 0;
      font-size: 20px;
      color: $white;
      text-align: center;
      background: rgba($brand-danger, .8);
      opacity: 0;
      transition: opacity $base-transition-speed linear;
    }
    &:hover > i {
      opacity: 1;
    }
    .spinner {
      padding: 9px 0 0;
      background: rgba($brand-primary, .8);
      opacity: 1;
    }
  }

  // File upload container.

  .file {
    position: relative;
    display: block;
    height: 46px;
    margin-bottom: 0;
    vertical-align: middle;
    cursor: pointer;
    input {
      min-width: 100%;
      margin: 0;
      opacity: 0;
    }
  }

  // Adds custom file inputs.

  .file-custom {
    position: absolute;
    top: 0;
    right: 0;
    left: 46px;
    z-index: 5;
    height: 46px;
    padding: 12px 15px 12px 15px;
    font-size: $font-size-base;
    line-height: $line-height-base;
    letter-spacing: 0;
    color: $gray;
    text-transform: none;
    background-color: $white;
    border: 1px solid $border-color-base;
    border-radius: $border-radius-base;
    user-select: none;
    .file-name {
      display: inline-block;
      width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-browse {
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      z-index: 6;
      display: block;
      height: 46px;
      padding: 12px 15px;
      line-height: $line-height-base;
      color: $gray;
      background-color: $gray-lightest;
      border: 1px solid $border-color-base;
      border-radius: 0  $border-radius-base  $border-radius-base 0;
      transition: background $base-transition-speed linear;
      &:hover {
        background-color: $gray-light;
      }
    }
  }
}