@bigfishtv/cockpit/styles/redactor.less

/*
 * Definitions
 */

// Headings
@editor-h1-font-size: 2.4;
@editor-h2-font-size: 2;
@editor-h3-font-size: 1.6;
@editor-h4-font-size: 1.4;
@editor-h5-font-size: 1.2;
@editor-h6-font-size: 1;


/*
 * Animations
 */

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


/*
 * Slide Up
 */

@-webkit-keyframes redactorSlideUp {
  to {
	  padding-top: 0;
	  padding-bottom: 0;
	  height: 0;
  }
}
@keyframes redactorSlideUp {
  to {
	  padding-top: 0;
	  padding-bottom: 0;
	  height: 0;
  }
}

.redactor-slideUp {
	overflow: hidden;
	-webkit-animation-name: redactorSlideUp;
	animation-name: redactorSlideUp;
}


/*
 * Slide Down
 */

@-webkit-keyframes redactorSlideDown {
  from {
	  height: 0;
	  padding-top: 0;
	  padding-bottom: 0;
  }
}
@keyframes redactorSlideDown {
  from {
	  height: 0;
	  padding-top: 0;
	  padding-bottom: 0;
  }
}

.redactor-slideDown {
	overflow: hidden;
	-webkit-animation-name: redactorSlideDown;
	animation-name: redactorSlideDown;
}


/*
 * Fade In
 */

@-webkit-keyframes redactorFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes redactorFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.redactor-fadeIn {
	-webkit-animation-name: redactorFadeIn;
	animation-name: redactorFadeIn;
}


/*
 * Fade Out
 */

@-webkit-keyframes redactorFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes redactorFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.redactor-fadeOut {
	-webkit-animation-name: redactorFadeOut;
	animation-name: redactorFadeOut;
}


/*
 * Slide In Down
 */

