diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 34005139a..ecd57c409 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -27,11 +27,11 @@ cursor: pointer; position: relative; display: inline-block; - line-height: @lineHeight; - transition: @transition; + line-height: 1em; tap-highlight-color: rgba(0, 0, 0, 0); outline: none; text-align: left; + transition: @transition; } @@ -184,21 +184,6 @@ padding: @menuInputPadding; } -/*-------------- - Item Image ----------------*/ - -.ui.dropdown > .text > img, -.ui.dropdown > .text > .image, -.ui.dropdown .menu > .item > .image, -.ui.dropdown .menu > .item > img { - display: inline-block; - vertical-align: middle; - width: auto; - max-height: @menuImageMaxHeight; - margin: @itemImageMargin; -} - /*----------------- Item Description -------------------*/ @@ -233,25 +218,59 @@ Coupling *******************************/ -/* Icons / Flags / Labels */ +/*-------------- + Sub Elements +---------------*/ + +/* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, -.ui.dropdown .menu > .item > .icon { - margin: @itemIconMargin; -} .ui.dropdown > .text > .label, -.ui.dropdown .menu > .item > .label { - margin: @itemLabelMargin; +.ui.dropdown > .text > .flag, +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image { + margin-top: @textLineHeightOffset; +} +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-top: @itemLineHeightOffset; } + +.ui.dropdown > .text > .icon, +.ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, -.ui.dropdown .menu > .item > .flag { - margin: @itemFlagMargin; +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-left: 0em; + margin-right: @itemElementDistance; } -.ui.dropdown .menu > .item > .icon + .text { - display: block; - margin-right: @itemIconDistance; + +/*-------------- + Image +---------------*/ + +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + display: inline-block; + vertical-align: middle; + width: auto; + max-height: @menuImageMaxHeight; } +/*-------------- + Menu +---------------*/ + /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before { @@ -263,6 +282,17 @@ border-left: none; } +/* Automatically float dropdown menu right on last menu item */ +.ui.menu .right.menu .dropdown:last-child .menu, +.ui.buttons > .ui.dropdown:last-child .menu { + left: auto; + right: 0em; +} + +/*-------------- + Button +---------------*/ + /* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon { margin: 0em; @@ -273,12 +303,6 @@ border-bottom-right-radius: 0em; } -/* Automatically float dropdown menu right on last menu item */ -.ui.menu .right.menu .dropdown:last-child .menu, -.ui.buttons > .ui.dropdown:last-child .menu { - left: auto; - right: 0em; -} /******************************* diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index bbf820ffb..c6e5406f1 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -6,7 +6,6 @@ Element --------------------*/ -@lineHeight: 1; @transition: border-radius 0.1s ease, width 0.2s ease @@ -40,7 +39,7 @@ /* Text */ @textLineHeight: 1em; -@textLineHeightOffset: (@itemLineHeight - 1em); +@textLineHeightOffset: (@textLineHeight - 1em); /* Menu Item */ @itemFontSize: 1rem; @@ -87,23 +86,12 @@ /* Menu Image */ @menuImageMaxHeight: 2.5em; -/* Menu Item Icon */ -@itemIconFloat: right; -@itemIconMargin: @itemLineHeightOffset 0.75em 0em 0em; -@itemIconDistance: 1em; +/* Item Sub-Element */ +@itemElementDistance: 0.75em; -/* Sub-Menu Icon */ +/* Sub-Menu Dropdown Icon */ @itemDropdownIconFloat: right; -@itemDropdownIconMargin: @itemIconMargin; - -/* Label */ -@itemLabelMargin: @itemIconMargin; - -/* Flag */ -@itemFlagMargin: @itemIconMargin; - -/* Image */ -@itemImageMargin: @itemIconMargin; +@itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemElementDistance; /* Description */ @itemDescriptionMargin: 0em 0em 0em 1em;