From 07eaacd1b98a26402f56aea2cb62b7e3dcbc1fdb Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 3 Nov 2014 18:32:43 -0500 Subject: [PATCH] #1214, Adds floated content to dropdown, adds description --- src/definitions/modules/dropdown.less | 41 ++++++++++++++-- src/themes/default/modules/dropdown.variables | 48 +++++++++++++------ 2 files changed, 71 insertions(+), 18 deletions(-) diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index cefaaec76..34005139a 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -88,8 +88,8 @@ } .ui.dropdown .menu > .item .dropdown.icon { width: auto; - float: @dropdownSubMenuIconFloat; - margin: @dropdownSubMenuIconMargin; + float: @itemDropdownIconFloat; + margin: @itemDropdownIconMargin; } @@ -129,6 +129,31 @@ border-top: none; } +/*-------------- + Floated Content +---------------*/ + +.ui.dropdown > .text > [class*="right floated"], +.ui.dropdown .menu .item > [class*="right floated"] { + float: right; + margin-right: 0em; + margin-left: @floatedDistance; +} +.ui.dropdown > .text > [class*="left floated"], +.ui.dropdown .menu .item > [class*="left floated"] { + float: right; + margin-left: 0em; + margin-right: @floatedDistance; +} + +.ui.dropdown .menu .item > .icon.floated, +.ui.dropdown .menu .item > .flag.floated, +.ui.dropdown .menu .item > .image.floated, +.ui.dropdown .menu .item > img.floated { + margin-top: @itemLineHeightOffset; +} + + /*-------------- Menu Divider ---------------*/ @@ -174,6 +199,16 @@ margin: @itemImageMargin; } +/*----------------- + Item Description +-------------------*/ + +.ui.dropdown > .text > .description, +.ui.dropdown .menu > .item > .description { + margin: @itemDescriptionMargin; + color: @itemDescriptionColor; +} + /*-------------- Sub Menu @@ -213,7 +248,7 @@ } .ui.dropdown .menu > .item > .icon + .text { display: block; - margin-right: @dropdownSubMenuIconDistance; + margin-right: @itemIconDistance; } diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index c92439a5d..bbf820ffb 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -38,6 +38,10 @@ @menuTransition: opacity 0.2s ease; @menuZIndex: 11; +/* Text */ +@textLineHeight: 1em; +@textLineHeightOffset: (@itemLineHeight - 1em); + /* Menu Item */ @itemFontSize: 1rem; @itemBorder: none; @@ -48,9 +52,18 @@ @itemHorizontalPadding: 1.25rem; @itemFontWeight: normal; @itemLineHeight: 1.2em; +@itemLineHeightOffset: (@itemLineHeight - 1em); @itemTextTransform: none; @itemBoxShadow: none; +/* Sub Menu */ +@subMenuTop: 0%; +@subMenuLeft: 100%; +@subMenuRight: auto; +@subMenuDistanceAway: -0.5em; +@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; +@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; +@subMenuZIndex: 21; /* Menu Header */ @menuHeaderColor: @darkTextColor; @@ -74,28 +87,33 @@ /* Menu Image */ @menuImageMaxHeight: 2.5em; -/* Sub Menu Pointer Icon */ -@dropdownSubMenuIconFloat: right; -@dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em; -@dropdownSubMenuIconDistance: 1em; - /* Menu Item Icon */ -@itemIconMargin: 0em 0.75em 0em 0em; +@itemIconFloat: right; +@itemIconMargin: @itemLineHeightOffset 0.75em 0em 0em; +@itemIconDistance: 1em; + +/* Sub-Menu Icon */ +@itemDropdownIconFloat: right; +@itemDropdownIconMargin: @itemIconMargin; + +/* Label */ @itemLabelMargin: @itemIconMargin; + +/* Flag */ @itemFlagMargin: @itemIconMargin; + +/* Image */ @itemImageMargin: @itemIconMargin; -/* Sub Menu */ -@subMenuTop: 0%; -@subMenuLeft: 100%; -@subMenuRight: auto; -@subMenuDistanceAway: -0.5em; -@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; -@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; -@subMenuZIndex: 21; +/* Description */ +@itemDescriptionMargin: 0em 0em 0em 1em; +@itemDescriptionColor: @lightTextColor; + +/* Floated Content */ +@floatedDistance: 1em; /*------------------- -b Types + Types --------------------*/ /* Selection */