bm-core-ui 2.12.0-beta.6 → 2.12.0-beta.7

package/build/@types/index.d.ts

@@ -10170,7 +10170,7 @@ export class BMMenu {
 	 * @param forKeyboardShortcut      The keyboard shortcut that was triggered.
 	 *     
 	 */
-	private _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
+	protected _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
 
 
 	/**

package/build/BMCoreUI.css

@@ -1524,21 +1524,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-	height: 44px;
-	line-height: 44px;
-	border-top: 1px solid rgba(0, 0, 0, .1);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:first-child {
-	border-top-width: 0px;
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
-	border-top-color: rgba(0, 0, 0, .2);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
-	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
+	height: 38px;
+	line-height: 38px;
 }
 
 .BMMenuIcon {
@@ -1596,48 +1583,104 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 @keyframes BMMenuItemActiveAnimation {
 	from {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	49% {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	50% {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 
 	to {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
-	background: rgb(0, 128, 255);
+@keyframes BMMenuItemActiveAnimationBackground {
+	from {
+		background: transparent;
+	}
+
+	49% {
+		background: transparent;
+	}
+
+	50% {
+		background: rgb(0, 128, 255);
+	}
+
+	to {
+		background: rgb(0, 128, 255);
+	}
+}
+
+.BMLayoutEditorConstraintPopupOption::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem::before,
+.BMMenuItem::before {
+	content: '';
+
+	position: absolute;
+
+	top: 0;
+	bottom: 0;
+
+	left: 4px;
+	right: 4px;
+
+	border-radius: 5px;
+
+	z-index: -1;
+}
+
+.BMLayoutEditorConstraintPopupOption:hover,
+.BMMenuItem.BMMenuItemHighlighted {
 	color: white;
 }
 
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
+	color: rgba(0, 0, 0, .8);
+}
+
+.BMLayoutEditorConstraintPopupOption:hover::before,
+.BMMenuItem.BMMenuItemHighlighted::before {
+	background: rgb(0, 128, 255);
+}
+
 .BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
 	background: white;
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+.BMLayoutEditorConstraintPopupOption:active,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
+.BMLayoutEditorConstraintPopupOption:active::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active::before {
+	background: transparent;
+}
+
+
 .BMMenuItem.BMMenuItemActive {
 	animation: .15s linear BMMenuItemActiveAnimation;
 	animation-fill-mode: both;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
+.BMMenuItem.BMMenuItemActive::before {
+	animation: .15s linear BMMenuItemActiveAnimationBackground;
+	animation-fill-mode: both;
+}
+
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 	animation: none;
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
@@ -1646,7 +1689,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	-webkit-backdrop-filter: brightness(80%);
 }
 
-.BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOptionHighlighted::before,
+.BMMenuItemHighlighted::before {
 	background: rgba(0, 128, 255, .5);
 }
 
@@ -1659,46 +1703,46 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .45);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+	.BMLayoutEditorConstraintPopupOption:active,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
 		background: transparent;
 		color: white;
 	}
 
-	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-		border-bottom-color: rgba(255, 255, 255, .1);
-	}
-
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
 		color: rgba(255, 255, 255, 1);
-	
+	}
+
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 		backdrop-filter: brightness(110%);
 		-webkit-backdrop-filter: brightness(110%);
 	}
 
 	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
-		background: rgba(33, 33, 33, 1);
 		color: rgba(255, 255, 255, .9);
 	}
 
+	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted::before {
+		background: rgba(33, 33, 33, 1);
+	}
+
 	@keyframes BMMenuItemActiveAnimation {
 		from {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		49% {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		50% {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	
 		to {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	}
@@ -1834,12 +1878,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuDivider {
-	margin: 0;
-	height: 3px;
-	background: rgba(0, 0, 0, .1);
-}
-
 .BMLayoutEditorDetailsDividerCell {
 	background: rgba(0, 0, 0, .05);
 }

package/build/BMView/BMMenu.js

@@ -913,8 +913,8 @@ BMMenu.prototype = {
         });
 
         if (!this._supermenu) {
-            // Make the container visible
-            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration, easing}, BMMENU_USE_WEB_ANIMATIONS);
+            // Make the container visible, using a different easing for the opacity so that it doesn't overshoot the 1 limit
+            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration: duration / 2, easing: 'easeOutQuad'}, BMMENU_USE_WEB_ANIMATIONS);
         }
         else {
             this._supermenu._node.classList.add('BMMenuInactive');
@@ -925,8 +925,9 @@ BMMenu.prototype = {
         itemsContainerNode.style.overflow = 'hidden';
         
         __BMVelocityAnimate(menuNode, {opacity: 1}, {
-            duration,
-            easing
+            duration: duration / 2,
+            // Use a different easing for the opacity so that it doesn't overshoot the 1 limit
+            easing: 'easeOutQuad',
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         __BMVelocityAnimate(menuNode, {scaleX: 1, scaleY: 1, translateZ: 0, translateY: 0, translateX: 0}, {
@@ -935,7 +936,7 @@ BMMenu.prototype = {
             complete: _ => {
                 menuNode.style.pointerEvents = 'all';
                 menuContainer.style.pointerEvents = 'all';
-            }
+            },
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         // Animate each child node in
@@ -1577,6 +1578,7 @@ BMMenu.prototype = {
     },
 
     /**
+     * @protected
      * Invoked when the key sequence for a menu item is pressed.
      * @param event <KeyboardEvent>                         The event that triggered this action.
      * {

package/lib/@types/BMCoreUI.min.d.ts

@@ -10170,7 +10170,7 @@ declare class BMMenu {
 	 * @param forKeyboardShortcut      The keyboard shortcut that was triggered.
 	 *     
 	 */
-	private _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
+	protected _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
 
 
 	/**