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

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

[component="category-selector"], .category-dropdown-container {
	#category-dropdown-check:checked + .dropdown-menu {
		display: block;
	}
}

.dropdown-right .dropdown-menu {
	--bs-position: end;
}

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

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

#crop-picture-modal {
	#cropped-image {
		max-width: 100%;
	}

	.cropper-container.cropper-bg {
		max-width: 100%;
	}
}

blockquote {
	background-color: $light;
	font-style: italic;
	border-left: 4px solid $primary;
	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 {
		.hover-d-block {
			display: block!important;
		}
		.hover-d-flex {
			display: flex!important;
		}
		.hover-visible {
			visibility: visible;
		}
	}
}

.border-muted {
	border-color: $text-muted!important;
}

// 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;
}