@-webkit-keyframes redactorSlideInDown {
	from {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes redactorSlideInDown {
	from {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.redactor-slideInDown {
	-webkit-animation-name: redactorSlideInDown;
	animation-name: redactorSlideInDown;
}


/*
 * Slide Out Up
 */

@-webkit-keyframes redactorSlideOutUp {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes redactorSlideOutUp {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

.redactor-slideOutUp {
	-webkit-animation-name: redactorSlideOutUp;
	animation-name: redactorSlideOutUp;
}


/*
 * Utilities
 */

.redactor-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll;
}

.redactor-script-tag {
	display: none;
}

.redactor-editor img {
	cursor: pointer;
}

body .redactor-box-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}


/*
 * Redactor Box
 */

.redactor-box {
	position: relative;
	overflow: visible;
	background: @white;

	&.input-error {
		outline: 1px solid @error;
	}
}


/*
 * Editor
 */

.redactor-editor {
	position: relative;
	top: 0;
	margin: 0;
	padding: @padding-small;
	overflow: auto;
	outline: none;
	white-space: normal;
	border: @input-border;
	transition: border @transition-fast ease-in-out;

	&:focus {
		outline: none;
		border: 1px solid @primary;
	}
}

.redactor-relative {
	position: relative;
}

.redactor-in {
	cursor: text;

	&:focus {
		outline: none;
	}
}


/*
 * Placeholder
 */

.redactor-placeholder:after {
	position: absolute;
	top: 20px;
	left: 20px;
	content: attr(placeholder);
	display: block;
	color: rgba(0, 0, 0, .3);
	font-weight: normal !important;
}


/*
 * Air
 */

.redactor-air {
	position: absolute;
	padding: 0;
	max-width: 600px;
	min-width: 200px;
	background: @dark;

	li  {

		a {
			color: @white;

			&:hover,
			&:focus {
				outline: none;
				color: @white;
				background: @primary;
			}

			&:active,
			&.redactor-act {
				outline: none;
				color: @white;
				background: @primary;
			}

			&.redactor-button-disabled {
				opacity: 0.3;

				&:hover,
				&:focus {
					outline: none;
					cursor: default;
					color: fade(@white, 30%);
					background: transparent !important;
				}
			}

			&.redactor-button-focus {
				color: @grey;
				background: #eee;
			}
		}
	}

	svg {
		fill: @white;
	}
}


/*
 * Toolbar
 */

.redactor-toolbar {
	position: relative;
	padding: 0 !important;
	background: @white;
	border: @input-border;
	border-bottom: none;
	box-sizing: content-box;
	.clearfix();

	&.toolbar-fixed-box {
		border-bottom: @input-border;
		top: 100px !important;
		box-shadow: 0 0 2rem 0.1rem fade(@dark, 20%);
	}

	&.redactor-toolbar-overflow {
		overflow-y: auto;
		white-space: nowrap;
	}

	&.redactor-toolbar-external {
		z-index: 999;
		box-shadow: none;
		border: @input-border;
	}

	li {

		a {
			color: @grey;

			&:hover,
			&:focus {
				outline: none;
				color: @button-hover-color;
				background: @button-hover-background;
			}

			&:active,
			&.redactor-act {
				outline: none;
				background: @button-hover-background;
			}

			&.redactor-button-disabled {
				color: @light-grey;

				&:hover,
				&:focus {
					color: @light-grey;
					outline: none;
					background-color: transparent !important;
					cursor: default;
				}
			}

			&.redactor-button-focus {
				color: @white;
				background: @black;
			}
		}
	}

	svg {
		fill: @grey;
	}
}

.redactor-air,
.redactor-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	list-style: none;
	line-height: 1;

	li {
		display: inline-block;
		margin: 0;
		padding: 0;
		outline: none;
		list-style: none;
		vertical-align: top;
	
		a {
			display: flex;
			padding: @padding-xsmall;
			.semibold-font();
			.font-size(1.4);
			line-height: 1.8rem;
			text-align: center;
			cursor: pointer;
			outline: none;
			border: none;
			text-decoration: none;
			zoom: 1;
			transition: all @transition-fast ease-in-out;

			// &.re-bold {
			// 	font-weight: bold;
			// }
			
			// &.re-italic {
			// 	font-style: italic;
			// }
			
			// &.re-deleted {
			// 	text-decoration: line-through;
			// }
			
			// &.re-underline {
			// 	text-decoration: underline;
			// }
		}
	}

	svg {
		.square(1.8rem);
	}
}


/*
 * Dropdown
 */

.redactor-dropdown {
	min-width: 220px;
	max-height: 254px;
	color: @body-color;
	margin: 0;
	padding: 0;
	.font-size(@paragraph-font-size);
	background: @white;
	box-shadow: 0 1px 2px @light-grey;
	list-style: none;
	overflow: auto;

	li {
		margin: 0;
		padding: 0;
		display: table;
		width: 100%;
		height: 3.6rem;
	}
	
	a {
		display: table-cell;
		padding: 0 @padding-small;
		vertical-align: middle;
		.font-size(@paragraph-font-size);
		color: @body-color;
		line-height: 1;
		text-decoration: none;
		border-bottom: @input-border;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:hover,
		&:focus {
			text-decoration: none;
			background: @button-hover-background;
		}
		
		&:focus {
			outline: none;
		}
	}

	&.selected {
		color: @white;
		background: @primary;
	}

	.redactor-dropdown-link-inactive,
	.redactor-dropdown-link-inactive:hover {
		background: none;
		cursor: default;
		color: @grey !important;
		opacity: 0.4;
	}

	.redactor-dropdown-link-selected {
		color: @white;
		background: @black;
	}

	.redactor-dropdown-box-inline {
		
	}

	.redactor-dropdown-box-format {
		
	}

	.redactor-dropdown-lead {

		span {
			.lead;
		}
	}

	.redactor-dropdown-pullout {

		span {
			.pullout;
		}
	}

	.redactor-dropdown-tip {

		span {
			display: block;
			padding: @padding-xsmall;
			border: 1px solid @light-grey;
		}
	}

	.redactor-dropdown-blockquote {

		span {
			position: relative;
			padding:  @blockquote-padding;
			font-family: @blockquote-quote-font-family;
			.font-size(@blockquote-quote-font-size);
			font-style: @blockquote-quote-font-style;
			color: @blockquote-quote-color;

			&:before {
				position: absolute;
				top: 0;
				left: 0;
				content: '“';
				.bold-font();
				.font-size(3.6);
				color: @mid-grey;
				line-height: 1;
			}
		}
	}

	.redactor-dropdown-cite {

		span {
			font-family: @blockquote-cite-font-family;
			.font-size(@blockquote-cite-font-size);
			font-style: @blockquote-cite-font-style;
			color: @blockquote-cite-color;
			text-align: @blockquote-cite-text-align;
		}
	}

	.redactor-dropdown-sup,
	.redactor-dropdown-sub {

		span {
			.font-size(1.2);
		}
	}

	.redactor-dropdown-marked,
	[class*='redactor-dropdown-marked-'] {

		span {
			padding: @mark-padding;
			font-family: @mark-font-family;
			font-weight: @mark-font-weight;
			.font-size(@mark-font-size);
			color: @mark-color;
			background: @mark-background;
			border: @mark-border;
			border-radius: @mark-border-radius;
		}	
	}

	.redactor-dropdown-marked-success {

		span {
			.mark-theme(@mark-success-color, @mark-success-background, @mark-success-border);
		}
	}

	.redactor-dropdown-marked-info {

		span {
			.mark-theme(@mark-info-color, @mark-info-background, @mark-info-border);
		}
	}

	.redactor-dropdown-marked-warning {

		span {
			.mark-theme(@mark-warning-color, @mark-warning-background, @mark-warning-border);
		}
	}

	.redactor-dropdown-marked-error {

		span {
			.mark-theme(@mark-error-color, @mark-error-background, @mark-error-border);
		}
	}

	.redactor-dropdown-code {

		span {
			font-family: @code-font-family;
			font-weight: @code-font-weight;
			.font-size(@code-font-size);
			color: @code-color;
		}
	}

	.redactor-dropdown-sample {

		span {
			font-family: @monospace-font-family;
		}
	}

	.redactor-dropdown-variable {

		span {
			font-family: @monospace-font-family;
		}
	}

	.redactor-dropdown-shortcut {

		span {
			padding: @kbd-padding;
			font-family: @kbd-font-family;
			font-weight: @kbd-font-weight;
			.font-size(@kbd-font-size);
			color: @kbd-color;
			background: @kbd-background;
			border: @kbd-border;
		}
	}

	.redactor-dropdown-blockquote {
		font-style: italic;
	}

	.redactor-dropdown-pre {
		font-family: @monospace-font-family;
	}

	.redactor-dropdown-h1 {
		.bold-font();
		.font-size(@editor-h1-font-size);
	}

	.redactor-dropdown-h2 {
		.bold-font();
		.font-size(@editor-h2-font-size);
	}

	.redactor-dropdown-h3 {
		.bold-font();
		.font-size(@editor-h3-font-size);
	}

	.redactor-dropdown-h4 {
		.bold-font();
		.font-size(@editor-h4-font-size);
	}

	.redactor-dropdown-h5 {
		.bold-font();
		.font-size(@editor-h5-font-size);
	}

	.redactor-dropdown-h6 {
		.bold-font();
		.font-size(@editor-h6-font-size);
	}
}


/*
 * Link Tooltip
 */

.redactor-link-tooltip {
	position: absolute;
	display: flex;
	.font-size(@paragraph-font-size);
	color: lighten(@dark, 5%);
	background: @dark;

	a {
		display: block;
		padding: @padding-xsmall;
		color: @white;
		line-height: 1;
		text-decoration: none;
		transition: all @transition-fast ease-in-out;

		&:hover,
		&:focus {
			color: @white;
			background: @primary;
		}
	}
}


/*
 * Droparea
 */

#redactor-droparea {
	position: relative;
	overflow: hidden;
	padding: 64px 24px;
	border: 1px dashed lighten(@grey, 35%);

	&.drag-hover {
		border: 1px dashed @primary;
	}

	&.drag-drop {
		background: rgba(250, 248, 200, 0.5);
	}
}

#redactor-droparea-placeholder {
	text-align: center;

	input {
		display: inline;
		margin-left: @margin-xsmall;
		width: auto;
	}
}


/*
 * Progress
 */

#redactor-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
}

