keystone/fields/types/markdown/less/bootstrap-markdown.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// Bootstrap Markdown
// ==============================




// Base
// ------------------------------

// no overflow

.md-editor--no-overflow {
	overflow: hidden;
	position: fixed;
	width: 100%;    
}

// this is currently taking focus unexpectedly when tabbing
// TODO: remove programatically later
.md-fullscreen-controls {
	display: none;
}




// Header
// ------------------------------

.md-editor__header {
	margin-bottom: 1em;
}




// Buttons
// ------------------------------

// groups

.md-editor__btn-group {
	display: inline-block;

	// provide a gap between button groups
	& + & {
		margin-left: 1em;
	}
	
	> .md-editor__btn {
		border-radius: 0;

		// round the first and last buttons

		&:first-child {
			.border-left-radius(@border-radius-base);
		}
		&:last-child {
			.border-right-radius(@border-radius-base);
		}
	}

	// remove the left border from subsequent buttons
	> .md-editor__btn + .md-editor__btn {
		border-left: none;
	}
}

// items

.md-editor__btn {
	background: none;
	border: 1px solid @input-border-color;
	border-radius: @border-radius-base;
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-size: inherit;
	line-height: 1;
	overflow: visible;
	padding: 8px 10px;
	text-align: center;
	-webkit-appearance: none;

	// override weird styles from other sheet
	> .mce-ico {
		position: static;
	}

	// handle events
	&:hover,
	&:focus {
		background-color: white;
		border-color: @input-border-color-hover;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
		outline: none;
	}
	&:active {
		background-color: rgba(0, 0, 0, 0.1);
		box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
	}
}




// Input
// ------------------------------

.md-editor__input {
	.FormInput();
	min-height: 100px;
}




// Preview
// ------------------------------

.md-editor__preview {
	background: transparent;
	min-height: 10px;
	overflow: auto;
}