refactor(fast-follow): css into components less fixes

Author: Cathy Siller

src/helix-ui/elements/HXFileTileElement.less

@@ -1,7 +1,7 @@
 @import "./HXElement";
 @import "base/links";
+@import "components/loaders";
 @import (reference) "components/buttons";
-@import (reference) "components/progress";
 
 :host {
   // reset buttons

src/helix-ui/elements/HXToastElement.less

@@ -5,7 +5,7 @@
 #hxToast {
   #Box.sm();
   background-color: @gray-0;
-  box-shadow: 0px 3px 3px 0 @shadow-color;
+  box-shadow: @layering-shadow;
   color: @gray-900;
   display: flex;
   min-height: 3.5rem; //56px

src/helix-ui/styles/components.less

@@ -25,7 +25,6 @@
 @import 'components/panels';
 @import 'components/pills';
 @import 'components/popovers';
-@import 'components/progress';
 @import 'components/reveals';
 @import 'components/search';
 @import 'components/selectors';

src/helix-ui/styles/components/loaders.less

@@ -1,3 +1,5 @@
+@import "vars";
+
 /*
   NOTE: This implementation is known to be slightly buggy with IE11.
   In various scenarious, IE11 will render the element with a
@@ -33,7 +35,10 @@ hx-busy {
 }
 
 hx-progress {
+  background-color: @gray-400;
+  border-radius: 1em;
+  color: @cyan-500;
   display: block;
   height: 0.5rem;
+  overflow: hidden;
 }
-

src/helix-ui/styles/components/menus.less

@@ -6,7 +6,7 @@ hx-menu {
 
   background-color: @gray-0;
   border: 1px solid @gray-300;
-  box-shadow: 0px 3px 3px 0 @shadow-color;
+  box-shadow: @layering-shadow;
   max-width: 20rem;
   min-width: 10rem;
   z-index: @menu-z-index;

src/helix-ui/styles/components/progress.less

@@ -6,7 +6,7 @@ hx-search-assistance {
   background-color: @gray-0;
   border-radius: 2px;
   border: 1px solid @gray-300;
-  box-shadow: 0px 3px 3px 0 @shadow-color;
+  box-shadow: @layering-shadow;
   max-height: 20rem; // 320px
   max-width: 32rem; // 512px
   min-width: 25rem; // 400px