diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 0d0c820b0..b1f444578 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -9,6 +9,7 @@ - **Menu** - Menu now uses flexbox. This is a *significant* change which means **Enhancements** +- **Menu** - Horizontal menus now set a default image size when none specified - **Segment** - Added `padded` and `very padded` segment variations - **Grid** - `equal height` and `equal width` now work without `row` wrappers - **Visibility/Sticky** - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 0a97cf441..0d2492fdf 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -105,15 +105,6 @@ background: @dividerBackground; } -/*-------------- - Sub-Item ----------------*/ - -.ui.menu .item .menu a.item:hover, -.ui.menu .item .menu .link.item:hover { - color: @darkTextColor; -} - /*-------------- Text Content ---------------*/ @@ -230,7 +221,6 @@ margin: 0px !important; } - /*-------------- Labels ---------------*/ @@ -242,6 +232,9 @@ padding: @labelVerticalPadding @labelHorizontalPadding; vertical-align: baseline; } +.ui.menu .item > .label:before { + background-color: @labelBackground; +} .ui.menu .item > .floating.label { padding: @labelVerticalPadding @labelHorizontalPadding; } @@ -250,10 +243,15 @@ Images ---------------*/ -.ui.menu .item > img:only-child { - display: block; +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; max-width: 100%; - margin: 0em auto; + width: @imageWidth; +} +.ui.vertical.menu .item > img:only-child { + display: block; + width: @verticalImageWidth; } @@ -441,6 +439,12 @@ Floated Menu / Item font-size: @subMenuFontSize; color: @subMenuTextColor; } + +.ui.vertical.menu .item:not(.dropdown) .menu a.item:hover, +.ui.vertical.menu .item:not(.dropdown) .menu .link.item:hover { + color: @darkTextColor; +} + .ui.vertical.menu .item > .menu > .item:before { display: none; } @@ -1148,10 +1152,12 @@ Floated Menu / Item background: @invertedSubMenuBackground; } -.ui.inverted.menu .item .item, -.ui.inverted.menu .item .item > a:not(.ui) { +.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item, +.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item a:not(.ui) { color: @invertedSubMenuColor; } + +/* Inverted Dropdown */ .ui.inverted.menu .dropdown .menu .item { background: @dropdownItemBackground !important; color: @dropdownItemColor !important; diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 8dadb5da5..58b596bd1 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -102,10 +102,14 @@ @largeInputOffset: -0.125em; @largeInputVerticalPadding: 0.6em; +/* Image */ +@imageWidth: 2.5em; +@verticalImageWidth: auto; + /* Label */ @labelOffset: -0.15em; -@labelBackground: rgba(0, 0, 0, 0.35); -@labelTextColor: #FFFFFF; +@labelBackground: #999999; +@labelTextColor: @white; @labelTextMargin: 0.5em; @labelVerticalPadding: 0.3em;