#redactor-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: @primary;
	background-size: 40px 40px;
}


/*
 * Structure
 */

.redactor-structure {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	div {
		position: relative;

		&:before {
			width: 24px;
			position: absolute;
			.font-size(1.0);
			font-weight: normal;
			opacity: .3;
			left: -32px;
			text-align: right;
		}
	}

	h1:before {
		content: "H1";
	}

	h2:before {
		content: "H2";
	}

	h3:before {
		content: "H3";
	}

	h4:before {
		content: "H4";
	}

	h5:before {
		content: "H5";
	}

	h6:before {
		content: "H6";
	}

	div:before {
		content: "DIV";
	}
}


/*
 * Content
 */

.redactor-editor {
	.font-size(@paragraph-font-size);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		.bold-font();
	}

	h1 {
		.font-size(@editor-h1-font-size);
	}

	h2 {
		.font-size(@editor-h2-font-size);
	}

	h3 {
		.font-size(@editor-h3-font-size);
	}

	h4 {
		.font-size(@editor-h4-font-size);
	}

	h5 {
		.font-size(@editor-h5-font-size);
	}

	h6 {
		.font-size(@editor-h6-font-size);
	}

	s,
	del {
		text-decoration: line-through;
	}

	abbr[title],
	dfn[title] {
		cursor: help;
		border-bottom: 1px dotted @body-color;
	}

	sub,
	sup {
		.font-size(1);
		line-height: 0;
		position: relative;
		margin-left: .2rem;
	}

	sup {
		top: -.4rem;
	}

	sub {
		bottom: -.2rem;
	}

	ins,
	u {
		text-decoration: underline;
	}

	strong {
		.bold-font();
	}

	mark {
		
	}

	.tip {
		padding: @padding-xsmall;
		border: 1px solid @light-grey;
	}

	img,
	video,
	audio,
	embed,
	object {
		max-width: 100%;
	}

	img,
	video,
	embed,
	object {
		height: auto;
	}

	embed,
	object {
		height: 100%;
	}

	img {
		
	}

	table {
		margin: @paragraph-margin;
		width: 100%;
		empty-cells: show;
		border-collapse: collapse;

		th,
		td {
			
		}

		th {
			
		}

		tfoot th,
		tfoot td {
			
		}
	}

	h2, h3, h4,
	p,
	hr,
	.tip,
	.panel,
	.well,
	table
	blockquote {

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
}


