@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/ui/ux3/themes/sap_belize_base/NavigationBar.less

@@ -0,0 +1,224 @@
+/* ================================================ */
+/* CSS for control sap.ui.ux3/NavigationBar.control */
+/* ================================================ */
+
+.sapUiUx3NavBar {
+	display: block;
+	border-bottom: 2px solid @sapUiMediumBorder;
+	width: 100%;
+	height: 27px;
+	position: relative;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	overflow: hidden;
+}
+
+.sapUiUx3NavBarUpperCaseText {
+	text-transform: uppercase;
+}
+
+.sapUiUx3NavBar.sapUiUx3NavBarToplevel {
+	height: 50px;
+}
+
+.sapUiUx3NavBarList {
+	margin: 0;
+	padding: 0;
+	display: inline-block;
+	position: absolute;
+	left: 0;
+	right: 6px;
+	height: 27px;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.sapUiUx3NavBarScrollForward > .sapUiUx3NavBarList {
+	right: 56px;
+}
+
+.sapUiUx3NavBarScrollBack > .sapUiUx3NavBarList {
+	right: 56px;
+}
+
+.sapUiUx3NavBarToplevel > .sapUiUx3NavBarList {
+	height: 45px;
+	top: 5px;
+}
+
+.sapUiUx3NavBarList > li {
+	display: inline-block;
+	/*max-width: 300px;
+	overflow: hidden;
+	text-overflow: ellipsis;*/
+	color: @sapUiBaseText;
+	font-weight: bold;
+	line-height: 25px;
+}
+
+.sapUiUx3NavBarItem {
+	display: inline;
+	margin: 0 2px;
+	font-weight: bold;
+	cursor: pointer;
+	font-size: 14px;
+	padding: 3px 9px 7px;
+	color: @sapUiBaseText;
+	text-decoration: none;
+	-webkit-transition-property: color, font-size, padding;
+	-webkit-transition-duration: 0.3s;
+	transition-property: color, font-size, padding;
+	transition-duration: 0.3s;
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarItem {
+	font-size: 15px;
+}
+
+.sapUiUx3NavBarItemSel > a {
+	font-size: 16px;
+	padding: 0 9px 0;
+	-webkit-transition-property: color, font-size, padding;
+	-webkit-transition-duration: 0.3s;
+	transition-property: color, font-size, padding;
+	transition-duration: 0.3s;
+}
+
+.sapUiUx3NavBarDummyItem { /* must maintain the same height as a selected item, so the baseline does not jump during animations */
+	width: 0;
+	font-size: 16px;
+	padding: 0 1px 4px 0;
+	margin: 0;
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarItemSel > a {
+	font-size: 30px;
+	color: white;
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarList > li {
+	color: white;
+	line-height: 36px;
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarDummyItem {
+	font-size: 38px;
+}
+
+html[data-sap-ui-browser*="ie"] .sapUiUx3NavBarItem {
+	padding-bottom: 6px;
+}
+html[data-sap-ui-browser*="ie"] .sapUiUx3NavBarItemSel > a {
+	padding-bottom: 5px;
+}
+
+.sapUiUx3NavBarItem:focus {
+	outline-offset: -2px;
+}
+
+.sapUiUx3NavBarArrow {
+	display: block;
+	border-color: @sapUiText transparent @sapUiMediumBorder;
+	border-style: none solid solid;
+	border-width: medium 5px 5px;
+	position: absolute;
+	bottom: 0;
+	left: -100px; /* park position outside visible area; far enough to make the slide-in animation fast */
+}
+
+.sapUiUx3NavBarArrow:nth-child(3) {
+	display: none; /* do not display arrow when there is only one item (plus dummy) */
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarArrow:nth-child(3) {
+	display: block; /* display arrow in toplevel NavigationBar */
+}
+
+.sapUiUx3NavBarToplevel .sapUiUx3NavBarArrow {
+	border-width: 0 7px 7px;
+}
+
+.sapUiUx3NavBarBack,
+.sapUiUx3NavBarForward {
+	position: absolute;
+	top: 2px;
+	display: inline-block;
+	font-size: 14px;
+	font-weight: bold;
+	padding: 2px;
+	overflow: hidden;
+	width: 20px;
+	height: 16px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	text-decoration: none;
+	display: none;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	cursor: default;
+}
+
+.sapUiUx3NavBarOverflowBtn {
+	position: absolute;
+	display: none;
+	font-size: 14px;
+	font-weight: bold;
+	text-align: center;
+	color: @sapUiBaseText;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	padding: 2px;
+	right: 0;
+	top: 2px;
+}
+
+.sapUiUx3NavBarToplevel > .sapUiUx3NavBarOverflowBtn {
+	top: 20px;
+}
+
+.sapUiUx3NavBarToplevel > .sapUiUx3NavBarBack,
+.sapUiUx3NavBarToplevel > .sapUiUx3NavBarForward {
+	top: 20px;
+}
+
+
+.sapUiUx3NavBarScrollBack .sapUiUx3NavBarOverflowBtn,
+.sapUiUx3NavBarScrollForward .sapUiUx3NavBarOverflowBtn {
+	display: inline-block;
+}
+
+.sapUiUx3NavBarBack {
+	right: 50px;
+}
+
+.sapUiUx3NavBarForward {
+	right: 26px;
+}
+
+.sapUiUx3NavBarScrollBack .sapUiUx3NavBarOverflowBtn,
+.sapUiUx3NavBarScrollForward .sapUiUx3NavBarOverflowBtn {
+	display: inline-block;
+	right: 2px;
+}
+
+.sapUiUx3NavBarScrollBack > .sapUiUx3NavBarList,
+.sapUiUx3NavBarScrollForward > .sapUiUx3NavBarList {
+	right: 76px;
+}
+
+
+.sapUiUx3NavBarScrollBack > .sapUiUx3NavBarBack,
+.sapUiUx3NavBarScrollForward > .sapUiUx3NavBarBack,
+.sapUiUx3NavBarScrollBack > .sapUiUx3NavBarForward,
+.sapUiUx3NavBarScrollForward > .sapUiUx3NavBarForward { /* make arrows visible as soon as scrolling is possible */
+	display: block;
+}
+
+.sapUiUx3NavBarScrollBack > .sapUiUx3NavBarBack,
+.sapUiUx3NavBarScrollForward > .sapUiUx3NavBarForward { /* enable arrow when scrolling in its direction is possible */
+	opacity: 1;
+	filter: none;
+	cursor: pointer;
+}

package/src/sap/ui/ux3/themes/sap_belize_base/NotificationBar.less

@@ -0,0 +1,374 @@
+/* ================================================== */
+/* CSS for control sap.ui.ux3/NotificationBar.control */
+/* Base                                               */
+/* ================================================== */
+
+.sapUiNotificationBar {
+	box-sizing: border-box;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: @sapUiNotificationBarHeight;
+	width: inherit;
+	background-color: @sapUiNotificationBarBG;
+	box-shadow: none;
+	padding: 0 15px 0px 6px;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+	/* while there is no drag&drop the cursor should be default */
+	/*cursor: move;*/
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	outline: none;
+	z-index: 2; /* needed when the NotiBar has to cover the Table's row headers */
+}
+
+.sapUiNotificationBarMaximized {
+	/* height needs to be calculated corresponding to current window height */
+	/*height: @sapUiNotificationBarHeightMaximized;*/
+}
+
+.sapUiNotificationBarMinimized {
+	height: @sapUiNotificationBarHeightMinimized;
+}
+
+.sapUiNotiHover {
+	position: absolute;
+	height: @sapUiNotificationBarHeight;
+	/* IE workaround to detect bar hovering in Min mode */
+	background-color: inherit;
+	opacity: 0;
+}
+
+.sapUiNotiHover:hover .sapUiBarToggle,
+.sapUiNotiHover:hover + .sapUiBarToggle,
+.sapUiNotificationBar:hover .sapUiBarToggle {
+	display: block;
+}
+
+.sapUiBarToggle {
+	display: none;
+	box-sizing: border-box;
+	position: absolute;
+	height: 16px;
+	width: 40px;
+	padding: 0 8px;
+	margin-left: -16px;
+	top: -16px;
+	left: 50%;
+	overflow: hidden;
+	bottom: 0;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background-color: @sapUiNotificationBarBG;
+	cursor: pointer;
+	-webkit-transition: all 0.2s linear;
+	transition: all 0.2s linear;
+}
+
+.sapUiBarToggle.sapUiBarToggleWide {
+	width: 66px;
+	left: 48%;
+}
+
+.sapUiBarToggleItem {
+	width: 24px;
+	display: inline-block;
+	background-repeat: no-repeat;
+	height: 16px;
+	background-position: center center;
+	font-family: 'SAP-icons';
+	color: white;
+	font-size: 16px;
+	opacity: 0.5;
+	text-align: center;
+}
+
+.sapUiBarToggleItem:hover,
+.sapUiBarToggleItem:active {
+	background-color: @sapUiNotifierHoverColor;
+	opacity: 1;
+}
+
+/* Enlarge Arrow */
+.sapUiBarToggleArrowUp::before {
+	content: "\e200";
+}
+
+/* Minimize Arrow */
+.sapUiBarToggleArrowDown::before {
+	content: "\e1f9";
+}
+
+/* BarUp */
+.sapUiBarToggleBarUp::before {
+	content: "\e1e9";
+}
+
+/* BarDown */
+.sapUiBarToggleBarDown::before {
+	content: "\e1ea";
+}
+
+.sapUiBarToggleArrowUp.sapUiBarToggleHide {
+	display: none;
+}
+
+.sapUiBarToggleArrowDown.sapUiBarToggleHide {
+  display: none;
+}
+
+.sapUiBarToggleBarUp.sapUiBarToggleHide {
+	display: none;
+}
+
+.sapUiBarToggleBarDown.sapUiBarToggleHide {
+	display: none;
+}
+
+.sapUiNotifiers {
+  padding: 0px;
+  margin: 0px;
+  height: inherit;
+}
+
+.sapUiNotifier {
+	/* this is needed to show the Notifier's icon on tablets. Otherwise the icon would be only visible if
+	the windows i.e. */
+	-webkit-transform: translate3d(0, 0, 0);
+	display: inline-block;
+	position: relative;
+	font-size: 12px;
+	cursor: pointer;
+	background-repeat: no-repeat;
+	background-position: 8px;
+	width: @sapUiNotifierWidth;
+	height: @sapUiNotifierWidth;
+	margin: 0;
+	padding: 0;
+	vertical-align: top;
+	outline: none;
+}
+
+.sapUiNotifier:hover,
+.sapUiNotifier:focus {
+	background-color: @sapUiNotifierHoverColor;
+}
+
+.sapUiNotifier img, .sapUiNotifier .sapUiIcon {
+	position: relative;
+	top: 8px;
+	left: 8px;
+	opacity: 0.75;
+	font-size: 22px;
+	cursor: pointer;
+}
+
+.sapUiNotifier:hover img, .sapUiNotifier:hover .sapUiIcon {
+	opacity: 1;
+}
+
+.sapUiNotifierSeparator {
+	.sapUiNotifier;
+	background-color: @sapUiNotifierSeparator;
+	height: 24px;
+	width: @sapUiNotifierSeparatorWidth;
+	margin: 8px 0 0 0;
+}
+
+.sapUiNotifierCallout {
+	position: fixed;
+	background-color: @sapUiNotificationBarBG;
+	border: 4px solid @sapUiNotificationBarCalloutBorder;
+	width: 250px;
+	max-width: 250px;
+}
+
+html[dir=rtl] .sapUiNotifierCallout {
+	max-width: 250px;
+}
+
+.sapUiNotifierCallout > .sapUiCltBaseCont {
+	background-color: transparent;
+}
+
+.sapUiNotifierCallout .sapUiCltArr.sapUiCltBaseArr {
+	position: absolute;
+	-webkit-transform: rotate(0deg);
+	transform: rotate(0deg);
+	background-color: transparent;
+	/* currently the values must be defined separately to ensure the generating of the CSS-file */
+	/*border-color: rgba(44, 44, 44, 0.92) transparent transparent transparent;*/
+	border-top-color: @sapUiNotificationBarCalloutArr;
+	/*border-top-color: @sapUiNotificationBarBG;*/
+	border-left-color: transparent;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	border-style: solid;
+	border-width: 10px;
+	height: 0;
+	width: 0;
+}
+
+.sapUiNotifierContainers {
+	max-height: @sapUiNotificationBarHeightMaximized;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+.sapUiNotifierContainer {
+	margin: 0px 0px;
+	display: inline;
+}
+
+.sapUiNotifierContent {
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+.sapUiNotifierTitle {
+	background-color: transparent;
+	color: white;
+	margin: 5px 0px;
+	font-size: 14px;
+	font-weight: bold;
+	width: 100%;
+}
+
+.sapUiNotifierMessage {
+	min-height: 35px;
+	background: transparent;
+	padding: 5px 5px;
+	outline: none;
+}
+
+.sapUiNotifierSelectable .sapUiNotifierMessage {
+	cursor: pointer;
+}
+
+.sapUiNotifierSelectable .sapUiNotifierMessage.sapUiNotifierMessageReadOnly {
+	cursor: default;
+}
+
+.sapUiNotifierMessage:hover,
+.sapUiNotifierMessage:focus {
+	background-color: @sapUiNotifierHoverColor;
+}
+
+.sapUiNotificationMessageItem {
+	max-height: 40px;
+	margin: 0;
+	padding: 0;
+	color: white;
+	padding-left: 12px;
+	padding-top: 2px;
+	white-space: normal;
+	vertical-align: top;
+}
+
+.sapUiNotificationBarCltSep {
+	background-color: @sapUiNotifierSeparator;
+	height: 1px;
+	margin: 0px;
+}
+
+li.sapUiNotificationMessageItem {
+	max-height: 40px;
+	display: table-cell;
+	position: relative;
+	width: 100%;
+}
+
+li.sapUiInPlaceMessage {
+	display: inline-block;
+	height: 100%;
+}
+
+li.sapUiInPlaceMessage div.sapUiNotifierMessageText {
+	margin-top: 2px;
+	font-size: 12px;
+	overflow: hidden;
+	max-height: 12px;
+	padding-bottom: 2px;
+	white-space: nowrap;
+	outline: none;
+}
+
+li.sapUiInPlaceMessage > div.sapUiNotifierMessageText:focus {
+	background-color: @sapUiNotifierHoverColor;
+}
+
+/* Only if there is an event handler show the messages as clickable */
+.sapUiInPlaceMessageSelectable:hover,
+.sapUiInPlaceMessageSelectable:active {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.sapUiNotifierMessageIcon {
+	height: 32px;
+	max-height: 32px;
+	float: left;
+	background: transparent;
+	margin-right: 8px;
+	padding-bottom: 10px;
+}
+
+.sapUiNotifierMessageText {
+	color: @sapUiNotificationText;
+	background: transparent;
+	text-overflow: ellipsis;
+	max-height: 30px;
+	overflow: hidden;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+.sapUiNotifierMessageTimestamp {
+	margin-top: 2px;
+	color: @sapUiNotificationTimestamp;
+	font-size: 11px;
+	font-weight: normal;
+	line-height: 1.3;
+	background: transparent;
+}
+
+.sapUiNotifierMessageCount {
+	right: 4px;
+	top: 4px;
+	position: absolute;
+	box-sizing: border-box;
+	background-color: @sapUiHighlight;
+	border: 1px solid @sapUiWhiteBG;
+	padding: 0 3px;
+	border-radius: 7px;
+	font-size: 11px;
+	font-weight: bold;
+	line-height: 12px;
+	color: @sapUiTextInverted;
+	vertical-align: middle;
+}
+
+/* Waiting for UX's answer if a Warning/Information parameter will be provided */
+.sapUiNotifierMessageCount.sapUiMessage,
+.sapUiNotifierMessageCount.sapUiMessage.sapUiMessageInformation {
+	background-color: @sapUiBlue;
+}
+
+.sapUiNotifierMessageCount.sapUiMessage.sapUiMessageSuccess {
+	background-color: @sapUiButtonAcceptBackground;
+}
+
+.sapUiNotifierMessageCount.sapUiMessage.sapUiMessageWarning {
+	background-color: lighten(@sapUiWarningBorder, 20%);
+	color: @sapUiDeepText;
+}
+
+.sapUiNotifierMessageCount.sapUiMessage.sapUiMessageError {
+	background-color: @sapUiErrorBorder;
+}

package/src/sap/ui/ux3/themes/sap_belize_base/Overlay.less

@@ -0,0 +1,75 @@
+/* ========================================== */
+/* CSS for control sap.ui.ux3/Overlay.control */
+/* ========================================== */
+
+.sapUiUx3Overlay {
+}
+
+.sapUiUx3OverlayOverlay {
+	color: @sapUiBaseText;
+	background-color: @sapUiWhiteBG;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	opacity: .93;
+	border: 1px solid @sapUiDarkLine;
+}
+
+.sapUiUx3OverlayCloseButton {
+	background: url("../base/img/close.png");
+	position: absolute;
+	right: 20px;
+	top: 20px;
+	height: 22px;
+	width: 22px;
+	cursor: pointer;
+	z-index: 99;
+}
+
+.sapUiUx3OverlayCloseButton:hover {
+	background: url("../base/img/close_hover.png");
+}
+
+.sapUiUx3OverlayCloseButton:focus {
+	background: url("../base/img/close_hover.png");
+}
+
+.sapUiUx3OverlayOpenButton {
+	background: url("../base/img/open_in_new_window_hover.png");
+	background-repeat: no-repeat;
+	background-position: right center;
+	padding-right:22px;
+	color: @sapUiTextSelection;
+	font-weight: bold;
+	position: absolute;
+	right: 50px;
+	top: 5px;
+	display: inline-block;
+	height: 16px;
+	cursor: pointer;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	padding-left: 5px;
+}
+
+.sapUiUx3OverlayOpenButton:hover {
+	background-color: @sapUiHighlight;
+	background-repeat: no-repeat;
+	background-position: right center;
+	padding-right:22px;
+
+}
+
+.sapUiUx3OverlayOpenButton:focus {
+	background-color: @sapUiHighlight;
+	background-repeat: no-repeat;
+	background-position: right center;
+	padding-right:22px;
+}
+
+.sapUiUx3OverlayFocusDummyPane {
+	width:0;
+	height:0;
+}

package/src/sap/ui/ux3/themes/sap_belize_base/OverlayContainer.less

@@ -0,0 +1,20 @@
+/* =================================================== */
+/* CSS for control sap.ui.ux3/OverlayContainer.control */
+/* =================================================== */
+
+.sapUiUx3OC {
+}
+
+.sapUiUx3OCOverlay {
+}
+
+.sapUiUx3OCContent {
+	background-color: @sapUiWhiteBG;
+	position: absolute;
+	top: 29px;
+	left: 29px;
+	bottom: 29px;
+	right: 29px;
+	opacity: 1;
+	padding: 0;
+}

package/src/sap/ui/ux3/themes/sap_belize_base/OverlayDialog.less

@@ -0,0 +1,24 @@
+
+/* ============================================= */
+/* CSS for control sap.ui.ux3/OverlayDialog.control */
+/* ============================================= */
+
+.sapUiUx3OD {
+}
+
+.sapUiUx3ODOverlay {
+}
+
+.sapUiUx3ODContent {
+	background-color: @sapUiWhiteBG;
+	position: absolute;
+	overflow: auto;
+	display: inline-block;
+	top: auto;
+	left: auto;
+	bottom: auto;
+	right: auto;
+	box-shadow: 0 4px 17px rgba(0, 0, 0, 0.4);
+	opacity: 1;
+	padding: 0px;
+}