SURF-1874 Changes

Author: BadeJaya

src/less/components.less

@@ -22,7 +22,6 @@
     - Complex CSS Selectors
     - NO !important
 \* ========== COMPONENTS ========== */
-@import 'components/alert/index';
 @import 'components/badge/index';
 @import 'components/box/index';
 @import 'components/breadcrumb/index';

src/scss/components/_index.scss

@@ -2,5 +2,6 @@
 @import "vars";
 
 @import "accordion/index";
+@import "alert/index";
 @import "loader/index";
 @import "typography/index";

src/less/components/alert/index.less renamed to src/scss/components/alert/index.scss

@@ -1,35 +1,35 @@
 hx-alert {
-  background-color: @gray-400;
-  color: @gray-1000;
+  background-color: $gray-400;
+  color: $gray-1000;
   display: block;
   font-weight: 300;
   line-height: 1.25rem;
 
   &[type="info"] {
-    background-color: @blue-100;
-    color: @gray-1000;
+    background-color: $blue-100;
+    color: $gray-1000;
   }
 
   &[type="error"] {
-    background-color: @red-900;
-    color: @gray-0;
+    background-color: $red-900;
+    color: $gray-0;
   }
 
   &[type="success"] {
-    background-color: @green-500;
-    color: @gray-0;
+    background-color: $green-500;
+    color: $gray-0;
   }
 
   &[type="warning"] {
-    background-color: @yellow-500;
-    color: @gray-1000;
+    background-color: $yellow-500;
+    color: $gray-1000;
   }
 }
 
 /* DEPRECATED: Remove in v1.0.0 */
 .hxAlert {
-  background-color: @blue-100;
-  color: @gray-1000;
+  background-color: $blue-100;
+  color: $gray-1000;
   display: flex;
   font-weight: 300;
   line-height: 1.25em;
@@ -40,17 +40,17 @@ hx-alert {
   }
 
   &--error {
-    background-color: @red-900;
-    color: @gray-0;
+    background-color: $red-900;
+    color: $gray-0;
   }
 
   &--warning {
-    background-color: @yellow-500;
+    background-color: $yellow-500;
   }
 
   &--success {
-    background-color: @green-500;
-    color: @gray-0;
+    background-color: $green-500;
+    color: $gray-0;
   }
 
   &__icon {