Beginning Draggability

src/scss/app.scss

@@ -8,6 +8,7 @@
 @import 'global/forms';
 
 @import 'components/context-menu';
+@import 'components/dragger';
 @import 'components/images';
 @import 'components/icon';
 @import 'components/search-form';

src/scss/components/_dragger.scss

@@ -0,0 +1,30 @@
+
+.dragger {
+	position: fixed;
+	left: 0;
+	top: 0;
+	z-index: 9999;
+	background: $blue;
+	color: #FFFFFF;
+	padding: 12px 20px;
+	pointer-events: none;
+}
+
+.dropzones {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 9998;
+	background: rgba(25, 25, 25, 0.9);
+
+	.zone {
+		margin: 15px;
+		padding: 50px 20px;
+		background: $turquoise;
+		color: #FFFFFF;
+		font-size: 16px;
+		text-align: center;
+	}
+}

src/scss/global/_variables.scss

@@ -7,6 +7,7 @@ $dark_grey: #333333;
 $secondary_grey: #888888;
 $red: #cf2d2d;
 $green: #47af2a;
+$blue: #32b5f2;
 
 @mixin one_line_text {
 	white-space: nowrap;