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

OpenUI5 UI Library sap.m

/* ====================== */
/* Shared CSS Base theme  */
/* ====================== */

@_sap_m_Badge_AttentionBackgroundColor: @sapUiContentBadgeBackground;

/* Common CSS for condensed table cell content controls */
.sapUiCondensedTableCellContent {
	box-sizing: border-box;
	padding: 0 0.5rem;
	line-height: 1.5rem;
	vertical-align: middle;
}

/* commons */
.sapMScrollbarV,
.sapMScrollbarH,
.sapMScrollbarV > div,
.sapMScrollbarH > div {
	position: absolute;
}

.sapMScrollbarV > div,
.sapMScrollbarH > div {
	box-sizing: border-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border-width: 0.0625rem;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.901961);
	border-radius: 0.1875rem;
	background-color: rgba(0, 0, 0, 0.498039);
}

/* vertical scrollbar */
.sapMScrollbarV {
	width: 0.438rem;
	right: 0.063rem;
	top: 0;
	bottom: 0;
}

.sapMScrollbarV > div {
	width: 100%;
}

/* horizontal scrollbar */
.sapMScrollbarH {
	height: 0.4375rem;
	bottom: 0.0625rem;
	left: 0.125rem;
	right: 0.125rem;
}

.sapMScrollbarH > div {
	height: 100%;
}

/* ObjectListItem and ObjectHeader share styles for markers such as flag and favorite */
.sapMObjStatusMarker {
	color: var(--sapContent_MarkerIconColor);
}

.sapMObjStatusMarker .sapUiIcon + .sapUiIcon,
.sapMObjStatusMarker .sapUiHiddenPlaceholder + .sapUiIcon {
	margin-left: .5rem;
}

.sapMObjStatusMarkerInvisible {
	visibility: hidden;
}

/* CURSORS */
.sapMPointer{
	cursor: pointer;
}

/* Enables native browser hyphenation where possible */
.sapUiHyphenation {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.defaultHighlightedText {
	background: var(--sapContent_SearchHighlightColor);
	font-weight: bold;
}

/* Enables sap.m.IBadge implementations where possible */

@keyframes sapMBadgeAppearPulse {

	0% {transform: scale(.9); opacity:1;}

	100% {transform: scale(2);opacity: 0;}
}

@keyframes sapMBadgeAppearBounce {

	0% {transform: scale(1);}

	50% {transform: scale(1.4);}

	100% {transform: scale(1);}
}

@keyframes sapMBadgeDisappear {

	0% {transform: scale(1);}

	100% {transform: scale(0);}
}

@keyframes sapMBadgeUpdate {

	0% {transform: scale(1);}

	50% {transform: scale(1.2);}

	100% {transform: scale(1);}
}

@keyframes sapMBadgeAppearMotionSmall {

	0% {
		transform: scale(0.33); /* 0.125rem / 0.375rem */
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}

	20% {
		transform: scale(1.66); /* 0.625rem / 0.375rem */
	}

	40% {
		transform: scale(1.33); /* 0.5rem / 0.375rem */
		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); /* 0.875rem pulse layer */
	}

	60% {
		transform: scale(1); /* 0.375rem */
		box-shadow: 0 0 0 0.3125rem fade(@_sap_m_Badge_AttentionBackgroundColor, 15%); /* 1rem pulse layer */
	}

	100% {
		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); /* 1.125rem pulse layer */
	}
}

@keyframes sapMBadgeAppearMotion {

	0% {
		transform: scale(0.25); /* 0.125rem / 0.5rem */
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* required for Internet Explorer */
	}

	20% {
		transform: scale(1.25); /* 0.625rem / 0.5rem */
	}

	40% {
		transform: scale(1); /* 0.5rem */
		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); /* 0.875rem pulse layer */
	}

	100% {
		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); /* 1.125rem pulse layer */
	}
}

