Show me posts trending
-
-
today
-
-
+ Show me posts trending
+
@@ -427,22 +447,43 @@ themes : ['Default']
A dropdown can be formatted so that its menu is pointing
@@ -450,15 +491,20 @@ themes : ['Default']
+
+
+
+
+
A dropdown can contain a header
+
+
+ Filter
+
+
+
+
+
+
A dropdown can contain dividers to separate related content
+
+
+ Filter
+
+
+
+
+
+
+
A dropdown can contain a ui label.
+
+
+ Filter
+
+
+
+
+
+
+
A dropdown can contain a ui input
+
+
+ Filter
+
+
+
+
+
+
+
A dropdown can contain a ui image
+
+
+ Add User
+
+
+
+
+
diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 0f9b993f6..0520c7283 100755
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@@ -524,10 +524,10 @@
}
/*--- Sub Menu ---*/
-.ui.vertical.menu .item > .menu {
+.ui.vertical.menu .item:not(.dropdown) > .menu {
margin: @subMenuMargin -@horizontalPadding 0em;
}
-.ui.vertical.menu .item > .menu > .item {
+.ui.vertical.menu .item:not(.dropdown) > .menu > .item {
background: none;
padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
font-size: @subMenuFontSize;
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index 50d15c8a3..ac22e6f5f 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -764,7 +764,7 @@
padding-right: @horizontalPadding !important;
}
-.ui.right.labeled.icon.button .icon {
+.ui.right.labeled.icon.button > .icon {
left: auto;
right: 0em;
border-radius: 0em @borderRadius @borderRadius 0em;
diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less
index 85de13f22..9eba75b13 100755
--- a/src/definitions/elements/label.less
+++ b/src/definitions/elements/label.less
@@ -824,9 +824,12 @@ a.ui.yellow.label:hover:before {
}
.ui.empty.circular.labels .label,
.ui.empty.circular.label {
- min-width: 0.5em;
- min-height: 0.5em;
- vertical-align: middle;
+ min-width: 0em;
+ min-height: 0em;
+ overflow: hidden;
+ width: @emptyCircleSize;
+ height: @emptyCircleSize;
+ vertical-align: baseline;
}
/*-------------------
diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
index 19af502f7..51b63f135 100755
--- a/src/definitions/modules/dropdown.js
+++ b/src/definitions/modules/dropdown.js
@@ -45,7 +45,6 @@ $.fn.dropdown = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
- $item = $module.find(selector.item),
$text = $module.find(selector.text),
$search = $module.find(selector.search),
$input = $module.find(selector.input),
@@ -55,6 +54,7 @@ $.fn.dropdown = function(parameters) {
: $module.prev(),
$menu = $module.children(selector.menu),
+ $item = $menu.find(selector.item),
activated = false,
selectionCache = false,
@@ -119,7 +119,7 @@ $.fn.dropdown = function(parameters) {
.attr('tabindex', 0)
;
$menu
- .attr('tabindex', -1)
+ .attr('tabindex', '-1')
;
}
else {
@@ -129,7 +129,7 @@ $.fn.dropdown = function(parameters) {
.attr('tabindex', 0)
;
$menu
- .attr('tabindex', -1)
+ .attr('tabindex', '-1')
;
}
}
@@ -153,11 +153,11 @@ $.fn.dropdown = function(parameters) {
},
refresh: function() {
- $item = $module.find(selector.item);
- $text = $module.find(selector.text);
- $search = $module.find(selector.search);
- $input = $module.find(selector.input);
- $menu = $module.children(selector.menu);
+ $text = $module.find(selector.text);
+ $search = $module.find(selector.search);
+ $input = $module.find(selector.input);
+ $menu = $module.children(selector.menu);
+ $item = $menu.find(selector.item);
},
bind: {
@@ -371,7 +371,7 @@ $.fn.dropdown = function(parameters) {
$nextItem = $visibleItems.eq(0);
}
else {
- $nextItem = $selectedItem.prevAll(':not(.' + className.filtered + ')').eq(0);
+ $nextItem = $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0);
}
if(currentIndex !== 0) {
module.verbose('Up key pressed, changing active item');
@@ -390,7 +390,7 @@ $.fn.dropdown = function(parameters) {
$nextItem = $visibleItems.eq(0);
}
else {
- $nextItem = $selectedItem.nextAll(':not(.' + className.filtered + ')').eq(0);
+ $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0);
}
if(currentIndex + 1 < $visibleItems.size() ) {
module.verbose('Down key pressed, changing active item');
@@ -1310,11 +1310,11 @@ $.fn.dropdown.settings = {
},
selector : {
- menu : '.menu',
- item : '.menu > .item',
text : '> .text:not(.icon)',
input : '> input[type="hidden"], > select',
- search : '> .search'
+ search : '> .search',
+ menu : '.menu',
+ item : '.item'
},
className : {
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
index c9072be5b..becd87a54 100755
--- a/src/definitions/modules/dropdown.less
+++ b/src/definitions/modules/dropdown.less
@@ -56,6 +56,7 @@
white-space: @menuWrap;
font-size: 1rem;
text-shadow: none;
+ text-align: @menuTextAlign;
box-shadow: @menuBoxShadow;
border: @menuBorder;
@@ -66,14 +67,14 @@
}
/*--------------
- Icon
+ Dropdown Icon
---------------*/
.ui.dropdown > .dropdown.icon {
width: auto;
margin: @dropdownIconMargin;
}
-.ui.dropdown .menu .item .dropdown.icon {
+.ui.dropdown .menu > .item .dropdown.icon {
width: auto;
float: @dropdownSubMenuIconFloat;
margin: @dropdownSubMenuIconMargin;
@@ -94,7 +95,7 @@
Menu Item
---------------*/
-.ui.dropdown .menu .item {
+.ui.dropdown .menu > .item {
position: relative;
cursor: pointer;
display: block;
@@ -110,30 +111,59 @@
font-size: @itemFontSize;
text-transform: @itemTextTransform;
font-weight: @itemFontWeight;
- text-align: @itemTextAlign;
-
box-shadow: @itemBoxShadow;
-webkit-touch-callout: none;
}
-.ui.dropdown .menu .item .icon {
- margin: @itemIconMargin;
+.ui.dropdown .menu > .item:first-child {
+ border-top: none;
}
-.ui.dropdown .menu .item:first-child {
- border-top: none;
+/*--------------
+ Menu Divider
+---------------*/
+
+.ui.dropdown .menu > .header {
+ margin: @menuHeaderMargin;
+ padding: @menuHeaderPadding;
+ color: @menuHeaderColor;
+ font-size: @menuHeaderFontSize;
+ font-weight: @menuHeaderFontWeight;
+ text-transform: @menuHeaderTextTransform;
}
+.ui.dropdown .menu > .divider {
+ border-top: @menuDividerBorder;
+ height: 0em;
+ margin: @menuDividerMargin;
+}
+.ui.dropdown .menu > .input {
+ margin: @menuInputMargin;
+ min-width: @menuInputMinWidth;
+}
+.ui.dropdown .menu > .header + .input {
+ margin-top: 0em;
+}
+.ui.dropdown .menu > .input:not(.transparent) input {
+ padding: @menuInputPadding;
+}
+.ui.dropdown .menu > .input:not(.transparent) .icon {
+ padding-top: @menuInputIconOffset;
+}
/*--------------
Item Image
---------------*/
-.ui.dropdown .menu .item > img {
- height: 2.5em;
+.ui.dropdown .text > img,
+.ui.dropdown .text > .image,
+.ui.dropdown .menu > .item > .image,
+.ui.dropdown .menu > .item > img {
display: inline-block;
vertical-align: middle;
- margin-right: 0.5em;
+ width: auto;
+ max-height: @menuImageMaxHeight;
+ margin: @itemImageMargin;
}
@@ -159,9 +189,24 @@
Coupling
*******************************/
+/* Icons / Flags / Labels */
+.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 .menu > .item .flag {
+ margin: @itemFlagMargin;
+}
+
+
/* Remove Menu Item Divider */
-.ui.dropdown .ui.menu .item:before,
-.ui.menu .ui.dropdown .menu .item:before {
+.ui.dropdown .ui.menu > .item:before,
+.ui.menu .ui.dropdown .menu > .item:before {
display: none;
}
@@ -288,7 +333,7 @@ select.ui.dropdown {
.ui.selection.dropdown .menu:before {
display: none;
}
-.ui.selection.dropdown .menu .item {
+.ui.selection.dropdown .menu > .item {
padding-left: @selectionHorizontalPadding !important;
/* Add in spacing for scroll bar */
padding-right: calc(@selectionHorizontalPadding + 1em) !important;
@@ -386,7 +431,7 @@ select.ui.dropdown {
----------------------*/
/* Menu Item Hover */
-.ui.dropdown .menu .item:hover {
+.ui.dropdown .menu > .item:hover {
background-color: rgba(0, 0, 0, 0.03);
z-index: 12;
}
@@ -437,35 +482,35 @@ select.ui.dropdown {
.ui.dropdown.error,
.ui.dropdown.error > .text,
.ui.dropdown.error > .default.text {
- color: @errorTextColor !important;
+ color: @errorTextColor;
}
.ui.selection.dropdown.error {
background: @errorBackgroundColor;
- box-shadow: 0px 0px 0px 1px @errorBorderColor !important;
+ border-color: @errorBorderColor;
}
.ui.selection.dropdown.error:hover {
- box-shadow: 0px 0px 0px 1px @errorBorderColor !important;
+ border-color: @errorBorderColor;
}
.ui.dropdown.error > .menu,
.ui.dropdown.error > .menu .menu {
- box-shadow: 0px 0px 1px 1px @errorBorderColor !important;
+ border-color: @errorBorderColor;
}
-.ui.dropdown.error > .menu .item {
- color: #D95C5C !important;
+.ui.dropdown.error > .menu > .item {
+ color: @errorItemTextColor;
}
/* Item Hover */
-.ui.dropdown.error > .menu .item:hover {
- background-color: #FFF2F2 !important;
+.ui.dropdown.error > .menu > .item:hover {
+ background-color: @errorItemHoverBackground;
}
/* Item Active */
.ui.dropdown.error > .menu .active.item {
- background-color: #FDCFCF !important;
+ background-color: @errorItemActiveBackground;
}
@@ -518,8 +563,8 @@ select.ui.dropdown {
top: 100% !important;
opacity: 1;
}
-.ui.simple.dropdown > .menu .item:active > .menu,
-.ui.simple.dropdown:hover > .menu .item:hover > .menu {
+.ui.simple.dropdown > .menu > .item:active > .menu,
+.ui.simple.dropdown:hover > .menu > .item:hover > .menu {
overflow: visible;
width: auto;
height: auto;
@@ -565,13 +610,13 @@ select.ui.dropdown {
---------------*/
-.ui.pointing.dropdown .menu {
+.ui.pointing.dropdown > .menu {
top: 100%;
margin-top: @pointingMenuDistance;
border-radius: @pointingMenuBorderRadius;
}
-.ui.pointing.dropdown .menu:after {
+.ui.pointing.dropdown > .menu:after {
display: block;
position: absolute;
pointer-events: none;
@@ -587,33 +632,33 @@ select.ui.dropdown {
}
/* Directions */
-.ui.pointing.dropdown .menu:after {
+.ui.pointing.dropdown > .menu:after {
top: @pointingArrowOffset;
left: 50%;
margin: 0em 0em 0em @pointingArrowOffset;
}
-.ui.top.left.pointing.dropdown .menu {
+.ui.top.left.pointing.dropdown > .menu {
top: 100%;
bottom: auto;
left: 0%;
right: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em;
}
-.ui.top.left.pointing.dropdown .menu:after {
+.ui.top.left.pointing.dropdown > .menu:after {
top: @pointingArrowOffset;
left: @pointingArrowDistanceFromEdge;
right: auto;
margin: 0em;
transform: rotate(45deg);
}
-.ui.top.right.pointing.dropdown .menu {
+.ui.top.right.pointing.dropdown > .menu {
top: 100%;
bottom: auto;
right: 0%;
left: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em;
}
-.ui.top.right.pointing.dropdown .menu:after {
+.ui.top.right.pointing.dropdown > .menu:after {
top: @pointingArrowOffset;
left: auto;
right: @pointingArrowDistanceFromEdge;
@@ -621,26 +666,26 @@ select.ui.dropdown {
transform: rotate(45deg);
}
-.ui.left.pointing.dropdown .menu {
+.ui.left.pointing.dropdown > .menu {
top: 0%;
left: 100%;
right: auto;
margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
}
-.ui.left.pointing.dropdown .menu:after {
+.ui.left.pointing.dropdown > .menu:after {
top: 1em;
left: @pointingArrowOffset;
margin: 0em 0em 0em 0em;
transform: rotate(-45deg);
}
-.ui.right.pointing.dropdown .menu {
+.ui.right.pointing.dropdown > .menu {
top: 0%;
left: auto;
right: 100%;
margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
}
-.ui.right.pointing.dropdown .menu:after {
+.ui.right.pointing.dropdown > .menu:after {
top: 1em;
left: auto;
right: @pointingArrowOffset;
diff --git a/src/themes/packages/default/elements/input.variables b/src/themes/packages/default/elements/input.variables
index 8c9e9b575..0498121ca 100755
--- a/src/themes/packages/default/elements/input.variables
+++ b/src/themes/packages/default/elements/input.variables
@@ -40,11 +40,11 @@
@iconFocusOpacity: 1;
@iconSpacing: 0.5em;
@iconMargin: @iconWidth + @iconSpacing;
-@iconTransition: opacity 0.3s ease-out;
+@iconTransition: opacity 0.3s @defaultEasing;
-@transparentIconWidth: @glyphWidth;
-@transparentIconOffset: @lineOffset;
-@transparentIconMargin: @transparentIconWidth + @iconSpacing;
+@transparentIconWidth: auto;
+@transparentIconOffset: (@lineOffset * 2);
+@transparentIconMargin: 1.75em;
/* Circular Icon Input */
@circularIconVerticalOffset: 0.35em;
diff --git a/src/themes/packages/default/elements/label.variables b/src/themes/packages/default/elements/label.variables
index 6755e2282..ff601e375 100755
--- a/src/themes/packages/default/elements/label.variables
+++ b/src/themes/packages/default/elements/label.variables
@@ -9,7 +9,7 @@
@verticalAlign: baseline;
-@verticalMargin: 0.25em;
+@verticalMargin: 0em;
@horizontalMargin: 0.125em;
@backgroundColor: #E8E8E8;
@backgroundImage: none;
@@ -114,6 +114,7 @@
/* Circular Padding */
@circularPadding: 0.5em;
@circularMinSize: 2em;
+@emptyCircleSize: 0.5em;
/* Pointing */
@pointingTriangleSize: 0.6em;
diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables
index face682e6..545237627 100755
--- a/src/themes/packages/default/modules/dropdown.variables
+++ b/src/themes/packages/default/modules/dropdown.variables
@@ -20,10 +20,6 @@
/* Icon */
@dropdownIconMargin: 0em 0em 0em 1em;
-/* Sub Menu Pointer Icon */
-@dropdownSubMenuIconFloat: right;
-@dropdownSubMenuIconMargin: 0em 0em 0em 0.5em;
-
/* Current Text */
@textTransition: color 0.2s @defaultEasing;
@@ -33,6 +29,7 @@
@menuPadding: 0em 0em;
@menuTop: 100%;
@menuWrap: nowrap;
+@menuTextAlign: left;
@menuBorder: 1px solid @borderColor;
@menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
@@ -46,26 +43,57 @@
@itemHeight: auto;
@itemDivider: none;
@itemColor: @textColor;
-@itemVerticalPadding: 0.85em;
-@itemHorizontalPadding: 0.8em;
+@itemVerticalPadding: 0.65rem;
+@itemHorizontalPadding: 1.25rem;
@itemFontWeight: normal;
@itemLineHeight: 1.2;
-@itemTextAlign: left;
@itemTextTransform: none;
@itemBoxShadow: none;
+/* Menu Header */
+@menuHeaderColor: @darkTextColor;
+@menuHeaderFontSize: 0.8em;
+@menuHeaderFontWeight: bold;
+@menuHeaderTextTransform: uppercase;
+@menuHeaderMargin: 1rem 0rem 0.75rem;
+@menuHeaderPadding: 0em @itemHorizontalPadding;
+
+/* Menu Divider */
+@menuDividerMargin: 0.5em 0em;
+@menuDividerColor: rgba(0, 0, 0, 0.05);
+@menuDividerSize: 1px;
+@menuDividerBorder: @menuDividerSize solid @menuDividerColor;
+
+/* Menu Input */
+@menuInputMargin: 0.75rem @itemHorizontalPadding 0.25rem;
+@menuInputMinWidth: 200px;
+@menuInputPadding: 0.5em 1em;
+@menuInputIconOffset: 0.7em;
+
+/* Menu Image */
+@menuImageMaxHeight: 2.5em;
+
+/* Sub Menu Pointer Icon */
+@dropdownSubMenuIconFloat: right;
+@dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em 0.5em;
+
+
/* Menu Item Icon */
@itemIconMargin: 0em 0.75em 0em 0em;
+@itemLabelMargin: @itemIconMargin;
+@itemFlagMargin: @itemIconMargin;
+@itemImageMargin: @itemIconMargin;
/* Sub Menu */
@subMenuTop: 0%;
@subMenuLeft: 100%;
@subMenuRight: auto;
-@subMenuMargin: 0em;
+@subMenuDistanceAway: -0.5em;
+@subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
/*-------------------
- Types
+b Types
--------------------*/
/* Selection */
@@ -143,6 +171,11 @@
@selectedBackground: @subtleTransparentBlack;
@selectedColor: @selectedTextColor;
+/* Error */
+@errorItemTextColor: #D95C5C;
+@errorItemHoverBackground: #FFF2F2;
+@errorItemActiveBackground: #FDCFCF;
+
/*-------------------
Variations
--------------------*/
@@ -153,10 +186,7 @@
/* Floating */
@floatingMenuDistance: 0.5em;
-@floatingMenuBoxShadow:
- 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
- 0px 2px 5px 0px rgba(0, 0, 0, 0.15)
-;
+@floatingMenuBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
@floatingMenuBorderRadius: @borderRadius;
/* Pointing */