NodeBB/public/scss/mixins.scss

@mixin no-select() {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@mixin pointer() {
	cursor: pointer;
	*cursor: hand;
}

@mixin inline-block() {
	display: inline-block;
	*display: inline;
	zoom: 1;
}

@mixin clear() {
	clear: both;
}

@mixin zebra() {
	&:nth-child(even) {
		background: rgba(191,191,191,0.2);
	}

	&:nth-child(odd) {
		background: rgba(223,223,223,0.2);
	}
}

@mixin border-radius($radius: 5px){
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}

@mixin text-ellipsis() {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin fix-lists() {
	ul {
		> li {
			list-style-type: disc;

			ul > li {
				list-style-type: circle;

				ul > li {
					list-style-type: square;
				}
			}
		}
	}

	ol,
	ul {
		padding-left: 2rem;
	}

	ol,
	ul,
	dl {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	ol ol,
	ul ul,
	ol ul,
	ul ol {
		margin-bottom: 0;
	}
}

@mixin user-icon-style($size: 32px, $font-size: 1.5rem, $border-radius: inherit){
	border-radius: $border-radius;
	width: $size;
	height: $size;
	line-height: $size;
	font-size: $font-size;
}

@mixin line-clamp($lines, $line-height: 1.5em) {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $lines;
	white-space: initial;
	max-height: calc($line-height * $lines);
	> p {
		margin-bottom: $line-height;
	}
}

@for $i from 1 through 6 {
	.line-clamp-#{$i} {
		@include line-clamp($i, #{$line-height-base}em);
	}
	// use with elements that have `lh-sm` applied
	.line-clamp-sm-#{$i} {
		@include line-clamp($i, #{$line-height-sm}em);
	}
}

@each $color, $value in $grays {
	.border-gray-#{$color} {
		border-color: $value !important;
	}
}