Fixes dropdown formatting and icon buttons formatting inside menu #641

src/collections/menu.less

@@ -117,18 +117,16 @@
 .ui.menu .item .item .item > a:not(.button) {
   color: rgba(30, 30, 30, 0.6);
 }
-.ui.menu .dropdown.item .menu .item,
-.ui.menu .dropdown.item .menu .item a:not(.button) {
+.ui.menu .dropdown .menu .item,
+.ui.menu .dropdown .menu .item a:not(.button) {
   color: rgba(0, 0, 0, 0.75);
 }
 /* Hover */
 .ui.menu .item .menu a.item:hover,
-.ui.menu .item .menu a.item.hover,
-.ui.menu .item .menu .link.item:hover,
-.ui.menu .item .menu .link.item.hover {
+.ui.menu .item .menu .link.item:hover {
   color: rgba(0, 0, 0, 0.85);
 }
-.ui.menu .dropdown.item .menu .item a:not(.button):hover {
+.ui.menu .dropdown .menu .item a:not(.button):hover {
   color: rgba(0, 0, 0, 0.85);
 }
 /* Active */
@@ -306,6 +304,11 @@
 /*--------------
     Dropdowns
 ---------------*/
+
+.ui.menu .dropdown .menu .item .icon {
+  float: none;
+  margin: 0em 0.75em 0em 0em;
+}
 .ui.menu .dropdown.item .menu {
   left: 1px;
   margin: 0px;
@@ -368,15 +371,13 @@
 ---------------*/
 
 .ui.link.menu .item:hover,
-.ui.menu .item.hover,
 .ui.menu .link.item:hover,
 .ui.menu a.item:hover,
-.ui.menu .ui.dropdown .menu .item.hover,
 .ui.menu .ui.dropdown .menu .item:hover {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.02);
 }
-.ui.menu .ui.dropdown.active {
+.ui.menu .ui.dropdown.item.active {
   background-color: rgba(0, 0, 0, 0.02);
 
   -webkit-box-shadow: none;
@@ -460,8 +461,7 @@
 ---------------*/
 
 .ui.menu .item.disabled,
-.ui.menu .item.disabled:hover,
-.ui.menu .item.disabled.hover {
+.ui.menu .item.disabled:hover {
   cursor: default;
   color: rgba(0, 0, 0, 0.2);
   background-color: transparent !important;
@@ -515,12 +515,12 @@
   float: right;
   text-align: center;
 }
-.ui.vertical.menu .item > .icon:not(.input) {
+.ui.vertical.menu .item > i.icon {
   float: right;
   width: 1.22em;
   margin: 0em 0em 0em 0.5em;
 }
-.ui.vertical.menu .item > .label + .icon {
+.ui.vertical.menu .item > .label + i.icon {
   float: none;
   margin: 0em 0.25em 0em 0em;
 }
@@ -582,7 +582,7 @@
 .ui.vertical.menu .dropdown.item .menu .item {
   font-size: 1rem;
 }
-.ui.vertical.menu .dropdown.item .menu .item .icon {
+.ui.vertical.menu .dropdown.item .menu .item i.icon {
   margin-right: 0em;
 }
 .ui.vertical.menu .dropdown.item.active {
@@ -611,8 +611,7 @@
 .ui.tiered.menu > .sub.menu > .item {
   color: rgba(0, 0, 0, 0.4);
 }
-.ui.tiered.menu > .menu > .item:hover,
-.ui.tiered.menu > .menu > .item.hover {
+.ui.tiered.menu > .menu > .item:hover {
   color: rgba(0, 0, 0, 0.8);
 }
 .ui.tiered.menu .item.active {
@@ -673,8 +672,7 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
-.ui.inverted.tiered.menu > .menu > .item:hover,
-.ui.inverted.tiered.menu > .menu > .item.hover {
+.ui.inverted.tiered.menu > .menu > .item:hover {
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.inverted.tiered.menu .active.item:after {
@@ -778,7 +776,7 @@
   min-width: 3em;
   text-align: center;
 }
-.ui.pagination.menu .icon.item .icon {
+.ui.pagination.menu .icon.item i.icon {
   vertical-align: top;
 }
 .ui.pagination.menu.floated {
@@ -1012,7 +1010,6 @@
   border-radius: 0em;
 }
 /* Hover */
-.ui.secondary.vertical.pointing.menu > .item.hover,
 .ui.secondary.vertical.pointing.menu > .item:hover {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.7);
@@ -1158,7 +1155,7 @@
   clear: left;
   margin: 0.5em 0em;
 }
-.ui.vertical.text.menu .item > .icon {
+.ui.vertical.text.menu .item > i.icon {
   float: none;
   margin: 0em 0.83em 0em 0em;
 }
@@ -1167,7 +1164,6 @@
 }
 
 /*--- hover ---*/
-.ui.text.menu .item.hover,
 .ui.text.menu .item:hover {
   opacity: 1;
   background-color: transparent;
@@ -1327,13 +1323,12 @@
 .ui.inverted.menu .item .item > a {
   color: rgba(255, 255, 255, 0.8);
 }
-.ui.inverted.menu .dropdown.item .menu .item,
-.ui.inverted.menu .dropdown.item .menu .item a {
+.ui.inverted.menu .dropdown .menu .item,
+.ui.inverted.menu .dropdown .menu .item a {
   color: rgba(0, 0, 0, 0.75) !important;
 }
 .ui.inverted.menu .item.disabled,
-.ui.inverted.menu .item.disabled:hover,
-.ui.inverted.menu .item.disabled.hover {
+.ui.inverted.menu .item.disabled:hover {
   color: rgba(255, 255, 255, 0.2);
 }
 
@@ -1397,20 +1392,15 @@
 
 /*--- Hover ---*/
 .ui.link.inverted.menu .item:hover,
-.ui.inverted.menu .item.hover,
 .ui.inverted.menu .link.item:hover,
 .ui.inverted.menu a.item:hover,
-.ui.inverted.menu .dropdown.item.hover,
 .ui.inverted.menu .dropdown.item:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
 .ui.inverted.menu a.item:hover,
-.ui.inverted.menu .item.hover,
 .ui.inverted.menu .item > a:hover,
 .ui.inverted.menu .item .menu a.item:hover,
-.ui.inverted.menu .item .menu a.item.hover,
-.ui.inverted.menu .item .menu .link.item:hover,
-.ui.inverted.menu .item .menu .link.item.hover {
+.ui.inverted.menu .item .menu .link.item:hover {
   color: rgba(255, 255, 255, 1);
 }
 
@@ -1760,7 +1750,6 @@
 .ui.pointing.menu .active.item:after {
   background-color: #FCFCFC;
 }
-.ui.pointing.menu .active.item.hover:after,
 .ui.pointing.menu .active.item:hover:after {
   background-color: #FAFAFA;
 }
@@ -1825,7 +1814,7 @@
 .ui.large.menu .item .item {
   font-size: 0.875rem;
 }
-.ui.large.menu .dropdown.item .item {
+.ui.large.menu .dropdown .item {
   font-size: 1rem;
 }
 .ui.large.vertical.menu {