Fix horizontal align with image/icon in list

RELEASE-NOTES.md

@@ -85,6 +85,7 @@
 - **Input** - Action input now supports multiple buttons, and dropdown
 - **Label** - Labels now have `active` and `active hover` states
 - **Label** - Label now sets an `img` height even when not using an `image label`
+- **List** - Any content inside a `ui list` can now be vertically aligned
 - **Menu** - Added `stackable` menu variation for simple responsive menus
 - **Menu** - Added many new variables to menu
 - **Menu** - Fixed several inheritance issues for `dropdown item` inside `menu` appearing as `menu item`.
@@ -156,6 +157,7 @@
 - **Input** - Fixed improper left padding on `transparent left icon input` **Thanks @zxfwinder**
 - **Input** - Fixed `placeholder` color not changing correctly on focus **Thanks @zxfwinder**
 - **Label** - Labels inside `header` now vertical align better by accounting for line height offset
+- **List** - `horizontal list` are now aligned `middle` by default, while vertical lists are aligned `top`.
 - **List** - Fixes numbers not appearing when using `inverted ordered list` **Thanks @pcj**
 - **List** - `a` elements inside a `ui list` will no longer apply styles on `ui` elements like `button` **Thanks @ahtinurme**
 - **List** - Bullets and numbers are no longer selectable in `bulleted list` and `ordered list`

src/definitions/elements/list.less

@@ -105,10 +105,6 @@ ol.ui.list ol,
   vertical-align: @iconContentVerticalAlign;
   transition: @iconTransition;
 }
-.ui.list .list > .item i[class*="top aligned"].icon,
-.ui.list > .item > i[class*="top aligned"].icon {
-  vertical-align: top;
-}
 .ui.list .list > .item > i.icon:only-child,
 .ui.list > .item > i.icon:only-child {
   display: inline-block;
@@ -125,10 +121,6 @@ ol.ui.list ol,
   padding-right: @imageDistance;
   vertical-align: @imageAlign;
 }
-.ui.list .list > .item > [class*="top aligned"].image,
-.ui.list > .item > [class*="top aligned"].image {
-  vertical-align: top;
-}
 .ui.list .list > .item > .image img,
 .ui.list > .item > .image img {
   vertical-align: @imageAlign;
@@ -159,10 +151,6 @@ ol.ui.list ol,
 .ui.list > .item > img.image + .content {
   display: inline-block;
 }
-.ui.list .list > .item [class*="top aligned"].content,
-.ui.list > .item > [class*="top aligned"].content {
-  vertical-align: top;
-}
 .ui.list .list > .item > .content > .list,
 .ui.list > .item > .content > .list {
   margin-left: 0em;
@@ -280,6 +268,15 @@ ol.ui.list ol,
   padding-bottom: 0em;
 }
 
+.ui.horizontal.list > .item > .image,
+.ui.horizontal.list .list > .item > .image,
+.ui.horizontal.list > .item > .icon,
+.ui.horizontal.list .list > .item > .icon,
+.ui.horizontal.list > .item > .content,
+.ui.horizontal.list .list > .item > .content {
+  vertical-align: @horizontalVerticalAlign;
+}
+
 /* Padding on all elements */
 .ui.horizontal.list > .item:first-child,
 .ui.horizontal.list > .item:last-child {
@@ -369,6 +366,23 @@ ol.ui.list ol,
   color: @invertedItemLinkHoverColor !important;
 }
 
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.list[class*="top aligned"],
+.ui.list [class*="top aligned"] {
+  vertical-align: top;
+}
+.ui.list[class*="middle aligned"],
+.ui.list [class*="middle aligned"] {
+  vertical-align: middle;
+}
+.ui.list[class*="bottom aligned"],
+.ui.list [class*="bottom aligned"] {
+  vertical-align: bottom;
+}
+
 /*-------------------
        Link
 --------------------*/

src/themes/default/elements/list.variables

@@ -79,6 +79,7 @@
 /* Horizontal */
 @horizontalSpacing: 1em;
 @horizontalIconDistance: 0.25em;
+@horizontalVerticalAlign: middle;
 
 /* Inverted */
 @invertedListIconColor: @invertedLightTextColor;