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

OpenUI5 UI Library sap.m

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

.sapMGT {
	display: inline-block;
	border-radius: 0.125rem;
	position: relative;
	outline: none;
	box-sizing: border-box;
	background-position: 0px;
	background: @sapUiTileBackground;
	border: 1px solid @sapUiTileBorderColor;
	box-shadow: @sapUiShadowLevel0;
	vertical-align: top;
}

.sapMGTBackgroundImage {
	background-size: cover;
}

.sapMGT.sapMPointer * {
	cursor: pointer;
}

.sapMGT:focus {
	outline: none;
}

.sapMGT.OneByOne {
	width: 11rem;
	height: 11rem;
}

.sapMGT.TwoByOne {
	width: 22.5rem;
	height: 11rem;
}

.sapMGTHdrTxt,
.sapMGTHdrTxt > .sapMGTTitle,
.sapMGTSubHdrTxt,
.sapMGT .sapMGTContent {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
}

.sapMGTHdrTxt > .sapMGTTitle,
.sapMGenericTileFtrFldTxt>.sapMGTFailed {
	cursor: inherit;
}

.sapMGTInnrCnt {
	display: inline-block;
}

.sapMGTContent {
	height: 6.375rem;
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
}

.sapMGTHdrTxt {
	overflow: hidden;

	.sapMText {
		display: inline;
		line-height: 1.375rem;
	}
}

.sapMGTHdrTxt > .sapMText {
	color: @sapUiTileTitleTextColor;
	font-weight: normal;
	font-family: @sapUiFontFamily;
	font-size: @sapMFontHeader5Size;
}

.sapMGTSubHdrTxt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.375rem;
	font-family: @sapUiFontFamily;
	font-size: @sapMFontMediumSize;
	font-weight: normal;
	color: @sapUiTileTextColor;
}

.sapMGTHdrContent {
	height: 4rem;
	margin-top: 0.625rem;
	margin-left: 0.94rem;
	margin-right: 0.94rem;
}

.sapMGTHdrIconImage {
	float: right;
	width: 2.5rem;
	min-height: 2.5rem;
	font-size: 2.5rem;
	font-family: @sapUiFontHeaderFamily;
	font-weight: @sapUiFontHeaderWeight;
	color: @sapUiTileIconColor;
}

.sapMGenericTileFtrFldTxt {
	font-family: @sapUiFontFamily;
	font-size: @sapMFontSmallSize;
	color: @sapUiTileTextColor;
}

.sapMGenericTileFtrFldIcn {
	color: @sapUiTileTextColor;
}

html.sap-desktop .sapMGT:focus:not([tabindex]) {
	border-color: transparent;
}

.sapMGTOverlay {
	background-color: @sapUiTileBackground;
	border-radius: 0.125rem;
}

.sapMGTOverlayMixin(@offset: 0px, @z-index: 0) {
	position: absolute !important;
	pointer-events: none;
	left: @offset;
	top: @offset;
	right: @offset;
	bottom: @offset;
	& when not (@z-index = 0) {
		z-index: @z-index;
	}
}

