<!-- Default -->
<div class="drop-invitation">
    <div class="drop-invitation-inner">
        <div class="drop-message">
            <h2><svg width="16" height="16" class="icon icon-upload"><use xlink:href="/assets/svg/assets.svg#upload" /></svg> Drop files to anywhere upload</h2>
            <p><svg width="12" height="12" class="icon icon-box-storage"><use xlink:href="/assets/svg/core.svg#box-storage" /></svg> <em>s3</em></p>
        </div>
    </div>
</div>

<!-- Closed -->
<div class="drop-invitation closed">
    <div class="drop-message">
        <h2><svg width="16" height="16" class="icon icon-upload"><use xlink:href="/assets/svg/assets.svg#upload" /></svg> Drop files to anywhere upload</h2>
        <p><svg width="12" height="12" class="icon icon-box-storage"><use xlink:href="/assets/svg/core.svg#box-storage" /></svg> <em>s3</em></p>
    </div>
</div>

<!-- Default -->
<div class="drop-invitation">
	<div class="drop-invitation-inner">
		<div class="drop-message">
			<h2>{{ icon 'assets/upload' 16 }} Drop files to anywhere upload</h2>
			<p>{{ icon 'core/box-storage' 12 }} <em>s3</em></p>
		</div>
	</div>
</div>

<!-- Closed -->
<div class="drop-invitation closed">
	<div class="drop-message">
		<h2>{{ icon 'assets/upload' 16 }} Drop files to anywhere upload</h2>
		<p>{{ icon 'core/box-storage' 12 }} <em>s3</em></p>
	</div>
</div>
/* Default: No context defined */

/* Closed: No context defined */

  • Content:
    .drop-invitation {
    	width: 100%;
    	height: 150px;
    	margin: 0 0 $half-gutter 0;
    	cursor: pointer;
    }
    
    .drop-invitation-inner {
    	width: 100%;
    	height: 150px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	border: 1px solid palette(ui, keyline);
    	color: palette(type, light);
    	background-color: palette(ui, frosted);
    }
    
    .drop-invitation h2 {
    	margin: 1rem 0 .3rem 0;
    	font-weight: 500;
    }
    
    .drop-message {
    	text-align: center;
    }
    
    .drop-message p {
    	color: palette(type, light);
    	@include font-scale(m, helvetica);
    	margin: 0;
    }
    
    .drop-invitation.closed {
    	height: 0;
    	display: none;
    }
  • URL: /components/raw/drop-invitation/drop-invitation.scss
  • Filesystem Path: src/components/10-assets/01-atoms/03-drop-invitation/drop-invitation.scss
  • Size: 596 Bytes

There are no notes for this item.