maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 6.23 kB
CSS
.m-dropzone[data-v-50e5b169]{cursor:pointer;border-radius:var(--maz-radius);border-width:var(--maz-border-width);--maz-tw-border-opacity:1;border-style:dashed;border-color:hsl(var(--maz-border)/var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background)/var(--maz-tw-bg-opacity,1));flex-direction:column;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.m-dropzone[data-v-50e5b169]:hover{background-color:hsl(var(--maz-background-600)/.5)}.m-dropzone[data-v-50e5b169]:hover:is([class~=dark] *){background-color:hsl(var(--maz-background-400)/.5)}.m-dropzone--disabled[data-v-50e5b169]{cursor:not-allowed;opacity:.5}.m-dropzone--is-over-drop-zone[data-v-50e5b169]{background-color:hsl(var(--maz-primary-400)/.2)}.m-dropzone--is-over-drop-zone[data-v-50e5b169]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropzone--is-over-drop-zone[data-v-50e5b169]:hover:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropzone--is-over-drop-zone[data-v-50e5b169]{border-color:var(--active-color)}.m-dropzone--is-over-drop-zone .maz-dropzone__upload-icon[data-v-50e5b169]{color:var(--active-color)}.m-dropzone--is-over-error[data-v-50e5b169]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-destructive)/var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive-50)/var(--maz-tw-bg-opacity,1))}.m-dropzone--is-over-error[data-v-50e5b169]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive-50)/var(--maz-tw-bg-opacity,1))}.m-dropzone--is-over-error .maz-dropzone__upload-icon[data-v-50e5b169]{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive)/var(--maz-tw-text-opacity,1))}.m-dropzone__divider[data-v-50e5b169]{--maz-tw-text-opacity:1;color:hsl(var(--maz-muted)/var(--maz-tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}.m-dropzone__content[data-v-50e5b169]{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;display:flex}.m-dropzone__files-container[data-v-50e5b169]{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex;position:relative}.m-dropzone__file-item[data-v-50e5b169]{cursor:auto;border-radius:var(--maz-radius);--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1));flex-direction:column;align-items:center;width:10rem;height:10rem;display:flex;position:relative;overflow:hidden}.m-dropzone__file-item[data-v-50e5b169]:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropzone__file-item[data-v-50e5b169]{transition:all .3s ease-in-out}.m-dropzone__thumbnail[data-v-50e5b169]{position:absolute;inset:0}.m-dropzone__overlay[data-v-50e5b169]{border-radius:var(--maz-radius);background-color:hsl(var(--maz-background)/.4);--maz-tw-backdrop-blur:blur(.125rem);-webkit-backdrop-filter:var(--maz-tw-backdrop-blur)var(--maz-tw-backdrop-brightness)var(--maz-tw-backdrop-contrast)var(--maz-tw-backdrop-grayscale)var(--maz-tw-backdrop-hue-rotate)var(--maz-tw-backdrop-invert)var(--maz-tw-backdrop-opacity)var(--maz-tw-backdrop-saturate)var(--maz-tw-backdrop-sepia);backdrop-filter:var(--maz-tw-backdrop-blur)var(--maz-tw-backdrop-brightness)var(--maz-tw-backdrop-contrast)var(--maz-tw-backdrop-grayscale)var(--maz-tw-backdrop-hue-rotate)var(--maz-tw-backdrop-invert)var(--maz-tw-backdrop-opacity)var(--maz-tw-backdrop-saturate)var(--maz-tw-backdrop-sepia);position:absolute;inset:0}.m-dropzone__icon-container[data-v-50e5b169]{z-index:2;flex:1;justify-content:center;align-items:center;padding:.5rem;display:flex}.m-dropzone__spinner[data-v-50e5b169]{font-size:1.125rem;line-height:1.75rem}.m-dropzone__success-icon[data-v-50e5b169]{--maz-tw-text-opacity:1;color:hsl(var(--maz-success)/var(--maz-tw-text-opacity,1));font-size:2.25rem;line-height:2.5rem}.m-dropzone__error-icon[data-v-50e5b169]{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive)/var(--maz-tw-text-opacity,1));font-size:2.25rem;line-height:2.5rem}.m-dropzone__file-icon-wrapper[data-v-50e5b169]{border-radius:var(--maz-radius);--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background)/var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-foreground)/var(--maz-tw-text-opacity,1));padding:.25rem}.m-dropzone__description[data-v-50e5b169]{z-index:2;text-overflow:ellipsis;white-space:nowrap;flex-direction:column;gap:.25rem;width:100%;padding:.5rem;display:flex;overflow:hidden}.m-dropzone__file-info[data-v-50e5b169]{text-align:center;flex-direction:column;gap:.125rem;font-size:.875rem;font-weight:600;line-height:1.25rem;display:flex}.m-dropzone__file-name[data-v-50e5b169],.m-dropzone__file-size[data-v-50e5b169]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.m-dropzone__upload-icon[data-v-50e5b169]{font-size:1.875rem;line-height:2.25rem}.m-dropzone__upload-text[data-v-50e5b169]{text-align:center}.m-dropzone__info-text[data-v-50e5b169]{text-align:center;--maz-tw-text-opacity:1;max-width:100%;color:hsl(var(--maz-muted)/var(--maz-tw-text-opacity,1));flex-direction:column;margin-top:1rem;font-size:.875rem;line-height:1.25rem;display:flex}.m-dropzone__file-input[data-v-50e5b169]{display:none}.m-dropzone .icon-scale-enter-active[data-v-50e5b169],.m-dropzone .icon-scale-leave-active[data-v-50e5b169]{transition:transform .3s ease-in-out}.m-dropzone .icon-scale-enter-from[data-v-50e5b169]{opacity:0;position:absolute;transform:scale(0)}.m-dropzone .icon-scale-leave-to[data-v-50e5b169]{display:none}.m-dropzone .file-scale-enter-active[data-v-50e5b169],.m-dropzone .file-scale-leave-active[data-v-50e5b169]{transition:all .3s ease-in-out}.m-dropzone .file-scale-enter-from[data-v-50e5b169]{opacity:0;transform:scale(.3)}.m-dropzone .file-scale-leave-to[data-v-50e5b169]{opacity:0;transform:translateY(-100%)}.m-dropzone .file-scale-move[data-v-50e5b169]{transition:transform .3s ease-in-out}