File attachment padding

src/app/learn/reference/cli-commands/index.html

@@ -22,7 +22,7 @@
         <li><p><stache-code>skyux version</stache-code> or <stache-code>skyux -v</stache-code> — Returns the version of SKY UX CLI.</p></li>
         <li><p><stache-code>skyux</stache-code>, <stache-code>skyux help</stache-code>, or <stache-code>skyux -h</stache-code> — Displays help information for SKY UX CLI arguments. This lists the commands and options that are available in the SKY UX CLI and provides descriptions.</p></li>
     </ul>
-    
+
     <stache-page-anchor>
         Options
     </stache-page-anchor>

src/modules/fileattachments/file-drop.component.html

@@ -22,18 +22,26 @@
           #fileInput/>
           <div class="sky-file-drop-contents" *ngIf="customEl.children.length === 0">
             <div class="sky-file-drop-contents-not-over">
-              <h4>{{'file_upload_drag_file_here' | skyResources}}</h4>
-              <h5>{{'file_upload_or_click_to_browse' | skyResources}}</h5>
+                <div class="sky-file-drop-text-header">
+                  {{'file_upload_drag_file_here' | skyResources}}
+                </div>
+                <div class="sky-file-drop-text">
+                  {{'file_upload_or_click_to_browse' | skyResources}}
+                </div>
               <i class="fa fa-cloud-upload sky-file-upload-icon"></i>
             </div>
             <!-- This will appear when file is dragged over and is valid -->
             <div class="sky-file-drop-contents-accept" >
-              <h4>{{'file_upload_drop_files_here' | skyResources}}</h4>
+              <div class="sky-file-drop-text-header">
+                {{'file_upload_drop_files_here' | skyResources}}
+              </div>
               <i class="fa fa-bullseye sky-file-upload-icon"></i>
             </div>
             <!-- This will appear when file is dragged over and is invalid -->
             <div class="sky-file-drop-contents-reject" >
-              <h4>{{'file_upload_invalid_file' | skyResources}}</h4>
+              <div class="sky-file-drop-text-header">
+                {{'file_upload_invalid_file' | skyResources}}
+              </div>
               <i class="fa fa-times-circle sky-file-upload-icon"></i>
             </div>
           </div>
@@ -45,7 +53,11 @@ <h4>{{'file_upload_invalid_file' | skyResources}}</h4>
     <div class="sky-file-drop-col" *ngIf="allowLinks">
         <div class="sky-file-drop-contents">
             <div class="sky-file-drop-link">
-                <h4 class="sky-file-drop-link-header">{{'file_upload_paste_link' | skyResources}}</h4>
+                <div class="sky-file-drop-link-header">
+                  <div class="sky-file-drop-text-header">
+                    {{'file_upload_paste_link' | skyResources}}
+                  </div>
+                </div>
                 <div class="sky-form-group">
                     <input
                       type="text"

src/modules/fileattachments/file-drop.component.scss

@@ -34,21 +34,6 @@
   width: 100%;
   text-align: center;
 
-  h4,
-  h5 {
-    font-style: italic;
-  }
-
-  h4 {
-    font-size: $sky-font-size-xl;
-    margin: 0;
-  }
-
-  h5 {
-    font-size: $sky-font-size-lg;
-    margin-top: $sky-margin-half;
-  }
-
   .sky-file-drop-link-header {
     margin-bottom: $sky-margin-half;
   }
@@ -57,10 +42,6 @@
 .sky-file-drop-noclick {
   .sky-file-drop-contents {
     cursor: default;
-
-    h5 {
-      display: none;
-    }
   }
 }
 
@@ -111,6 +92,26 @@
   cursor: default;
 }
 
+.sky-file-drop-text-header {
+  font-size: $sky-font-size-xl;
+  margin: 0;
+}
+
+.sky-file-drop-text {
+  font-size: $sky-font-size-lg;
+  margin-top: $sky-margin-half;
+  margin-bottom: $sky-margin-double;
+}
+
+.sky-file-drop-text, .sky-file-drop-text-header {
+  font-style: italic;
+  color: $sky-color-black;
+  font-weight: 600;
+  font-family: $sky-font-family-base;
+  line-height: 1.1;    
+  display: block;
+}
+
 .sky-file-drop {
   background-color: transparent;
   border: none;

src/modules/fileattachments/file-item.component.ts

@@ -98,7 +98,6 @@ export class SkyFileItemComponent implements DoCheck {
             break;
         }
       }
-
       this.otherCls = 'fa-file-' + (cls ? cls + '-' : '') + 'o';
     }
   }