@openui5/sap.m/src/sap/m/themes/base/TextArea.less

OpenUI5 UI Library sap.m

/* =============================== */
/* CSS for control sap.m/TextArea  */
/* Base theme                      */
/* =============================== */

@_sapMTextAreaPadding: 0.625rem 0.75rem;
@_sapMTextAreaPadding_Compact: 0.1875rem 0.5rem;

/* uses sapMInputBase styles */

.sapMTextAreaInner {
	overflow: auto; /* remove scrollbars if not needed */
	-webkit-transform: none; /* transform is blocking scroll */
	resize: none;
	margin: 0;
}

.sapMTextArea .sapMInputBaseContentWrapper {
	-webkit-overflow-scrolling: touch;
	height: 100%;
	width: 100%;
	line-height: 0;
	display: block;
}

.sapMTextArea .sapMTextAreaInner {
	-webkit-overflow-scrolling: touch;
	line-height: 1.4;
	height: 100%;
	width: 100%;
}

.sapMTextAreaWithCounter {
	& .sapMTextAreaCounter {
		float:right;
		overflow: hidden;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontSmallSize;
		padding: 0.125rem 0.125rem 0.5rem;
	}

	& .sapMInputBaseContentWrapper {
		height: calc(~"100% - 1.5rem");
	}
}

.sapMTextAreaGrow {
	overflow: hidden;
	position: absolute;
	height: 100%;
	top: 0;
}

/* ensure that the mirror div has the same styles like the inner text area */
.sapMTextAreaMirror {
	/* should not grow more than screen size */
	max-height: calc(100vh - 6rem);
	white-space: pre-wrap;
	border: none;
	overflow: hidden;
	line-height: 1.4;
	visibility: hidden;
	word-break: break-all;
	font-size: 14px;
	padding: @_sapMTextAreaPadding;
}

.sapMInputBase.sapMTextArea {
	height: auto;
	min-height: 2.5rem;

	.sapMTextAreaInner {
		line-height: 1.4;
		padding: @_sapMTextAreaPadding;
		-webkit-overflow-scrolling: touch; /* IOS only */
	}
}

.sapMInputBase.sapMTextArea .sapMInputBaseContentWrapperState {
	.sapMTextAreaInner, .sapMTextAreaMirror {
		padding: 0.5625rem 0.6875rem;
	}
}

.sapMFocus.sapMTextArea {
	& .sapMInputBaseContentWrapper {
		outline: none;

		.sapMInputBaseInner {
			outline: 1px dotted @sapUiContentFocusColor;
			outline-offset: -2px;
		}
	}
}

html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapMFocus.sapMTextArea .sapMInputBaseContentWrapper .sapMInputBaseInner {
		outline: none;
	}
}

/**** Compact Size ****/
.sapUiSizeCompact {
	.sapMInputBase.sapMTextArea {
		min-height: 1.625rem;
		margin: 0.1875rem 0;

		.sapMTextAreaInner, .sapMTextAreaMirror {
			line-height: 1.4;
			padding: @_sapMTextAreaPadding_Compact;
		}
	}

	.sapMTextAreaWithCounter {
		& .sapMTextAreaCounter {
			padding-top: 0.3125rem;
		}
	}
}

.sapUiSizeCompact .sapMInputBase.sapMTextArea .sapMInputBaseContentWrapperState .sapMTextAreaInner {
	padding: 0.125rem 0.4375rem;
}