homebrewery/client/homebrew/editor/snippetbar/snippetbar.less

@import (less) './client/icons/customIcons.less';
@import (less) '././././themes/fonts/5e/fonts.less';

.snippetBar {
	@menuHeight      : 25px;
	position         : relative;
	display          : flex;
	flex-wrap        : wrap-reverse;
	justify-content  : space-between;
	height           : auto;
	color            : black;
	background-color : #DDDDDD;

	.snippets {
		display         : flex;
		justify-content : flex-start;
		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
	}

	.editors {
		display         : flex;
		justify-content : flex-end;
		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied

		&:only-child {min-width   : unset; margin-left : auto;}

		>div {
			display         : flex;
			flex            : 1;
			justify-content : space-around;

			&:first-child { border-left : none; }

			& > div {
				position    : relative;
				width       : @menuHeight;
				height      : @menuHeight;
				line-height : @menuHeight;
				text-align  : center;
				cursor      : pointer;

				&.editorTool:not(.active) { cursor : not-allowed; }

				&:hover,&.selected { background-color : #999999; }
				&.text {
					.tooltipLeft('Brew Editor');
				}
				&.style {
					.tooltipLeft('Style Editor');
				}
				&.meta {
					.tooltipLeft('Properties');
				}
				&.snippet {
					.tooltipLeft('Snippets');
				}
				&.undo {
					.tooltipLeft('Undo');
					font-size : 0.75em;
					color     : grey;
					&.active { color : inherit; }
				}
				&.redo {
					.tooltipLeft('Redo');
					font-size : 0.75em;
					color     : grey;
					&.active { color : inherit; }
				}
				&.foldAll {
					.tooltipLeft('Fold All');
					font-size : 0.75em;
					color     : grey;
					&.active { color : inherit; }
				}
				&.unfoldAll {
					.tooltipLeft('Unfold All');
					font-size : 0.75em;
					color     : grey;
					&.active { color : inherit; }
				}
				&.history {
					.tooltipLeft('History');
					position  : relative;
					font-size : 0.75em;
					color     : grey;
					border    : none;
					&.active { color : inherit; }
					& > .dropdown {
						right : -1px;
						& > .snippet { padding-right : 10px; }
					}
				}
				&.editorTheme {
					.tooltipLeft('Editor Themes');
					font-size : 0.75em;
					color     : inherit;
					&.active {
						position         : relative;
						background-color : #999999;
					}
				}
				&.divider {
					width      : 5px;
					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
					&:hover { background-color : inherit; }
				}
			}
			.themeSelector {
				position         : absolute;
				top              : 25px;
				right            : 0;
				z-index          : 10;
				display          : flex;
				align-items      : center;
				justify-content  : center;
				width            : 170px;
				height           : inherit;
				background-color : inherit;
			}
		}		
	}
	.snippetBarButton {
		display        : inline-block;
		height         : @menuHeight;
		padding        : 0px 5px;
		font-size      : 0.625em;
		font-weight    : 800;
		line-height    : @menuHeight;
		text-transform : uppercase;
		text-wrap      : nowrap;
		cursor         : pointer;
		&:hover, &.selected { background-color : #999999; }
		i {
			margin-right   : 3px;
			font-size      : 1.4em;
			vertical-align : middle;
		}
	}
	.toggleMeta {
		position    : absolute;
		top         : 0px;
		right       : 0px;
		border-left : 1px solid black;
		.tooltipLeft('Edit Brew Properties');
	}
	.snippetGroup {

		&:hover {
			& > .dropdown { visibility : visible; }
		}
		.dropdown {
			position         : absolute;
			top              : 100%;
			z-index          : 1000;
			visibility       : hidden;
			padding          : 0px;
			margin-left      : -5px;
			background-color : #DDDDDD;
			.snippet {
				position    : relative;
				display     : flex;
				align-items : center;
				min-width   : max-content;
				padding     : 5px;
				font-size   : 10px;
				cursor      : pointer;
				.animate(background-color);
				i {
					min-width    : 25px;
					height       : 1.2em;
					margin-right : 8px;
					font-size    : 1.2em;
					text-align   : center;
					& ~ i {
						margin-right : 0;
						margin-left  : 5px;
					}
					/* Fonts */
					&.font {
						height : auto;
						&::before {
							font-size : 1em;
							content   : 'ABC';
						}

						&.OpenSans {font-family : 'OpenSans';}
						&.CodeBold {font-family : 'CodeBold';}
						&.CodeLight {font-family : 'CodeLight';}
						&.ScalySansRemake {font-family : 'ScalySansRemake';}
						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
						&.MrEavesRemake {font-family : 'MrEavesRemake';}
						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
						&.WalterTurncoat {font-family : 'WalterTurncoat';}
						&.Lato {font-family : 'Lato';}
						&.Courier {font-family : 'Courier';}
						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
						&.Overpass {font-family : 'Overpass';}
						&.Davek {font-family : 'Davek';}
						&.Iokharic {font-family : 'Iokharic';}
						&.Rellanic {font-family : 'Rellanic';}
						&.TimesNewRoman {font-family : 'Times New Roman';}
					}
				}
				.name { margin-right : auto; }
				.disabled { text-decoration : line-through; }
				.beta {
					align-self    : center;
					padding       : 4px 6px;
					margin-left   : 5px;
					font-family   : monospace;
					line-height   : 1em;
					color         : white;
					background    : grey;
					border-radius : 12px;
				}
				&:hover {
					background-color : #999999;
					& > .dropdown {
						visibility : visible;
						&.side {
							top         : 0%;
							left        : 100%;
							margin-left : 0;
							box-shadow  : -1px 1px 2px 0px #999999;
						}
					}
				}
			}
		}
	}
	.disabledSnippets {
		color: grey;
		cursor: not-allowed;

		&:hover { background-color: #DDDDDD;}
	}

}
@container editor (width < 750px) {
	.snippetBar {
		.editors { 
			flex            : 1;
			justify-content : space-between;
			border-bottom   : 1px solid;
		}
		.snippets { 
			flex            : 1;
			justify-content : space-evenly; 
		}
		.editors > div.history > .dropdown { right : unset; }
	}
}