NodeBB/public/scss/generics.scss

.flex-1 {
	flex: 1 1 0%!important;
}
.flex-0 {
	flex: 0!important;
}

.pointer {
	@include pointer;
}

.text-md { font-size: 1.125rem!important; } // 18px on harmony
.text-sm { font-size: 0.875rem!important; } // 14px on harmony
.text-xs { font-size: 0.75rem!important; } // 12px on harmony
.text-tabular { font-variant-numeric: tabular-nums!important; }
.text-wrap-pretty { text-wrap: pretty!important; }

.overscroll-behavior-contain {
	overscroll-behavior: contain;
}

[component="category-selector"], .category-dropdown-container {
	#category-dropdown-check:checked + .dropdown-menu {
		display: block;
	}
}
html[data-dir="ltr"] {
	.dropdown-left .dropdown-menu { --bs-position: start; }
	.dropdown-right .dropdown-menu { --bs-position: end; }
}
html[data-dir="rtl"] {
	.dropdown-left .dropdown-menu { --bs-position: end; }
	.dropdown-right .dropdown-menu { --bs-position: start; }
}

.category-dropdown-menu {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.bootstrap-tagsinput {
	@extend .form-control;
	box-shadow: none;
	input {
		&::placeholder{
			color: $input-placeholder-color;
		}
		color: $input-color;
	}
	.tag { margin-bottom: 2px; }
}

@mixin user-icon() {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: $white;
	font-weight: normal;
	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
	white-space: nowrap;
}

.avatar {
	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
	@include user-icon;

	$size: var(--avatar-size);
	@include user-icon-style($size, calc($size * 0.6));

	&.avatar-rounded {
		border-radius: 50%;
	}

	&+.avatar {
		display: none;
	}
}

blockquote {
	background-color: rgba(var(--bs-body-color-rgb), 0.03);
	color: var(--bs-body-color);
	font-style: normal;
	border-radius: $border-radius-sm;
	padding: 1rem;
	p:last-child {
		margin-bottom: 0;
	}
}

.necro-post {
	text-align: center;
	text-transform: uppercase;
}

.timeline-event {
	display: flex;
	align-items: center;
	justify-content: center;

	.timeline-badge {
		padding: 1rem;
	}
}

.imagedrop {
	position: absolute;
	text-align: center;
	font-size: 24px;
	color: $gray-600;
	width: 100%;
	display: none;
}

.hover-parent {
	.hover-d-block, .hover-d-flex {
		display: none!important;
	}
	.hover-visible {
		visibility: hidden;
	}
	.hover-opacity-75 {
		opacity: 0;
		&:focus { opacity: 0.75 }
	}
	.hover-opacity-100 {
		opacity: 0;
		&:focus {opacity: 1; }
	}

	&:hover {
		.hover-d-block { display: block!important; }
		.hover-d-flex { display: flex!important; }
		.hover-visible { visibility: visible; }
		.hover-opacity-100 { opacity: 1; }
		.hover-opacity-75 { opacity: 0.75; }
	}
}

.border-muted { border-color: $text-muted!important; }
.border-body { border-color: var(--bs-body-bg)!important; }

.hidden-empty {
	&:empty {
		display: none!important;
	}
}

.text-contain {
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
	> * {
		max-width: 100%;
		white-space: pre-wrap;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}

.hidden-blockquote { blockquote { display: none; } }
.hidden-pre { pre { display: none; } }

$hidden-elements-for-first-last-child: br, hr;

@each $element in $hidden-elements-for-first-last-child {
	.hidden-first-child-#{$element} {
		> #{$element}:first-child {
			display: none;
		}
	}
	.hidden-last-child-#{$element} {
		> #{$element}:last-child {
			display: none;
		}
	}
}

.trim-last-divider > *:last-child hr {	display: none;	}

// some classes that are used commonly in themes from bs3
.hidden, .hide {
    display: none!important;
}

// for backwards compat, replace with float-start, float-end respectively
.pull-left {
	float: left!important;
}

.pull-right {
	float: right!important;
}

img.emoji {
	height: $font-size-lg;
}

.highlight-pulse {
	animation: pulse-grow 1.5s ease-in-out 3;
	transform-origin: center;
	z-index: 10;
}

@keyframes pulse-grow {
	0%, 100% {
		transform: scale(1);
		background-color: transparent;
	}
	50% {
		transform: scale(1.005);
		background-color: color-mix(in srgb, var(--bs-body-bg), var(--bs-body-color) 10%);
	}
}

@include media-breakpoint-up(md) {
	.flex-md-shrink-50 {
		flex: 1 1 50% !important;
		min-width: 50% !important;
	}
}

@include media-breakpoint-down(md) {
	.flex-md-shrink-50 {
		flex: 1 1 100%;
		min-width: 0;
	}
}