@openui5/sap.ui.commons 1.124.2 → 1.126.0

package/src/sap/ui/commons/themes/sap_hcb/base_Splitter.less

@@ -0,0 +1,106 @@
+/* =============================================== */
+/* CSS for control sap.ui.commons/Splitter.control */
+/* =============================================== */
+/*
+.sapUiSplitterFocus,
+.sapUiVSplitterSecondPane:focus,
+.sapUiHSplitterSecondPane:focus,
+.sapUiVSplitterFirstPane:focus,
+.sapUiHSplitterFirstPane:focus {
+	outline: @sapUiBlackBorder dotted 1px;
+}
+*/
+
+.sapUiHorizontalSplitterBar:focus,
+.sapUiVerticalSplitterBar:focus {
+	outline: @sapUiHighlight dashed 1px;
+}
+
+.sapUiVSplitterFirstPane {
+	height: 100%;
+	display: inline-block;
+	vertical-align: top;
+	outline-offset: -1px;
+	/*overflow: hidden;*/
+}
+
+.sapUiHSplitterFirstPane {
+	width: 100%;
+	vertical-align: top;
+	outline-offset: -1px;
+	/*overflow: hidden;*/
+}
+
+.sapUiVSplitterSecondPane {
+	height: 100%;
+	display: inline-block;
+	vertical-align: top;
+	outline-offset: -1px;
+	/*overflow: hidden;*/
+}
+
+.sapUiHSplitterSecondPane {
+	width: 100%;
+	vertical-align: top;
+	outline-offset: -1px;
+	/*overflow: hidden;*/
+}
+
+.sapUiVerticalSplitterBar {
+	background-image: url(../base/img/splitter/splitter_vert_grip.gif);
+	background-color: darken(@sapUiBaseBG, 20);
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 100%;
+	display: inline-block;
+	vertical-align: top; /* needed to hide vertical scrollbar when all elements fit inside the pane. currently works only in FF*/
+	/*z-index:1;*/
+}
+
+.sapUiVerticalSplitterBarHidden {
+	display: none;
+	vertical-align: top; /* needed to hide vertical scrollbar when all elements fit inside the pane. currently works only in FF*/
+	height: 100%;
+	/*z-index:1;*/
+}
+
+.sapUiHorizontalSplitterBar {
+	background-image: url(../base/img/splitter/splitter_horiz_grip.gif);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-color: darken(@sapUiBaseBG, 20);
+	width:100%;
+	/*z-index:1;*/
+}
+
+.sapUiHorizontalSplitterBarHidden {
+	display: none;
+	width:100%;
+	/*z-index:1;*/
+}
+
+.sapUiVerticalSplitterBar:hover {
+	background-color: darken(@sapUiBaseBG, 40);
+	cursor: col-resize;
+}
+
+.sapUiHorizontalSplitterBar:hover {
+	background-color: darken(@sapUiBaseBG, 40);
+	cursor: row-resize;
+}
+
+.sapUiVSBGhost {
+	background-image: url(../base/img/splitter/checkerboard.png);
+	background-repeat: repeat;
+	position: absolute;
+	cursor:   col-resize;
+	z-index: 20;
+}
+
+.sapUiHSBGhost {
+	background-image: url(../base/img/splitter/checkerboard.png);
+	background-repeat: repeat;
+	position: absolute;
+	cursor:  row-resize;
+	z-index: 20;
+}

package/src/sap/ui/commons/themes/sap_hcb/base_TabStrip.less

