homebrewery/client/naturalCrit/sidebar/sidebar.less

@font-face {
	font-family : CodeLight;
	src         : url('/assets/naturalCrit/sidebar/CODE Light.otf');
}
@font-face {
	font-family : CodeBold;
	src         : url('/assets/naturalCrit/sidebar/CODE Bold.otf');
}
.sidebar{
	.animateAll();
	float            : left;
	box-sizing       : border-box;
	height           : 100%;
	width            : @sidebarWidth;
	padding-bottom   : 20px;
	background-color : white;
	//border           : 1px solid @steel;
	&.hide{
		height : 50px;
		width  : 50px;
		.logo .name{
			left    : -200px;
			opacity : 0;
		}
		.contents{
			height  : 0px;
			opacity : 0;
		}
	}
	.logo{
		padding          : 10px 10px;
		background-color : @steel;
		font-family      : 'CodeLight', sans-serif;
		font-size        : 1.8em;
		color            : white;
		svg{
			vertical-align : middle;
			height         : 1em;
			margin-right   : 0.2em;
			cursor         : pointer;
			fill           : white;
		}

		span.name{
			.animateAll();
			position : absolute;
			top      : 13px;
			left     : 50px;
			opacity  : 1;
			span.crit{
				font-family : 'CodeBold';
			}
		}
	}
	.contents{
		.animate(opacity);
		box-sizing : border-box;
		width      : 100%;
		&>*{
			width : 100%;
		}
		h3{
			padding        : 10px;
			font-size      : 0.8em;
			font-weight    : 800;
			text-transform : uppercase;
		}
		.encounterContainer{
			margin-bottom : 20px;
			h3{
				background-color : @red;
				color : white;

				button{
					outline: none;
					border : none;
					cursor: pointer;
					background-color: transparent;
					.animate(color);
					float : right;
					&:hover{
						color : white;
					}
				}
			}
			.encounter{
				padding-left: 20px;
				position: relative;
				i.remove{
					position: absolute;
					top : 3px;
					right : 3px;
					font-size: 0.6em;
					cursor: pointer;
					color : #333;
					&:hover{
						color: @red;
					}
				}
				i.select{
					cursor: pointer;
				}
				.jsonFileEditor{
					display: inline-block;
				}
				&.selected{
					background-color : fade(@green, 30%);
				}
			}
		}
		.addPlayers{
			h3{
				//background-color : fade(@purple, 25%);
				color : white;
				background-color: @purple;
			}
			textarea{
				height : 80px;
				width  : 100px;
				margin : 10px;
			}
		}
	}
}