Browse Source

#4506 leftward now only checks on rightward, so predefined leftward menus are not touched. Fixes spacing on left dropdown icon

pull/5359/merge
Jack 7 years ago
parent
commit
56865fd403
3 changed files with 18 additions and 17 deletions
  1. 10
      src/definitions/modules/dropdown.js
  2. 17
      src/definitions/modules/dropdown.less
  3. 8
      src/themes/default/modules/dropdown.variables

10
src/definitions/modules/dropdown.js

@ -2370,7 +2370,6 @@ $.fn.dropdown = function(parameters) {
if(settings.direction == 'auto') { if(settings.direction == 'auto') {
// reset position // reset position
module.remove.upward(); module.remove.upward();
module.remove.leftward();
if(module.can.openDownward($menu)) { if(module.can.openDownward($menu)) {
module.remove.upward($menu); module.remove.upward($menu);
@ -2378,10 +2377,7 @@ $.fn.dropdown = function(parameters) {
else { else {
module.set.upward($menu); module.set.upward($menu);
} }
if(module.can.openRightward($menu)) {
module.remove.leftward($menu);
}
else {
if(!module.is.leftward($menu) && !module.can.openRightward($menu)) {
module.set.leftward($menu); module.set.leftward($menu);
} }
} }
@ -3056,6 +3052,10 @@ $.fn.dropdown = function(parameters) {
: $menu.transition && $menu.transition('is animating') : $menu.transition && $menu.transition('is animating')
; ;
}, },
leftward: function($subMenu) {
var $selectedMenu = $subMenu || $menu;
return $selectedMenu.hasClass(className.leftward);
},
disabled: function() { disabled: function() {
return $module.hasClass(className.disabled); return $module.hasClass(className.disabled);
}, },

17
src/definitions/modules/dropdown.less

@ -989,6 +989,7 @@ select.ui.dropdown {
.ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .item .left.dropdown.icon + .text,
.ui.dropdown .left.menu .item .dropdown.icon + .text { .ui.dropdown .left.menu .item .dropdown.icon + .text {
margin-left: @itemDropdownIconDistance; margin-left: @itemDropdownIconDistance;
margin-right: 0em;
} }
@ -1363,15 +1364,15 @@ select.ui.dropdown {
} }
/* Upward pointing */ /* Upward pointing */
.ui.pointing.dropdown > .upward.menu,
.ui.top.pointing.dropdown > .upward.menu {
.ui.pointing.upward.dropdown .menu,
.ui.top.pointing.upward.dropdown .menu {
top: auto !important; top: auto !important;
bottom: 100% !important; bottom: 100% !important;
margin: 0em 0em @pointingMenuDistance; margin: 0em 0em @pointingMenuDistance;
border-radius: @pointingUpwardMenuBorderRadius; border-radius: @pointingUpwardMenuBorderRadius;
} }
.ui.pointing.dropdown > .upward.menu:after,
.ui.top.pointing.dropdown > .upward.menu:after {
.ui.pointing.upward.dropdown .menu:after,
.ui.top.pointing.upward.dropdown .menu:after {
top: 100% !important; top: 100% !important;
bottom: auto !important; bottom: auto !important;
box-shadow: @pointingUpwardArrowBoxShadow; box-shadow: @pointingUpwardArrowBoxShadow;
@ -1379,12 +1380,12 @@ select.ui.dropdown {
} }
/* Right Pointing Upward */ /* Right Pointing Upward */
.ui.right.pointing.dropdown:not(.top):not(.bottom) > .upward.menu {
.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
top: auto !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
margin: 0em @pointingArrowDistanceFromEdge 0em 0em; margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
} }
.ui.right.pointing.dropdown:not(.top):not(.bottom) > .upward.menu:after {
.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
top: auto !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
margin: 0em 0em @pointingArrowDistanceFromEdge 0em; margin: 0em 0em @pointingArrowDistanceFromEdge 0em;
@ -1393,12 +1394,12 @@ select.ui.dropdown {
/* Left Pointing Upward */ /* Left Pointing Upward */
.ui.left.pointing.dropdown:not(.top):not(.bottom) > .upward.menu {
.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
top: auto !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
margin: 0em 0em 0em @pointingArrowDistanceFromEdge; margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
} }
.ui.left.pointing.dropdown:not(.top):not(.bottom) > .upward.menu:after {
.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
top: auto !important; top: auto !important;
bottom: 0 !important; bottom: 0 !important;
margin: 0em 0em @pointingArrowDistanceFromEdge 0em; margin: 0em 0em @pointingArrowDistanceFromEdge 0em;

8
src/themes/default/modules/dropdown.variables

@ -342,7 +342,7 @@
/* Flyout Direction */ /* Flyout Direction */
@leftMenuDropdownIconFloat: left; @leftMenuDropdownIconFloat: left;
@leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em;
@leftMenuDropdownIconMargin: @itemLineHeightOffset 0em 0em 0em;
/* Left */ /* Left */
@leftSubMenuBorderRadius: @borderRadius; @leftSubMenuBorderRadius: @borderRadius;
@ -362,13 +362,13 @@
@pointingArrowBackground: @white; @pointingArrowBackground: @white;
@pointingArrowZIndex: 2; @pointingArrowZIndex: 2;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
@pointingArrowSize: @relative7px; @pointingArrowSize: @relative7px;
@pointingMenuDistance: @mini; @pointingMenuDistance: @mini;
@pointingMenuBorderRadius: @borderRadius; @pointingMenuBorderRadius: @borderRadius;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor;
/* Pointing Upward */ /* Pointing Upward */
@pointingUpwardMenuBorderRadius: @borderRadius; @pointingUpwardMenuBorderRadius: @borderRadius;
@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px 0px @menuBorderColor;
Loading…
Cancel
Save