Adds dropdown overriding rules to menu fixing several dropdown iossues

RELEASE-NOTES.md

@@ -9,12 +9,17 @@
 - **Menu** - Menu now uses flexbox. This allows menu items to match each others heights regardless of each items content size. `right menu` content should now follow left menu content, instead of preceding it (with float).
 
 **Enhancements**
+- **Site** - Added in `pageOverflowX` variable, default theme hides horizontal scrollbars on `body`
+- **Divider** - `vertical divider` inside `ui grid` now accounts for column padding
 - **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation
 - **Grid** - `equal height` and `equal width` now work without `row` wrappers
 - **Grid** - `equal height` rows can now be `stretched` as well as `middle aligned`, `bottom aligned` and `top aligned`!
 - **Headers** - Added new header type `sub header`, useful for displaying small headers alongside text content. See examples [in the header docs](http://www.semantic-ui.com/elements/header.html#sub-headers)
 - **Menu** - Added many new variables to menu
 - **Menu** - Horizontal menus now set a default image size for images / logos
+- **Menu** - Fixed several inheritance issues for `dropdown item` inside `menu` appearing as `menu item`.
+- **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`.
+- **Menu** - Vertical dropdown menus are no longer 100% width
 - **Menu** - Menus items are now slightly more padded
 - **Segment** - Added `padded` and `very padded` segment variations
 - **Sidebar** - Improved animation performance through performance debugging. Sidebar now caches, width, height, rtl direction on load.
@@ -23,6 +28,7 @@
 - **Visibility/Sticky** - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events
 
 **Changes**
+- **Dropdown** - Dropdown padding values now resolve to exact pixel values from em
 - **Grid** - Small computer `page grid` gutters have been adjusted from 8% to 3% to allow for roomier layouts on small screens.
 - **Header/Table/Divider** - These components now pull border color defaults from `site.variables` instead of using their own values
 - **Input** - Input now use `em` instead of `rem` so they will inherit the size of the elements they are nested inside
@@ -35,9 +41,11 @@
 
 **Bugs**
 - **All Modules** - Performance logging now delays 500ms instead of 100ms for console logging to ensure all logs are captured in one group
+- **Card** - Fix card dimmer not appearing in minified release due to use of background shorthand property
 - **Checkbox** - Fix `disabled checkbox` sometimes displaying hand cursor
+- **Checkbox** - Fixes nested `dropdown` inside `checkbox` causing issues
 - **Dropdown** - Fix bug where `onChange` would call even when reselecting current value
-- **Dropdown** - Fixes issue with disappearing headers inside of `ui dropdown` when nested in `ui menu`
+- **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu`
 - **Form** - Form sizes and input sizes now inherit from `site.variables`
 - **Grid** - `x column wide` inside `equal width/height` now cannot grow beyond column size
 - **Grid** - Fixes colored grid columns not appearing when not nested in rows

src/definitions/collections/menu.less

@@ -113,7 +113,6 @@
 .ui.menu .item > p:only-child {
   user-select: text;
   line-height: @textLineHeight;
-  color: @textColor;
 }
 .ui.menu .item > p:first-child {
   margin-top: 0;
@@ -132,11 +131,6 @@
   margin: @iconMargin;
 }
 
-.ui.menu .item > i.dropdown.icon {
-  float: @dropdownIconFloat;
-  margin-left: @dropdownIconDistance;
-}
-
 /*--------------
      Button
 ---------------*/
@@ -218,34 +212,86 @@
     Dropdowns
 ---------------*/
 
-/* Dropdown */
-.ui.menu .ui.dropdown.item.visible {
-  border-bottom-right-radius: 0em;
-  border-bottom-left-radius: 0em;
-  background: @subtleTransparentBlack;
-}
-.ui.menu .ui.dropdown.active {
-  box-shadow: none;
+/* Dropdown Icon */
+.ui.menu .item > i.dropdown.icon {
+  float: @dropdownIconFloat;
+  margin-left: @dropdownIconDistance;
 }
 
-/* Menu Position */
+/* Menu */
 .ui.menu .dropdown.item .menu {
   left: 0px;
-  background: @dropdownBackground;
-  margin: @dropdownMenuOffset 0px 0px;
   min-width: ~"calc(100% - 1px)";
-  box-shadow: @dropdownBoxShadow;
+  background: @dropdownBackground;
+  margin: @dropdownMenuDistance 0px 0px;
+  box-shadow: @dropdownMenuBoxShadow;
 }
-.ui.menu .dropdown.item .menu .item {
+
+
+/* Menu Items */
+.ui.menu .ui.dropdown .menu > .item {
   display: block;
+  font-size: @dropdownItemFontSize !important;
+  padding: @dropdownItemPadding !important;
+  background: @dropdownItemBackground !important;
+  color: @dropdownItemColor !important;
+  text-transform: @dropdownItemTextTransform !important;
+  font-weight: @dropdownItemFontWeight !important;
+  box-shadow: @dropdownItemBoxShadow !important;
+  transition: @dropdownItemTransition !important;
+}
+.ui.menu .ui.dropdown .menu > .item:hover {
+  background: @dropdownHoveredItemBackground !important;
+  color: @dropdownHoveredItemColor !important;
+}
+.ui.menu .ui.dropdown .menu > .active.item {
+  background: @dropdownActiveItemBackground !important;
+  font-weight: @dropdownActiveItemFontWeight !important;
+  color: @dropdownActiveItemColor !important;
+}
+
+
+
+/* Secondary */
+.ui.secondary.menu .dropdown.item > .menu,
+.ui.text.menu .dropdown.item > .menu {
+  border-radius: @dropdownMenuBorderRadius;
+  margin-top: @secondaryDropdownMenuDistance;
+}
+
+/* Pointing */
+.ui.menu .pointing.dropdown.item .menu {
+  margin-top: @pointingDropdownMenuDistance;
 }
-.ui.menu:not(.secondary) .pointing.dropdown.item .menu {
-  border-top-left-radius: 0em;
+
+/* Vertical */
+.ui.vertical.menu .dropdown.item > .icon {
+  float: right;
+  content: "\f0da";
+  margin-left: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu {
+  top: 0% !important;
+  left: 100%;
+  min-width: 0;
+  margin: 0em 0em 0em @dropdownMenuDistance;
+  box-shadow: @dropdownVerticalMenuBoxShadow;
+  border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+}
+.ui.vertical.menu .active.dropdown.item {
   border-top-right-radius: 0em;
-  margin-top: @dropdownPointingDistance;
+  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;
 }
-.ui.menu .simple.dropdown.item .menu {
-  margin: 0px !important;
+
+/* Evenly Divided */
+.ui.item.menu .dropdown .menu .item {
+  width: 100%;
 }
 
 /*--------------
@@ -299,6 +345,7 @@
 
 
 .ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover {
   cursor: pointer;
@@ -322,13 +369,13 @@
      Active
 ---------------*/
 
-.ui.menu .active.item  {
+.ui.menu .active.item:not(.dropdown)  {
   background: @activeBackground;
   color: @selectedTextColor;
   font-weight: @activeFontWeight;
   box-shadow: @activeBoxShadow;
 }
-.ui.menu .active.item > i.icon {
+.ui.menu .active.item:not(.dropdown) > i.icon {
   opacity: @activeIconOpacity;
 }
 
@@ -439,47 +486,22 @@ Floated Menu / Item
   background: none !important;
 }
 
-/*--- Dropdown ---*/
-.ui.vertical.menu .dropdown.item > .icon {
-  float: right;
-  content: "\f0da";
-  margin-left: 1em;
-}
-.ui.vertical.menu .active.dropdown.item {
-  border-top-right-radius: 0em;
-  border-bottom-right-radius: 0em;
-}
-.ui.vertical.menu .dropdown.item .menu {
-  top: 0% !important;
-  left: 100%;
-  margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset;
-  box-shadow: @dropdownVerticalBoxShadow;
-  border-radius: 0em @borderRadius @borderRadius @borderRadius;
-}
-.ui.vertical.menu .dropdown.item .menu .item i.icon {
-  margin-right: 0em;
-}
-.ui.vertical.menu .dropdown.item.active {
-  box-shadow: none;
-}
 
 /*--- Sub Menu ---*/
-.ui.vertical.menu .item:not(.dropdown) > .menu {
+.ui.vertical.menu .item > .menu {
   margin: @subMenuMargin -@itemHorizontalPadding 0em;
 }
-.ui.vertical.menu .item:not(.dropdown) > .menu > .item {
+.ui.vertical.menu .menu .item {
   background: none;
   padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
   font-size: @subMenuFontSize;
   color: @subMenuTextColor;
 }
-
-.ui.vertical.menu .item:not(.dropdown) .menu a.item:hover,
-.ui.vertical.menu .item:not(.dropdown) .menu .link.item:hover {
+.ui.vertical.menu .item .menu a.item:hover,
+.ui.vertical.menu .item .menu .link.item:hover {
   color: @darkTextColor;
 }
-
-.ui.vertical.menu .item > .menu > .item:before {
+.ui.vertical.menu .menu .item:before {
   display: none;
 }
 
@@ -704,6 +726,7 @@ Floated Menu / Item
 .ui.pagination.menu .icon.item i.icon {
   vertical-align: top;
 }
+
 .ui.pagination.menu.floated {
   display: block;
 }
@@ -725,55 +748,47 @@ Floated Menu / Item
   border-radius: 0em;
   box-shadow: none;
 }
+
+/* Item */
 .ui.secondary.menu > .menu > .item,
 .ui.secondary.menu > .item {
+  align-self: center;
   box-shadow: none;
-
   border: none;
-  height: auto !important;
   background: @secondaryItemBackground;
-
-  margin: 0em @secondaryMargin;
-  padding: @secondaryVerticalPadding @secondaryHorizontalPadding;
-
-  border-radius: @secondaryBorderRadius;
+  margin: @secondaryItemMargin;
+  padding: @secondaryItemPadding;
+  border-radius: @secondaryItemBorderRadius;
+  transition: @secondaryItemTransition;
 }
+
+/* Border */
 .ui.secondary.menu > .menu > .item:before,
 .ui.secondary.menu > .item:before {
   display: none !important;
 }
 
-.ui.secondary.menu .item > .input input {
-  background-color: transparent;
-  border: none;
-}
-
-.ui.secondary.menu .link.item,
-.ui.secondary.menu a.item {
-  opacity: @secondaryLinkOpacity;
-  transition: none;
-}
+/* Header */
 .ui.secondary.menu .header.item {
+  border-radius: 0em;
   border-right: @secondaryHeaderBorder;
   background: @secondaryHeaderBackground;
-  border-radius: 0em;
 }
 
 /* Hover */
+.ui.secondary.menu .dropdown.item:hover,
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
-  opacity: 1;
+  background: @secondaryHoveredItemBackground;
+  color: @secondaryHoveredItemColor;
 }
 
 /* Active */
 .ui.secondary.menu > .menu > .active.item,
 .ui.secondary.menu > .active.item {
-  background: @secondaryActiveBackground;
-  opacity: 1;
   box-shadow: none;
-}
-.ui.secondary.vertical.menu > .active.item {
-  border-radius: @secondaryBorderRadius;
+  background: @secondaryActiveItemBackground;
+  color: @secondaryActiveItemColor;
 }
 
 /* Inverted */
@@ -781,6 +796,7 @@ Floated Menu / Item
 .ui.secondary.inverted.menu a.item {
   color: @secondaryInvertedColor;
 }
+.ui.secondary.inverted.menu .dropdown.item:hover,
 .ui.secondary.inverted.menu .link.item:hover,
 .ui.secondary.inverted.menu a.item:hover {
   color: @secondaryInvertedHoverColor;
@@ -789,11 +805,6 @@ Floated Menu / Item
   background-color: @secondaryInvertedActiveBackground;
 }
 
-/* Dropdown */
-.ui.secondary.menu > .menu > .active.dropdown.item {
-  background-color: transparent;
-}
-
 /* Disable variations */
 .ui.secondary.item.menu > .item {
   margin: 0em;
@@ -809,8 +820,8 @@ Floated Menu / Item
 
 .ui.secondary.vertical.menu > .item {
   border: none;
-  margin: 0em 0em @secondaryVerticalMargin;
-  border-radius: @borderRadius;
+  margin: @secondaryVerticalItemMargin;
+  border-radius: @secondaryVerticalItemBorderRadius;
 }
 .ui.secondary.vertical.menu > .header.item {
   border-radius: 0em;
@@ -868,7 +879,7 @@ Floated Menu / Item
   margin: @secondaryPointingItemMargin;
   padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
   border-bottom-width: @secondaryPointingBorderWidth;
-  transition: @secondaryTransition;
+  transition: @secondaryItemTransition;
 }
 
 /* Item Types */
@@ -884,7 +895,9 @@ Floated Menu / Item
 }
 
 /* Hover */
+.ui.secondary.pointing.menu > .menu > .dropdown.item:hover,
 .ui.secondary.pointing.menu > .menu > .link.item:hover,
+.ui.secondary.pointing.menu > .dropdown.item:hover,
 .ui.secondary.pointing.menu > .link.item:hover,
 .ui.secondary.pointing.menu > .menu > a.item:hover,
 .ui.secondary.pointing.menu > a.item:hover {
@@ -1119,13 +1132,12 @@ Floated Menu / Item
 }
 
 
-
 /*******************************
            Variations
 *******************************/
 
 /*--------------
-    Colors
+     Colors
 ---------------*/
 
 /*--- Light Colors  ---*/
@@ -1180,36 +1192,38 @@ Floated Menu / Item
   background: @invertedBackground;
   box-shadow: @invertedBoxShadow;
 }
-.ui.inverted.menu .header.item {
-  margin: 0em;
-  background: @invertedHeaderBackground;
-  box-shadow: none;
-}
 
+/* Menu Item */
 .ui.inverted.menu .item,
 .ui.inverted.menu .item > a:not(.ui) {
   color: @invertedTextColor;
 }
-
-.ui.inverted.menu .item:not(.dropdown).menu {
+.ui.inverted.menu .item.menu {
   background: @invertedSubMenuBackground;
 }
 
-.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item,
-.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item a:not(.ui) {
-  color: @invertedSubMenuColor;
+/*--- Border ---*/
+.ui.inverted.menu .item:before {
+  background: @invertedDividerBackground;
+}
+.ui.vertical.inverted.menu .item:before {
+  background: @invertedVerticalDividerBackground;
 }
 
-/* Inverted Dropdown */
-.ui.inverted.menu .dropdown .menu .item {
-  background: @dropdownItemBackground !important;
-  color: @dropdownItemColor !important;
-  transition: @dropdownItemTransition;
+/* Sub Menu */
+.ui.vertical.inverted.menu .menu .item,
+.ui.vertical.inverted.menu .menu .item a:not(.ui) {
+  color: @invertedSubMenuColor;
 }
-.ui.inverted.menu .dropdown .menu .item:hover {
-  background: @dropdownHoveredItemBackground !important;
-  color: @dropdownHoveredItemColor !important;
+
+/* Header */
+.ui.inverted.menu .header.item {
+  margin: 0em;
+  background: @invertedHeaderBackground;
+  box-shadow: none;
 }
+
+/* Disabled */
 .ui.inverted.menu .item.disabled,
 .ui.inverted.menu .item.disabled:hover {
   color: @invertedDisabledTextColor;
@@ -1217,25 +1231,17 @@ Floated Menu / Item
 
 
 
-/*--- Border ---*/
-.ui.inverted.menu .item:before {
-  background: @invertedDividerBackground;
-}
-.ui.vertical.inverted.menu .item:before {
-  background: @invertedVerticalDividerBackground;
-}
-
 /*--- Hover ---*/
 .ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .dropdown.item:hover,
 .ui.inverted.menu .link.item:hover,
-.ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item:hover {
+.ui.inverted.menu a.item:hover {
   background: @invertedHoverBackground;
   color: @invertedHoverColor;
 }
 
-.ui.vertical.inverted.menu .item:not(.dropdown) .menu a.item:hover,
-.ui.vertical.inverted.menu .item:not(.dropdown) .menu .link.item:hover {
+.ui.vertical.inverted.menu .item .menu a.item:hover,
+.ui.vertical.inverted.menu .item .menu .link.item:hover {
   background: @invertedSubMenuBackground;
   color: @invertedSubMenuHoverColor;
 }
@@ -1243,7 +1249,6 @@ Floated Menu / Item
 
 /*--- Pressed ---*/
 .ui.inverted.menu a.item:active,
-.ui.inverted.menu .dropdown.item:active,
 .ui.inverted.menu .link.item:active,
 .ui.inverted.menu a.item:active {
   background: @invertedMenuPressedBackground;
@@ -1483,11 +1488,6 @@ Floated Menu / Item
   width: 8.333%;
 }
 
-/* Dropdown */
-.ui.item.menu .dropdown .menu .item {
-  width: 100%;
-}
-
 /*--------------
      Fixed
 ---------------*/

src/themes/default/collections/menu.variables

@@ -47,7 +47,7 @@
 
 /* Sub Menu */
 @subMenuMargin: 0.5em;
-@subMenuFontSize: 0.875em;
+@subMenuFontSize: @tiny;
 @subMenuTextColor: rgba(0, 0, 0, 0.5);
 
 @subMenuHorizontalPadding: 0.5em;
@@ -119,22 +119,34 @@
 @labelAndIconFloat: none;
 @labelAndIconMargin: 0em 0.5em 0em 0em;
 
-/* Dropdown */
+/* Dropdown (Overrides UI Dropdown) */
+
+@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
+
 @dropdownBackground: #FFFFFF;
-@dropdownMenuOffset: 0px;
-@dropdownPointingDistance: 0px;
+@dropdownMenuDistance: 0em;
+@dropdownMenuBorderRadius: @borderRadius;
 
+@dropdownItemFontSize: @relativeMedium;
+@dropdownItemPadding: @relativeSmall @relativeLarge;
 @dropdownItemBackground: transparent;
-@dropdownItemTextColorHover: @selectedTextColor;
-@dropdownIconMargin: 0em 0em 0em 1em;
 @dropdownItemColor: @textColor;
+@dropdownItemTextTransform: none;
+@dropdownItemFontWeight: normal;
+@dropdownItemBoxShadow: none;
 @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);
+@dropdownActiveItemBackground: @transparentBlack;
+@dropdownActiveItemColor: @selectedTextColor;
+@dropdownActiveItemFontWeight: bold;
+
+/* Dropdown Variations */
+@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
+@secondaryDropdownMenuDistance: 0.25em;
+@pointingDropdownMenuDistance: 0.75em;
 
 /* Pointing Arrow */
 @arrowSize: 0.6em;
@@ -196,29 +208,30 @@
 
 /* Secondary */
 @secondaryBackground: none;
-@secondaryItemBackground: none;
 
-@secondaryTransition: color 0.2s ease;
-
-@secondaryBorderRadius: @defaultBorderRadius;
+@secondaryItemBackground: none;
+@secondaryItemMargin: 0em 0.25em;
+@secondaryItemPadding: @relativeMini @relativeSmall;
+@secondaryItemBorderRadius: @defaultBorderRadius;
+@secondaryItemTransition: color @transitionDuration @transitionEasing;
+@secondaryItemColor: @unselectedTextColor;
 
-@secondaryMargin: 0.25em;
-@secondaryVerticalMargin: 0.3em;
-@secondaryVerticalPadding: @relativeMini;
-@secondaryHorizontalPadding: @relativeSmall;
+@secondaryHoveredItemBackground: @transparentBlack;
+@secondaryHoveredItemColor: @selectedTextColor;
 
-@secondaryLinkOpacity: 0.8;
+@secondaryActiveItemBackground: @transparentBlack;
+@secondaryActiveItemColor: @selectedTextColor;
 
 @secondaryHeaderBackground: none transparent;
 @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
 
-@secondaryActiveBackground: @transparentBlack;
 @secondaryInvertedActiveBackground: @transparentWhite;
 
+@secondaryVerticalItemMargin: 0em 0em 0.3em;
+@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
 
 /* Pointing */
 @secondaryPointingBorderWidth: 2px;
-
 @secondaryPointingBorderColor: @borderColor;
 @secondaryPointingInvertedBorderColor: @whiteBorderColor;
 @secondaryPointingActiveBorderColor: @black;