Fixes for positions of icon, text and upward sub-menu shadow and rounded border #2804
+86
−64
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -87,9 +87,12 @@ | |
| } | ||
| .ui.dropdown .menu > .item .dropdown.icon { | ||
| width: auto; | ||
| order: @itemDropdownIconOrder; | ||
| margin: @itemDropdownIconMargin; | ||
| } | ||
| .ui.dropdown .menu > .item .text { | ||
| flex-grow: 1; | ||
| } | ||
| .ui.dropdown .menu > .item .dropdown.icon + .text { | ||
| margin-right: @itemDropdownIconDistance; | ||
| } | ||
|
|
@@ -99,8 +102,11 @@ | |
| --------------- */ | ||
|
|
||
| .ui.dropdown > .text { | ||
| display: inline-flex; | ||
| order: 0; | ||
| transition: @textTransition; | ||
| align-items: baseline; | ||
| word-break: break-all; | ||
| } | ||
|
|
||
| /* -------------- | ||
|
|
@@ -110,7 +116,7 @@ | |
| .ui.dropdown .menu > .item { | ||
| position: relative; | ||
| cursor: pointer; | ||
| display: flex; | ||
| border: @itemBorder; | ||
| height: @itemHeight; | ||
| min-height: @itemMinHeight; | ||
|
|
@@ -123,6 +129,7 @@ | |
| text-transform: @itemTextTransform; | ||
| font-weight: @itemFontWeight; | ||
| box-shadow: @itemBoxShadow; | ||
| word-break: break-all; | ||
| -webkit-touch-callout: none; | ||
| } | ||
| .ui.dropdown .menu > .item:first-child { | ||
|
|
@@ -131,24 +138,23 @@ | |
|
|
||
| .ui.dropdown .menu > .item.vertical { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* -------------- | ||
| Floated Content | ||
| --------------- */ | ||
|
|
||
| .ui.ui.dropdown > .text > [class*="right floated"], | ||
| .ui.ui.dropdown .menu .item > [class*="right floated"] { | ||
| order: 1; | ||
| padding-left: @floatedDistance; | ||
| margin-left: auto; | ||
| } | ||
| .ui.ui.dropdown > .text > [class*="left floated"], | ||
| .ui.ui.dropdown .menu .item > [class*="left floated"] { | ||
| margin-left: 0; | ||
| margin-right: @floatedDistance; | ||
| } | ||
|
|
||
| .ui.dropdown .menu .item > i.icon.floated, | ||
|
|
@@ -206,13 +212,15 @@ | |
|
|
||
| .ui.dropdown > .text > .description, | ||
| .ui.dropdown .menu > .item > .description { | ||
| order: @itemDescriptionOrder; | ||
| margin: @itemDescriptionMargin; | ||
| padding: @itemDescriptionPadding; | ||
| color: @itemDescriptionColor; | ||
| } | ||
|
|
||
| .ui.dropdown .menu > .item.vertical > .description { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* ----------------- | ||
|
|
@@ -287,8 +295,8 @@ | |
| .ui.dropdown .menu > .item > .flag, | ||
| .ui.dropdown .menu > .item > .image, | ||
| .ui.dropdown .menu > .item > img { | ||
| align-self: center; | ||
| margin-left: 0; | ||
| margin-right: @itemElementDistance; | ||
| } | ||
|
|
||
|
|
@@ -300,8 +308,7 @@ | |
| .ui.dropdown > .text > .image:not(.icon), | ||
| .ui.dropdown .menu > .item > .image:not(.icon), | ||
| .ui.dropdown .menu > .item > img { | ||
| align-self: center; | ||
| width: auto; | ||
| margin-top: @menuImageVerticalMargin; | ||
| margin-bottom: @menuImageVerticalMargin; | ||
|
|
@@ -342,7 +349,7 @@ | |
|
|
||
| /* Dropdown Menu */ | ||
| .ui.label.dropdown .menu { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -356,7 +363,7 @@ | |
| margin: 0; | ||
| } | ||
| .ui.dropdown.button .menu { | ||
| width: 100%; | ||
| } | ||
| .ui.dropdown.button:not(.pointing):not(.floating).active { | ||
| border-radius: @borderRadius @borderRadius 0 0; | ||
|
|
@@ -785,7 +792,7 @@ select.ui.dropdown { | |
| margin: @selectionIconMargin; | ||
| padding: @selectionIconPadding; | ||
| right: @clearableIconPosition; | ||
| top: @clearableIconVerticalPosition; | ||
| position: absolute; | ||
| opacity: @clearableIconOpacity; | ||
| z-index: @selectionIconZIndex; | ||
|
|
@@ -953,7 +960,7 @@ select.ui.dropdown { | |
| } | ||
| .ui.inline.dropdown .dropdown.icon { | ||
| margin: @inlineIconMargin; | ||
| vertical-align: middle; | ||
| } | ||
| .ui.inline.dropdown > .text { | ||
| font-weight: @inlineTextFontWeight; | ||
|
|
@@ -1204,8 +1211,8 @@ select.ui.dropdown { | |
| & when (@variationDropdownLeft) { | ||
| /* Leftward Opening Menu */ | ||
| .ui.dropdown > .left.menu { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
|
|
||
| .ui.dropdown > .left.menu .menu, | ||
|
|
@@ -1218,20 +1225,10 @@ select.ui.dropdown { | |
|
|
||
| .ui.dropdown .item .left.dropdown.icon, | ||
| .ui.dropdown .left.menu .item .dropdown.icon { | ||
| order: @leftMenuDropdownIconOrder; | ||
| width: auto; | ||
| margin: @leftMenuDropdownIconMargin; | ||
| padding-right: @itemDropdownIconDistance; | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -1480,6 +1477,15 @@ select.ui.dropdown { | |
| margin-top: 0 !important; | ||
| } | ||
| & when (@variationDropdownUpward) { | ||
| .ui.simple.upward.active.dropdown > .menu, | ||
| .ui.simple.upward.dropdown:hover > .menu { | ||
| top: auto !important; | ||
|
There was a problem hiding this comment. Can !important be replaced by .ui specificity? |
||
| } | ||
| .ui.simple.upward.dropdown > .menu > .item:active > .menu, | ||
| .ui.simple.upward.dropdown .menu .item:hover > .menu { | ||
| bottom: 0 !important; | ||
| top: auto !important; | ||
|
Comment on lines
+1486
to
+1487
There was a problem hiding this comment. Can !important be replaced by .ui specificity? |
||
| } | ||
| .ui.simple.dropdown .upward.menu { | ||
| margin-bottom: @simpleUpwardMenuMargin; | ||
| } | ||
|
|
@@ -1500,15 +1506,15 @@ select.ui.dropdown { | |
| .ui.simple.active.dropdown > .menu, | ||
| .ui.simple.dropdown:hover > .menu { | ||
| overflow: visible; | ||
| width: 100%; | ||
| height: auto; | ||
| top: 100%; | ||
| opacity: 1; | ||
| } | ||
| .ui.simple.dropdown > .menu > .item:active > .menu, | ||
| .ui.simple.dropdown .menu .item:hover > .menu { | ||
| overflow: visible; | ||
| width: 100%; | ||
| height: auto; | ||
| top: 0 !important; | ||
| left: 100%; | ||
|
|
@@ -1574,8 +1580,7 @@ select.ui.dropdown { | |
| Floating | ||
| --------------- */ | ||
|
|
||
| .ui.floating.dropdown .menu { | ||
|
There was a problem hiding this comment. The direct child selector > was introduced by #2284 There was a problem hiding this comment. I don't see that in my fiddle and local version. There was a problem hiding this comment. Sorry. You're right. I was checking the dropdown without scrollbar. |
||
| right: auto; | ||
| box-shadow: @floatingMenuBoxShadow !important; | ||
| border-radius: @floatingMenuBorderRadius !important; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could !important get replaced by increasing .ui specificity?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are also
!importantflags that are not part of my PR which wouldn't allow to override with.uispecificity.I would have to refactor and remove them too.
I feel like we've too many bloated CSS blocks in several modules that need to be removed.
Since we dropped the road map for FUI v3, we should consider to refactor this version to keep as much as clean and reduce the file size.
I would find the time for refactoring the CSS first. Then we can consider the refactoring JS modules.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I couldn't find any solution unless we wrap the text inside dropdown item with extra container like
<span class="text">Item</span>.Please check this fiddle: https://jsfiddle.net/ko2in/twpkudxs/1/
As you can see, it just work without any CSS modifications.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's no way I could find to implement just alone CSS to make these icon positioning correctly unless the dropdown item text is warpped by another element.
This might be breaking change and not backward compatible and the users definitely need to migrate HTML structure.
Should I discard this PR or keep it for another major release? What do you think @lubber-de ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's keep it (as your work is still very good!), as planned for 2.10, and take a look again later. I label that on hold until then and convert to draft.