@openui5/sap.m/src/sap/m/themes/sap_hcb/InputBase.less

OpenUI5 UI Library sap.m

/* ================================ */
/* CSS for control sap.m/InputBase  */
/* High Contrast Black theme        */
/* ================================ */

.sapMInputBaseInner {
	color: @sapUiFieldTextColor;
}

.sapMInputBaseContentWrapper {
	border: 1px solid @sapUiFieldBorderColor;
	background: @sapUiFieldBackground;
	&.sapMInputBaseContentWrapperState {
		border-width: 1px;
	}
}

.sapMInputBaseDisabled,
.sapMInputBaseReadonly {
	& .sapMInputBaseContentWrapper {
		border: 1px solid @sapUiFieldReadOnlyBorderColor;
	}
}

.sapMInputBaseIcon {
	color: @sapUiContentIconColor;
	&:hover {
		background: @sapUiButtonLiteHoverBackground;
		border-left: 1px solid @sapUiFieldBorderColor;
		margin-left: -1px;
	}
	&:active {
		background-color: @sapUiToggleButtonPressedBackground;
		color: @sapUiButtonActiveTextColor;
		border-left: 1px solid @sapUiFieldBorderColor;
		margin-left: -1px;
	}
}

.sapMInputBaseIconPressed {
	& .sapMInputBaseIcon {
		border-left: 1px solid @sapUiFieldActiveBorderColor;
	}
}

.sapMInputBaseContentWrapperWarning {
	background: @sapUiFieldWarningBackground;
	border-color: @sapUiFieldWarningColor;
}

.sapMInputBaseContentWrapperSuccess {
	background: @sapUiFieldSuccessBackground;
	border-color: @sapUiFieldSuccessColor;
}

.sapMInputBaseContentWrapperError {
	background: @sapUiFieldInvalidBackground;
	border-color: @sapUiFieldInvalidColor;
	& .sapMInputBaseInner {
		font-weight: bold
	}
}

.sapMInputBaseContentWrapperWarning,
.sapMInputBaseContentWrapperError {
	border-style: dashed;
	& .sapMInputBaseInner {
		font-style: italic;
	}
}

.sapMInputBaseReadonlyWrapper .sapMInputBaseInner {
	border-color: @sapUiFieldReadOnlyBorderColor;
	background: @sapUiFieldReadOnlyBackground;
}

.sapMFocus .sapMInputBaseContentWrapper {
	&::before {
		border: 2px dotted @sapUiContentFocusColor;
	}
}

.sapMInputBaseDisabled {
	opacity: 1;
}

.sapMInputBaseDisabledWrapper .sapMInputBaseInner {
	background: @sapUiFieldReadOnlyBackground;
	border-color: @sapUiFieldReadOnlyBorderColor;
	color: @sapUiContentDisabledTextColor;
	font-weight: normal;
	-webkit-text-fill-color: @sapUiContentDisabledTextColor;
}

.sapMInputBaseReadonlyWrapper .sapMInputBaseInner {
	background: @sapUiFieldReadOnlyBackground;
	border-color: @sapUiFieldReadOnlyBorderColor;
}

.sapMInputBaseInner::-webkit-input-placeholder {
	font-style: normal;
	font-weight: normal;
}

.sapMInputBaseInner::-moz-placeholder {
	font-style: normal;
	font-weight: normal;
	opacity: 1;
}

.sapMInputBaseInner:-ms-input-placeholder {
	font-style: normal;
	font-weight: normal;
}

.sapMInputBasePlaceholder {
	font-style: normal;
	font-weight: normal;
}

.sapMInputBaseWarning>.sapMInputBasePlaceholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	background: @sapUiFieldBackground;
}

.sapMInputBaseContentWrapperWarning .sapMInputBaseInner::-webkit-input-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: normal;
}

.sapMInputBaseContentWrapperWarning .sapMInputBaseInner::-moz-placeholder {
	opacity: 1;
}

.sapMInputBaseContentWrapperWarning .sapMInputBaseInner:-ms-input-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: normal;
}

.sapMInputBaseContentWrapperWarning .sapMInputBaseInner::-moz-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: normal;
}

.sapMInputBaseContentWrapperError .sapMInputBaseInner::-webkit-input-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: bold;
}

.sapMInputBaseContentWrapperError .sapMInputBaseInner::-moz-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: bold;
}

.sapMInputBaseError>.sapMInputBasePlaceholder,
.sapMInputBaseContentWrapperError .sapMInputBaseInner:-ms-input-placeholder {
	color: @sapUiFieldTextColor;
	font-style: italic;
	font-weight: bold;
}

.sapMInputBaseContentWrapperError .sapMInputBaseInner::-moz-placeholder {
	opacity: 1;
}

.sapMInputBaseInner::-moz-selection {
	background: @sapUiSelected;
	color: @sapUiContentContrastTextColor;
}

.sapMInputBaseInner::selection {
	background: @sapUiSelected;
	color: @sapUiContentContrastTextColor;
}

.sapMFocus .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper) {
	&::before {
		content: " ";
		position: absolute;
		top: 1px;
		left: 1px;
		right: 1px;
		bottom: 1px;
		border: 2px dotted @sapUiContentFocusColor;
		pointer-events: none;
	}
}

html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapMFocus .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper) {
		&::before {
			content: " ";
			position: absolute;
			top: 1px;
			left: 1px;
			right: 1px;
			bottom: 1px;
			border: 2px dashed @sapUiContentFocusColor;
			pointer-events: none;
		}
	}
}

.sapMInputBaseContentWrapperState .sapMInputBaseInner {
	border-width: 1px;
}

.sapMInputBaseDisabledWrapper {
	background: @sapUiFieldReadOnlyBackground;
	.sapMInputBaseIcon {
		color: @sapUiContentDisabledTextColor;
	}
}

.sapMInputBaseIconPressed .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
	border-color: 1px solid @sapUiFieldActiveBorderColor;
}