Iteration on menu fixes from border changes

src/definitions/collections/menu.less

@@ -33,6 +33,7 @@
   font-family: @fontFamily;
   background: @background;
   font-weight: @fontWeight;
+  border: @border;
   box-shadow: @boxShadow;
   border-radius: @borderRadius;
   min-height: @minHeight;
@@ -266,6 +267,11 @@
   display: block;
 }
 
+.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
+  float: @dropdownItemIconFloat;
+  margin: @dropdownItemIconMargin;
+}
+
 
 /* Secondary */
 .ui.secondary.menu .dropdown.item > .menu,
@@ -303,9 +309,6 @@
   border-top-right-radius: 0em;
   border-bottom-right-radius: 0em;
 }
-.ui.vertical.menu .dropdown.item .menu .item i.icon {
-  margin-right: 0em;
-}
 .ui.vertical.menu .dropdown.item.active {
   box-shadow: none;
 }
@@ -659,6 +662,7 @@ Floated Menu / Item
   background-color: transparent;
   border-radius: 0em;
   box-shadow: none !important;
+  border: none;
   border-bottom: @tabularBorderWidth solid @tabularBorderColor;
 }
 .ui.tabular.fluid.menu {
@@ -771,6 +775,7 @@ Floated Menu / Item
 .ui.secondary.menu {
   background: @secondaryBackground;
   border-radius: 0em;
+  border: none;
   box-shadow: none;
 }
 
@@ -861,7 +866,7 @@ Floated Menu / Item
 .ui.secondary.vertical.menu > .item {
   border: none;
   margin: @secondaryVerticalItemMargin;
-  border-radius: @secondaryVerticalItemBorderRadius;
+  border-radius: @secondaryVerticalItemBorderRadius !important;
 }
 .ui.secondary.vertical.menu > .header.item {
   border-radius: 0em;
@@ -958,7 +963,7 @@ Floated Menu / Item
   border-bottom: none;
   border-right-style: solid;
   border-right-color: transparent;
-  border-radius: 0em;
+  border-radius: 0em !important;
   margin: @secondaryVerticalPointingItemMargin;
   border-right-width: @secondaryPointingBorderWidth;
 }
@@ -1006,6 +1011,7 @@ Floated Menu / Item
   background: none transparent;
   border-radius: 0px;
   box-shadow: none;
+  border: none;
 
   margin: @textMenuMargin;
 }
@@ -1699,15 +1705,29 @@ Floated Menu / Item
 .ui.menu.attached {
   margin: 0rem;
   border-radius: 0px;
+  margin-left: -@borderWidth;
+  margin-right: -@borderWidth;
+  width: @attachedWidth;
   box-shadow: @attachedBoxShadow; /* avoid rgba multiplying */
 }
 .ui.top.attached.menu {
   border-radius: @borderRadius @borderRadius 0em 0em;
 }
-.ui.menu.bottom.attached {
+.ui.bottom.attached.menu {
+  border-top: none;
   border-radius: 0em 0em @borderRadius @borderRadius;
 }
 
+.ui.top.attached.menu:not(.tabular) {
+  border-bottom: none;
+}
+
+.ui.attached.tabular.menu {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
 /*--------------
      Sizes
 ---------------*/

src/themes/default/collections/menu.variables

@@ -22,10 +22,8 @@
 @itemBackground: none;
 @fontWeight: normal;
 @borderWidth: 1px;
-@boxShadow:
-  0px 0px 0px @borderWidth @borderColor,
-  @subtleShadow
-;
+@border: @borderWidth solid @borderColor;
+@boxShadow: @subtleShadow;
 @borderRadius: @defaultBorderRadius;
 @minHeight: (@itemVerticalPadding * 2) + 1em;
 
@@ -43,11 +41,7 @@
 
 /* Divider */
 @dividerSize: 1px;
-@dividerBackground: linear-gradient(
-  rgba(0, 0, 0, 0.05) 0%,
-  rgba(0, 0, 0, 0.1) 50%,
-  rgba(0, 0, 0, 0.05) 100%)
-;
+@dividerBackground: @borderColor;
 
 /* Sub Menu */
 @subMenuDistance: 0.5em;
@@ -138,6 +132,9 @@
 @dropdownItemBoxShadow: none;
 @dropdownItemTransition: none;
 
+@dropdownItemIconFloat: none;
+@dropdownItemIconMargin: 0em 0.75em 0em 0em;
+
 @dropdownHoveredItemBackground: @transparentBlack;
 @dropdownHoveredItemColor: @selectedTextColor;
 
@@ -210,17 +207,9 @@
 @verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
 @verticalItemBackground: none;
-@verticalDividerBackground: linear-gradient(to right,
-  rgba(0, 0, 0, 0.03) 0%,
-  rgba(0, 0, 0, 0.1) 1.5em,
-  rgba(0, 0, 0, 0.03) 100%)
-;
+@verticalDividerBackground: @borderColor;
 
-@verticalActivePointerSize: @verticalPointerWidth;
-@verticalActiveBoxShadow:
-  (@verticalActivePointerSize - @borderWidth) 0em 0em inset,
-  -@borderWidth 0em 0em
-;
+@verticalActiveBoxShadow: none;
 
 
 /* Secondary */
@@ -396,18 +385,15 @@
 @secondaryInvertedHoverColor: @invertedSelectedTextColor;
 
 /* Inverted Menu Divider */
-@invertedDividerBackground: rgba(255, 255, 255, 0.08);
-@invertedVerticalDividerBackground: linear-gradient(to right,
-  rgba(255, 255, 255, 0.06) 0%,
-  rgba(255, 255, 255, 0.1) 50%,
-  rgba(255, 255, 255, 0.06) 100%)
-;
+@invertedDividerBackground: @invertedBorderColor;
+@invertedVerticalDividerBackground: @invertedBorderColor;
 
 /* Fixed */
 @fixedGridMargin: 2.75rem;
 
 /* Attached */
-@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor;
+@attachedBoxShadow: none;
+@attachedWidth: ~"calc(100% + "@borderWidth * 2~")";
 
 /* Sizes */
 @smallWidth: 13rem;

src/themes/default/elements/segment.variables

@@ -76,10 +76,10 @@
 /* Attached */
 @attachedTopOffset: 0px;
 @attachedBottomOffset: 0px;
-@attachedHorizontalOffset: -1px;
+@attachedHorizontalOffset: -@borderWidth;
 @attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
 @attachedBoxShadow: none;
-@attachedBorder: 1px solid @solidBorderColor;
+@attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
   @attachedBoxShadow,
   @subtleShadow

src/themes/default/globals/site.variables

@@ -358,7 +358,7 @@
 
 @circularRadius                : 500rem;
 
-@borderColor                   : rgba(34, 36, 38, 0.2);
+@borderColor                   : rgba(34, 36, 38, 0.15);
 @selectedBorderColor           : rgba(34, 36, 38, 0.3);
 @disabledBorderColor           : rgba(34, 36, 38, 0.5);