.sapMGT.sapMGTScopeActions {

	.sapMTileCntContent {
		position: relative;

		&:after {
			.sapMGTOverlayMixin();
			display: block;
			content: "";
			background-color: fade(@sapUiTileBackground, 70);
		}
	}

	.sapMGTMoreIcon {
		height: 1rem;
		position: absolute;
		right: 0.75rem;
		bottom: 0.563rem;
		z-index: 1; // Remark: If increased, this will break FLP footer visualization.
		color: @sapUiButtonIconColor;
		&:focus {
			outline: none;
		}
	}

	.sapMGTRemoveButton {
		width: 1.375rem;
		height: 1.375rem;
		border-radius: 50%;
		padding: 0px;
		position: absolute;
		top: -0.5rem;
		right: -0.5rem;
		z-index: 3; // Remark: If increased, this will break FLP footer visualization.
		background-color: @sapUiButtonBackground;
		color: @sapUiButtonTextColor;
		overflow: visible;

		.sapMBtnFocusDiv {
			display: none;
		}

		.sapMBtnInner, .sapMBtnActive.sapMBtnInner {
			width: 100%;
			height: 100%;
			min-width: 0px;
			outline-offset: -2px;

			&, &:hover, &:active, &:focus  {
				border-color: @sapUiButtonBorderColor; // Explicitly needed here, because the border would otherwise be transparent in HCB on press
				border-radius: 50% !important; // Made important because the style is not to be overridden in any way
			}
		}

		.sapMBtnIcon {
			font-size: 0.75rem;
			margin: 0px;
			width: 100%;

			&:before {
				position: relative;
				top: -0.125rem;
			}
		}

		&:focus > .sapMFocusable {
			outline: none;
			border-radius: 50%;
		}

		/* The touch area has a different size and is slightly moved to the left and bottom */
		&:before {
			content: "";
			color: @sapUiButtonIconColor;
			position: absolute;
			top: -1px;
			bottom: -0.6875rem;
			left: -0.6875rem;
			right: -0.0625rem;
		}
	}
}

.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage {

	.sapMTileCntContent {
		&:after {
			content: none;
		}
	}

	.sapMGTContent {
		&:before {
			.sapMGTOverlayMixin();
			display: block;
			content: "";
			background-color: fade(@sapUiTileBackground, 70);
			border-radius: 0.125rem;
		}
	}
}

/* mixin for flex-box entries */
.sapMGTFlexEntry(@resizable: 0) {
	display: flex;
	align-items: center;
	-webkit-box-flex: @resizable;
	flex: @resizable @resizable auto;
	-webkit-flex: @resizable @resizable auto;
}

/************************ LINE MODE LIST VIEW ********************/
/* COZY */
.sapUiMedia-GenericTileDeviceSet-small {
	.sapMGTLineMode.sapMGT {
		display: flex;
		align-items: center;
		min-height: 2.5rem;
		min-width: 2rem;
		border-radius: 0.2rem;
		box-shadow: none;
		transition: background-color 0.2s;
		margin-bottom: 0.125rem;
		pointer-events: none;
	}

	.sapMGTLineMode .sapMGTTouchArea {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		flex-direction: row;
		align-items: center;

		width: 100%;
		pointer-events: auto;
		padding: 0.5625rem 0.5rem;
		margin: -0.1875rem 0;
		box-sizing: border-box;
	}

	.sapMGTLineMode .sapMGTLineModeHelpContainer {
		.sapMGTFlexEntry(1);

		flex-wrap: wrap;
		overflow: hidden;
	}

	.sapMGTLineMode .sapMGTHdrTxt {
		position: relative;
		font-size: @sapMFontMediumSize;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100%;
		line-height: 1.375rem;
	}

	.sapMGTLineMode .sapMGTHdrTxt:after {
		content: " ";
		margin-right: 0.5rem;
	}

	.sapMGTLineMode .sapMGTSubHdrTxt {
		display: inline-block;
		font-size: @sapMFontMediumSize;
		max-width: 100%;
		line-height: 1.375rem;
	}

	.sapMGTLineMode .sapMGTLineModeFailedIcon {
		align-self: baseline;
		line-height: 1.375rem;
		padding-right: 0.375rem;
		text-align: left;
		font-size: 1.375rem  !important;
	}
}
/* ActionsContainer Styles commonly shared with all screen sizes in compact and cozy */
.sapMGTLineMode .sapMGTActionsContainer {
	.sapMGTFlexEntry;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-flex-direction: row;
	flex-direction: row;

	align-items: center;
	-webkit-box-align: center;

	line-height: 1.375rem;
	width: 4rem;

	&, * {
		pointer-events: auto;
	}

	.sapMGTMoreIcon {
		display: block;
		position: static;
		right: 0px;
		bottom: 0px;
		width: 2rem;
		height: 1.375rem;
	}

	.sapMGTRemoveButton {
		display: block;
		margin: 0px 0.3125rem;
		left: 2rem;
		position: static;
		top: 0px;
		right: 0px;
		z-index: 0; // Remark: If increased, this will break FLP footer visualization.

		&:before {
			content: none;
		}

		.sapMBtnIcon::before {
			width: 1.25rem;
			height: 1.5rem;
			padding: 0.75rem 0.3125rem;
			margin-top: -0.75rem;
			margin-left: -0.3125rem;
			display: inline-block;
		}
	}
}
.sapUiSizeCompact {
	.sapMGTLineMode .sapMGTActionsContainer {
		.sapMGTRemoveButton .sapMBtnIcon::before {
			padding: 0.25rem 0.3125rem;
		}
	}
}

