content.scss

/**
 * Docs navigation
 */
.docs-navigation {
	font-size: 1.4rem;
	text-transform: capitalize;

	&__filter {
		border: 1px solid #ddd;
		padding: .8em 1em;
		border-radius: 3px;
		width: 100%;
		margin-bottom: 2em;
		font-size: 1.2rem;
	}
	&__menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	&__cat {
		border-bottom: 1px solid #f6f6f6;
		padding: 1em 0;

		&.is-active {
			.docs-navigation__heading:after {
				border-left-color: transparent;
				border-top-color: inherit;
				top: 6px;
				right: 2px;
			}
			.docs-navigation__list {
				display: block;
			}
		}
	}
	&__heading {
		margin: 0;
		cursor: pointer;
		position: relative;

		&:hover {
			color: #00b1b3;
		}
		&:after {
			content: '';
			display: inline-block;
			position: absolute;
			right: 0;
			top: 4px;
			border: 4px solid transparent;
			border-left-color: #ddd;
		}
		&:hover:after {
			border-left-color: inherit;
		}
	}
	&__list {
		list-style: none;
		display: none;
		border-top: 1px solid #f6f6f6;
		margin: 1em 0 0;
		padding: 1em 0 0 1em;
	}
	&__item {
		font-size: 1.3rem;
		line-height: 1.3;
		margin-bottom: .8em;

		&.is-active {
			font-weight: bold;
		}
	}
	a {
		color: inherit;

		&:hover {
			text-decoration: none;
			color: #00b1b3;
		}
	}
}
.is-hidden {
	display: none;
}

/**
 * Main content
 */
.entry-header {
	margin-bottom: 2em;
	z-index: 2;
	position: relative;
}
.icon-edit {
	margin-right: 3px;
	vertical-align: baseline;
	width: 11px;
	height: 11px;
	top: 1px;
	position: relative;
}
.entry-content > :first-child {
	margin-top: 0;
}
.entry-content img {
	box-shadow: 0 0 2px rgba(0, 0, 0, .3);
	cursor: zoom-in;
	transition: all .2s;
	&:hover {
		filter: brightness(.5);
	}
}
.button--copy {
	opacity: 0;
	transition: opacity .2s;
	position: absolute;
	top: 0;
	right: 0;
	padding: 7px 9px;
}
.icon-copy {
	position: relative;
	top: -2px;
	width: 1em;
	height: 1em;
}
pre.highlight:hover .button--copy {
	opacity: 1;
}
pre.highlight {
	position: relative;
}