Merge branch 'menu-flex' of github.com:Semantic-Org/Semantic-UI into container

10 years ago · 249f369a76
5 changed files with 235 additions and 221 deletions
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@ -65,6 +65,7 @@
 [See the examples](http://www.semantic-ui.com/behaviors/visibility.html#/examples) online for a demonstration.

 **Enhancements**
+- **Menu** - Horizontal menus now use flexbox so they can resize automatically to content size.
 - **Form** - `<select>` now receive error formatting on `form error` **Thanks @davialexandre**
 - **Transition** - Added more reasonable default durations for each animation
 - **Loader** - `inline loader` now has a `centered` variation
@ -75,7 +76,11 @@
 - **Dimmer** - Add `opacity` setting to override css value. Add to docs several undocumented settings, like `useCSS`, and `variation`.
 - **Icon** - added `@src` variable to make it adjustable with themes that dont support all types like `woff2`

+**Deprecations**
+- **Menu** - `ui tiered menu` has been deprecated. It has been removed from the docs, and will be removed eventually in `2.0`
+
 **Bugs**
+- **Input** - Fix bug with vertical centering of `ui action input` inside `menu` due to `flexbox` changes
 - **Dropdown** - Fixes issue where dropdown would not open after restoring previus value on failed `search dropdown` search
 - **Grid** - Fixes specificity of grid `column` colors to not affect other elements with columns
 - **Icon** - Fix `clockwise rotated icon` causing `clockwise` icon to appear
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@ -1,9 +1,9 @@
-/*!
- * # Semantic UI - Menu
+/*
+ * # Semantic - Menu
 * http://github.com/semantic-org/semantic-ui/
 *
 *
- * Copyright 2014 Contributors
+ * Copyright 2014 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
@ -28,9 +28,9 @@
 ---------------*/

 .ui.menu {
+  display: flex;
  margin: @margin;
  background: @background;
-  font-size: 0em;
  font-weight: @fontWeight;
  box-shadow: @boxShadow;
  border-radius: @borderRadius;
@ -51,88 +51,70 @@
  margin-bottom: 0rem;
 }

-.ui.menu .menu {
-  margin: 0em;
-}
-.ui.menu:not(.vertical) .menu {
-  font-size: 0em;
-}

 /*--------------
-     Colors
+    Sub-Menu
 ---------------*/

-/* Text Color */
-.ui.menu .item {
-  color: @menuTextColor;
-}
-.ui.menu .item .item {
-  color: @subMenuTextColor;
+.ui.menu .menu {
+  margin: 0em;
 }

-/* Hover */
-.ui.menu .item .menu a.item:hover,
-.ui.menu .item .menu .link.item:hover {
-  color: @darkTextColor;
+.ui.menu:not(.vertical) > *,
+.ui.menu:not(.vertical) > .menu {
+  display: flex;
 }

-
 /*--------------
-      Items
+      Item
 ---------------*/

+.ui.menu:not(.vertical) .item {
+  display: flex;
+  align-items: center;
+}
+
 .ui.menu .item {
  position: relative;
-  display: inline-block;
-  padding: @verticalPadding @horizontalPadding;
-  border-top: @borderSize solid transparent;
-
-  background: @itemBackground;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
-
  -webkit-tap-highlight-color: transparent;
  user-select: none;
-  transition: @transition;
-}

+  background: @itemBackground;
+  padding: @itemVerticalPadding @itemHorizontalPadding;
+  color: @textColor;
+  transition: @itemTransition;
+}

-/* Floated Content */
 .ui.menu > .item:first-child {
  border-radius: @borderRadius 0px 0px @borderRadius;
 }
-.ui.menu:not(.vertical) .item.left,
-.ui.menu:not(.vertical) .menu.left {
-  float: left;
-}
-.ui.menu:not(.vertical) .item.right,
-.ui.menu:not(.vertical) .menu.right {
-  float: right;
-}
-
-
-/*--------------
-    Borders
---------------*/

+/* Border */
 .ui.menu .item:before {
  position: absolute;
  content: '';
  top: 0%;
  right: 0px;
-  width: @dividerSize;
  height: 100%;
+
+  width: @dividerSize;
  background: @dividerBackground;
 }
-.ui.menu > .right.menu:first-child {
-  display: none;
+
+/*--------------
+    Sub-Item
+---------------*/
+
+.ui.menu .item .menu .item {
+  color: @subMenuTextColor;
 }
-.ui.menu .menu.right .item:before,
-.ui.menu .item.right:before {
-  right: auto;
-  left: 0px;
+.ui.menu .item .menu a.item:hover,
+.ui.menu .item .menu .link.item:hover {
+  color: @darkTextColor;
 }

 /*--------------
@ -175,7 +157,7 @@
 .ui.menu:not(.vertical) .item > .button {
  position: relative;
  top: @buttonOffset;
-  margin: -@buttonVerticalPadding 0;
+  margin: @buttonMargin;
  padding-bottom: @buttonVerticalPadding;
  padding-top: @buttonVerticalPadding;
  font-size: @buttonSize;
@ -205,27 +187,6 @@
  padding-bottom: @inputVerticalPadding;
 }

-/* Resizes */
-.ui.small.menu .item > .input input {
-  top: @smallInputOffset;
-  padding-top: @smallInputVerticalPadding;
-  padding-bottom: @smallInputVerticalPadding;
-}
-.ui.small.menu .item > .input .button,
-.ui.small.menu .item > .input .label {
-  padding-top: @smallInputVerticalPadding;
-  padding-bottom: @smallInputVerticalPadding;
-}
-.ui.large.menu .item > .input input {
-  top: @largeInputOffset;
-  padding-bottom: @largeInputVerticalPadding;
-  padding-top: @largeInputVerticalPadding;
-}
-.ui.large.menu .item > .input .button,
-.ui.large.menu .item > .input .label {
-  padding-top: @largeInputVerticalPadding;
-  padding-bottom: @largeInputVerticalPadding;
-}


 /*--------------
@ -234,8 +195,8 @@

 .ui.menu .header.item,
 .ui.vertical.menu .header.item {
-  background: @headerBackground;
  margin: 0em;
+  background: @headerBackground;
  text-transform: @headerTextTransform;
  font-weight: @headerWeight;
 }
@ -247,9 +208,9 @@

 /* Dropdown */
 .ui.menu .ui.dropdown.item.visible {
-  background: @subtleTransparentBlack;
  border-bottom-right-radius: 0em;
  border-bottom-left-radius: 0em;
+  background: @subtleTransparentBlack;
 }
 .ui.menu .ui.dropdown.active {
  box-shadow: none;
@ -257,36 +218,22 @@

 /* Menu Position */
 .ui.menu .dropdown.item .menu {
-  background: @dropdownBackground;
  left: 0px;
+  background: @dropdownBackground;
  margin: @dropdownMenuOffset 0px 0px;
  min-width: ~"calc(100% - 1px)";
  box-shadow: @dropdownBoxShadow;
 }
 .ui.menu:not(.secondary) .pointing.dropdown.item .menu {
-  margin-top: @dropdownPointingDistance;
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
+  margin-top: @dropdownPointingDistance;
 }
 .ui.menu .simple.dropdown.item .menu {
  margin: 0px !important;
 }


-/* Secondary Menu Dropdown */
-.ui.secondary.menu > .menu > .active.dropdown.item {
-  background-color: transparent;
-}
-.ui.secondary.menu .dropdown.item .menu {
-  left: 0px;
-  min-width: 100%;
-}
-
-/* Even Width Menu Dropdown */
-.ui.item.menu .dropdown .menu .item {
-  width: 100%;
-}
-
 /*--------------
     Labels
 ---------------*/
@ -352,35 +299,12 @@
  background: @activeBackground;
  color: @selectedTextColor;
  font-weight: @activeFontWeight;
-  box-shadow: 0em @activeBorderSize 0em inset;
+  box-shadow: @activeBoxShadow;
 }
 .ui.menu .active.item > i.icon {
  opacity: @activeIconOpacity;
 }

-/* Vertical */
-.ui.vertical.menu .active.item {
-  background: @activeBackground;
-  border-radius: 0em;
-  box-shadow: @activeBorderSize 0em 0em inset;
-}
-.ui.vertical.menu > .active.item:first-child {
-  border-radius: 0em @borderRadius 0em 0em;
-}
-.ui.vertical.menu > .active.item:last-child {
-  border-radius: 0em 0em @borderRadius 0em;
-}
-.ui.vertical.menu > .active.item:only-child {
-  border-radius: 0em @borderRadius @borderRadius 0em;
-}
-.ui.vertical.menu .active.item .menu .active.item {
-  border-left: none;
-}
-.ui.vertical.menu .item .menu .active.item {
-  background-color: @subMenuActiveBackground;
-  box-shadow: none;
-}
-

 /*--------------
  Active Hover
@ -407,21 +331,45 @@
             Types
 *******************************/

+/*--------------
+ Floated Content
+---------------*/
+
+/* Left Floated */
+.ui.menu:not(.vertical) .item.left,
+.ui.menu:not(.vertical) .menu.left {
+  display: flex;
+  margin-right: auto;
+}
+/* Right Floated */
+.ui.menu:not(.vertical) .item.right,
+.ui.menu:not(.vertical) .menu.right {
+  display: flex;
+  margin-left: auto;
+}
+
+/* Floated Borders */
+.ui.menu > .right.menu:first-child:before,
+.ui.menu > .right.menu:last-child:before {
+  display: none;
+}
+
+
 /*--------------
    Vertical
 ---------------*/

 .ui.vertical.menu {
+  display: block;
  background: @verticalBackground;
 }

+
 /*--- Item ---*/
 .ui.vertical.menu .item {
-  background: @verticalItemBackground;
  display: block;
-  height: auto !important;
+  background: @verticalItemBackground;
  border-top: none;
-  border-left: @borderSize solid transparent;
  border-right: none;
 }
 .ui.vertical.menu > .item:first-child {
@ -482,9 +430,6 @@
  box-shadow: @dropdownVerticalBoxShadow;
  border-radius: 0em @borderRadius @borderRadius @borderRadius;
 }
-.ui.vertical.menu .dropdown.item .menu .item {
-  font-size: 1rem;
-}
 .ui.vertical.menu .dropdown.item .menu .item i.icon {
  margin-right: 0em;
 }
@ -494,7 +439,7 @@

 /*--- Sub Menu ---*/
 .ui.vertical.menu .item:not(.dropdown) > .menu {
-  margin: @subMenuMargin -@horizontalPadding 0em;
+  margin: @subMenuMargin -@itemHorizontalPadding 0em;
 }
 .ui.vertical.menu .item:not(.dropdown) > .menu > .item {
  background: none;
@ -505,11 +450,40 @@
  display: none;
 }

+/* Vertical Active */
+.ui.vertical.menu .active.item {
+  background: @activeBackground;
+  border-radius: 0em;
+  box-shadow: @verticalActiveBoxShadow;
+}
+.ui.vertical.menu > .active.item:first-child {
+  border-radius: 0em @borderRadius 0em 0em;
+}
+.ui.vertical.menu > .active.item:last-child {
+  border-radius: 0em 0em @borderRadius 0em;
+}
+.ui.vertical.menu > .active.item:only-child {
+  border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.vertical.menu .active.item .menu .active.item {
+  border-left: none;
+}
+.ui.vertical.menu .item .menu .active.item {
+  background-color: @subMenuActiveBackground;
+  box-shadow: none;
+}
+

 /*--------------
     Tiered
 ---------------*/

+.ui.tiered.menu {
+  flex-wrap: wrap;
+}
+.ui.tiered.menu > .menu {
+  width: 100%;
+}
 .ui.tiered.menu > .menu > .item:hover {
  color: @tieredSubMenuActiveColor;
 }
@ -555,7 +529,7 @@

 /* Sub Menu Active */
 .ui.tiered.menu .sub.menu .active.item {
-  padding-top: @verticalPadding;
+  padding-top: @itemVerticalPadding;
  background: @tieredSubMenuActiveBackground;
  border-radius: 0;
  border-top: medium none;
@ -665,7 +639,7 @@

 .ui.pagination.menu {
  margin: 0em;
-  display: inline-block;
+  display: inline-flex;
  vertical-align: middle;
 }

@ -683,7 +657,7 @@
 /* Active */
 .ui.pagination.menu .active.item {
  border-top: none;
-  padding-top: @verticalPadding;
+  padding-top: @itemVerticalPadding;
  background-color: @paginationActiveBackground;
  box-shadow: none;
 }
@ -761,6 +735,15 @@
  background-color: @secondaryInvertedActiveBackground;
 }

+/* Dropdown */
+.ui.secondary.menu > .menu > .active.dropdown.item {
+  background-color: transparent;
+}
+.ui.secondary.menu .dropdown.item .menu {
+  left: 0px;
+  min-width: 100%;
+}
+

 /* Disable variations */
 .ui.secondary.item.menu > .item {
@ -922,43 +905,36 @@
 ---------------*/

 .ui.text.menu {
-  display: inline-block;
  background: none transparent;
-
-  margin: 1rem -1rem;
  border-radius: 0px;
-
  box-shadow: none;
-}
-.ui.text.menu > .item {
-  opacity: 0.8;

-  margin: 0em 1em;
+  margin: @textMenuMargin;
+}
+.ui.text.menu > .item,
+.ui.text.menu .menu > .item {
  padding: 0em;
-  height: auto !important;
-
  border-radius: 0px;
-
  box-shadow: none;
+  opacity: @textMenuItemOpacity;
+  margin: @textMenuItemMargin;
  transition: @textMenuTransition;
 }
-.ui.text.menu > .item:before {
+.ui.text.menu > .item:before,
+.ui.text.menu .menu > .item:before {
  display: none !important;
 }
 .ui.text.menu .header.item {
  background-color: transparent;
-
-  opacity: 1;
-  color: rgba(50, 50, 50, 0.8);
-  font-size: 0.875rem;
  padding: 0em;
-  text-transform: uppercase;
-  font-weight: bold;
+  opacity: 1;
+  color: @textMenuHeaderColor;
+  font-size: @textMenuHeaderSize;
+  text-transform: @textMenuHeaderTextTransform;
+  font-weight: @textMenuHeaderFontWeight;
 }
 .ui.text.menu .text.item {
  opacity: 1;
-  color: rgba(50, 50, 50, 0.8);
-  font-weight: bold;
 }

 /*--- fluid text ---*/
@ -968,7 +944,7 @@

 /*--- vertical text ---*/
 .ui.vertical.text.menu {
-  margin: 1rem 0em;
+  margin: @textVerticalMenuMargin;
 }
 .ui.vertical.text.menu:first-child {
  margin-top: 0rem;
@ -977,16 +953,14 @@
  margin-bottom: 0rem;
 }
 .ui.vertical.text.menu .item {
-  float: left;
-  clear: left;
-  margin: 0.5em 0em;
+  margin: @textVerticalMenuItemMargin;
 }
 .ui.vertical.text.menu .item > i.icon {
-  float: none;
-  margin: 0em @verticalPadding 0em 0em;
+  float: @textVerticalMenuIconFloat;
+  margin: @iconMargin;
 }
 .ui.vertical.text.menu .header.item {
-  margin: 0.8em 0em;
+  margin: @textVerticalMenuHeaderMargin;
 }

 /*--- hover ---*/
@ -1005,6 +979,11 @@
  box-shadow: none;
 }

+/*--- active hover ---*/
+.ui.text.menu .active.item:hover {
+  background-color: transparent;
+}
+
 /* disable variations */
 .ui.text.pointing.menu .active.item:after {
  box-shadow: none;
@ -1033,10 +1012,13 @@

 .ui.icon.menu,
 .ui.vertical.icon.menu {
+  display: inline-flex;
  width: auto;
-  display: inline-block;
  height: auto;
 }
+.ui.vertical.icon.menu {
+  display: inline-block;
+}
 .ui.icon.menu > .item {
  height: auto;
  text-align: @iconMenuTextAlign;
@ -1055,6 +1037,7 @@
 /* Item Icon Only */
 .ui.menu .icon.item .icon {
  margin: 0em;
+  width: auto;
 }

 .ui.vertical.icon.menu {
@ -1084,8 +1067,12 @@
  min-width: @labeledIconMinWidth;
 }
 .ui.labeled.icon.menu > .item > .icon {
+  height: 1em;
  display: block;
  font-size: @labeledIconSize !important;
+  margin: 0em @labeledIconTextMargin 0em 0em !important;
+}
+.ui.vertical.labeled.icon.menu > .item > .icon {
  margin: 0em auto @labeledIconTextMargin !important;
 }

@ -1171,12 +1158,13 @@
  color: @invertedSubMenuColor;
 }
 .ui.inverted.menu .dropdown .menu .item {
-  color: @dropdownTextColor !important;
-  transition: none;
+  background: @dropdownItemBackground !important;
+  color: @dropdownItemColor !important;
+  transition: @dropdownItemTransition;
 }
 .ui.inverted.menu .dropdown .menu .item:hover {
-  background: @dropdownBackgroundHover !important;
-  color: @dropdownTextColorHover !important;
+  background: @dropdownHoveredItemBackground !important;
+  color: @dropdownHoveredItemColor !important;
 }
 .ui.inverted.menu .item.disabled,
 .ui.inverted.menu .item.disabled:hover {
@ -1357,14 +1345,14 @@
 .ui.horizontally.fitted.menu .item,
 .ui.horizontally.fitted.menu .item .menu .item,
 .ui.menu .horizontally.fitted.item {
-  padding-top: @verticalPadding;
-  padding-bottom: @verticalPadding;
+  padding-top: @itemVerticalPadding;
+  padding-bottom: @itemVerticalPadding;
 }
 .ui.vertically.fitted.menu .item,
 .ui.vertically.fitted.menu .item .menu .item,
 .ui.menu .vertically.fitted.item {
-  padding-left: @horizontalPadding;
-  padding-right: @horizontalPadding;
+  padding-left: @itemHorizontalPadding;
+  padding-right: @itemHorizontalPadding;
 }

 /*--------------
@ -1399,7 +1387,6 @@

 .ui.menu.fluid,
 .ui.vertical.menu.fluid {
-  display: block;
  width: 100% !important;
 }

@ -1415,6 +1402,9 @@
  padding-right: 0px !important;
  text-align: center;
 }
+.ui.item.menu .item {
+  display: block;
+}
 .ui.menu.two.item .item {
  width: 50%;
 }
@ -1449,6 +1439,10 @@
  width: 8.333%;
 }

+/* Dropdown */
+.ui.item.menu .dropdown .menu .item {
+  width: 100%;
+}

 /*--------------
     Fixed
@ -1609,12 +1603,6 @@
 .ui.large.menu .item {
  font-size: @large;
 }
-.ui.large.menu .item .item {
-  font-size: @largeSubMenu;
-}
-.ui.large.menu .dropdown .item {
-  font-size: @largeDropdown;
-}
 .ui.large.vertical.menu {
  width: @largeWidth;
 }
--- a/src/definitions/elements/input.less
+++ b/src/definitions/elements/input.less
@ -346,7 +346,10 @@

 .ui.action.input > .button,
 .ui.action.input > .buttons {
+  display: flex;
+  align-items: center;
  flex: 1 0 auto;
+  align-items: center;
 }
 .ui.action.input > .button,
 .ui.action.input > .buttons > .button {
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@ -15,28 +15,29 @@
      Collection
 --------------------*/

-@margin: 1rem 0rem;
-@verticalPadding: 0.78571em;
-@horizontalPadding: 0.95em;
-
+/* Menu */
+@margin: 1em 0rem;
@background: #FFFFFF;
@itemBackground: none;
-
@fontWeight: normal;
+@borderWidth: 1px;
@boxShadow:
-  0px 0px 0px 1px @borderColor,
+  0px 0px 0px @borderWidth @borderColor,
  @subtleShadow
 ;
+@borderRadius: @defaultBorderRadius;

-@borderSize: 0em;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
+/* Menu Item */
+@itemVerticalPadding: @relativeSmall;
+@itemHorizontalPadding: @relativeLarge;
+@itemTransition:
+  opacity @transitionDuration @transitionEasing,
+  background @transitionDuration @transitionEasing,
+  box-shadow @transitionDuration @transitionEasing
 ;
-@borderRadius: @defaultBorderRadius;
+@itemTextColor: @textColor;

+/* Divider */
@dividerSize: 1px;
@dividerBackground: linear-gradient(
  rgba(0, 0, 0, 0.05) 0%,
@ -44,26 +45,20 @@
  rgba(0, 0, 0, 0.05) 100%)
 ;

-@headerBackground: rgba(0, 0, 0, 0.04);
-@headerWeight: bold;
-
-@textLineHeight: 1.3;
-
-@transition:
-  opacity 0.2s ease,
-  background 0.2s ease,
-  box-shadow 0.2s ease
-;
-
-@menuTextColor: @textColor;
-
 /* Sub Menu */
@subMenuMargin: 0.5em;
-@subMenuFontSize: 0.875rem;
+@subMenuFontSize: 0.875em;
@subMenuTextColor: rgba(0, 0, 0, 0.5);

-@subMenuHorizontalPadding: 0.5rem;
-@subMenuVerticalPadding: 1.5rem;
+@subMenuHorizontalPadding: 0.5em;
+@subMenuVerticalPadding: 1.5em;
+
+/* Header Item */
+@headerBackground: rgba(0, 0, 0, 0.04);
+@headerWeight: bold;
+
+/* Text Item */
+@textLineHeight: 1.3;

 /*--------------
    Elements
@ -90,15 +85,16 @@
 ---------------*/

 /* Button */
-@buttonOffset: -0.05em;
-@buttonVerticalPadding: 0.55em;
-@buttonSize: 0.875em;
+@buttonSize: @medium;
+@buttonOffset: 0em;
+@buttonMargin: -0.4em 0em;
+@buttonVerticalPadding: 0.6em;

 /* Input */
-@inputSize: 1em;
-@inputVerticalMargin: -0.6em;
+@inputSize: @medium;
+@inputVerticalMargin: -0.5em;
@inputOffset: 0em;
-@inputVerticalPadding: 0.4em;
+@inputVerticalPadding: 0.5em;

@smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em;
@ -123,10 +119,14 @@
@dropdownMenuOffset: 0px;
@dropdownPointingDistance: 0px;

-@dropdownTextColor: @textColor;
-@dropdownBackgroundHover: @transparentBlack;
-@dropdownTextColorHover: @darkTextColor;
+@dropdownItemBackground: transparent;
+@dropdownItemTextColorHover: @selectedTextColor;
@dropdownIconMargin: 0em 0em 0em 1em;
+@dropdownItemColor: @textColor;
+@dropdownItemTransition: none;
+
+@dropdownHoveredItemBackground: @transparentBlack;
+@dropdownHoveredItemColor: @selectedTextColor;

@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
@ -157,9 +157,10 @@

@activeBackground: @subtleTransparentBlack;
@activeColor: @darkTextColor;
-@activeBorderSize: 2px;
+@activePointerSize: 0px;
@activeFontWeight: normal;
@activeIconOpacity: 1;
+@activeBoxShadow: none;

@activeHoverBackground: @hoverBackground;
@subMenuActiveBackground: transparent;
@ -174,6 +175,7 @@
 ---------------*/

 /* Vertical */
+@verticalPointerWidth: 2px;
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: linear-gradient(to right,
@ -182,6 +184,9 @@
  rgba(0, 0, 0, 0.03) 100%)
 ;

+@verticalActivePointerSize: 2px;
+@verticalActiveBoxShadow: @verticalActivePointerSize 0em 0em inset;
+

 /* Secondary */
@secondaryBackground: none;
@ -244,11 +249,10 @@
@tabularBackgroundColor: #FFFFFF;
@tabularBorderWidth: 1px;
@tabularHorizontalPadding: 1.4em;
-@tabularMenuTextColor: @menuTextColor;
+@tabularMenuTextColor: @itemTextColor;

@tabularFluidOffset: 1px;
@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
-
@tabularActiveColor: @selectedTextColor;
@tabularActiveBoxShadow: none;

@ -266,7 +270,24 @@
@labeledIconTextMargin: 0.5em;

 /* Text */
-@textMenuTransition: opacity 0.2s ease;
+@textMenuItemSpacing: 1em;
+@textMenuItemOpacity: 0.8;
+@textMenuItemMargin: 0em @textMenuItemSpacing;
+
+@textMenuMargin: 1em -@textMenuItemSpacing;
+@textMenuTransition: opacity @transitionDuration @transitionEasing;
+
+@textMenuHeaderSize: @relativeSmall;
+@textMenuHeaderColor: @darkTextColor;
+@textMenuHeaderFontWeight: bold;
+@textMenuHeaderTextTransform: uppercase;
+
+@textVerticalMenuMargin: 1em 0em;
+@textVerticalMenuHeaderMargin: 1.25em 0em;
+@textVerticalMenuItemMargin: @textMenuItemSpacing 0em;
+
+@textVerticalMenuIconFloat: none;
+@textVerticalMenuIconMargin: @iconMargin;

 /*--------------
   Variations
@ -303,14 +324,14 @@

 /* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
-  rgba(255, 255, 255, 0.03) 0%,
+  rgba(255, 255, 255, 0.06) 0%,
  rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
+  rgba(255, 255, 255, 0.06) 100%)
 ;
@invertedVerticalDividerBackground: linear-gradient(to right,
-  rgba(255, 255, 255, 0.03) 0%,
+  rgba(255, 255, 255, 0.06) 0%,
  rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.03) 100%)
+  rgba(255, 255, 255, 0.06) 100%)
 ;

 /* Fixed */
@ -320,7 +341,6 @@
@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;

 /* Sizes */
-@small: 0.875rem;
@smallSubMenu: 0.875rem;
@smallWidth: 13rem;

@ -328,6 +348,4 @@
@mediumWidth: 15rem;

@large: 1.125rem;
-@largeSubMenu: 0.875rem;
-@largeDropdown: 1rem;
@largeWidth: 18rem;
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@ -2,8 +2,8 @@
      Collection
 --------------------*/

-@verticalPadding       : 1em;
-@horizontalPadding     : 1.25em;
+@itemVerticalPadding       : 1em;
+@itemHorizontalPadding     : 1.25em;

@background            : #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
@fontWeight            : normal;
@ -18,7 +18,7 @@

@boxShadow             :
  0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-  0px 0px 0px 1px rgba(0, 0, 0, 0.05)
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1)
 ;

@headerBackground: rgba(0, 0, 0, 0.08);