/* Fix for IE not displaying items in line */
html[data-sap-ui-browser*='ie'] .sapMGTLineMode .sapMGTTouchArea {
	margin-bottom: 0px;
	margin-top: 0px;
}
html[data-sap-ui-browser*='ie'] .sapUiSizeCompact .sapMGTLineMode .sapMGTTouchArea {
	margin-top: 2px;
	margin-bottom: 0px;
}

/* IE does not support text-align: start, this is a workaround:*/
html[dir=rtl] .sapMGTLineMode .sapMGTLineModeFailedIcon {
	text-align: right;
}
/* COMPACT */
.sapUiMedia-GenericTileDeviceSet-small {
	&.sapUiSizeCompact, .sapUiSizeCompact {
		.sapMGTLineMode.sapMGT {
			min-height: 1.625rem;
		}
		.sapMGTLineMode .sapMGTTouchArea {
			padding: 0.125rem 0.5rem;
			margin: -0.1875rem 0;
		}
		.sapMGTLineMode .sapMGTLineModeFailedIcon {
			font-size: 1.25rem !important;
		}
	}
}
/************************ LINE MODE FLOATING VIEW *****************/
/* COZY */
.sapUiMedia-GenericTileDeviceSet-large {
	&.sapMGTLineModeContainer, .sapMGTLineModeContainer {
		padding-right: 1.0rem;
		box-sizing: border-box;
		position: relative; /* make the tile's parent <<positioned>>, in order to make JS get the correct offsetParent */
	}

	.sapMGT.sapMGTLineMode {
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
		-ms-user-select: none;
		-webkit-text-size-adjust:100%;
	}

	.sapMGT.sapMGTLineMode {
		float: none;
		clear: none;
		margin-bottom: 0px;

		display: inline;
		min-width: 2rem;
		border-radius: 0px;
		box-shadow: none;
		background: none !important;
		border: 1px solid transparent !important;
		position: relative;

		@line-height: 2.75rem;
		@padding-top: 0.125rem;
		@padding-bottom: 0.125rem;
		margin-top: @padding-top + @padding-bottom; /* used as hover-style bar-offset top, does not have an effect for inline elements */
		min-height: @line-height - @padding-top - @padding-bottom; /* used as hover-style bar height */
		line-height: @line-height !important;
		height: @line-height;
		padding: (@line-height / 2) - (@sapMFontMediumSize / 2) 0;
		pointer-events: none;
	}

	.sapMGTLineMode .sapMGTHdrTxt, .sapMGTLineMode .sapMGTSubHdrTxt {
		word-break: normal;
		display: inline;
		white-space: normal;
		position: relative;
		left: 0.5rem;
		top: 1px;
		border-top: 2px solid transparent;
		border-bottom: 2px solid transparent;
		z-index: 2;

		padding-right: 0.5rem;

		&:after {
			content: none;
		}
	}

	.sapMGTLineMode .sapMGTSubHdrTxt {
		margin-right: 0.5rem;

		&:before { //this is needed to enable line-wrapping between header end and subheader beginning
			content: "";
			display: inline-block;
		}
	}

	.sapMGTLineMode .sapMGTLineModeFailedIcon {
		display: inline-block;
		line-height: 1.375rem;
		width: 1.75rem;
		vertical-align: top;
		padding-right: 0px;
		margin-top: 0.6875rem;
		position: relative;
		left: 0.5rem;
		border-right: 0.375rem solid transparent;
		box-sizing: border-box;
		font-size: 1.375rem  !important;
	}
	.sapMGTLineMode .sapMGTHdrTxt {
		border-left: 0.5rem solid transparent;
		margin-left: -0.5rem;
	}

	.sapMGTLineMode .sapMGTHdrTxt:last-of-type {
		padding-right: 0.5rem;
		margin-right: 0.5rem;
	}

	.sapMGTLineMode.sapMGTScopeActions:not(.sapMGTDisabled) {
		.sapMGTHdrTxt:last-of-type, .sapMGTSubHdrTxt {
			padding-right: 4.25rem;
		}
	}

	.sapMGTActionsContainer {
		position: absolute;
		right: 0.1875rem; //together with RemoveButton's margin, this fulfills the right-padding of 0.5rem
		bottom: 0px;
		line-height: 1.375rem;
		z-index: 2; // Remark: If increased, this will break FLP footer visualization.
		padding: 0px;
		height: 1.5rem;

		&, * {
			pointer-events: auto;
		}
	}

	.sapMGTStartMarker, .sapMGTEndMarker {
		display: inline-block;
		position: relative;
		top: 0.5rem;
		z-index: 3; // Remark: If increased, this will break FLP footer visualization.
	}

	.sapMGTStyleHelper {
		position: absolute;
		top: 0px;
		width: 100%;
	}

	.sapMGTLineStyleHelper {
		position: absolute;
		pointer-events: auto;

		.sapMGTLineStyleHelperInner {
			.sapMGTOverlayMixin();
		}

		&:not(:last-child) {
			border-bottom: 0.25rem solid transparent;
		}
	}

	.sapMGTLineMode .sapMGTHdrTxt {
		max-height: none !important;
	}
}

