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

OpenUI5 UI Library sap.m

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

/* 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: @sapUiContentMarkerIconColor;
}

.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: @sapUiContentSearchHighlightColor;
    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);}
}

@_sap_m_Badge_AttentionBackgroundColor: @sapUiContentBadgeBackground;
@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: @sapMFontSmallSize;
			font-family: @sapUiFontFamily;
			text-align: center;

			background-color: @sapUiContentBadgeBackground;
			border: 0.0625rem solid @sapUiContentBadgeBackground;
			color: @sapUiContentBadgeTextColor;

			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: @sapMFontSmallSize;
			font-family: @sapUiFontFamily;

			background-color: @sapUiContentBadgeBackground;
			border: 0.0625rem solid @sapUiContentBadgeBackground;
			color: @sapUiContentBadgeTextColor;

			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 @sapUiObjectHeaderBackground;
	}
}

.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));
}