💄 Fix file upload drop zone style

statamic · Jan 31, 2020 · 43f7e60 · 43f7e60
1 parent b04b133
commit 43f7e60
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 42 deletions.
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -17,8 +17,8 @@
                 </div>
 
                 <div class="drag-notification" v-if="config.allow_uploads" v-show="dragging && !showSelector">
-                    <svg-icon name="upload" class="h-12 w-12 mb-2" />
-                    {{ __('Drop File to Upload') }}
+                    <svg-icon name="upload" class="h-8 w-8 mr-3" />
+                    <span>{{ __('Drop File to Upload') }}</span>
                 </div>
 
                 <template v-if="!loading">

diff --git a/resources/sass/components/assets.scss b/resources/sass/components/assets.scss
@@ -32,49 +32,11 @@
 }
 
 .drag-notification {
-    border: 1px dashed #ccc;
+    @apply text-lg absolute pin text-center rounded flex items-center justify-center;
+    border: 1px dashed config('colors.grey-60');
     pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
     z-index: 1049;
     background: rgba(white, .9);
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    div {
-        font-size: 24px;
-    }
-
-    .icon {
-        font-size: 60px;
-        color: #333;
-        border: 2px solid #333;
-        border-radius: 60px;
-        padding: 20px;
-        margin-bottom: 25px;
-        line-height: 48px;
-        -webkit-font-smoothing: antialiased;
-        &:before {
-            top: 0;
-        }
-    }
-
-    h3 {
-        font-weight: 400;
-        margin: 25px 0;
-        color: #333;
-        font-size: 21px;
-        max-width: 75%;
-        line-height: 1.5;
-        margin: 0 auto;
-        -webkit-font-smoothing: antialiased;
-    }
 }