@openui5/sap.f 1.119.1 → 1.120.0

package/src/sap/f/themes/base/FlexibleColumnLayout.less

@@ -3,8 +3,14 @@
 /* Base theme                                  */
 /* =========================================== */
 
-// synced with FlexibleColumnLayout.NAVIGATION_ARROW_WIDTH
-@_sap_f_FCL_navigation_arrow_width: 1rem;
+// synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH
+@_sap_f_FCL_SeparatorWidth: 1rem;
+@_sap_f_FCL_SeparatorActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
+@_sap_f_FCL_SeparatorDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
+@_sap_f_FCL_SeparatorBorder: none;
+@_sap_f_FCL_SeparatorHoverIconBorderColor: @sapUiButtonLiteBorderColor;
+@_sap_f_FCL_SeparatorHoverIconBackground: @sapUiButtonLiteBackground;
+@_sap_f_FCL_SeparatorButtonColor: @sapUiContentIconColor;
 
 .sapFFCL {
 	&, &.sapMNavItem:not(.sapMNavItemHidden) {
@@ -23,6 +29,7 @@
 		height: 100%;
 		position: relative;
 		visibility: hidden;
+		box-sizing: border-box;
 
 		// When there is content in a panel, it needs min-width
 		&.sapFFCLColumnActive {
@@ -38,12 +45,16 @@
 		}
 
 		&.sapFFCLPinnedColumn {
-			position: absolute;
-			right: 0;
+			overflow-x: hidden;
+
+			.sapFFCLColumnContent {
+				position: absolute;
+				right: 0;
+			}
 		}
 
 		&.sapFFCLColumnInset {
-			padding: 0 0 0 @_sap_f_FCL_navigation_arrow_width;
+			padding: 0 0 0 @_sap_f_FCL_SeparatorWidth;
 		}
 	}
 
@@ -56,6 +67,129 @@
 	}
 }
 
+.sapFFCL .sapFFCLColumnSeparator {
+	color: @_sap_f_FCL_SeparatorButtonColor;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background-color: @sapUiShellBackground;
+	box-sizing: border-box;
+}
+
+.sapFFCLOverlay {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.sapFFCLOverlay > .sapFFCLOverlaySeparator {
+	position: absolute;
+	z-index: 3;
+
+	.sapFFCLColumnSeparatorDecorationBefore {
+		flex-grow: 1;
+		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorActiveDecorationColors);
+	}
+
+	.sapFFCLColumnSeparatorDecorationAfter {
+		flex-grow: 1;
+		background-image: linear-gradient(to bottom ,@_sap_f_FCL_SeparatorActiveDecorationColors);
+	}
+}
+
+.sapFFCL .sapFFCLColumnSeparator {
+	cursor: col-resize;
+	width: 1rem;
+	height: 100%;
+	display: inline-flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	border-left: @_sap_f_FCL_SeparatorBorder;
+	border-right: @_sap_f_FCL_SeparatorBorder;
+	vertical-align: top;
+
+	.sapFFCLColumnSeparatorDecorationBefore {
+		width: 1rem;
+		height: 4rem;
+		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorDecorationColors);
+		background-size: 0.0625rem 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	.sapFFCLColumnSeparatorDecorationAfter {
+		width: 1rem;
+		height: 4rem;
+		height: 4rem;
+		background-image: linear-gradient(to bottom, @_sap_f_FCL_SeparatorDecorationColors);
+		background-size: 0.0625rem 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	.sapFFCLColumnSeparatorGrip {
+		cursor: col-resize;
+		width: 1.5rem;
+		height: 2rem;
+		line-height: 2rem;
+		position: relative;
+		z-index: 1;
+
+		.sapFFCLColumnSeparatorGripIcon {
+			cursor: col-resize;
+			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
+			box-sizing: border-box;
+			height: 1.625rem;
+			width: 1.5rem;
+			margin-top: 3px;
+			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
+			border-radius: @sapUiButtonBorderCornerRadius;
+			background: @sapUiButtonLiteBackground;
+		}
+	}
+
+	&:hover {
+		.sapFFCLColumnSeparatorDecorationBefore,
+		.sapFFCLColumnSeparatorDecorationAfter {
+			flex-grow: 1;
+			transition: all 0.1s ease-in;
+		}
+
+		.sapFFCLColumnSeparatorGripIcon {
+			background: @_sap_f_FCL_SeparatorHoverIconBackground;
+			border-color: @_sap_f_FCL_SeparatorHoverIconBorderColor;
+		}
+	}
+}
+
+
+// focus outline
+.sapFFCL > .sapFFCLColumnSeparator,
+.sapFFCL > .sapFFCLOverlay > .sapFFCLOverlaySeparator {
+	position: relative;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus::after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	}
+}
+
+
 .sapFFCLNavigationButton,
 .sapUiSizeCompact & .sapFFCLNavigationButton {
 	// Button hit area size
@@ -69,6 +203,7 @@
 	vertical-align: middle;
 	position: relative;
 	overflow: visible;
+	cursor: col-resize;
 
 	// Reflection: styles overwritten
 	.sapMBtnInner {
@@ -116,54 +251,27 @@
 	}
 }
 
-.sapFFCLArrow
-{
-	position: relative;
-	vertical-align: middle;
-	display: inline-block;
-	height: 100%;
-	z-index: 4;
-
-	&:after {
-		content: "";
-		display: inline-block;
-		vertical-align: middle;
-		height: 100%;
-	}
-}
-
-.sapFFCLBackgroundDesignTransparent .sapFFCLArrow {
-	background: transparent;
-}
-
-.sapFFCLBackgroundDesignSolid .sapFFCLArrow {
-	background: @sapUiObjectHeaderBackground;
-}
-
-.sapFFCLBackgroundDesignTranslucent .sapFFCLArrow {
-	background: @sapUiShellBackgroundGradient;
-}
-
 // In order to have reveal effect, columns should overlap each other
 .sapFFCLColumnBegin {
 	z-index: 3;
+	flex-shrink: 0;
 }
 
 .sapFFCLColumnMid {
 	z-index: 2;
+	width:100%;
 }
 
 .sapFFCLColumnEnd {
 	z-index: 1;
+	flex-shrink: 0;
 }
 
 html[data-sap-ui-animation='on'] {
 	.sapFFCL {
-		.sapFFCLColumn {
-			&:not(.sapFFCLPinnedColumn) {
-				transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
-				-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
-			}
+		.sapFFCLColumn.sapFFCLAnimatedColumn {
+			transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
+			-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 		}
 	}
 }