refactor(box less to scss): surf1888

Author: lalithkarikelli

docs/components/_index.scss

@@ -1,4 +1,5 @@
 /// load styles required to demonstrate each component
+@import "box/index";
 @import "grid/index";
 @import "typography/index";
 
@@ -8,4 +9,3 @@
 @import "popover/spec";
 @import "textarea/spec";
 @import "text-input/spec";
-

docs/components/box/_index.scss

@@ -0,0 +1,49 @@
+.box-demo {
+    .hxBox,
+    hx-div {
+      border: $demo-container-border;
+    }
+  
+    p {
+      margin: 0; // FIXME
+    }
+  
+    .hxXs {
+      box-shadow: inset 0 0 0 0.5rem $demo-padding-color;
+    }
+  
+    .hxSm {
+      box-shadow: inset 0 0 0 0.75rem $demo-padding-color;
+    }
+  
+    .hxMd {
+      box-shadow: inset 0 0 0 1.25rem $demo-padding-color;
+    }
+  
+    .hxLg {
+      box-shadow: inset 0 0 0 2rem $demo-padding-color;
+    }
+  
+    .hxXl {
+      box-shadow: inset 0 0 0 3rem $demo-padding-color;
+    }
+  
+    .hx2x {
+      box-shadow: inset 0 0 0 4.5rem $demo-padding-color;
+    }
+  }
+  
+  .example > div.scroll-box-demo {
+    overflow: hidden;
+    padding: 0;
+  
+    > hx-div {
+      height: 15rem;
+  
+      &[scroll="both"],
+      &[scroll="horizontal"] {
+        white-space: nowrap;
+      }
+    }
+  }
+  

docs/docs.less

@@ -2,7 +2,6 @@
  * Styles below are NOT distributed with HelixUI assets *
 \* ==================================================== */
 @import (reference) 'vars';
-@import (reference) 'components/box/index';
 // import grid mixins from toolkit
 @import (reference) 'components/grid/index';
 
@@ -141,21 +140,6 @@ min-version {
   }
 }
 
-// element metadata container
-.metadata {
-  #Box.md();
-  background-color: @cyan-50;
-  border: 1px solid @cyan-100;
-  box-shadow: inset 0.5rem 0 0 0 @cyan-100;
-
-  dt {
-    #grid.span(3);
-  }
-
-  dd {
-    #grid.span(9);
-  }
-}
 
 /* ---------------------------------------- *\
  * PAGE / CATEGORY STYLING
@@ -194,7 +178,6 @@ min-version {
 \* ---------------------------------------- */
 
 // Import from docs/styles/*
-@import 'demo/box-docs';
 @import 'demo/icon-docs';
 @import 'demo/nav-docs';
 @import 'demo/panel-docs';

docs/index.scss

@@ -1,4 +1,6 @@
 @import "vars";
+@import "components/grid/_config.scss";
+@import "components/box/_config.scss";
 
 // DOCS VARS
 $demo-container-border: 1px dashed $gray-600;
@@ -11,6 +13,22 @@ $demo-padding-color: $magenta-100;
   }
 }
 
+// element metadata container
+.metadata {
+  @include box-size(md);
+  background-color: $cyan-50;
+  border: 1px solid $cyan-100;
+  box-shadow: inset 0.5rem 0 0 0 $cyan-100;
+
+  dt {
+    @include grid-span(3);
+  }
+
+  dd {
+    @include grid-span(9);
+  }
+}
+
 // BASE
 @import "./layout";
 @import "./test-content";

docs/styles/demo/box-docs.less

@@ -35,4 +35,4 @@
   .flush () {
     padding: @space[flush];
   }
-}
+}