@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/m/themes/sap_belize_base/Slider.less

@@ -0,0 +1,186 @@
+/* ============================= */
+/* CSS for control sap.m/Slider  */
+/* Base theme                    */
+/* ============================= */
+
+/* ------------------------------ */
+/* Slider commons styles          */
+/* ------------------------------ */
+@_sap_m_Slider_Height: 3rem;
+@_sap_m_Slider_Height_Compact: 2rem;
+@_sap_m_Slider_Progress: .1875rem;
+@_sap_m_Slider_Progress_Border: 0px;
+@_sap_m_Slider_Top_Bottom_Padding: calc(@_sap_m_Slider_Height - @_sap_m_Slider_Progress - (2 * @_sap_m_Slider_Progress_Border));
+@_sap_m_Slider_Top_Bottom_Padding_Compact: calc(@_sap_m_Slider_Height_Compact - @_sap_m_Slider_Progress - (2 * @_sap_m_Slider_Progress_Border));
+
+.sapMSlider {
+	display: inline-block;
+	vertical-align: top;
+	box-sizing: border-box;
+	position: relative;
+	height: @_sap_m_Slider_Height;
+	padding: calc(@_sap_m_Slider_Top_Bottom_Padding ~"/" 2) 1.0625rem;
+	z-index: 0;
+}
+
+.sapMSliderInner {
+	width: 100%;
+	height: @_sap_m_Slider_Progress;
+	min-width: 4rem;
+	border-radius: 0.25rem;
+	position: relative;
+	background-repeat: no-repeat;
+	z-index: 1;
+	box-sizing: border-box;
+}
+
+.sapUiLocalBusy .sapMSliderInner {
+	z-index: 0;
+}
+
+.sapMSliderProgress {
+	height: 100%;
+	border-radius: 0.25rem;
+}
+
+.sapMSliderProgress,
+.sapMSliderHandle {
+	position: absolute;
+}
+
+.sapMSliderHandle {
+	box-sizing: border-box;
+	display: block;
+	outline: none;
+}
+
+.sapMSliderInput {
+	display: none;
+}
+
+.sapMSliderTickmarks {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	top: -0.75rem;
+	left: 0;
+	right: 0;
+	display: flex;
+	height: 1.75rem;
+	z-index: 0;
+}
+
+.sapMSliderTick {
+	display: inline-block;
+	height: 1rem;
+	border-left: 0.0625rem solid @sapUiFieldBorderColor;
+	margin: 0.4375rem 0 0 -0.0625rem;
+}
+
+
+.sapMSliderTickLabel {
+	display: inline-block;
+	position: absolute;
+	width: 0.0625rem;
+	background-color: @sapUiFieldBorderColor;
+	margin: 0 0 0 -0.0625rem;
+
+	&:last-child {
+		right: 0;
+	}
+}
+
+.sapMSliderLabel {
+	font-size: 0.75rem;
+	padding-top: 0.5rem;
+	display: block;
+	width: 5rem;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	position: absolute;
+	top: 1.75rem;
+	left: -2.5rem;
+	direction: ltr;
+}
+
+/* slider progress bar */
+.sapMSliderProgress {
+	background: @sapUiFieldActiveBorderColor;
+
+	&:before{
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 500%;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
+/* slider handle */
+.sapMSliderHandle {
+	margin-left: -1rem;
+	top: -0.875rem;
+	height: 2rem;
+	width: 2rem;
+	direction: ltr;
+	cursor: pointer;
+
+	/* some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
+	but does support the long-hand properties for each corner like "border-top-left-radius" */
+	border-top-left-radius: 1rem;
+	border-top-right-radius: 1rem;
+	border-bottom-right-radius: 1rem;
+	border-bottom-left-radius: 1rem;
+
+	&:focus:before {
+		content: '';
+		position: absolute;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border-radius: 50%;
+		pointer-events: none;
+		top: -0.25rem;
+		bottom: -0.25rem;
+		left: -0.25rem;
+		right: -0.25rem;
+	}
+}
+
+/* ============ */
+/* compact size */
+/* ============ */
+
+/* slider */
+.sapUiSizeCompact {
+	.sapMSlider {
+		height: @_sap_m_Slider_Height_Compact;
+		padding: calc(@_sap_m_Slider_Top_Bottom_Padding_Compact ~"/" 2) .875rem;
+	}
+
+	/* slider handle */
+	.sapMSliderHandle {
+		height: 1.625rem;
+		width: 1.625rem;
+		margin-left: -0.8125rem;
+		top: -0.75rem;
+	}
+
+	.sapMSliderTickmarks {
+		height: 1rem;
+		top: -0.375rem;
+	}
+
+	.sapMSliderLabel {
+		padding-top: 0.3125rem;
+		top: 1rem;
+	}
+
+	.sapMSliderTick {
+		margin-top: 0.125rem;
+		height: 0.75rem;
+	}
+}

package/src/sap/m/themes/sap_belize_base/SliderTooltip.less

@@ -0,0 +1,55 @@
+/* ============================= */
+/* CSS for control sap.m/SliderTooltip  */
+/* Base theme */
+/* ============================= */
+
+
+/* ------------------------------ */
+/* Slider Tooltip styles          */
+/* ------------------------------ */
+
+.sapMSliderTooltip {
+	position: relative;
+	display: block;
+	flex-shrink: 0;
+	height: 1.625rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	text-align: center;
+	visibility: visible;
+	box-shadow: @sapUiShadowLevel1;
+	background-color: @sapUiGroupContentBackground;
+}
+
+.sapMSliderTooltipInput {
+	height: 100%;
+	width: 100%;
+	border: none;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+	text-align: center;
+	outline: none;
+	-moz-appearance: textfield;
+}
+
+.sapMSliderTooltipInput::-webkit-outer-spin-button,
+.sapMSliderTooltipInput::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.sapMSliderTooltipNonEditable {
+	pointer-events: none;
+}
+
+
+.sapMSliderTooltipInput:-webkit-inner-spin-button,
+.sapMSliderTooltipInput:-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.sapMSliderTooltipErrorState {
+	border: 2px solid;
+}

package/src/sap/m/themes/sap_belize_base/SliderTooltipContainer.less

@@ -0,0 +1,16 @@
+/* ============================= */
+/* CSS for control sap.m/SliderTooltipContainer  */
+/* Base theme */
+/* ============================= */
+
+.sapMSliderTooltipContainer {
+  display: flex;
+  position: absolute;
+  justify-content: space-between;
+  transition-property: left, right;
+}
+
+.sapMSliderTooltipContainerDisabled {
+	opacity: 0.5;
+	pointer-events: none;
+}

package/src/sap/m/themes/sap_belize_base/SplitButton.less

@@ -0,0 +1,101 @@
+/* ================================== */
+/* CSS for control sap.m/SplitButton  */
+/* Base theme                         */
+/* ================================== */
+
+.sapMSB {
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
+}
+
+.sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
+	margin-right: 2.5rem;
+}
+
+.sapMSB .sapMSBArrow {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.sapMSB .sapMSBArrow .sapMBtnIcon {
+	font-size: 0.75rem;
+	line-height: 2.25rem;
+}
+
+.sapUiSizeCompact .sapMSB .sapMSBArrow .sapMBtnIcon {
+	line-height: 1.625rem;
+}
+
+.sapMSB .sapMSBText .sapMBtnInner {
+	text-align: left;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.sapMSB.sapMBtnTransparent .sapMSBText:hover .sapMBtnInner {
+	border-right-width: 0.0625rem;
+	padding-right: 0.5rem;
+}
+
+.sapMTB-Transparent-CTX .sapMSB .sapMSBText:hover .sapMBtnDefault.sapMBtnInner {
+	border-right-width: 0.0625rem;
+	&.sapMBtnText {
+		padding-right: 0.5rem;
+	}
+}
+
+.sapMSB .sapMSBArrow .sapMBtnInner {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.sapMSB:focus {
+	outline: none;
+}
+
+.sapMSB:focus .sapMSBInner::after {
+	content: '';
+	pointer-events: none;
+	position: absolute;
+}
+
+//ie
+.sapMSBTextIE.sapMSBText {
+	padding-right: 2.5rem;
+}
+
+.sapUiSizeCompact {
+	.sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
+		margin-right: 2rem;
+	}
+
+	//ie
+	.sapMSBTextIE.sapMSBText {
+		padding-right: 2rem;
+	}
+
+	.sapMSB .sapMSBInner .sapMSBArrow .sapMBtnIconFirst {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	.sapMTB-Transparent-CTX .sapMSB .sapMSBText:hover .sapMBtnDefault.sapMBtnInner {
+		padding-right: 0.375rem;
+	}
+}
+
+.sapMSB:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
+	top: 0.3125rem;
+	bottom: 0.3125rem;
+	left: 0.0625rem;
+	right: 0.0625rem;
+	border: 0.0625rem dotted @sapUiContentFocusColor;
+}
+
+.sapUiSizeCompact {
+	.sapMSB:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
+		top: 0.25rem;
+		bottom: 0.25rem;
+	}
+}

package/src/sap/m/themes/sap_belize_base/SplitContainer.less

@@ -0,0 +1,223 @@
+/* ===================================== */
+/* CSS for control sap.m/SplitContainer  */
+/* Base theme                            */
+/* ===================================== */
+
+@_sap_m_SplitContainer_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
+@_sap_m_SplitContainer_HeaderHeight: 68px; // should be 4.25rem
+@_sap_m_SplitContainer_MinHeightForHeader: (@_sap_m_SplitContainer_AppHeight + @_sap_m_SplitContainer_HeaderHeight);
+
+.sapMSplitContainer {
+	width: 100%;
+	height: 100%;
+	display: block;
+	position: relative;
+	overflow: hidden;
+}
+
+.sapMSplitContainerMaster {
+	box-sizing: border-box;
+	width: 20rem;
+	float: left;
+	left: 0;
+	z-index: 1;
+	background-color: @sapUiGroupContentBackground;
+	border-right: 0.0625rem solid @sapUiGroupContentBorderColor;
+}
+
+.sapMSplitContainerDetail {
+	box-sizing: border-box;
+	height: 100%;
+}
+
+/* Default Master Animation Behavior */
+.sapMSplitContainerStretchCompress > .sapMSplitContainerMaster,
+.sapMSplitContainerShowHide:not(.sapMSplitContainerPortrait) > .sapMSplitContainerMaster,
+.sapMSplitContainerPopover:not(.sapMSplitContainerPortrait) > .sapMSplitContainerMaster {
+	border-radius: 0;
+}
+
+.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMaster,
+.sapMSplitContainerHideMode > .sapMSplitContainerMaster {
+	display: inline-block;
+	position: absolute;
+	transform: translate3d(-330px,0,0);
+	transition: all 0ms;
+	-webkit-transform: translate3d(-330px,0,0);
+	-webkit-transition: all 0ms;
+	z-index: 5;
+	top: 0;
+	height: 100%;
+	box-shadow: @sapUiShadowLevel2;
+	border-right: @sapUiGroupContentBorderColor;
+	background-clip: padding-box;
+	-webkit-background-clip: padding-box;
+}
+
+.sapMSplitContainerPopover > .sapMPopoverCont > .sapMPopoverScroll > .sapMSplitContainerMaster {
+	border-right: none;
+}
+
+.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerDetail,
+.sapMSplitContainerHideMode > .sapMSplitContainerDetail,
+.sapMSplitContainerPopover .sapMSplitContainerDetail {
+	margin-left: 0;
+}
+
+.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMasterVisible,
+.sapMSplitContainerHideMode > .sapMSplitContainerMasterVisible {
+	transform: translate3d(0,0,0);
+	transition: all 300ms;
+	-webkit-transform: translate3d(0,0,0);
+	-webkit-transition: all 300ms;
+}
+
+.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMasterHidden,
+.sapMSplitContainerHideMode > .sapMSplitContainerMasterHidden {
+	transform: translate3d(-330px,0,0);
+	transition: all 300ms;
+	-webkit-transform: translate3d(-330px,0,0);
+	-webkit-transition: all 300ms;
+	box-shadow: @sapUiShadowLevel2;
+	visibility: hidden;
+}
+
+.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMasterHidden.sapMSplitContainerNoTransition,
+.sapMSplitContainerHideMode > .sapMSplitContainerMasterHidden.sapMSplitContainerNoTransition {
+	transition: none;
+	-webkit-transition: none;
+}
+
+
+.sapMSplitContainerPortrait.sapMSplitContainerStretchCompress > .sapMSplitContainerMaster {
+	width: 320px !important;
+	left: 0;
+}
+
+/* Keyframe Animations */
+@-webkit-keyframes sapMSplitContainerSlidein {
+	from {
+		width: 0px;
+	}
+	to {
+		width: 320px;
+	}
+}
+
+@-webkit-keyframes sapMSplitContainerSlideout {
+	from {
+		width: 320px;
+	}
+	to {
+		width: 0px;
+	}
+}
+
+@-webkit-keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@-webkit-keyframes fadeOut {
+	from { opacity: 1; }
+	to { opacity: 0.7; }
+}
+
+@keyframes sapMSplitContainerSlideout {
+	from {
+		width: 320px;
+	}
+	to {
+		width: 0px;
+	}
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+	from { opacity: 1; }
+	to { opacity: 0.7; }
+}
+
+.sapMSplitContainerPortrait .sapMSplitContainerMasterBtnShow {
+	display: block;
+	animation: fadeIn 300ms;
+	-webkit-animation: fadeIn 300ms;
+}
+
+.sapMSplitContainerPortrait .sapMSplitContainerMasterBtnHide {
+	animation: fadeOut 150ms;
+	-webkit-animation: fadeOut 150ms;
+}
+
+.sapMSplitContainerMasterBtnShow {
+	display: block;
+	animation: fadeIn 1ms;
+	-webkit-animation: fadeIn 1ms;
+}
+
+.sapMSplitContainerMasterBtnHide {
+	animation: fadeOut 5ms;
+	-webkit-animation: fadeOut 5ms;
+}
+
+.sapMSplitContainerMasterBtnHidden {
+	display: none;
+}
+
+.sapMSplitContainerMobile {
+	width: 100%;
+	height: 100%;
+}
+
+.sapMSplitContainer > .sapMSplitContainerDetail .sapMSplitContainerHiddenChild {
+	display: none;
+}
+
+//decrease to minimum transition and animation when animation is off
+//there are 1ms and 5ms values, because the js code depend of the end of the animation
+html[data-sap-ui-animation='off'] {
+
+	.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMaster,
+	.sapMSplitContainerHideMode > .sapMSplitContainerMaster {
+		transition: all 1ms;
+	}
+
+	.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMasterVisible,
+	.sapMSplitContainerHideMode > .sapMSplitContainerMasterVisible {
+		transition: all 1ms;
+	}
+
+	.sapMSplitContainerPortrait.sapMSplitContainerShowHide > .sapMSplitContainerMasterHidden,
+	.sapMSplitContainerHideMode > .sapMSplitContainerMasterHidden {
+		transition: all 1ms;
+	}
+
+	.sapMSplitContainerPortrait .sapMSplitContainerMasterBtnShow {
+		animation: fadeIn 5ms;
+		-webkit-animation: fadeIn 5ms;
+	}
+
+	.sapMSplitContainerPortrait .sapMSplitContainerMasterBtnHide {
+		animation: fadeOut 5ms;
+		-webkit-animation: fadeOut 5ms;
+	}
+}
+
+.sapMSplitContainerMaster .sapMPageHeader {
+	background-color: @sapUiGroupContentBackground;
+	box-shadow: inset 0 -1px @sapUiGroupContentBorderColor;
+}
+
+/* footer separator has priority */
+.sapMSplitContainerMaster footer {
+	z-index: 6;
+}
+
+.sapMPopoverCont .sapMSplitContainerMaster:after {
+	/* popover has its own border, do not show separator */
+	display: none;
+}