vuestic-ui
Version:
Vue 3 UI Framework
89 lines • 2.66 kB
CSS
: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) ;
border-radius: "inherit";
outline-offset: -2px;
}