/* COMPACT */
.sapUiMedia-GenericTileDeviceSet-large {
	&.sapUiSizeCompact, .sapUiSizeCompact {
		.sapMGT.sapMGTLineMode {
			@line-height: 1.875rem;
			@padding-top: 0.125rem;
			@padding-bottom: 0.125rem;
			margin-top: @padding-top + @padding-bottom; /* used as hover-style bar-offset top, does not have an effect for inline elements */
			min-height: @line-height - @padding-top - @padding-bottom; /* used as hover-style bar height */
			line-height: @line-height !important;
			height: @line-height;
			padding: (@line-height / 2) - (@sapMFontMediumSize / 2) 0;
		}
		.sapMGTLineMode .sapMGTLineModeFailedIcon {
			display: inline-block;
			line-height: 1.375rem;
			width: 1.625rem;
			vertical-align: middle;
			padding-right: 0px;
			margin-top: 0px;
			position: relative;
			left: 0.5rem;
			border-right: 0.375rem solid transparent;
			box-sizing: border-box;
			font-size: 1.25rem  !important;
		}
	}
}

/* Fix for rendering order on tablets in RTL */
html[dir=rtl] .sapMGTLineMode {
	.sapMGTHdrTxt, .sapMGTSubHdrTxt {
		unicode-bidi: -webkit-isolate; /* needs to be prefixed for older webkit browsers */
	}
}

/******************* OVERLAYS AND HELPERS *******************/
.sapMGTOverlay {
	.sapMGTOverlayMixin();
	opacity: 0.8;
}

.sapMGT .sapMGTFocusDiv {
	.sapMGTOverlayMixin(0px, 2);
	border-radius: 0.25rem;
}
.sapMGT.sapMGTBackgroundImage .sapMGTFocusDiv {
	.sapMGTOverlayMixin(1px, 2);
}

.sapMGTLineMode .sapMGTFocusDiv {
	top: 1px;
	right: 1px;
	left: 1px;
	bottom: 1px;
	border-radius: 0.25rem;
}

.sapMGenericTileFtrFld {
	left: 0.4375rem;
	right: 0.4375rem;
	bottom: 0.4375rem;
	position: absolute;
}

