causeway-standard-theme/causeway/components/form-fields/file-input.less

// File input
// --------------------------------------------------
@file-choose-text-width: 67px;
@file-remove-text-width: 46px;
@file-text-padding: 10px;
@file-input-width: 100px;

@file-control-width: @form-control-width - @file-text-padding - @file-remove-text-width;

.form-group {
  .btn-file {
    .inline;
    margin-left: @file-text-padding;
    margin-right: 0;

    &.btn-file-choose, &.btn-file-remove {
      margin: 0;
      padding: 0;
    }
  }

  .btn-file-choose {
    margin-right: @form-control-width - @file-control-width - @file-text-padding - @file-choose-text-width;
    .inline;
  }

  .btn-file-remove {
    margin-right: @form-control-width - @file-control-width - @file-text-padding - @file-remove-text-width;
    display: none;
  }

  &.disabled {
    .btn-file {
      display: none;
    }
  }

  &.readonly {
    .form-control {
    }

    .btn-file {
      display: none;
    }
  }

  &.file-exists {
    .btn-file-choose {
      display: none;
    }

    .btn-file-remove {
      .inline;
    }
  }

  input[type='file'] {
    &.sr-only {
      position: relative;
      width: 100%;
      clip: inherit;
      margin-bottom: -@input-height;
      float: left;
      .opacity(0);
      z-index:3;
    }
  }
}

//screen reader class
input[type='file'] {
  &.sr-only {
    width: auto;
  }
}

.form-inline {
  .form-group {
    &.file-input {
      &.readonly {
        .form-control {
          width: @form-control-inline-width;
        }
      }

      input[type='file'] {
        &.sr-only {
          width: 250px;
        }
      }

      .file-input-text {
        width: 250px;
      }

    }
  }
}