Merge pull request #621 from HelixDesignSystem/surf-1877-convert-drawer-ld-scss

docs(drawer): convert Drawer styles to SCSS

Author: CITguy

docs/styles/spec/drawer-spec.less renamed to docs/components/drawer/_spec.scss

@@ -315,7 +315,6 @@ min-version {
 @import 'spec/button-spec';
 @import 'spec/checkbox-spec';
 @import 'spec/choice-tile-spec';
-@import 'spec/drawer-spec';
 @import 'spec/dropdown-select-spec';
 @import 'spec/file-input-spec';
 @import 'spec/menu-positioning-spec';

docs/docs.less

@@ -9,3 +9,6 @@ $demo-padding-color: $magenta-100;
 
 // Component-specific Doc Styles
 @import "components/index";
+
+// Spec Styles for component test pages
+@import "components/drawer/spec";

docs/index.scss

@@ -26,7 +26,6 @@
 @import 'components/button/index';
 @import 'components/checkbox/index';
 @import 'components/choice-tile/index';
-@import 'components/drawer/index';
 @import 'components/dropdown-select/index';
 @import 'components/file/index';
 @import 'components/form/index';

src/less/components.less

@@ -3,6 +3,7 @@
 @import "badge/index";
 @import "box/index";
 @import "breadcrumb/index";
+@import "drawer/index";
 @import "form/index";
 @import "grid/index";
 @import "icon/index";

src/scss/components/_index.scss

@@ -1,18 +1,20 @@
-@import (reference) 'vars';
+@import "vars";
+@import "../config";
 
 hx-drawer:not([hx-defined]) {
   display: none; // prevent FOUC
 }
 
 // These styles should not be shared with ShadyDOM
-hx-drawer:extend(.hxComponent) {
-  background-color: @gray-100;
+hx-drawer {
+  @extend %hxComponent;
+  background-color: $gray-100;
   display: block;
   height: 0;
   padding: 0;
   position: fixed;
   width: 0;
-  z-index: @drawer-z-index;
+  z-index: $drawer-z-index;
 }
 
 #hxDrawer.hx-drawer, // ShadyDOM for polyfilled browsers
@@ -36,17 +38,17 @@ hx-drawer {
   }
 
   > hx-div {
-    background-color: @gray-0;
-    border-top: 1px solid @gray-400;
+    background-color: $gray-0;
+    border-top: 1px solid $gray-400;
     flex-grow: 1;
     flex-shrink: 1; // necessary for scrolling
     order: 3;
     overflow-y: auto;
   }
 
   > footer {
-    background-color: @gray-0;
-    border-top: 1px solid @gray-400;
+    background-color: $gray-0;
+    border-top: 1px solid $gray-400;
     flex-grow: 9999; // consume as much space as possible
     order: 4;
     padding: 0.75rem;