refactor(icon and nav): icon and nav dev docs from less to scss

Author: badejayayesubabu

docs/components/_index.scss

@@ -1,6 +1,8 @@
 /// load styles required to demonstrate each component
 @import "box/index";
 @import "grid/index";
+@import "icon/index";
+@import "navigation/index";
 @import "typography/index";
 
 /// load styles needed to test component visuals

docs/styles/demo/icon-docs.less renamed to docs/components/icon/_index.scss

@@ -1,11 +1,11 @@
 .icon-media {
-  background-color: @gray-0;
-  border: 1px solid @gray-400;
+  background-color: $gray-0;
+  border: 1px solid $gray-400;
   height: 100%;
   padding: 1.25rem;
 
   .media__icon {
-    color: @gray-1000;
+    color: $gray-1000;
     display: flex;
     font-size: 2em;
     line-height: 1;
@@ -28,6 +28,6 @@ hx-icon {
   }
 
   &.danger {
-    color: @red-900;
+    color: $red-900;
   }
 }

docs/styles/demo/nav-docs.less renamed to docs/components/navigation/_index.scss

@@ -1,5 +1,5 @@
 .nav-demo {
   .hxNav {
-    width: @app-nav-width;
+    width: $app-nav-width;
   }
 }

docs/docs.less

@@ -177,8 +177,6 @@ min-version {
 \* ---------------------------------------- */
 
 // Import from docs/styles/*
-@import 'demo/icon-docs';
-@import 'demo/nav-docs';
 @import 'demo/panel-docs';
 @import 'demo/tabset-docs';
 @import 'demo/tooltip-docs';