.sapMBadge {
	overflow: visible;
	position: relative;

	.sapMBadgeDefault {
		position: absolute;
		top: -0.125rem;
		right: -0.25rem;
		z-index: 100;
		max-width: 100%;
		padding-right: 0.125rem;
		box-sizing: border-box;
		height: 100%;
		transform-origin: center center;
		pointer-events: none;

		&::after {
			border-radius: 1.125rem;
			display: block;
			padding: 0 0.3125rem;
			min-width: 0.5rem;
			height: 1.125rem;
			line-height: 1.125rem;
			font-size: var(--sapFontSmallSize);
			font-family: var(--sapFontFamily);
			text-align: center;
			background-color: var(--sapContent_BadgeBackground);
			border: 0.0625rem solid var(--sapContent_BadgeBackground);
			color: var(--sapContent_BadgeTextColor);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;

			.badgeAccentColorMixin(10);
		}

		/* We need one more pseudo-element, attached to the badge indicator, in order */
		/* to show the pulse animation simultaneously with the bounce one. */
		&::before {
			position: absolute;
			border-radius: 1.125rem;
			display: block;
			padding: 0 0.3125rem;
			min-width: 0.5rem;
			height: 1.125rem;
			line-height: 1.125rem;
			font-size: var(--sapFontSmallSize);
			font-family: var(--sapFontFamily);
			background-color: var(--sapContent_BadgeBackground);
			border: 0.0625rem solid var(--sapContent_BadgeBackground);
			color: var(--sapContent_BadgeTextColor);
			text-overflow: ellipsis;
			overflow: hidden;
			opacity:0;

			.badgeAccentColorMixin(10);
		}

		.sapMBadgeTopLeft& {
			top: -0.125rem;
			left: -0.25rem;
			right: auto;
		}

		.sapMBadgeTopRight& {
			top: -0.125rem;
			right: -0.25rem;
		}

		.sapMBadgeInline& {
			left: 0;
			right: 0;
			top: 0;
		}
	}

	/* The attention badge is a single dot, which does not contain text or icons. */
	.sapMBadgeAttention {
		position: absolute;
		top: -0.25rem;
		right: -0.25rem;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 1.125rem;
		background-color: @_sap_m_Badge_AttentionBackgroundColor;
		border: 0.125rem solid var(--sapObjectHeader_Background);
	}
}

.sapMBadgeIndicator.sapMBadgeDefault::after {
	content: attr(data-badge);
}

.sapMBadgeIndicator.sapMBadgeDefault[data-badge='']::after {
	display: none;
}

html[data-sap-ui-animation='on'] {

	.sapMBadge.sapMBadgeAnimationTypeFull {

		.sapMBadgeDefault.sapMBadgeAnimationAdd::after {
			animation: sapMBadgeAppearBounce .1s;
		}

		.sapMBadgeDefault.sapMBadgeAnimationAdd::before {
			content: attr(data-badge);
			animation: sapMBadgeAppearPulse .2s;
		}

		.sapMBadgeAttention.sapMBadgeAnimationRemove,
		.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
			animation: sapMBadgeDisappear .1s;
			animation-fill-mode: forwards;
			transform-origin: center;
		}
	}

	.sapMBadge:not(.sapMBadgeAnimationTypeNone) {

		.sapMBadgeDefault.sapMBadgeAnimationUpdate::after {
			animation: sapMBadgeUpdate .1s;
			animation-fill-mode: forwards;
		}
	}
}

html[data-sap-ui-animation='off'] {

	.sapMBadgeAttention.sapMBadgeAnimationRemove,
	.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
		scale: 0;
		opacity: 0;
		display: none;
	}
}

.sapMBadgeAnimationTypeUpdate,
.sapMBadgeAnimationTypeNone {

	.sapMBadgeAttention.sapMBadgeAnimationRemove,
	.sapMBadgeDefault.sapMBadgeAnimationRemove::after {
		scale: 0;
		opacity: 0;
		display: none;
	}
}

.badgeAccentColorMixin(@n, @i: 1) when (@i =< @n) {
	@value: 'sapAccentColor@{i}';

	.sapMBadgeAccentColor@{i}& {
		background-color: @@value;
		border-color: @@value;
	}
	.badgeAccentColorMixin(@n, (@i + 1));
}