vuestic-ui/dist/esm-node/VaFileUpload.css

Vue 3 UI Framework

:root,
:host {
  --va-file-upload-position: relative;
  --va-file-upload-margin: 0.5rem 0;
  --va-file-upload-list-margin-top: 1rem;
  --va-file-upload-dropzone-border-radius: 0.375rem;
  --va-file-upload-dropzone-cursor: pointer;
  --va-file-upload-dropzone-text-padding-sm: 0 0 1rem;
  --va-file-upload-dropzone-field-padding: 1.5rem 2rem;
  --va-file-upload-dropzone-field-padding-sm: 1.5rem 1rem;
  --va-file-upload-dropzone-field-button-margin: 0;
  --va-file-upload-dropzone-field-button-z-index: 10;
  --va-file-upload-dropzone-field-text-pr: 10px;
  --va-file-upload-dropzone-list-padding: 0 2rem 1rem;
}
.va-file-upload {
  position: var(--va-file-upload-position);
  font-family: var(--va-font-family);
  margin: var(--va-file-upload-margin);
}
.va-file-upload .va-file-upload-list {
  margin-top: var(--va-file-upload-list-margin-top);
}
.va-file-upload__field {
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}
.va-file-upload__field__button {
  margin: var(--va-file-upload-dropzone-field-button-margin);
  z-index: 10;
}
.va-file-upload__field__text {
  padding-right: var(--va-file-upload-dropzone-field-text-pr);
}
.va-file-upload__field__input {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  color: transparent;
  opacity: 0;
  cursor: pointer;
}
.va-file-upload__field__input::-webkit-file-upload-button {
  cursor: pointer;
}
.va-file-upload--dropzone {
  background-color: var(--va-file-upload-dropzone-background-color);
  overflow: hidden;
  border-radius: var(--va-file-upload-dropzone-border-radius);
  cursor: var(--va-file-upload-dropzone-cursor);
}
.va-file-upload--dropzone .va-file-upload__field {
  justify-content: center;
  display: flex;
  align-items: center;
  padding: var(--va-file-upload-dropzone-field-padding);
  transition: height 0.2s;
  overflow: visible;
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
.va-file-upload--dropzone .va-file-upload__field {
    flex-direction: column;
    padding: var(--va-file-upload-dropzone-field-padding-sm);
}
.va-file-upload--dropzone .va-file-upload__field__text {
    padding: var(--va-file-upload-dropzone-text-padding-sm);
    text-align: center;
}
}
.va-file-upload--dropzone .va-file-upload-list {
  padding: var(--va-file-upload-dropzone-list-padding);
  margin-top: 0;
}
.va-file-upload--disabled .va-file-upload__field__input {
  cursor: default;
}
.va-file-upload--disabled .va-file-upload__field__input::-webkit-file-upload-button {
  cursor: inherit;
}
.va-file-upload .va-button:focus-visible {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
  outline-offset: -2px;
}