Add flexbox version of menu

RELEASE-NOTES.md

@@ -10,6 +10,7 @@
 - **Loader** - `inline loader` now has a `centered` variation
 
 **Bugs**
+- **Input** - Fix bug with vertical centering of `ui action input` inside `menu` due to `flexbox` changes
 - **Menu** - Fix vertical pointing menu, sub menu arrow color
 - **Item ** - `img` inside of `ui item content` now do not receive formatting by default
 

src/definitions/collections/menu.less

@@ -28,9 +28,9 @@
 ---------------*/
 
 .ui.menu {
+  display: flex;
   margin: @margin;
   background: @background;
-  font-size: 0em;
   font-weight: @fontWeight;
   box-shadow: @boxShadow;
   border-radius: @borderRadius;
@@ -54,8 +54,14 @@
 .ui.menu .menu {
   margin: 0em;
 }
-.ui.menu:not(.vertical) .menu {
-  font-size: 0em;
+
+
+.ui.menu:not(.vertical) > .menu {
+  display: flex;
+}
+.ui.menu:not(.vertical) .item {
+  display: flex;
+  align-items: center;
 }
 
 /*--------------
@@ -83,7 +89,6 @@
 
 .ui.menu .item {
   position: relative;
-  display: inline-block;
   padding: @verticalPadding @horizontalPadding;
   border-top: @borderSize solid transparent;
 
@@ -105,11 +110,13 @@
 }
 .ui.menu:not(.vertical) .item.left,
 .ui.menu:not(.vertical) .menu.left {
-  float: left;
+  display: flex;
+  margin-right: auto;
 }
 .ui.menu:not(.vertical) .item.right,
 .ui.menu:not(.vertical) .menu.right {
-  float: right;
+  display: flex;
+  margin-left: auto;
 }
 
 
@@ -126,7 +133,7 @@
   height: 100%;
   background: @dividerBackground;
 }
-.ui.menu > .right.menu:first-child {
+.ui.menu > .right.menu:first-child:before {
   display: none;
 }
 .ui.menu .menu.right .item:before,
@@ -168,6 +175,7 @@
   margin-left: @dropdownIconDistance;
 }
 
+
 /*--------------
      Button
 ---------------*/
@@ -175,7 +183,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 +213,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;
-}
 
 
 /*--------------
@@ -412,14 +399,15 @@
 ---------------*/
 
 .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;
@@ -482,9 +470,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;
 }
@@ -510,6 +495,12 @@
      Tiered
 ---------------*/
 
+.ui.tiered.menu {
+  flex-wrap: wrap;
+}
+.ui.tiered.menu > .menu {
+  width: 100%;
+}
 .ui.tiered.menu > .menu > .item:hover {
   color: @tieredSubMenuActiveColor;
 }
@@ -665,7 +656,7 @@
 
 .ui.pagination.menu {
   margin: 0em;
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
 }
 
@@ -922,14 +913,17 @@
 ---------------*/
 
 .ui.text.menu {
-  display: inline-block;
+  display: inline-flex;
   background: none transparent;
 
-  margin: 1rem -1rem;
+  margin: 1em -1em;
   border-radius: 0px;
 
   box-shadow: none;
 }
+.ui.vertical.text.menu {
+  display: inline-block;
+}
 .ui.text.menu > .item {
   opacity: 0.8;
 
@@ -968,7 +962,7 @@
 
 /*--- vertical text ---*/
 .ui.vertical.text.menu {
-  margin: 1rem 0em;
+  margin: 1em 0em;
 }
 .ui.vertical.text.menu:first-child {
   margin-top: 0rem;
@@ -1005,6 +999,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 +1032,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;
@@ -1394,7 +1396,6 @@
 
 .ui.menu.fluid,
 .ui.vertical.menu.fluid {
-  display: block;
   width: 100% !important;
 }
 
@@ -1604,12 +1605,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;
 }

src/definitions/elements/input.less

@@ -344,7 +344,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 {

src/themes/default/collections/menu.variables

@@ -15,7 +15,7 @@
       Collection
 --------------------*/
 
-@margin: 1rem 0rem;
+@margin: 1em 0rem;
 @verticalPadding: 0.78571em;
 @horizontalPadding: 0.95em;
 
@@ -59,11 +59,11 @@
 
 /* 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;
 
 /*--------------
     Elements
@@ -90,15 +90,16 @@
 ---------------*/
 
 /* Button */
-@buttonOffset: -0.05em;
-@buttonVerticalPadding: 0.55em;
-@buttonSize: 0.875em;
+@buttonSize: @medium;
+@buttonOffset: 0em;
+@buttonMargin: -0.2em 0em;
+@buttonVerticalPadding: 0.7em;
 
 /* Input */
-@inputSize: 1em;
-@inputVerticalMargin: -0.6em;
+@inputSize: @medium;
+@inputVerticalMargin: -0.5em;
 @inputOffset: 0em;
-@inputVerticalPadding: 0.4em;
+@inputVerticalPadding: 0.5em;
 
 @smallInputOffset: 0em;
 @smallInputVerticalPadding: 0.4em;
@@ -319,7 +320,6 @@
 @attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
 
 /* Sizes */
-@small: 0.875rem;
 @smallSubMenu: 0.875rem;
 @smallWidth: 13rem;
 
@@ -327,6 +327,4 @@
 @mediumWidth: 15rem;
 
 @large: 1.125rem;
-@largeSubMenu: 0.875rem;
-@largeDropdown: 1rem;
 @largeWidth: 18rem;