diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index fdacdf41d..c10f53cb5 100644 --- a/RELEASE-NOTES.md +++ b/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` diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index e148b685d..a4a98004d 100755 --- a/src/definitions/elements/list.less +++ b/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 --------------------*/ diff --git a/src/themes/default/elements/list.variables b/src/themes/default/elements/list.variables index dee8cdf06..200328d62 100644 --- a/src/themes/default/elements/list.variables +++ b/src/themes/default/elements/list.variables @@ -79,6 +79,7 @@ /* Horizontal */ @horizontalSpacing: 1em; @horizontalIconDistance: 0.25em; +@horizontalVerticalAlign: middle; /* Inverted */ @invertedListIconColor: @invertedLightTextColor;