TeaWeb/shared/css/static/mixin.scss

/* Some general browser helpers */

@mixin transition($transition...) {
	-moz-transition:    $transition;
	-o-transition:      $transition;
	-webkit-transition: $transition;
	transition:         $transition;
}
@mixin transition-property($property...) {
	-moz-transition-property:    $property;
	-o-transition-property:      $property;
	-webkit-transition-property: $property;
	transition-property:         $property;
}
@mixin transition-duration($duration...) {
	-moz-transition-property:    $duration;
	-o-transition-property:      $duration;
	-webkit-transition-property: $duration;
	transition-property:         $duration;
}
@mixin transition-timing-function($timing...) {
	-moz-transition-timing-function:    $timing;
	-o-transition-timing-function:      $timing;
	-webkit-transition-timing-function: $timing;
	transition-timing-function:         $timing;
}
@mixin transition-delay($delay...) {
	-moz-transition-delay:    $delay;
	-o-transition-delay:      $delay;
	-webkit-transition-delay: $delay;
	transition-delay:         $delay;
}

@mixin transform($transform...) {
	-webkit-transform: 	$transform;
	-o-transform: 		$transform;
	-ms-transform: 		$transform;
	transform: 			$transform;
}

@mixin placeholder($element) {
	#{$element}::-webkit-input-placeholder {
		@content;
	}
	#{$element}:-moz-placeholder {
		@content;
	}
	#{$element}::-moz-placeholder {
		@content;
	}
	#{$element}:-ms-input-placeholder {
		@content;
	}
	#{$element}::-ms-input-placeholder {
		@content;
	}
	#{$element}::placeholder {
		@content;
	}
}

@mixin user-select($mode) {
	-webkit-user-select: $mode;
	-moz-user-select: $mode;
	-ms-user-select: $mode;
	user-select: $mode;
}

@mixin chat-scrollbar($width: .5em) {
	& {
		/* for moz */
		scrollbar-color: #353535 #555;
		scrollbarWidth: $width;
	}

	&::-webkit-scrollbar-track {
		border-radius: $width / 2;
		background-color: transparent;
		cursor: pointer;
	}

	&::-webkit-scrollbar {
		width: $width;
		height: $width;

		background-color: transparent;
		cursor: pointer;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: $width / 2;
		background-color: #555;
	}

	&::-webkit-scrollbar-corner {
		//background: #19191b;
		background-color: transparent;
	}
}

@mixin chat-scrollbar-vertical() {
	@include chat-scrollbar();

	& > .simplebar-track {
		.simplebar-scrollbar {
			&:before {
				background: #555;
				width: .5em;
				left: unset;
				right: unset;
				border-radius: .25em;
			}
			&.simplebar-visible:before {
				opacity: 1;
			}
		}
	}
}

@mixin chat-scrollbar-horizontal() {
	@include chat-scrollbar();
}

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

@mixin hex-rgba($property, $color) {
	#{$property}: rgba(red($color), green($color), blue($color), alpha($color))
}

@mixin background-color($color) {
	@include hex-rgba(background-color, $color);
}

@mixin tooltip($base_with, $icon_size) {
	.container-tooltip {
		flex-shrink: 0;
		flex-grow: 0;

		position: relative;
		width: $base_with;
		margin-left: .5em;
		margin-right: .5em;
		font-size: .9em;

		display: flex;
		flex-direction: column;
		justify-content: center;

		img, .icon_em {
			height: $icon_size;
			width: $icon_size;

			align-self: center;
			font-size: 1.2em;
		}

		.tooltip {
			display: none;
		}
	}
}