Add menu modifier `menu-simple-direction` mixin

Changes:
- Make `@mixin menu-simple` taking a `$dir` parameter to generate
margins.
- Add `@mixin menu-simple-direction($dir: $global-left)`: Direction
modifier for a simple Menu.
- Add documentation for `@mixin menu-simple`

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 78ac1689ed013d257c451ab5116b6d510031f09d..280e5f5a2340ec3877aef573755d3747cbe8e520 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -140,16 +140,32 @@ $menu-border: $light-gray !default;
 }
 
 /// Creates a simple Menu, which has no padding or hover state.
-@mixin menu-simple {
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
+@mixin menu-simple($dir: $global-left) {
   li {
     display: inline-block;
-    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
     line-height: 1;
   }
 
   a {
     padding: 0;
   }
+
+  @if $dir != null {
+    @include menu-simple-direction($dir);
+  }
+}
+
+/// Direction modifier for a simple Menu
+/// @param {Keyword} $dir [$global-left] - Direction of the menu
+@mixin menu-simple-direction($dir: $global-left) {
+  $no-margin-dir: $dir;
+  $margin-dir: direction-opposite($dir);
+
+  li {
+    margin-#{$no-margin-dir}: 0;
+    margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
+  }
 }
 
 /// Adds styles for a nested Menu, by adding `margin-left` to the menu.