diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index a60018d89..c6c244710 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -33,6 +33,7 @@ - **Dropdown** - Fixed bug where sub menus may sometimes have dropdown icon overlap text - **Dropdown** - Fixes dropdown search input from filtering text values when input is inside menu, i.e "In-Menu Search" - **Dropdown** - Fix issue with search selection not correctly creating RegExp when select values are not strings **Thanks @alufers** +- **Dropdown** - Fix issue with `left floated` and `right floated` content sometimes not applying correctly - **Popup** - `wide` and `very wide` popup will now appear when screen size is below their `max-width` - **Popup** - Popup no longer blurs element on popup hide - **Segment** - ``ui tabular menu`` now correctly aligns with attached segment when using fluid variation *Thanks @MohammadYounes* diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index ccdbd13cc..006e1728a 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -129,7 +129,7 @@ -webkit-touch-callout: none; } .ui.dropdown .menu > .item:first-child { - border-top: none; + border-top-width: 0px; } /*-------------- @@ -138,15 +138,15 @@ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"] { - float: right; - margin-right: 0em; - margin-left: @floatedDistance; + float: right !important; + margin-right: 0em !important; + margin-left: @floatedDistance !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"] { - float: right; - margin-left: 0em; - margin-right: @floatedDistance; + float: left !important; + margin-left: 0em !important; + margin-right: @floatedDistance !important; } .ui.dropdown .menu .item > .icon.floated, @@ -373,25 +373,16 @@ select.ui.dropdown { min-width: 0px; } -/* Remove Selection */ -.ui.selection.dropdown > .delete.icon { - opacity: 0.6; -} -.ui.selection.dropdown > .delete.icon:hover { - opacity: 1; -} - - /* Selection Menu */ .ui.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; - border-top: none !important; + border-top-width: 0px !important; width: auto; - margin: 0px -1px; - min-width: ~"calc(100% + 2px)"; + margin: 0px -@menuBorderWidth; + min-width: @menuMinWidth; outline: none; box-shadow: @selectionMenuBoxShadow; @@ -790,8 +781,8 @@ select.ui.dropdown { /* Selection */ .ui.upward.selection.dropdown .menu { - border-top: 1px solid @selectionBorderColor !important; - border-bottom: none !important; + border-top-width: @menuBorderWidth !important; + border-bottom-width: 0px !important; } .ui.upward.selection.dropdown:hover { box-shadow: @upwardSelectionHoverBoxShadow; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index 8999e82c8..7c13311f6 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -31,10 +31,12 @@ @menuTextAlign: left; @menuTransition: none; -@menuBorder: 1px solid @borderColor; +@menuBorderWidth: 1px; +@menuBorder: @menuBorderWidth solid @borderColor; @menuBoxShadow: 0px 1px 4px 0px @borderColor; @menuBorderRadius: 0em 0em @borderRadius @borderRadius; @menuTransition: opacity 0.2s ease; +@menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")"; @menuZIndex: 11; /* Text */ @@ -167,7 +169,7 @@ @selectionVisibleHoverBorderColor: @selectedBorderColor; @selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor; -@selectionVisibleHoverMenuBoxShadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12); +@selectionVisibleHoverMenuBoxShadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); @selectionVisibleConnectingBorder: 0em; @selectionVisibleIconOpacity: 1; @@ -228,12 +230,12 @@ --------------------*/ /* Upward */ -@upwardMenuBoxShadow: 0px -1px 4px 0px @borderColor; +@upwardMenuBoxShadow: 0px 0px 4px 0px @borderColor; @upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em; @upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); @upwardSelectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@upwardSelectionVisibleHoverMenuBoxShadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.12);; +@upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); +@upwardSelectionVisibleHoverMenuBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; /* Flyout Direction */