@openui5/sap.tnt
Version:
OpenUI5 UI Library sap.tnt
128 lines (106 loc) • 3.77 kB
text/less
/* ================================= */
/* CSS for control sap.tnt/InfoLabel */
/* Base theme */
/* ================================= */
@_sap_tnt_InfoLabel_NarrowPadding: 0 0.1875rem;
@_sap_tnt_InfoLabel_LineHeight: normal;
@_sap_tnt_InfoLabel_LineHeightDisplayOnly: 1rem;
@_sap_tnt_InfoLabel_HeightWithoutBorders: 0.875rem;
@_sap_tnt_InfoLabel_PaddingWhenEmpty: 0 @_sap_tnt_InfoLabel_HeightWithoutBorders/2;
/* ==========================================================================
Root element
========================================================================== */
.sapTntInfoLabel {
box-sizing: border-box;
padding: 0 0.3125rem;
text-align: center;
border-radius: 0.5rem;
height: 1rem;
display: inline-block;
max-width: 100%;
line-height: @_sap_tnt_InfoLabel_LineHeight;
.sapTntInfoLabelInner {
font-size: @sapFontSmallSize;
font-weight: bold;
vertical-align: top;
letter-spacing: 0.0125rem;
text-transform: uppercase;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
}
.sapTntInfoLabelRenderModeNarrow { // Recommended for numeric labels (Numeric Mode)
padding: @_sap_tnt_InfoLabel_NarrowPadding
}
/* ==========================================================================
InfoLabel Display Only
========================================================================== */
.sapTntInfoLabel.sapTntInfoLabelDisplayOnly {
border: none;
background: @sapTextColor;
.sapTntInfoLabelInner {
color: @sapContent_ContrastTextColor;
line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
}
}
/* ==========================================================================
InfoLabel No Text
========================================================================== */
.sapTntInfoLabel.sapTntInfoLabelNoText {
padding: 0 0.1875rem;
}
/* ==========================================================================
InfoLabel With Icon
========================================================================== */
.sapTntInfoLabel.sapTntInfoLabelWithIcon {
.sapTntInfoLabelInner .sapTntInfoLabelText {
vertical-align: top;
}
.sapUiIcon {
padding-right: 0.125rem;
line-height: @_sap_tnt_InfoLabel_HeightWithoutBorders;
vertical-align: top;
}
&.sapTntInfoLabelNoText {
padding: @_sap_tnt_InfoLabel_NarrowPadding;
.sapUiIcon {
padding-right: 0;
}
}
&.sapTntInfoLabelDisplayOnly {
.sapUiIcon {
line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
}
}
}
/* ==========================================================================
Empty InfoLabel
========================================================================== */
// It is recommended for the empty InfoLabel to be circle
.sapTntInfoLabel.sapTntInfoLabelNoText:not(.sapTntInfoLabelWithIcon) {
&:not(.sapTntInfoLabelDisplayOnly) {
padding: @_sap_tnt_InfoLabel_PaddingWhenEmpty;
}
&.sapTntInfoLabelDisplayOnly {
padding: 0 @_sap_tnt_InfoLabel_LineHeightDisplayOnly/2;
}
};
/* ==========================================================================
InfoLabel in Form
========================================================================== */
.sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
margin-top: 0.875rem;
}
/* Compact size */
.sapUiSizeCompact .sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
margin-top: 0.5rem;
}
/* ==========================================================================
InfoLabel in Table
========================================================================== */
.sapMListTbl .sapTntInfoLabel.sapTntInfoLabelWithIcon .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) {
font-size: @sapMFontSmallSize;
}