.sapMGenericTileFtrFldTxt {
	font-weight: normal;
	display:table-cell;
	padding-left: 0.5rem;
	vertical-align: bottom;
	width: 100%;
}

html[dir=rtl] .sapMGenericTileFtrFldTxt {
	padding-right:0.5rem;
}

.sapMGenericTileFtrFldIcn {
	margin-right: 0.5rem;
	display: table-cell;
	vertical-align: bottom;
}

.sapMGenericTileFtrFldIcn>.sapMGTFtrFldIcnMrk {
	vertical-align: bottom;
}

.sapMST .sapMGT.sapMGTBackgroundImage {
    border: none;
}

/* the following is needed for non-webkit browsers that don't support line-clamping */

/* some places should be left for subheader when the subheader exists*/
.sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
	max-height: 5.48rem;
}

.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2){
	max-height: 2.74rem;
}

/* the max-height is calculated the same as webkit-line-clamping and supported to work when
the screen size changes between small and large (e.g. mobile devices auto rotation) without rerendering*/
html[data-sap-ui-browser*='ie'], html[data-sap-ui-browser*='ed'], html[data-sap-ui-browser*='ff'] {
	.sapMGT.sapMGTHeaderMode .sapMGTHdrContent .sapMTextMaxLine {
		max-height: 6.85rem !important;
	}
}

html[data-sap-ui-browser*='ie'], html[data-sap-ui-browser*='ed'], html[data-sap-ui-browser*='ff'] {
	.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrContent .sapMTextMaxLine {
		max-height: 4.11rem !important;
	}
}

.sapMTileSmallPhone {
	.sapMGTHdrTxt .sapMText {
		line-height: 1.1875rem;
	}

	&.sapMGT:not(.sapMGTLineMode) .sapMGTSubHdrTxt {
		line-height: 1.1875rem;
	}

	&.sapMGT.sapMGTHeaderMode .sapMGTHdrTxt:nth-last-of-type(2) {
		max-height: 4.72rem;
	}

	&.sapMGT:not(.sapMGTHeaderMode) .sapMGTHdrTxt:nth-last-of-type(2) {
		max-height: 2.36rem;
	}

	html[data-sap-ui-browser*='ie'], html[data-sap-ui-browser*='ed'], html[data-sap-ui-browser*='ff'] {
		&.sapMGT.sapMGTHeaderMode > .sapMGTHdrContent .sapMTextMaxLine {
			max-height: 5.9rem !important;
		}
	}

	html[data-sap-ui-browser*='ie'], html[data-sap-ui-browser*='ed'], html[data-sap-ui-browser*='ff'] {
		&.sapMGT:not(.sapMGTHeaderMode) > .sapMGTHdrContent .sapMTextMaxLine {
			max-height: 3.54rem !important;
		}
	}

	&.sapMGT.OneByOne {
		width: 9.25rem;
		height: 9.25rem;
	}
	&.sapMGT.TwoByOne {
		width: 19rem;
		height: 9.25rem;
	}

	.sapMGTContent {
		height: 5.5rem;
	}

	.sapMGTHdrContent {
		height: 3.5rem;
		margin-top: 0.25rem;
		margin-left: 0.5625rem;
		margin-right: 0.5625rem;
	}

	.sapMGT.sapMGTScopeActions {
		.sapMGTMoreIcon {
			right: 0.5rem;
			bottom: 0.313rem;
		}
	}

	.sapMGTHdrTxt > .sapMText {
		font-size: @sapMFontHeader6Size;
	}

	.sapMGTSubHdrTxt {
		font-size: @sapMFontSmallSize;
	}
}


.sapTilePaddingTest .sapMTileCntContent {
	margin-top: 0.3125rem;
	margin-bottom: 0.3125rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.sapTilePaddingTest .sapMGTHdrContent {
	margin-top: 0.6875rem;
	margin-left: 1rem;
	margin-right: 1rem;
}

.sapTilePaddingTest .sapMTileCntFtrTxt {
	margin-left: 1rem;
	margin-right: 1rem;
	bottom: 1.0625rem;
}