@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: @sapUiFieldBackground; /* the background parameter is used for to ensure the border theme is aligned with the text area background */
}

.sapMFeedInFigure .sapFAvatarSquare {
    border-radius: @sapUiElementBorderCornerRadius;

    // .sapFAvatarImageHolder {
    //     border-radius: @sapUiElementBorderCornerRadius;
    // }
}

.sapMFeedInFigure .sapFAvatarM {
		width: 3rem;
		height: 3rem;
		font-size: 1.125rem;
		box-sizing: border-box;
		border: 0.0625rem solid @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: @sapUiContentImagePlaceholderForegroundColor;
}

.sapMFeedInImageBgColor {
    	background-color: @sapUiContentImagePlaceholderBackground;
}

.sapMFeedInBase .sapMFeedInCounter {
		display: block;
		width: 100%;
		text-align: end;
}
.sapMFeedIn .sapMInputBase .sapMTextArea .sapMTextAreaInner {
		box-sizing: border-box;
		width: @sapField_BorderWidth; 
		border-radius: @sapField_BorderCornerRadius;
		font-style: italic;
		font-weight: normal;
		color: @sapField_PlaceholderTextColor;
}

.sapMFeedInBase .sapMFeedInCounter .sapMTextAreaCounter {
		overflow: hidden;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontSmallSize;
		padding: 0.125rem;
}

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

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

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

.sapMFeedIn >.sapMFeedInContainer >.sapMInputBase >.sapMInputBaseContentWrapper::before{
    	display: none;
}

.sapMFeedIn >.sapMFeedInContainer > .sapMTextArea> .sapMInputBaseInner {
		border-bottom-style: hidden;
		border-top-style: hidden;
		border-left-style: hidden;
		border-right-style: hidden;
		font-family: @sapUiFontFamily;
		font-size: @sapMFontMediumSize;
		font-style: normal;
		font-weight: normal;
		color: @sapUiFieldTextColor;
		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: 0rem;
		bottom: 0rem;
		border-width: @sapButton_BorderWidth;
		border-radius: @sapButton_BorderCornerRadius;
		background-color:@sapGroup_ContentBackground;
		font-size: @sapFontSize;
		font-family: @sapFontSemiboldDuplexFamily;
}

.sapMFeedIn .sapMBtnInner {
		width: 2.25rem;
		height: 2.25rem;
		padding:0;
		border-radius: @sapButton_BorderCornerRadius;
		background-color:@sapButton_Background;
		border: 1px solid @sapButton_BorderColor;
		color:@sapButton_TextColor;
		border-width: @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:@sapGroup_ContentBackground;
}