/*
 * Modal
 */

#redactor-modal-box {
	.modal;
	display: flex;
	background: fade(@dark, 20%);
}

#redactor-modal {
	.panel;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 100%;
	margin: auto !important;
	box-shadow: 0 0 2rem 0.1rem fade(@dark, 20%);
	border: none;
}

#redactor-modal-header {
	.panel-header;
	flex: 0 0 auto;
	border-bottom: 1px solid @light-grey;
}

#redactor-modal-body {
	.panel-content;
	flex: 1;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	section {
		.form-input;
	}
}

.redactor-modal-delete-btn {
	color: @button-error-color;
	border: @button-error-border;
	background: @button-error-background;

	&:not(:disabled):hover,
	&:not(:disabled):focus {
		color: @button-error-hover-color;
		border: @button-error-hover-border;
		background: @button-error-hover-background;
	}
}

.redactor-modal-action-btn {
	color: @button-primary-color;
	border: @button-primary-border;
	background: @button-primary-background;

	&:not(:disabled):hover,
	&:not(:disabled):focus {
		color: @button-primary-hover-color;
		border: @button-primary-hover-border;
		background: @button-primary-hover-background;
	}
}

#redactor-modal-close {
	position: absolute;
	top: @padding-small;
	right: @padding-small;
	width: @height-medium;
	height: @height-medium;
	padding: 0;
	font-size: 2.4rem;
	color: @grey;
	text-align: center;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	border: 0;
	background: 0;
	
	&:hover,
	&:focus {
		color: @dark;
	}
}


/*
 * Tabs
 */

#redactor-modal-tabber {
	margin-bottom: 24px;
	.font-size(1.2);

	a {
		border: 1px solid #ddd;
		line-height: 1;
		padding: 8px 15px;
		margin-right: -1px;
		text-decoration: none;
		color: @black;

		&:hover,
		&:focus {
			background-color: rgba(31,120,216,1);
			border-color: rgba(31,120,216,1);
			color: @white;
		}

		&.active {
			cursor: default;
			background-color: #ddd;
			border-color: #ddd;
			color: rgba(0, 0, 0, .6);
		}
	}
}


/*
 * List
 */

#redactor-modal-list {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	max-height: 250px;
	overflow-x: auto;

	li {
		border-bottom: 1px solid @light-grey;

		&:last-child {
			border-bottom: none;
		}
	}

	a {
		position: relative;
		display: block;
		padding: @padding-xsmall;
		.font-size(@paragraph-font-size);
		color: @button-color;
		text-decoration: none;
		

		&:hover,
		&:focus {
			color: @button-hover-color;
			background: @button-hover-background;
		}
	}
}


/*
 * Accessibility
 */

.redactor-voice-label {
	display: none;
}

.redactor-voice-alert {
	position: absolute;
	left: -3000px;
}