blogo.styl

.Blogo {
	background-color: rgba(240, 240, 240, 1);
	font-family: sans-serif;
	margin: 25px 10px;
	padding: 1em;
	
	&__Toolbar {
		padding: 0 .3em .8em;
	}
	
	&__Actions {
		padding: 0;
		margin: 0
	}

	&__Content {
		background-color: white;
		padding: 1em;
		outline: none;
		min-height: 150px;
		
		img {
			background-color: red;
			min-width: 30px;
			cursor: move;
		}
	}

	.Button {
		color: transparent;
		background-color: rgba(231, 228, 228, 1);
		border: none;
		box-shadow: 0 2px 0 rgba(black, .2), 0 2px 1px rgba(black, .1);
		border-radius: 4px;
		margin: 3px .3em;
		padding: 1em .5em .1em;
		cursor: pointer;
		width: 42px;
		
		&:hover {
			background-color: darken(rgba(231, 228, 228, 1), 10);
		}

		&:before {
			display: block;
			font-family: serif;
			font-size: 16px;
			line-height: .8em;
			vertical-align: middle;
			color: black;
		}

		&.Action {

			&__bold {
				&:before {
					content: 'B';
					font-weight: bold;
				}
			}
			
			&__italic {
				&:before {
					content: 'I';
					font-weight: normal;
					font-style: italic;
				}
			}

			&__underline {
				&:before {
					content: 'U';
					font-weight: normal;
					text-decoration: underline;
				}
			}

			&__strike {
				&:before {
					content: 'S';
					font-weight: normal;
					text-decoration: line-through;
				}
			}

		}
	}

}