@@ -0,0 +1,135 @@
+.sapUiTabStrip {
+	border: solid 1px @sapUiMediumBorder;
+	font-family: @sapUiFontFamily;
+	font-size: @sapUiFontSize;
+	box-sizing: border-box;
+	position:relative;
+}
+
+.sapUiTabBar {
+	position: relative;
+	white-space: nowrap;
+	cursor: default;
+}
+
+.sapUiTabBarCnt {
+	white-space: nowrap;
+	display: inline-block;
+	overflow:hidden;
+	margin-top: 0;
+	padding-left: 0;
+	outline: none;
+}
+
+.sapUiTab,
+.sapUiTabSel,
+.sapUiTabDsbl {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	white-space:nowrap;
+}
+
+.sapUiTabL {
+	overflow: hidden;
+}
+
+.sapUiTabDsbl {
+	color: @sapUiContentDisabledTextColor;
+}
+
+.sapUiTabDsbl .sapUiTabIco {  /* make icon on disabled tab look faded out */
+	opacity: .3;
+	filter: alpha(opacity=30);
+}
+
+.sapUiTabClose {
+	vertical-align:top;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+}
+
+.sapUiTabIco {
+	width:16px; /* TODO: application contract... */
+	height:16px;
+	vertical-align:top;
+}
+
+span.sapUiTabIco {
+	font-size: 16px;
+}
+
+.sapUiTabBar .sapUiTabMenu {
+	display: inline-block;
+	float: right;
+	display:none; /* will be toggled by framework code */
+}
+
+.sapUiTabPanel {
+	overflow: auto;
+	left:0;
+	right:0;
+}
+
+/* If height is defined it must be positioned absolute to fit the height*/
+.sapUiTabPanelHeight {
+	position: absolute;
+	bottom:0;
+}
+
+.sapUiTabStripNoSelection {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.sapUiTabBar .sapUiTabStripScrollContainer {
+	display: inline-block;
+	position: absolute;
+	overflow: hidden;
+
+	left: 0;
+	right: 0;
+}
+
+.sapUiTabBar .sapUiTabStripScrollIcon {
+	width: 16px;
+	height: 22px;
+	font-size: 10px;
+	margin-top: 6px;
+	padding-top: 4px;
+	vertical-align: top;
+	visibility: hidden;
+	display: none;
+
+	box-sizing: border-box;
+
+	outline: none;
+	-webkit-user-select: none;  /* Chrome all / Safari all */
+	-moz-user-select: none;     /* Firefox all */
+	user-select: none;
+}
+
+.sapUiTabBar .sapUiTabStripRightScrollIcon {
+	position: absolute;
+	right: 0;
+}
+
+.sapUiTabStrip {
+	&.sapUiTabStripScrollForward .sapUiTabStripRightScrollIcon,
+	&.sapUiTabStripScrollBack .sapUiTabStripLeftScrollIcon {
+		visibility: visible;
+	}
+}
+
+.sapUiTabStrip.sapUiTabStripScrollable .sapUiTabBar {
+	.sapUiTabStripScrollIcon {
+		display: inline-block;
+	}
+
+	.sapUiTabStripScrollContainer {
+		left: 16px;
+		right: 16px;
+	}
+}

package/src/sap/ui/commons/themes/sap_hcb/base_TextArea.less

@@ -0,0 +1,13 @@
+/* =============================================== */
+/* CSS for control sap.ui.commons/TextArea.control */
+/* =============================================== */
+
+.sapUiTxtA{
+	resize: none; /* disable safari resize */
+}
+
+.sapUiTf.sapUiTxtA:not(.sapUiTfInner){
+	height: auto; /* to overwrite defaults from TextField */
+	width: auto;
+	line-height: normal;
+}

package/src/sap/ui/commons/themes/sap_hcb/base_TextField.less

@@ -0,0 +1,122 @@
+/* ================================================ */
+/* CSS for control sap.ui.commons/TextField.control */
+/* ================================================ */
+
+@_sap_ui_commons_TextField_Height: 16px;
+
+.sapUiTf{
+	box-sizing: border-box;
+	vertical-align: top;
+	font-family: @sapUiFontFamily;
+	font-size: @sapUiFontSize;
+	-webkit-appearance: none; /*Needed for safari mobile*/
+}
+
+.sapUiTf::-ms-clear{
+	width : 0;
+	height: 0;
+	display:none;
+}
+
+.sapUiTf:not(.sapUiTfInner){
+	width: 22ex;
+}
+
+/* Inner (ComboBox) */
+.sapUiTfInner.sapUiTf{
+	height: 100%;
+	background: transparent;
+	color: inherit; /* not automatic inherited from outer DIV */
+	outline: none; /* disable safari outline */
+}
+
+html[data-sap-ui-os^='mac'] .sapUiTfDsbl .sapUiTfInner.sapUiTf{
+	color: darken(@sapUiContentDisabledTextColor, 25); /* color for disabled inputs is lighter by browser */
+}
+
+.sapUiTfBrd{
+	border: 1px solid @sapUiFieldBorderColor;
+	-webkit-border-radius: 0px; /*Needed for safari mobile*/
+}
+
+.sapUiTf:not(.sapUiTfBrd){
+	border: none;
+}
+
+.sapUiTfMono{
+	font-family: @sapUiFontMonospaceFamily;
+}
+
+.sapUiTfStd{
+	background-color: @sapUiFieldBackground;
+	color: @sapUiBaseText;
+}
+
+.sapUiTfRo{
+	background-color: @sapUiFieldReadOnlyBackground;
+	color: @sapUiBaseText;
+}
+
+.sapUiTfRo > .sapUiTfInner{
+	cursor: default; /* in ComboBox Cursor is overwitten */
+}
+
+.sapUiTfFoc{
+	background-color: @sapUiFieldBackground;
+	outline: none; /* hide e.g. chrome focus outline */
+}
+
+.sapUiTfBrd.sapUiTfFoc{
+	border-color: @sapUiFieldFocusBorderColor;
+}
+
+.sapUiTfBrd.sapUiTfErr{
+	border-color: @sapUiFieldInvalidColor;
+}
+
+.sapUiTfBrd.sapUiTfWarn {
+	border-color: @sapUiFieldWarningColor;
+}
+
+.sapUiTfBrd.sapUiTfSucc {
+	border-color: @sapUiFieldSuccessColor;
+}
+
+.sapUiTfErr.sapUiTfStd{
+	background-color: @sapUiFieldInvalidBackground;
+}
+
+.sapUiTfWarn.sapUiTfStd{
+	background-color: @sapUiFieldWarningBackground;
+}
+
+.sapUiTfSucc.sapUiTfStd{
+	background-color: @sapUiFieldSuccessBackground;
+}
+
+.sapUiTfDsbl{
+	background-color: @sapUiFieldReadOnlyBackground;
+	color: @sapUiContentDisabledTextColor;
+	/* Avoid text selection in disabled TextFields */
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.sapUiTfBrd.sapUiTfDsbl{
+	border-color: @sapUiFieldDisabledBorderColor;
+}
+
+/* need to be separate statements for each browser, otherwise it will not work */
+.sapUiTfPlace{
+	color: @sapUiExtraLightText;
+}
+.sapUiTf::-webkit-input-placeholder{
+	color: @sapUiExtraLightText;
+}
+.sapUiTf::-moz-placeholder{
+	color: @sapUiExtraLightText;
+}
+.sapUiTf:-ms-input-placeholder{
+	color: @sapUiExtraLightText;
+}

package/src/sap/ui/commons/themes/sap_hcb/base_TextView.less

@@ -0,0 +1,153 @@
+.sapUiTv {
+	font-family: @sapUiFontFamily;
+	font-size: @sapUiFontSize;
+	vertical-align: top;
+	line-height: @sapUiLineHeight;
+	display: inline-block;
+}
+
+.sapUiInverted-CTX .sapUiTv {
+	color: @sapUiTextInverted;
+}
+
+/* Do not invert for table */
+.sapUiInverted-CTX .sapUiTable .sapUiTv {
+	color: @sapUiBaseText;
+}
+
+.sapUiTvH1 { /* be careful - used in other controls with title too */
+	font-size: @sapUiFontHeader1Size;
+	font-weight: bold;
+	line-height: 122%;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvH2 {
+	font-size: @sapUiFontHeader2Size;
+	font-weight: bold;
+	line-height: 122%;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvH3 {
+	font-size: @sapUiFontHeader3Size;
+	font-weight: bold;
+	line-height: 122%;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvH4 {
+	font-size: @sapUiFontHeader4Size;
+	font-weight: bold;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvH5 {
+	font-size: @sapUiFontHeader5Size;
+	font-weight: bold;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvH6 {
+	font-size: @sapUiFontHeader6Size;
+	font-weight: bold;
+	color: @sapUiTextTitle;
+}
+
+.sapUiTvItalic {
+	font-style: italic;
+}
+
+.sapUiTvSmall {
+	font-size: @sapUiFontSmallSize;
+}
+
+.sapUiTvMono {
+	font-family: monospace;
+}
+
+.sapUiTvULine {
+	text-decoration: underline;
+}
+
+/* disabled */
+.sapUiTvDsbl {
+	cursor: default;
+	-moz-user-select: none;
+	color: @sapUiContentDisabledTextColor;
+	outline: none;
+}
+
+.sapUiInverted-CTX .sapUiTv.sapUiTvDsbl {
+	color: @sapUiContentDisabledTextColor;
+}
+
+/* success state */
+.sapUiTvSucc {
+	background-color: @sapUiFieldSuccessBackground;
+}
+
+.sapUiInverted-CTX .sapUiTvSucc {
+	color: @sapUiBaseText;
+}
+
+/* Do not invert for table */
+.sapUiInverted-CTX .sapUiTable .sapUiTvSucc {
+	color: @sapUiFieldSuccessBackground;
+}
+
+/* invalid state */
+.sapUiTvErr {
+	color: @sapUiFieldInvalidColor;
+	border-color: @sapUiFieldInvalidColor;
+	background-color: @sapUiFieldInvalidBackground;
+}
+
+.sapUiInverted-CTX .sapUiTvErr {
+	color: @sapUiFieldInvalidColor;
+}
+
+/* warning state */
+.sapUiTvWarn {
+	background-color: @sapUiFieldWarningBackground;
+}
+
+.sapUiInverted-CTX .sapUiTvWarn {
+	color: @sapUiBaseText;
+}
+
+/* Do not invert for table */
+.sapUiInverted-CTX .sapUiTable .sapUiTvWarn {
+	color: @sapUiBaseText;
+}
+
+/* Designs */
+.sapUiTvEmph {
+	font-weight: bold;
+}
+
+/* alignments */
+.sapUiTvAlignRight{
+	text-align: right;
+}
+
+.sapUiTvAlignLeft{
+	text-align: left;
+}
+
+.sapUiTvAlignCenter{
+	text-align: center;
+}
+
+.sapUiTvInfo{
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-color: @sapBackgroundColor;
+}
+
+.sapUiTvWrap{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

package/src/sap/ui/commons/themes/sap_hcb/base_ToggleButton.less

@@ -0,0 +1,12 @@
+/* =================================================== */
+/* CSS for control sap.ui.commons/ToggleButton.control */
+/* =================================================== */
+
+.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapUiToggleBtn.sapUiToggleBtnPressed {
+	color: @sapUiTextSelection;
+	background-color: @sapUiToggleButtonPressedBackground;
+}
+
+.sapUiBtnS.sapUiBtnDsbl.sapUiToggleBtn.sapUiToggleBtnPressed {
+	background-color: @sapUiToggleButtonPressedDisabledBackground;
+}

package/src/sap/ui/commons/themes/sap_hcb/base_Toolbar.less

@@ -0,0 +1,132 @@
+/**
+ * All Toolbar items are arranged in a flow layout. Once there are too many items to display, some flow into the second row
+ * which is not visible.
+ */
+
+.sapUiTb {
+	height: 26px;
+	border: none;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	position: relative;
+	white-space: normal; // make sure parents don't break the toolbar logic for overflowing to the second line
+}
+
+.sapUiTb.sapUiTbStandalone {
+	height: 28px; /* standalone case has borders one layer below, so the total height of the outermost element needs to be increased */
+}
+
+.sapUiTbDesignTransparent,
+.sapUiTbDesignFlat {
+	background-color: transparent;
+}
+
+.sapUiTbDesignStandard {
+	background-color: @sapUiDarkBG;
+}
+
+/* ToolBar items CONTainer (the outer one, sapUiTbInner is the inner one...)
+   This one is required for the borders, as setting them outside would e.g. invalidate width settings. */
+.sapUiTbCont {
+	height: 22px;
+	line-height: 22px;
+	overflow: hidden;   /* hide the items flowing into the second row */
+	position: relative; /* required for IE7 to make overflow:hidden work! */
+	padding: 4px 0px 0px 10px;
+}
+
+.sapUiTbContLeft.sapUiTbCont{
+	float: left;
+	width: 100%;
+	box-sizing: border-box;
+	height: 27px;
+	padding-top: 1px;
+}
+
+.sapUiTbStandalone .sapUiTbCont {
+	border-width: 1px;
+	border-style: solid;
+}
+
+/* inner container holding all the Toolbar contents */
+.sapUiTbInner {
+	position: relative; /* to allow positioning the overflow button and the cover */
+	overflow: visible;  /* required for the overflow button which is positioned outside! The real overflow hiding is done one level above */
+	margin-right: 20px; /* the space for the overflow button */
+}
+
+/* regular padding between Toolbar items */
+.sapUiTbInner > * , .sapUiTbInnerRight > * {
+	margin-right: 2px;
+	margin-bottom: 20px; /* make sure the second row is out of sight */
+}
+
+.sapUiTbInnerRight {
+	text-align: right;
+	position: absolute;
+	right: 0px;
+	padding: 2px 0px 0px 10px;
+	height: 22px;
+	white-space: nowrap;
+}
+
+/* ToolBar Overflow Button ("chevron arrows") */
+.sapUiTbOB {
+	background-image: url(../base/img/toolbar/overflow.png);
+	background-position: center center;
+	background-repeat: no-repeat;
+	display: none;  /* will be modified by Toolbar.js for displaying/hiding on resize */
+	width: 14px;
+	height: 20px;
+	position: absolute;
+	right: -14px; /* position the overflow button right outside of its container */
+	top: 0px;
+	cursor: pointer;
+	margin-right: 0; /* remove that standard Toolbar item margin */
+}
+
+/* large space between Toolbar items */
+.sapUiTbSpacer {
+	display: inline-block;
+	width: 14px;
+	height: 2px;
+}
+
+/* large space with separator line between Toolbar items */
+.sapUiTbSeparator {
+	display: inline-block;
+	width: 14px;
+	/* Concrete themes must provide the separator graphics */
+}
+
+/* ToolBar overflow Drop-Down menu */
+.sapUiTbDD {
+	position: absolute;
+	top: 0; /* is only made visible after moved to the right position; not setting top:0 causes flashing scrollbars */
+	display: none;
+	width: 222px;
+}
+
+.sapUiTbDD > div {
+	border-width: 1px;
+	border-style: solid;
+	border-color: @sapUiMediumBorder;
+	padding: 6px;
+}
+
+.sapUiTbDD > div > * {
+	margin: 2px;
+}
+
+/* disabled buttons are focuses in Toolbar by ItemNavigation -> so make visible using simple outline*/
+.sapUiTbInner > .sapUiBtnDsbl:focus,
+.sapUiTbInnerRight > .sapUiBtnDsbl:focus{
+	outline: 1px dotted @sapUiBaseBorder;
+}
+
+/* Toolbar inside of Form as Form- and Container- header */
+.sapUiGridTitle > th > .sapUiTb,
+.sapUiFormToolbar > .sapUiTb{
+	border-bottom: 2px solid @sapUiMediumBorder;
+}