fixes to icon menu and some other variations

Former-commit-id: 2cfc0bf3b4b347952fe6837b7685f08e0fbce508
Former-commit-id: 7e7085a9e3ac97cbedf9456f74ef1a20a38d0d3a

node/src/documents/elements/button.html

@@ -216,8 +216,8 @@ type       : 'UI Element'
     </div>
   </div>
 
-  <h4 class="ui header">Feedback</h4>
   <div class="example">
+    <h4 class="ui header">Feedback</h4>
     <p>Can be positive or negative:</p>
     <div class="positive ui button">Positive Button</div>
     <div class="negative ui button">Negative Button</div>

node/src/files/components/semantic/collections/menu.css

@@ -901,15 +901,16 @@
   display: inline-block;
   height: auto;
 }
-.ui.icon.menu .item {
+.ui.icon.menu > .item {
+  height: auto;
   text-align: center;
   color: rgba(60, 60, 60, 0.7);
 }
-.ui.icon.menu .item .icon {
+.ui.icon.menu > .item > .icon {
   display: block;
-  float: none;
+  float: none !important;
   opacity: 1;
-  margin: 0em auto;
+  margin: 0em auto !important;
 }
 .ui.icon.menu .icon:before {
   opacity: 1;
@@ -918,6 +919,9 @@
 .ui.menu .icon.item .icon {
   margin: 0em;
 }
+.ui.vertical.icon.menu {
+  float: none;
+}
 /*--- inverted ---*/
 .ui.inverted.icon.menu .item {
   color: rgba(255, 255, 255, 0.8);
@@ -931,10 +935,10 @@
 .ui.labeled.icon.menu {
   text-align: center;
 }
-.ui.labeled.icon.menu .icon {
+.ui.labeled.icon.menu > .item > .icon {
   display: block;
-  font-size: 1.5em;
-  margin: 0em auto 0.3em;
+  font-size: 1.5em !important;
+  margin: 0em auto 0.3em !important;
 }
 /*******************************
            Variations
@@ -1069,6 +1073,27 @@
 .ui.inverted.pointing.menu .active.item:hover:after {
   background-color: #3B3B3B;
 }
+/*--------------
+    Selection
+---------------*/
+.ui.selection.menu > .item {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.selection.menu > .item:hover {
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.selection.menu > .item.active {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.inverted.selection.menu > .item {
+  color: rgba(255, 255, 255, 0.4);
+}
+.ui.inverted.selection.menu > .item:hover {
+  color: rgba(255, 255, 255, 0.6);
+}
+.ui.inverted.selection.menu > .item.active {
+  color: rgba(255, 255, 255, 0.85);
+}
 /*--------------
      Floated
 ---------------*/