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

OpenUI5 UI Library sap.m

/* ================================== */
/* CSS for control sap.m/GenericTile  */
/* High Contrast Black theme          */
/* ================================== */

.sapMGT {
	border-radius: 0.375rem;
}

.sapMGT.sapMGTBackgroundImage .sapMGTContent {
	border-bottom-left-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
}

.sapMGT.sapMGTScopeActions.sapMGTBackgroundImage .sapMGTContent:before {
	border-radius: 0.375rem;
}

.sapMGTOverlay {
	background-color: fade(@sapUiBlockLayerBackground, 70);
}
/************************ LINE MODE LIST VIEW ********************/
.sapMGT.sapMGTLineMode {
	border: 0.0625rem solid @sapUiTileBorderColor;
	.sapMGTHdrTxt {
		font-weight: bold;
	}
}

.sapMGTLineMode.sapMGTFailed, .sapMGTLineMode.sapMGTDisabled {
	border-color: @sapUiHcReducedForeground;
	.sapMGTHdrTxt, .sapMGTSubHdrTxt {
		color: @sapUiContentDisabledTextColor;
	}
}

/************************ LINE MODE FLOATING VIEW *****************/

.sapUiMedia-GenericTileDeviceSet-large {
	.sapMGT.sapMGTLineMode {
		font-size: @sapMFontMediumSize;
		border: none;

		.sapMGTHdrTxt {
			color: @sapUiTileTitleTextColor;
			font-weight: bold;
			font-size: @sapMFontMediumSize;
			font-family: @sapUiFontFamily;
		}

		.sapMGTLineModeFailedIcon {
			cursor: pointer;
			color: @sapUiTileTextColor;
			border-right: 0.25rem solid transparent;
		}

		.sapMGTLineStyleHelper {
			.sapMGTLineStyleHelperInner {
				box-shadow: @sapUiShadowLevel0;
				bottom: 1px;
			}

			&:first-child:not(:only-child) .sapMGTLineStyleHelperInner {
				margin-right: 0.125rem;
			}

			&:not(:first-child) .sapMGTLineStyleHelperInner {
				margin: 0 0.125rem;
			}
			&:last-child .sapMGTLineStyleHelperInner {
				margin-right: 0;
			}

			&:first-child .sapMGTLineStyleHelperInner {
				border-top-left-radius: 0.375rem;
				border-bottom-left-radius: 0.375rem;
			}

			&:last-child .sapMGTLineStyleHelperInner {
				border-top-right-radius: 0.375rem;
				border-bottom-right-radius: 0.375rem;
			}
		}

		&.sapMGTFailed, &.sapMGTDisabled {
			.sapMGTLineStyleHelperInner {
				box-shadow: 0 0 0 1px @sapUiHcReducedForeground;
			}
			.sapMGTHdrTxt, .sapMGTSubHdrTxt {
				color: @sapUiContentDisabledTextColor;
			}
		}
	}
}

.sap-desktop.sapUiMedia-GenericTileDeviceSet-large .sapMGT.sapMGTLineMode {
	&:hover {
		box-shadow: none !important;
	}

	&:not(.sapMGTDisabled):not(.sapMGTFailed):hover .sapMGTLineStyleHelperInner {
		box-shadow: 0 0 0 0.1875rem @sapUiContentShadowColor;
		margin-top: 1px;
		margin-bottom: 1px;
	}

	&:focus {
		border: 0.125rem dotted @sapUiContentFocusColor;
	}

	&:focus .sapMGTLineStyleHelperInner:before {
		content: "";
		position: absolute;
		top: 1px;
		left: 1px;
		bottom: 1px;
		right: 1px;
		box-sizing: border-box;
		border: 0.125rem dotted @sapUiContentFocusColor;
	}
}

.sapMGTHdrContent {
	color: @sapUiTileTextColor;
}

.sapMGTBackgroundImage {
	border: none;
}

html.sap-desktop .sapMGT:focus .sapMGTFocusDiv,
html.sap-desktop .sapMGT:active .sapMGTFocusDiv {
	border: 0.125rem dotted @sapUiContentFocusColor;
}

.sapMGTOverlay {
	opacity: 1;
}

.sapMGTOverlay > .sapUiLocalBusyIndicator > .sapUiLocalBusyIndicatorAnimation {
	border: none;
	box-shadow: none;
}

html.sap-desktop .sapMGT:not(.sapMGTStateDisabled):hover,
html.sap-phone .sapMGTHvrOutln:not(.sapMGTStateDisabled):active,
html.sap-tablet .sapMGTHvrOutln:not(.sapMGTStateDisabled):active,
html.sap-phone .sapMGTBackgroundHvrOutln:not(.sapMGTStateDisabled):active,
html.sap-tablet .sapMGTBackgroundHvrOutln:not(.sapMGTStateDisabled):active {
	box-shadow: 0 0 0 0.125rem @sapUiContentShadowColor;
}

.sap-desktop .sapMGT.sapMGTLineMode:hover {
	&.sapMGTDisabled, &.sapMGTLineModePress {
		box-shadow: none;
	}
}