diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 62d88329a..50210830e 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -9,12 +9,17 @@ - **Menu** - Menu now uses flexbox. This allows menu items to match each others heights regardless of each items content size. `right menu` content should now follow left menu content, instead of preceding it (with float). **Enhancements** +- **Site** - Added in `pageOverflowX` variable, default theme hides horizontal scrollbars on `body` +- **Divider** - `vertical divider` inside `ui grid` now accounts for column padding - **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation - **Grid** - `equal height` and `equal width` now work without `row` wrappers - **Grid** - `equal height` rows can now be `stretched` as well as `middle aligned`, `bottom aligned` and `top aligned`! - **Headers** - Added new header type `sub header`, useful for displaying small headers alongside text content. See examples [in the header docs](http://www.semantic-ui.com/elements/header.html#sub-headers) - **Menu** - Added many new variables to menu - **Menu** - Horizontal menus now set a default image size for images / logos +- **Menu** - Fixed several inheritance issues for `dropdown item` inside `menu` appearing as `menu item`. +- **Menu** - The hover/active state of `dropdown item` have been adjusted to match `item`. +- **Menu** - Vertical dropdown menus are no longer 100% width - **Menu** - Menus items are now slightly more padded - **Segment** - Added `padded` and `very padded` segment variations - **Sidebar** - Improved animation performance through performance debugging. Sidebar now caches, width, height, rtl direction on load. @@ -23,6 +28,7 @@ - **Visibility/Sticky** - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events **Changes** +- **Dropdown** - Dropdown padding values now resolve to exact pixel values from em - **Grid** - Small computer `page grid` gutters have been adjusted from 8% to 3% to allow for roomier layouts on small screens. - **Header/Table/Divider** - These components now pull border color defaults from `site.variables` instead of using their own values - **Input** - Input now use `em` instead of `rem` so they will inherit the size of the elements they are nested inside @@ -35,9 +41,11 @@ **Bugs** - **All Modules** - Performance logging now delays 500ms instead of 100ms for console logging to ensure all logs are captured in one group +- **Card** - Fix card dimmer not appearing in minified release due to use of background shorthand property - **Checkbox** - Fix `disabled checkbox` sometimes displaying hand cursor +- **Checkbox** - Fixes nested `dropdown` inside `checkbox` causing issues - **Dropdown** - Fix bug where `onChange` would call even when reselecting current value -- **Dropdown** - Fixes issue with disappearing headers inside of `ui dropdown` when nested in `ui menu` +- **Dropdown** - Fixes issue with headers disappearing inside of `ui dropdown` when nested in `ui menu` - **Form** - Form sizes and input sizes now inherit from `site.variables` - **Grid** - `x column wide` inside `equal width/height` now cannot grow beyond column size - **Grid** - Fixes colored grid columns not appearing when not nested in rows diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 83b9a1bbc..920410ae1 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -113,7 +113,6 @@ .ui.menu .item > p:only-child { user-select: text; line-height: @textLineHeight; - color: @textColor; } .ui.menu .item > p:first-child { margin-top: 0; @@ -132,11 +131,6 @@ margin: @iconMargin; } -.ui.menu .item > i.dropdown.icon { - float: @dropdownIconFloat; - margin-left: @dropdownIconDistance; -} - /*-------------- Button ---------------*/ @@ -218,34 +212,86 @@ Dropdowns ---------------*/ -/* Dropdown */ -.ui.menu .ui.dropdown.item.visible { - border-bottom-right-radius: 0em; - border-bottom-left-radius: 0em; - background: @subtleTransparentBlack; -} -.ui.menu .ui.dropdown.active { - box-shadow: none; +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + float: @dropdownIconFloat; + margin-left: @dropdownIconDistance; } -/* Menu Position */ +/* Menu */ .ui.menu .dropdown.item .menu { left: 0px; - background: @dropdownBackground; - margin: @dropdownMenuOffset 0px 0px; min-width: ~"calc(100% - 1px)"; - box-shadow: @dropdownBoxShadow; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0px 0px; + box-shadow: @dropdownMenuBoxShadow; } -.ui.menu .dropdown.item .menu .item { + + +/* Menu Items */ +.ui.menu .ui.dropdown .menu > .item { display: block; + font-size: @dropdownItemFontSize !important; + padding: @dropdownItemPadding !important; + background: @dropdownItemBackground !important; + color: @dropdownItemColor !important; + text-transform: @dropdownItemTextTransform !important; + font-weight: @dropdownItemFontWeight !important; + box-shadow: @dropdownItemBoxShadow !important; + transition: @dropdownItemTransition !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + background: @dropdownHoveredItemBackground !important; + color: @dropdownHoveredItemColor !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + background: @dropdownActiveItemBackground !important; + font-weight: @dropdownActiveItemFontWeight !important; + color: @dropdownActiveItemColor !important; +} + + + +/* Secondary */ +.ui.secondary.menu .dropdown.item > .menu, +.ui.text.menu .dropdown.item > .menu { + border-radius: @dropdownMenuBorderRadius; + margin-top: @secondaryDropdownMenuDistance; +} + +/* Pointing */ +.ui.menu .pointing.dropdown.item .menu { + margin-top: @pointingDropdownMenuDistance; } -.ui.menu:not(.secondary) .pointing.dropdown.item .menu { - border-top-left-radius: 0em; + +/* Vertical */ +.ui.vertical.menu .dropdown.item > .icon { + float: right; + content: "\f0da"; + margin-left: 1em; +} +.ui.vertical.menu .dropdown.item .menu { + top: 0% !important; + left: 100%; + min-width: 0; + margin: 0em 0em 0em @dropdownMenuDistance; + box-shadow: @dropdownVerticalMenuBoxShadow; + border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius; +} +.ui.vertical.menu .active.dropdown.item { border-top-right-radius: 0em; - margin-top: @dropdownPointingDistance; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.item .menu .item i.icon { + margin-right: 0em; +} +.ui.vertical.menu .dropdown.item.active { + box-shadow: none; } -.ui.menu .simple.dropdown.item .menu { - margin: 0px !important; + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; } /*-------------- @@ -299,6 +345,7 @@ .ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover { cursor: pointer; @@ -322,13 +369,13 @@ Active ---------------*/ -.ui.menu .active.item { +.ui.menu .active.item:not(.dropdown) { background: @activeBackground; color: @selectedTextColor; font-weight: @activeFontWeight; box-shadow: @activeBoxShadow; } -.ui.menu .active.item > i.icon { +.ui.menu .active.item:not(.dropdown) > i.icon { opacity: @activeIconOpacity; } @@ -439,47 +486,22 @@ Floated Menu / Item background: none !important; } -/*--- Dropdown ---*/ -.ui.vertical.menu .dropdown.item > .icon { - float: right; - content: "\f0da"; - margin-left: 1em; -} -.ui.vertical.menu .active.dropdown.item { - border-top-right-radius: 0em; - border-bottom-right-radius: 0em; -} -.ui.vertical.menu .dropdown.item .menu { - top: 0% !important; - left: 100%; - margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset; - box-shadow: @dropdownVerticalBoxShadow; - border-radius: 0em @borderRadius @borderRadius @borderRadius; -} -.ui.vertical.menu .dropdown.item .menu .item i.icon { - margin-right: 0em; -} -.ui.vertical.menu .dropdown.item.active { - box-shadow: none; -} /*--- Sub Menu ---*/ -.ui.vertical.menu .item:not(.dropdown) > .menu { +.ui.vertical.menu .item > .menu { margin: @subMenuMargin -@itemHorizontalPadding 0em; } -.ui.vertical.menu .item:not(.dropdown) > .menu > .item { +.ui.vertical.menu .menu .item { background: none; padding: @subMenuHorizontalPadding @subMenuVerticalPadding; 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 { +.ui.vertical.menu .item .menu a.item:hover, +.ui.vertical.menu .item .menu .link.item:hover { color: @darkTextColor; } - -.ui.vertical.menu .item > .menu > .item:before { +.ui.vertical.menu .menu .item:before { display: none; } @@ -704,6 +726,7 @@ Floated Menu / Item .ui.pagination.menu .icon.item i.icon { vertical-align: top; } + .ui.pagination.menu.floated { display: block; } @@ -725,55 +748,47 @@ Floated Menu / Item border-radius: 0em; box-shadow: none; } + +/* Item */ .ui.secondary.menu > .menu > .item, .ui.secondary.menu > .item { + align-self: center; box-shadow: none; - border: none; - height: auto !important; background: @secondaryItemBackground; - - margin: 0em @secondaryMargin; - padding: @secondaryVerticalPadding @secondaryHorizontalPadding; - - border-radius: @secondaryBorderRadius; + margin: @secondaryItemMargin; + padding: @secondaryItemPadding; + border-radius: @secondaryItemBorderRadius; + transition: @secondaryItemTransition; } + +/* Border */ .ui.secondary.menu > .menu > .item:before, .ui.secondary.menu > .item:before { display: none !important; } -.ui.secondary.menu .item > .input input { - background-color: transparent; - border: none; -} - -.ui.secondary.menu .link.item, -.ui.secondary.menu a.item { - opacity: @secondaryLinkOpacity; - transition: none; -} +/* Header */ .ui.secondary.menu .header.item { + border-radius: 0em; border-right: @secondaryHeaderBorder; background: @secondaryHeaderBackground; - border-radius: 0em; } /* Hover */ +.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { - opacity: 1; + background: @secondaryHoveredItemBackground; + color: @secondaryHoveredItemColor; } /* Active */ .ui.secondary.menu > .menu > .active.item, .ui.secondary.menu > .active.item { - background: @secondaryActiveBackground; - opacity: 1; box-shadow: none; -} -.ui.secondary.vertical.menu > .active.item { - border-radius: @secondaryBorderRadius; + background: @secondaryActiveItemBackground; + color: @secondaryActiveItemColor; } /* Inverted */ @@ -781,6 +796,7 @@ Floated Menu / Item .ui.secondary.inverted.menu a.item { color: @secondaryInvertedColor; } +.ui.secondary.inverted.menu .dropdown.item:hover, .ui.secondary.inverted.menu .link.item:hover, .ui.secondary.inverted.menu a.item:hover { color: @secondaryInvertedHoverColor; @@ -789,11 +805,6 @@ Floated Menu / Item background-color: @secondaryInvertedActiveBackground; } -/* Dropdown */ -.ui.secondary.menu > .menu > .active.dropdown.item { - background-color: transparent; -} - /* Disable variations */ .ui.secondary.item.menu > .item { margin: 0em; @@ -809,8 +820,8 @@ Floated Menu / Item .ui.secondary.vertical.menu > .item { border: none; - margin: 0em 0em @secondaryVerticalMargin; - border-radius: @borderRadius; + margin: @secondaryVerticalItemMargin; + border-radius: @secondaryVerticalItemBorderRadius; } .ui.secondary.vertical.menu > .header.item { border-radius: 0em; @@ -868,7 +879,7 @@ Floated Menu / Item margin: @secondaryPointingItemMargin; padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; border-bottom-width: @secondaryPointingBorderWidth; - transition: @secondaryTransition; + transition: @secondaryItemTransition; } /* Item Types */ @@ -884,7 +895,9 @@ Floated Menu / Item } /* Hover */ +.ui.secondary.pointing.menu > .menu > .dropdown.item:hover, .ui.secondary.pointing.menu > .menu > .link.item:hover, +.ui.secondary.pointing.menu > .dropdown.item:hover, .ui.secondary.pointing.menu > .link.item:hover, .ui.secondary.pointing.menu > .menu > a.item:hover, .ui.secondary.pointing.menu > a.item:hover { @@ -1119,13 +1132,12 @@ Floated Menu / Item } - /******************************* Variations *******************************/ /*-------------- - Colors + Colors ---------------*/ /*--- Light Colors ---*/ @@ -1180,36 +1192,38 @@ Floated Menu / Item background: @invertedBackground; box-shadow: @invertedBoxShadow; } -.ui.inverted.menu .header.item { - margin: 0em; - background: @invertedHeaderBackground; - box-shadow: none; -} +/* Menu Item */ .ui.inverted.menu .item, .ui.inverted.menu .item > a:not(.ui) { color: @invertedTextColor; } - -.ui.inverted.menu .item:not(.dropdown).menu { +.ui.inverted.menu .item.menu { background: @invertedSubMenuBackground; } -.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item, -.ui.vertical.inverted.menu .item:not(.dropdown) > .menu > .item a:not(.ui) { - color: @invertedSubMenuColor; +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background: @invertedDividerBackground; +} +.ui.vertical.inverted.menu .item:before { + background: @invertedVerticalDividerBackground; } -/* Inverted Dropdown */ -.ui.inverted.menu .dropdown .menu .item { - background: @dropdownItemBackground !important; - color: @dropdownItemColor !important; - transition: @dropdownItemTransition; +/* Sub Menu */ +.ui.vertical.inverted.menu .menu .item, +.ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: @invertedSubMenuColor; } -.ui.inverted.menu .dropdown .menu .item:hover { - background: @dropdownHoveredItemBackground !important; - color: @dropdownHoveredItemColor !important; + +/* Header */ +.ui.inverted.menu .header.item { + margin: 0em; + background: @invertedHeaderBackground; + box-shadow: none; } + +/* Disabled */ .ui.inverted.menu .item.disabled, .ui.inverted.menu .item.disabled:hover { color: @invertedDisabledTextColor; @@ -1217,25 +1231,17 @@ Floated Menu / Item -/*--- Border ---*/ -.ui.inverted.menu .item:before { - background: @invertedDividerBackground; -} -.ui.vertical.inverted.menu .item:before { - background: @invertedVerticalDividerBackground; -} - /*--- Hover ---*/ .ui.link.inverted.menu .item:hover, +.ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, -.ui.inverted.menu a.item:hover, -.ui.inverted.menu .dropdown.item:hover { +.ui.inverted.menu a.item:hover { background: @invertedHoverBackground; color: @invertedHoverColor; } -.ui.vertical.inverted.menu .item:not(.dropdown) .menu a.item:hover, -.ui.vertical.inverted.menu .item:not(.dropdown) .menu .link.item:hover { +.ui.vertical.inverted.menu .item .menu a.item:hover, +.ui.vertical.inverted.menu .item .menu .link.item:hover { background: @invertedSubMenuBackground; color: @invertedSubMenuHoverColor; } @@ -1243,7 +1249,6 @@ Floated Menu / Item /*--- Pressed ---*/ .ui.inverted.menu a.item:active, -.ui.inverted.menu .dropdown.item:active, .ui.inverted.menu .link.item:active, .ui.inverted.menu a.item:active { background: @invertedMenuPressedBackground; @@ -1483,11 +1488,6 @@ Floated Menu / Item width: 8.333%; } -/* Dropdown */ -.ui.item.menu .dropdown .menu .item { - width: 100%; -} - /*-------------- Fixed ---------------*/ diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 70b0e2c77..55b60f90a 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -47,7 +47,7 @@ /* Sub Menu */ @subMenuMargin: 0.5em; -@subMenuFontSize: 0.875em; +@subMenuFontSize: @tiny; @subMenuTextColor: rgba(0, 0, 0, 0.5); @subMenuHorizontalPadding: 0.5em; @@ -119,22 +119,34 @@ @labelAndIconFloat: none; @labelAndIconMargin: 0em 0.5em 0em 0em; -/* Dropdown */ +/* Dropdown (Overrides UI Dropdown) */ + +@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + @dropdownBackground: #FFFFFF; -@dropdownMenuOffset: 0px; -@dropdownPointingDistance: 0px; +@dropdownMenuDistance: 0em; +@dropdownMenuBorderRadius: @borderRadius; +@dropdownItemFontSize: @relativeMedium; +@dropdownItemPadding: @relativeSmall @relativeLarge; @dropdownItemBackground: transparent; -@dropdownItemTextColorHover: @selectedTextColor; -@dropdownIconMargin: 0em 0em 0em 1em; @dropdownItemColor: @textColor; +@dropdownItemTextTransform: none; +@dropdownItemFontWeight: normal; +@dropdownItemBoxShadow: none; @dropdownItemTransition: none; @dropdownHoveredItemBackground: @transparentBlack; @dropdownHoveredItemColor: @selectedTextColor; -@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); -@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); +@dropdownActiveItemBackground: @transparentBlack; +@dropdownActiveItemColor: @selectedTextColor; +@dropdownActiveItemFontWeight: bold; + +/* Dropdown Variations */ +@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); +@secondaryDropdownMenuDistance: 0.25em; +@pointingDropdownMenuDistance: 0.75em; /* Pointing Arrow */ @arrowSize: 0.6em; @@ -196,29 +208,30 @@ /* Secondary */ @secondaryBackground: none; -@secondaryItemBackground: none; -@secondaryTransition: color 0.2s ease; - -@secondaryBorderRadius: @defaultBorderRadius; +@secondaryItemBackground: none; +@secondaryItemMargin: 0em 0.25em; +@secondaryItemPadding: @relativeMini @relativeSmall; +@secondaryItemBorderRadius: @defaultBorderRadius; +@secondaryItemTransition: color @transitionDuration @transitionEasing; +@secondaryItemColor: @unselectedTextColor; -@secondaryMargin: 0.25em; -@secondaryVerticalMargin: 0.3em; -@secondaryVerticalPadding: @relativeMini; -@secondaryHorizontalPadding: @relativeSmall; +@secondaryHoveredItemBackground: @transparentBlack; +@secondaryHoveredItemColor: @selectedTextColor; -@secondaryLinkOpacity: 0.8; +@secondaryActiveItemBackground: @transparentBlack; +@secondaryActiveItemColor: @selectedTextColor; @secondaryHeaderBackground: none transparent; @secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1); -@secondaryActiveBackground: @transparentBlack; @secondaryInvertedActiveBackground: @transparentWhite; +@secondaryVerticalItemMargin: 0em 0em 0.3em; +@secondaryVerticalItemBorderRadius: @defaultBorderRadius; /* Pointing */ @secondaryPointingBorderWidth: 2px; - @secondaryPointingBorderColor: @borderColor; @secondaryPointingInvertedBorderColor: @whiteBorderColor; @secondaryPointingActiveBorderColor: @black;