Menu: convert Light DOM LESS to SCSS

Author: BadeJaya

docs/components/_index.scss

@@ -1,4 +1,6 @@
-// load styles required to demonstrate each component
-
+/// load styles required to demonstrate each component
 @import "grid/index";
 @import "typography/index";
+
+/// load styles needed to test component visuals
+@import "menu/spec";

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

@@ -1,7 +1,7 @@
 .menu-positioning-spec {
   [id^="target"] {
     align-items: center;
-    background-color: @gray-300;
+    background-color: $gray-300;
     display: flex;
     height: 6rem;
     justify-content: center;

docs/docs.less

@@ -317,7 +317,6 @@ min-version {
 @import 'spec/choice-tile-spec';
 @import 'spec/dropdown-select-spec';
 @import 'spec/file-input-spec';
-@import 'spec/menu-positioning-spec';
 @import 'spec/panel-spec';
 @import 'spec/popover-spec';
 @import 'spec/radio-spec';

src/less/components.less

@@ -30,7 +30,6 @@
 @import 'components/file/index';
 @import 'components/form/index';
 @import 'components/list/index';
-@import 'components/menu/index';
 @import 'components/popover/index';
 @import 'components/radio/index';
 @import 'components/search/index';

src/scss/components/_index.scss

@@ -9,6 +9,7 @@
 @import "icon/index";
 @import "layout/index";
 @import "loader/index";
+@import "menu/index";
 @import "modal/index";
 @import "navigation/index";
 @import "pagination/index";

src/less/components/menu/index.less renamed to src/scss/components/menu/_index.scss

@@ -1,26 +1,27 @@
-@import (reference) 'mixins';
-@import (reference) 'components/box/index';
-
-hx-menu:extend(.hxComponent) {
-  #Positionable.base();
-
-  background-color: @gray-0;
-  border: 1px solid @gray-300;
-  box-shadow: @layering-shadow;
+@import "mixins";
+@import "../config";
+@import "components/box/config";
+
+hx-menu {
+  @extend %hxComponent;
+  @include is-positionable;
+  background-color: $gray-0;
+  border: 1px solid $gray-300;
+  box-shadow: $layering-shadow;
   max-width: 20rem;
   min-width: 10rem;
-  z-index: @menu-z-index;
+  z-index: $menu-z-index;
 
   &[open] {
-    #Box.sm();
+    @include box-size(sm);
     display: block;
   }
 
   > section {
     display: block;
 
     header {
-      color: @gray-600;
+      color: $gray-600;
       font-size: 0.875rem;
       font-weight: 500;
       text-transform: uppercase;
@@ -32,18 +33,16 @@ hx-menu:extend(.hxComponent) {
   }
 }
 
-/*
-  Most of the styles mimic those of .hxBtn.hxLink.
+ // Most of the styles mimic those of .hxBtn.hxLink.
 
-  However, because the generated CSS would end up being
-  equally specific, extended definitions seem to take
-  priority, so we can't use &:extend() here.
-*/
+ // However, because the generated CSS would end up being
+ // equally specific, extended definitions seem to take
+ // priority, so we can't use @extend here.
 hx-menuitem {
   background-color: transparent;
   border-radius: 2px;
   border: none;
-  color: @cyan-900;
+  color: $cyan-900;
   cursor: pointer;
   display: block;
   font-size: 0.875rem;
@@ -55,13 +54,13 @@ hx-menuitem {
   &:hover {
     background-color: transparent;
     border-color: transparent;
-    color: @cyan-500;
+    color: $cyan-500;
   }
 
   &:active {
     background-color: transparent;
     border-color: transparent;
-    color: @cyan-700;
+    color: $cyan-700;
   }
 
   &:focus {
@@ -71,7 +70,7 @@ hx-menuitem {
   &[disabled] {
     background-color: transparent;
     border-color: transparent;
-    color: @gray-400;
+    color: $gray-400;
   }
 
   &.hxBtn--link { // DEPRECATED: Remove in v1.0.0
@@ -84,7 +83,7 @@ hx-menuitem-group {
   display: block;
 
   header {
-    color: @gray-600;
+    color: $gray-600;
     font-size: 0.875rem;
     font-weight: 500;
     text-transform: uppercase;