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

OpenUI5 UI Library sap.m

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

.sapMStdTileTopRow {
	height: 4rem;
	padding: 1rem 1rem 0 1rem;
	margin-bottom: 1rem;
}

.sapMStdTileIconDiv {
	display: inline-block;
	float: left;
}

.sapMStdTileNumDiv {
	display: inline-block;
	float: right;
	width: 7.5rem;
	height: 4rem;
}

.sapMStdTileNum,
.sapMStdTileNumM,
.sapMStdTileNumS {
	white-space: nowrap;
	overflow: hidden;
	text-align: right;
	line-height: 1em;
	font-family: @sapUiFontCondensedFamily;
	font-stretch: condensed; /* for Firefox */
	color: @sapUiContentLabelColor;
}

.sapMStdTileNum {
	font-size: 3rem;
	margin-top: -.437rem;
}

.sapMStdTileNumM {
	font-size: 2.25rem;
	margin-top: -.25rem;
}

.sapMStdTileNumS {
	font-size: 1.5rem;
	margin-top: -.125rem;
}

.sapMStdTileNumUnit {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	text-transform: uppercase;
	font-size: 0.875rem;
}

.sapMStdTileTitle {
	line-height: 1.4rem;
	vertical-align: top;
	text-align: left;
	font-size: 1rem;
	height: 4rem;
	width: 100%;
	overflow: hidden;
	word-break: break-word;
}

html[dir=rtl] .sapMStdTileTitle{
	text-align: right;
}

.sapMStdTileInfo {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	font-size: 0.875rem;
	margin-top: 2rem;
}

html[dir=rtl] .sapMStdTileNum,
html[dir=rtl] .sapMStdTileNumM,
html[dir=rtl] .sapMStdTileNumS,
html[dir=rtl] .sapMStdTileNumUnit,
html[dir=rtl] .sapMStdTileInfo{
	text-align: left;
}

.sapMStdTileBottomRow {
	height: 7rem;
	padding: 0 1rem 1rem 1rem;
}

.sapMStdTileMonitorType {
	margin-top: -2rem;
	padding-top: 2rem;
	background-color: @sapUiTileBackground;
}

.sapMStdTileBottomRow .sapMStdTileMonitorType {
	height: 10rem;
}

html.sap-phone .sapMStdTileTopRow {
	height: 3rem;
	margin-bottom: 0;
}

html.sap-phone .sapMStdTileNumDiv {
	width: 5rem;
	height: 3rem;
}

html.sap-phone .sapMStdTileNumUnit {
	font-size: 0.75rem;
}

html.sap-phone .sapMStdTileBottomRow {
	height: 5rem;
}

html.sap-phone .sapMStdTileMonitorType {
	margin-top: -1rem;
	padding-top: 1rem;
}

html.sap-phone .sapMStdTileTitle {
	line-height: 1.2rem;
	font-size: .875rem;
	height: 4rem;
	margin-bottom: 0;
}

html.sap-phone .sapMStdTileInfo {
	height: 1rem;
	font-size: 0.75rem;
	width: 100%;
	margin-top: 0;
}

html.sap-phone .sapMStdTileNum {
	font-size: 2.375rem;
}

html.sap-phone .sapMStdTileNumM {
	font-size: 1.5rem;
}

html.sap-phone .sapMStdTileNumS {
	font-size:  1rem;
}

.sapMStdTileIconDiv,
.sapMStdTileTitle {
	color: @sapUiTileTitleTextColor;
}

.sapMStdIconMonitor {
	color: @sapUiContentNonInteractiveIconColor;
}

.sapMStdIconCreate {
	color: @sapUiContentNonInteractiveIconColor;
}

.sapMStdTileNumUnit {
	color: @sapUiContentLabelColor;
	text-transform: uppercase;
}

.sapMStdTileInfo {
	color: @sapUiContentLabelColor;
}

.sapMStdTileInfoError {
	color: @sapUiNegativeText;
}

.sapMStdTileInfoWarning {
	color: @sapUiCriticalText;
}

.sapMStdTileInfoSuccess {
	color: @sapUiPositiveText;
}

.sapMTileActive-CTX .sapMStdIconCreate {
	opacity: 1;
}

.sapMTileActive-CTX .sapMStdTileInfoWarning,
.sapMTileActive-CTX .sapMStdTileInfoSuccess,
.sapMTileActive-CTX .sapMStdTileInfoError,
.sapMTileActive-CTX .sapMStdTileTitle,
.sapMTileActive-CTX .sapMStdTileNumUnit,
.sapMTileActive-CTX .sapMStdTileNum,
.sapMTileActive-CTX .sapMStdTileNumM,
.sapMTileActive-CTX .sapMStdTileNumS,
.sapMTileActive-CTX .sapMStdTileInfo,
.sapMTileActive-CTX .sapMStdTileMonitorType {
	color: @sapUiContentContrastTextColor;
}

.sapMTileActive-CTX .sapMStdTileIconDiv,
.sapMTileActive-CTX .sapMStdIconMonitor,
.sapMTileActive-CTX .sapMStdIconCreate {
	color: @sapUiContentContrastIconColor;
}