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

OpenUI5 UI Library sap.m

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

.sapMFeedInBase {
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	box-sizing: border-box;
}

.sapMFeedIn {
	display: block;
	position: relative;
	padding: 0.5rem 0.5rem 0.5rem 5rem;
	width: 100%;
	box-sizing: border-box;
}

.sapMFeedIn.sapMFeedInDisabled {
	opacity: 0.5;
}

/*hide the icon if the width of the screen <=25rem */
@media (max-width: 25rem) {

	.sapMFeedInFigure {
		display: none;
	}

	.sapMFeedIn {
		padding-left: 0.5rem;
	}
}

.sapMFeedInNoIcon {
	padding-left: 0.5rem;
}

.sapMFeedInFigure {
	position: absolute;
	height: 3rem;
	width: 3rem;
	margin: 0.5rem 1rem 0.5rem 1rem;
	background-color: none;
	box-sizing: border-box;
	left: 0;
	border-width: 0.125rem;
	border-style: none;
	border-color: var(--sapField_Background); /* the background parameter is used for to ensure the border theme is aligned with the text area background */
}

.sapMFeedInFigure .sapFAvatarSquare {
	border-radius: var(--sapElement_BorderCornerRadius);
}

.sapMFeedInFigure .sapFAvatarM {
	width: 3rem;
	height: 3rem;
	font-size: 1.125rem;
	box-sizing: border-box;
	border: 0.0625rem solid var(--sapGroup_ContentBorderColor);
}

.sapMFeedInFigure .sapFAvatarImageHolder {
	background: none;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
}

.sapMFeedInImage {
	width: 3.75rem;
	line-height: 3.75rem;
	font-size: 2.25rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
	color: var(--sapContent_ImagePlaceholderForegroundColor);
}

.sapMFeedInImageBgColor {
	background-color: var(--sapContent_ImagePlaceholderBackground);
}

.sapMFeedInBase .sapMFeedInCounter {
	display: block;
	width: 100%;
	text-align: end;
}

.sapMFeedIn .sapMInputBase .sapMTextArea .sapMTextAreaInner {
	box-sizing: border-box;
	width: var(--sapField_BorderWidth);
	border-radius: var(--sapField_BorderCornerRadius);
	font-style: italic;
	font-weight: normal;
	color: var(--sapField_PlaceholderTextColor);
}

.sapMFeedInBase .sapMFeedInCounter .sapMTextAreaCounter {
	overflow: hidden;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSmallSize);
	padding: 0.125rem;
}

.sapMFeedIn:not(.sapMFeedInDisabled) .sapMFeedInContainer {
	background-color: var(--sapGroup_ContentBackground);
}

.sapMFeedIn .sapMFeedInContainer {
	width: 100%;
	height: auto;
	position: relative;
	background-color: var(--sapGroup_ContentBackground);
}

.sapMFeedIn > .sapMFeedInContainer > .sapMInputBase {
	width: 100%;
	padding: 0 4.0rem 0 0;
	margin: 0;
	min-height: 4rem;
}

.sapMFeedIn > .sapMFeedInContainer > .sapMTextArea > .sapMInputBaseInner {
	border-bottom-style: hidden;
	border-top-style: hidden;
	border-left-style: hidden;
	border-right-style: hidden;
	font-family: var(--sapFontFamily);
	font-size: @sapMFontMediumSize;
	font-style: normal;
	font-weight: normal;
	color: var(--sapField_TextColor);
	line-height: 1.5;
	padding: 0.5rem 0.05rem 0.5rem 0.5rem;
	min-height: 4rem;
}

.sapMFeedInContainer .sapMInputBaseInner {
	border: none;
}

.sapMFeedIn .sapMBtn {
	width: 4.0rem;
	height: 3.75rem;
	padding: 0.25rem 0.625rem 0.25rem 0.625rem;
	margin: 0.125rem 0 0.125rem 0.5rem;
	position: absolute;
	right: 0;
	bottom: 0;
	border-width: var(--sapButton_BorderWidth);
	border-radius: var(--sapButton_BorderCornerRadius);
	background-color: var(--sapGroup_ContentBackground);
	font-size: @sapFontSize;
	font-family: var(--sapFontSemiboldDuplexFamily);
}

.sapMFeedIn .sapMBtnInner {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: var(--sapButton_BorderCornerRadius);
	background-color: var(--sapButton_Background);
	border: 1px solid var(--sapButton_BorderColor);
	color: var(--sapButton_TextColor);
	border-width: var(--sapButton_BorderWidth);
}

.sapMFeedIn .sapMBtnIcon {
	width: 2.25rem;
	height: 2.25rem;
}

.sapMFeedIn .sapMInputBase.sapMTextArea .sapMTextAreaInner {
	min-height: 4rem;
	padding: 0.375rem 0.5rem;
}

/* Compact size */
.sapUiSizeCompact .sapMFeedIn .sapMBtnIcon {
	margin-left: 0;
	padding: 0.25rem 0.625rem 0.25rem 0.625rem;
}

.sapUiSizeCompact .sapMFeedIn > .sapMFeedInContainer > .sapMInputBase {
	margin: 0;
	min-height: 4rem;
}

.sapMFeedIn .sapMInputBase .sapMTextArea .sapMInputBaseContentWrapper {
	min-height: 4rem;
}

.sapMFeedIn .sapMInputBase .sapMTextArea {
	width: 100%;
	min-width: 6rem;
	min-height:2.25rem;
	padding: 0 0.625rem;
	margin: 0.25rem 0;
	padding-top: 0.5rem;
	box-sizing: border-box;
	background-color: var(--sapGroup_ContentBackground);
}

.sapMFeedIn > .sapMFeedInContainer.sapMFeedInAcitonButtonContainer > .sapMInputBase {
	width: 100%;
	padding: 0 5.5rem 0 0;
	margin: 0;
	min-height: 4rem;
}

.sapMFeedIn > .sapMFeedInContainer.sapMFeedInAcitonButtonContainer > .sapMFeedInActionButton {
	right: 2.75rem;
}

.sapMFeedIn > .sapMFeedInContainer.sapMFeedInAcitonButtonContainer > .sapMBtn {	
	width: 2.75rem;
	margin: 0.125rem 0rem 0.125rem 0rem;
	padding-left: 0.5rem;
}