From 803646f0bed4c3fa3e230a11218e306af9080149 Mon Sep 17 00:00:00 2001 From: Ko Ko Zin Date: Fri, 26 May 2023 21:23:28 +0630 Subject: [PATCH] Fixes for positions of icon, text and upward sub-menu shadow Remove left padding from dropdown icon. Instead add right padding to the dropdown item text since the icon display next to the text when sub menu opens to the right direction as default. Specify different shadow and rounded border for upward menu. Increase the amount of top position value of remove icon of dropdown to shift down to get better alignment along with the text and dropdown icon. In previous version, the remove icon placed a few pixels above from the text and dropdown icon which causes the inappropriate alignment. Removed vertical alignment from the text container which causes incorrect alignment with the elements around when it contains the content which takes more space vertically such as an image. Instead, use `align-item` property on the text container to have everything inside of it in a linear position. Remove unnecessary overrides and left position from menu which causes the sub-menu positioned incorrectly when it's inside floating dropdown item. In vertical menu, the icon should be displayed above the text, so the lowest order number should be specified. --- src/definitions/collections/menu.less | 38 ++++++--- src/definitions/modules/accordion.less | 6 +- src/definitions/modules/dropdown.less | 85 ++++++++++--------- src/themes/default/collections/menu.variables | 6 +- .../default/modules/accordion.variables | 1 - src/themes/default/modules/dropdown.variables | 14 +-- 6 files changed, 86 insertions(+), 64 deletions(-) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index ab481dca8c..1680ac777d 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -187,6 +187,7 @@ & when (@variationMenuVertical) { .ui.vertical.menu .item > .header:not(.ui) { + flex: 0 0 100%; margin: @verticalHeaderMargin; font-size: @verticalHeaderFontSize; font-weight: @verticalHeaderFontWeight; @@ -200,7 +201,6 @@ /* Dropdown Icon */ .ui.menu .item > i.dropdown.icon { padding: 0; - float: @dropdownIconFloat; margin: 0 0 0 @dropdownIconDistance; } @@ -212,6 +212,10 @@ margin: @dropdownMenuDistance 0 0; box-shadow: @dropdownMenuBoxShadow; } +.ui.menu .upward.dropdown.item .menu { + border-radius: @dropdownMenuBorderRadius @dropdownMenuBorderRadius 0 0; + box-shadow: @dropdownUpwardMenuBoxShadow; +} .ui.menu .dropdown.item:not(.column) .menu { flex-direction: column; } @@ -244,14 +248,12 @@ } .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { - display: block; + display: flex; } .ui.menu .ui.dropdown .menu > .item > .icons, .ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { - display: inline-block; font-size: @dropdownItemIconFontSize !important; - float: @dropdownItemIconFloat; - margin: @dropdownItemIconMargin !important; + order: 0; } & when (@variationMenuSecondary) or (@variationMenuText) { @@ -279,9 +281,17 @@ & when (@variationMenuVertical) { /* Vertical */ .ui.vertical.menu .dropdown.item > i.icon { - float: right; content: "\f0da"; - margin-left: 1em; + margin-left: auto; + order: @verticalIconOrder; + } + .ui.vertical.menu .dropdown.item > i.dropdown.icon { + margin-left: @dropdownIconDistance; + padding-left: 0; + order: 100; + } + .ui.vertical.menu .dropdown.item > i.dropdown.icon:only-of-type { + margin-left: auto; } .ui.vertical.menu .dropdown.item .menu { left: 100%; @@ -297,6 +307,7 @@ } .ui.vertical.menu .dropdown.item.upward .menu { bottom: 0; + top: auto !important; } .ui.vertical.menu .dropdown.item:not(.upward) .menu { top: 0; @@ -325,8 +336,7 @@ } & when (@variationMenuVertical) { .ui.vertical.menu .item > .label { - margin-top: @labelOffset; - margin-bottom: @labelOffset; + margin: @labelOffset 0 @labelOffset auto; padding: @labelVerticalPadding @labelHorizontalPadding; } } @@ -535,7 +545,9 @@ Floated Menu / Item /* --- Item --- */ .ui.vertical.menu .item { - display: block; + display: flex; + flex-wrap: wrap; + align-items: center; background: @verticalItemBackground; border-top: none; border-right: none; @@ -549,15 +561,15 @@ Floated Menu / Item /* --- Label --- */ .ui.vertical.menu .item > .label { - float: right; + order: 1; text-align: center; } /* --- Icon --- */ .ui.vertical.menu .item > i.icon, .ui.vertical.menu .item > i.icons { + order: @verticalIconOrder; width: @iconWidth; - float: @verticalIconFloat; margin: @verticalIconMargin; } .ui.vertical.menu .item > .label + i.icon { @@ -582,6 +594,7 @@ Floated Menu / Item /* --- Sub Menu --- */ .ui.vertical.menu .item > .menu { + flex: 0 0 100%; margin: @subMenuMargin; } .ui.vertical.menu .menu .item { @@ -1282,6 +1295,7 @@ Floated Menu / Item display: block; font-size: @labeledIconSize !important; margin: 0 auto @labeledIconTextMargin !important; + order: 0; } & when (@variationMenuFluid) { /* Fluid */ diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less index a1a55130d4..3b36223976 100755 --- a/src/definitions/modules/accordion.less +++ b/src/definitions/modules/accordion.less @@ -80,11 +80,13 @@ /* Menu */ .ui.accordion.menu .item .title { - display: block; + display: flex; + flex: 0 0 100%; + justify-content: space-between; padding: @menuTitlePadding; } .ui.accordion.menu .item .title > .dropdown.icon { - float: @menuIconFloat; + order: 2; margin: @menuIconMargin; transform: @menuIconTransform; } diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 682a36ff40..382a36bd6e 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -87,9 +87,12 @@ } .ui.dropdown .menu > .item .dropdown.icon { width: auto; - float: @itemDropdownIconFloat; + 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-block; + 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: block; + 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-reverse; + flex-direction: column; } /* -------------- Floated Content --------------- */ -.ui.dropdown > .text > [class*="right floated"], -.ui.dropdown .menu .item > [class*="right floated"] { - float: right !important; - margin-right: 0 !important; - margin-left: @floatedDistance !important; +.ui.ui.dropdown > .text > [class*="right floated"], +.ui.ui.dropdown .menu .item > [class*="right floated"] { + order: 1; + padding-left: @floatedDistance; + margin-left: auto; } -.ui.dropdown > .text > [class*="left floated"], -.ui.dropdown .menu .item > [class*="left floated"] { - float: left !important; - margin-left: 0 !important; - margin-right: @floatedDistance !important; +.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 { - float: @itemDescriptionFloat; + 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; - float: @itemElementFloat; 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 { - display: inline-block; - vertical-align: top; + align-self: center; width: auto; margin-top: @menuImageVerticalMargin; margin-bottom: @menuImageVerticalMargin; @@ -342,7 +349,7 @@ /* Dropdown Menu */ .ui.label.dropdown .menu { - min-width: 100%; + width: 100%; } } @@ -356,7 +363,7 @@ margin: 0; } .ui.dropdown.button .menu { - min-width: 100%; + 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: @selectionVerticalPadding; + 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: baseline; + 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 !important; - right: 0 !important; + 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; - float: @leftMenuDropdownIconFloat; - margin: @leftMenuDropdownIconMargin; - } - .ui.dropdown .item .left.dropdown.icon, - .ui.dropdown .left.menu .item .dropdown.icon { - width: auto; - float: @leftMenuDropdownIconFloat; margin: @leftMenuDropdownIconMargin; - } - .ui.dropdown .item .left.dropdown.icon + .text, - .ui.dropdown .left.menu .item .dropdown.icon + .text { - margin-left: @itemDropdownIconDistance; - margin-right: 0; + 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; + } + .ui.simple.upward.dropdown > .menu > .item:active > .menu, + .ui.simple.upward.dropdown .menu .item:hover > .menu { + bottom: 0 !important; + top: auto !important; + } .ui.simple.dropdown .upward.menu { margin-bottom: @simpleUpwardMenuMargin; } @@ -1500,7 +1506,7 @@ select.ui.dropdown { .ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu { overflow: visible; - width: auto; + width: 100%; height: auto; top: 100%; opacity: 1; @@ -1508,7 +1514,7 @@ select.ui.dropdown { .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown .menu .item:hover > .menu { overflow: visible; - width: auto; + width: 100%; height: auto; top: 0 !important; left: 100%; @@ -1574,8 +1580,7 @@ select.ui.dropdown { Floating --------------- */ - .ui.floating.dropdown > .menu { - left: 0; + .ui.floating.dropdown .menu { right: auto; box-shadow: @floatingMenuBoxShadow !important; border-radius: @floatingMenuBorderRadius !important; diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables index 98d0ea99af..99426ec83f 100644 --- a/src/themes/default/collections/menu.variables +++ b/src/themes/default/collections/menu.variables @@ -58,7 +58,6 @@ @iconOpacity: 0.9; /* Dropdown Icon */ -@dropdownIconFloat: right; @dropdownIconDistance: 1em; /* Header */ @@ -67,8 +66,8 @@ @headerTextTransform: @normal; /* Vertical Icon */ -@verticalIconFloat: right; -@verticalIconMargin: 0 0 0 0.5em; +@verticalIconOrder: 2; +@verticalIconMargin: 0 0 0 auto; /* Vertical Header */ @verticalHeaderMargin: 0 0 0.5em; @@ -158,6 +157,7 @@ @secondaryDropdownMenuDistance: @relative5px; @pointingDropdownMenuDistance: 0.75em; @invertedSelectionDropdownColor: @invertedTextColor; +@dropdownUpwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); /* -------------- States diff --git a/src/themes/default/modules/accordion.variables b/src/themes/default/modules/accordion.variables index e7b0dc911f..287e08083e 100644 --- a/src/themes/default/modules/accordion.variables +++ b/src/themes/default/modules/accordion.variables @@ -40,7 +40,6 @@ -------------------- */ @menuTitlePadding: 0; -@menuIconFloat: right; @menuIconMargin: @iconMargin; @menuIconTransform: rotate(180deg); diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index ddc1ba36a4..4a025e7bce 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -108,12 +108,13 @@ /* Sub-Menu Dropdown Icon */ @itemDropdownIconDistance: 1em; -@itemDropdownIconFloat: right; -@itemDropdownIconMargin: @itemLineHeightOffset 0 0 @itemDropdownIconDistance; +@itemDropdownIconOrder: 1; +@itemDropdownIconMargin: @itemLineHeightOffset 0 0 auto; /* Description */ -@itemDescriptionFloat: right; -@itemDescriptionMargin: 0 0 0 1em; +@itemDescriptionOrder: 1; +@itemDescriptionMargin: 0 0 0 auto; +@itemDescriptionPadding: 0 0 0 1em; @itemDescriptionColor: @lightTextColor; /* Message */ @@ -323,6 +324,7 @@ @clearableIconPosition: 2em; @clearableIconSelectionPosition: 3em; @clearableIconInlinePosition: 2.2em; +@clearableIconVerticalPosition: 0.86571em; /* ------------------- Variations @@ -356,8 +358,8 @@ @upwardSelectionActiveHoverMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); /* Flyout Direction */ -@leftMenuDropdownIconFloat: left; -@leftMenuDropdownIconMargin: @itemLineHeightOffset 0 0 0; +@leftMenuDropdownIconOrder: 0; +@leftMenuDropdownIconMargin: @itemLineHeightOffset auto 0 0; /* Left */ @leftSubMenuBorderRadius: @borderRadius;