bm-core-ui 2.8.2 → 2.9.0

package/build/BMCoreUI.css

@@ -32,6 +32,8 @@
 	position: fixed;
 
 	box-shadow: 0px 4px 12px rgba(0, 0, 0, .33);
+
+	pointer-events: none;
 }
 
 .BMDragIndicatorRed {
@@ -624,7 +626,7 @@
 	background: rgba(0, 128, 255, 1);
 	
 	color: white;
-	font-family: -apple-system, BinkMacSystemFont, 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
 	font-size: 14px;
 	font-weight: bold;
 	
@@ -1118,10 +1120,11 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 
-/* MARK: Layout editor popup */
+/* MARK: Menu and container, Layout editor popup */
+/* #region - Menu container */
 
 .BMLayoutEditorConstraintPopupContainer, .BMMenuContainer {
-	position: absolute;
+	position: fixed;
 
 	left: 0px;
 	top: 0px;
@@ -1132,6 +1135,12 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	z-index: 9999999;
 }
 
+/* A class that is temporarily added to the menu container to allow the user
+   to move over menu items without triggering them while moving torwards the submenu */
+.BMMenuContainer.BMMenuContainerSubmenuActive > * {
+	pointer-events: none !important;
+}
+
 .BMMenuContainerFullScreen {
 	background-color: rgba(0, 0, 0, .33);
 }
@@ -1144,7 +1153,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopup, .BMMenu {
+.BMLayoutEditorConstraintPopup, 
+.BMMenu {
 	position: absolute;
 
 	display: flex;
@@ -1156,6 +1166,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	background-color: rgba(255, 255, 255, .8);
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
 
+	color: rgba(0, 0, 0, .8);
+
 	border-radius: 8px;
 }
 
@@ -1190,10 +1202,39 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
 	z-index: 9999999 !important;
 	overflow: hidden !important;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
 }
 
 .BMMenuSourceNode {
-	display: none !important;
+	visibility: hidden !important;
+}
+
+/* While a touch menu has a submenu, its menu items should not respond to events */
+.BMMenuTouchSubmenu.BMMenu > .BMMenuItem {
+	pointer-events: none;
+
+	/* Additionally add an opacity transition to the items to be used in an animation */
+	transition: opacity .2s ease;
+}
+
+.BMMenuTouchSubmenu.BMMenu {
+	transition: filter .2s ease;
+}
+
+.BMMenuTouchSubmenu.BMMenu.BMMenuInactive > * {
+	opacity: .75 !important;
+}
+
+.BMMenuTouchSubmenu.BMMenu.BMMenuInactive {
+	filter: brightness(95%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1203,7 +1244,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMLayoutEditorConstraintPopup, .BMMenu {
+	.BMLayoutEditorConstraintPopup,
+	.BMMenu {
 		background-color: rgba(50, 50, 50, .75);
 		box-shadow: 0px 4px 8px rgba(0, 0, 0, .66), 0px 0px 0px 1px rgba(0, 0, 0, .66);
 	}
@@ -1221,13 +1263,16 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
+/* #endregion */
+
+/* #region - Menu item */
+
 .BMLayoutEditorConstraintPopupOption, .BMMenuItem {
 	height: 28px;
 	line-height: 28px;
 	vertical-align: middle;
 
 	padding-left: 16px;
-	padding-right: 64px;
 
 	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
 	font-size: 14px !important;
@@ -1238,16 +1283,37 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 	display: flex;
 	align-items: center;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.BMLayoutEditorConstraintPopupOption {
+	padding-right: 64px;
 }
 
 .BMMenuTouch > .BMMenuItem {
 	height: 44px;
 	line-height: 44px;
-	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+.BMMenuTouch > .BMMenuItem:first-child {
+	border-top-width: 0px;
+}
+
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
+	border-top-color: rgba(0, 0, 0, .2);
 }
 
-.BMMenuTouch > .BMMenuItem:last-child {
-	border-bottom-width: 0px;
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
+	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
 }
 
 .BMMenuIcon {
@@ -1259,6 +1325,30 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	margin-right: 16px;
 }
 
+/* The menu's text element should expand to fill all available space */
+.BMMenuItem > span {
+	flex-grow: 1;
+}
+
+.BMMenuItemDisclosure {
+	width: 24px;
+	height: 24px;
+
+	margin-left: 48px;
+	
+	font-weight: 600;
+
+	font-size: 18px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.BMMenuItemDisclosureSubmenu::after {
+	content: '›';
+}
+
 @keyframes BMMenuItemActiveAnimation {
 	from {
 		background: transparent;
@@ -1286,16 +1376,31 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: white;
 }
 
+.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
+	background: white;
+	color: rgba(0, 0, 0, .8);
+}
+
 .BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
 .BMMenuItem.BMMenuItemActive {
-	animation: .2s linear BMMenuItemActiveAnimation;
+	animation: .15s linear BMMenuItemActiveAnimation;
 	animation-fill-mode: both;
 }
 
+.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+	animation: none;
+	background: transparent;
+	color: rgba(0, 0, 0, .8);
+
+	backdrop-filter: brightness(90%);
+	-webkit-backdrop-filter: brightness(90%);
+}
+
 .BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
 	background: rgba(0, 128, 255, .5);
 }
@@ -1305,7 +1410,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .9);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuItem:active, .BMMenuTouch > .BMMenuItem:hover {
+	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
 		background: transparent;
 		color: white;
 	}
@@ -1313,8 +1418,45 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	.BMMenuTouch > .BMMenuItem {
 		border-bottom-color: rgba(255, 255, 255, .1);
 	}
+
+	.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
+	.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+		color: rgba(255, 255, 255, 1);
+	
+		backdrop-filter: brightness(110%);
+		-webkit-backdrop-filter: brightness(110%);
+	}
+
+	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
+		background: rgba(33, 33, 33, 1);
+		color: rgba(255, 255, 255, .9);
+	}
+
+	@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;
+		}
+	}
 }
 
+/* #endregion */
+
 .BMLayoutEditorWorkspaceToolbarSizeClass .BMLayoutEditorConstraintPopupOption {
 	color: rgba(255, 255, 255, .9);
 }
@@ -1443,6 +1585,12 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
+.BMMenuTouch > .BMMenuDivider {
+	margin: 0;
+	height: 3px;
+	background: rgba(0, 0, 0, .1);
+}
+
 .BMLayoutEditorDetailsDividerCell {
 	background: rgba(0, 0, 0, .05);
 }
@@ -1466,7 +1614,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-BMLayoutEditorDetailsItemBadge {
+.BMLayoutEditorDetailsItemBadge {
 	height: 16px;
 
 	border: 1px solid rgba(0, 0, 0, .1);

package/build/BMView/BMLayoutConstraint_v2.5.js

@@ -154,7 +154,7 @@ const _BMLayoutConstraintClasses = {BMLayoutConstraint, BMEqualAttributeLayoutCo
  * A constraint is a linear equation that takes the form of 
  * ```js
 view1.attribute1 = multiplier * view2.attribute2 + constant
-```
+``` 
  * where the equals sign can be replaced with an inequality sign as needed.
  * Note that despite looking like an assignment statement, the constraint expression is a mathematical equation and the layout
  * system may choose to modify either side (or even both) of the equation to fulfill the constraint's requirements.