harness-drone/static/styles/pages/docs.sass

.toc
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	padding-bottom: 40px;

	h2
		font-size: 21px;
		font-weight: normal;
		margin-bottom: 20px;
		color: #2b303b;

	ul
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		margin-bottom: 40px;
		border-bottom: 1px solid #EEE;
		padding-bottom: 40px;
		li
			a
				color: #2b303b;
				text-decoration: none;
			a:hover
				text-decoration: underline;

	[data-method]:before
		content: attr(data-method);
		padding: 0px 10px;
		line-height: 18px;
		min-width: 70px;
		font-size: 11px;
		text-transform: uppercase;
		display: inline-block;
		text-align: center;
		color: #FFF;
		border-radius: 2px;
		margin-right: 20px;

	[data-method="GET"]:before
		background-color: #1ABC9C;
	[data-method="PUT"]:before
		background-color: #9B59B6;
	[data-method="POST"]:before
		background-color: #3498DB;
	[data-method="PATCH"]:before
		background-color: #E67E22;
	[data-method="DELETE"]:before
		background-color: #E74C3C;



	[data-method]:before
		background: #FFF;
		border: 1px solid #FFF;
	[data-method="GET"]:before
		color: #1ABC9C;
		border-color: #1ABC9C;
	[data-method="PUT"]:before
		color: #9B59B6;
		border-color: #9B59B6;
	[data-method="POST"]:before
		color: #3498DB;
		border-color: #3498DB;
	[data-method="PATCH"]:before
		color: #E67E22;
		border-color: #E67E22;
	[data-method="DELETE"]:before
		color: #E74C3C;
		border-color: #E74C3C;

.operation

	[data-method]:before
		content: attr(data-method);
		padding: 0px 10px;
		line-height: 18px;
		min-width: 70px;
		font-size: 11px;
		text-transform: uppercase;
		display: inline-block;
		text-align: center;
		color: #FFF;
		border-radius: 2px;
		margin-right: 20px;
		background: #FFF;
		border: 1px solid #FFF;
		line-height: 20px;
		vertical-align: top;


	[data-method]:before
		background: #FFF;
		border: 1px solid #FFF;
	[data-method="GET"]:before
		color: #1ABC9C;
		border-color: #1ABC9C;
	[data-method="PUT"]:before
		color: #9B59B6;
		border-color: #9B59B6;
	[data-method="POST"]:before
		color: #3498DB;
		border-color: #3498DB;
	[data-method="PATCH"]:before
		color: #E67E22;
		border-color: #E67E22;
	[data-method="DELETE"]:before
		color: #E74C3C;
		border-color: #E74C3C;

.docs
	margin-top: 40px;
	padding: 0px 50px;
	padding-right: 40px;

.docs-api
	pre
		margin-right: 15px;
		font-size: 13px;
		color: #eff1f5;
		color: #2b303b;
		border-radius: 2px;
		background: #2b303b;
		background: #ECF0F1;
		white-space: pre-wrap;
		word-wrap: break-word;
		box-sizing: border-box;
		padding: 25px 30px;
		font-family: "Roboto Mono";

		margin-right: 0px;
		padding-left: 40px;
		background: #eff1f5;
		color: #2b303b;
		white-space: pre-wrap;
		word-wrap: break-word;
		box-sizing: border-box;
		padding: 25px 30px;
		font-family: "Roboto Mono";
		border-radius: 2px;
		font-size: 13px;

.operation
	min-height: 100vh;
	padding: 20px 0px;
	display: flex
	&> aside,
	&> div
		min-width: 50%;
		max-width: 50%;
		width: 0%;
		padding-right: 40px;
	h2
		color: #2b303b;
		font-size: 21px;
	h3
		font-size: 16px;
		margin-bottom: 20px;
		margin-top: 40px;
	aside
		background: rgba(43, 48, 59, 0.95);
		box-sizing: border-box;
		padding: 20px 0px 10px 0px;
		border-radius: 2px;
		h4
			color: #d0d4d7;
			font-size: 15px;
			padding: 20px;
			padding-left: 40px;
		pre
			background: #2b303b;
			color: #d0d4d7;
			margin-right: 0px;
			padding-left: 40px;

	.params
		padding: 0px;
		margin: 0px;
		list-style-type: none;
		border-top: 1px solid #f0f4f7
		li
			padding: 15px 10px;
			border-bottom: 1px solid #f0f4f7;
			font-size: 15px
			p
				line-height: 20px;
				margin: 0 0 0 170px;

		li:after
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0;

		h4
			float: left;
			line-height: 20px;
			text-align: right;
			padding-right: 2 0px;
			width: 150px;
			font-weight: bold;
			font-size: 15px;

		small
			display: block;
			text-transform: uppercase;
			color: #E67E22;
			font-size: 11px;
			font-weight: normal;
			margin-top: 5px;


.operation
	aside
		background: rgba(239, 241, 245, 0.49)
		h4
			color: #2b303b
		pre
			background: #eff1f5
			color: #2b303b




.docs-usage
	.row
		display: flex;
		.content-nav
			max-width: 250px;
			min-width: 250px;
			width: 250px;
			ul
				padding: 0px;
				margin: 0px;
				list-style-type: none;
				li
					position: relative;
					color: rgba(0,0,0,0.5);
					text-transform: uppercase;
					font-size: 13px;
				li a
					color: rgba(43, 48, 59, 0.8);
					line-height: 30px;
					display: block;
					font-size: 16px;
					text-transform: none;
				li.active a
					color: #2b303b;
					font-size: 16px;
					text-transform: none;
				li.active:before
					content: "";
					border-left: 4px solid #2b303b;
					position: absolute;
					top: 0px;
					bottom: 0px;
					left: -20px;
				ul
					margin-bottom: 25px;
					margin-top: 5px;
		.content-main
			max-width: 900px;
			margin: 0px auto;
			margin-bottom: 40px;
			font-size: 14px;

			p
				line-height: 20px;
				margin: 20px 0px;

			blockquote
				color: #31708f;
				background-color: #d9edf7;
				border-color: #bcdff1;
				padding: 30px;
				margin: 15px 0px;
				border-radius: 2px;

			blockquote p:first-child
				margin-top: 0px;

			blockquote p:last-child
				margin-bottom: 0px;

			strong
				font-weight: bold;

			h1
				margin: 40px 0px 20px 0px;
				font-size: 22px;

			h1:first-child
			    margin-top: 0px;

			h2
				margin: 40px 0px 30px 0px;
				font-size: 20px;
				border-top: 1px solid #EEE;
				padding-top: 30px;
			h3
			    margin: 40px 0px 20px 0px;
			    font-size: 16px;

			ul code, ol code, p code
				background: #eff1f5;
				color: #2b303b;
				padding: 0px 7px;
				font-family: "Roboto Mono";
				font-size: 13px;
				white-space: nowrap;
			pre
				margin-right: 0px;
				padding-left: 40px;
				background: #eff1f5;
				color: #2b303b;
				white-space: pre-wrap;
				word-wrap: break-word;
				box-sizing: border-box;
				padding: 25px 30px;
				font-family: "Roboto Mono";
				border-radius: 2px;
				font-size: 13px;
			pre > code
				background: #eff1f5;
				color: #2b303b;
				font-family: "Roboto Mono";
				font-size: 13px;