Component Library
Sign out

Dropzone Overlay 

<div class="demo-container">
    <div class="acl-dropzone-overlay">
        <div class="acl-dropzone-overlay__content">
            <div class="acl-dropzone-overlay__icon">
                <i class="aforza-icons acl-demo__icon-catalog-icon-preview animated fadeIn">acl_cloud_upload</i>
            </div>
            <div class="acl-dropzone-overlay__text">
                Drop your files to start uploading.
            </div>
        </div>
    </div>
    <div class="demo-background"></div>
</div>

<style>
    .demo-background {
        background: url('https://images.squarespace-cdn.com/content/56d692bb0442629982c72307/1463557730264-MALBS78SPSGTOLVBLNEX/03+BILL+MURRAY+LostInTranslation+3.jpg?format=1500w&content-type=image%2Fjpeg');
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
 
<div class="demo-container">
    <div class="acl-dropzone-overlay">
        <div class="acl-dropzone-overlay__content">
            <div class="acl-dropzone-overlay__icon">
                <i class="aforza-icons acl-demo__icon-catalog-icon-preview animated fadeIn">acl_cloud_upload</i>
            </div>
            <div class="acl-dropzone-overlay__text">
                Drop your files to start uploading. 
            </div>
        </div>
    </div>
    <div class="demo-background"></div>
</div>

<style>
    .demo-background {
        background: url('https://images.squarespace-cdn.com/content/56d692bb0442629982c72307/1463557730264-MALBS78SPSGTOLVBLNEX/03+BILL+MURRAY+LostInTranslation+3.jpg?format=1500w&content-type=image%2Fjpeg');     position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
 
/* No context defined. */
  • Content: 
    .acl-dropzone-overlay {
	background-color: rgba(0, 0, 0, 0.75);
	display: flex;
	justify-self: center;
	align-items: center;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	z-index: 4;

	&__content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: auto;
		width: 80%;
		height: 80%;
		background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%239F9F9FFF' stroke-width='1.5' stroke-dasharray='10%2c 7' stroke-dashoffset='-11' stroke-linecap='square'/%3e%3c/svg%3e");
	}

	&__icon {
		border-radius: 8px;
		background-color: rgba(157, 157, 157, 0.25);
		margin: 15px;
		height: 75px;
		width: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
		user-select: none;

		i {
			font-size: 50px;
			color: $white;
		}
	}

	&__text {
		color: $white;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 19px;
		text-align: center;
		width: 150px;
	}
}
  • URL: /components/raw/dropzone-overlay/acl-dropzone-overlay.scss
  • Filesystem Path: src/components/dropzone-overlay/acl-dropzone-overlay.scss
  • Size: 1.1 KB

No notes defined.