essence-templates/essence/assets/css/essence.css

React Essence Templates - based on Essence Material Design Framework

html,
body {
	width: 100% !important;
}

@media (min-width: 769px) {
	body, .e-appbar {
		padding-left: 240px !important; 
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}
}

pre {
	padding: 10px!important;
}
.component {
	height: 100%;
	width: 100%;
}
.colors {
	height: 500px;
	overflow: auto;
}
.colors button.e-background-white {
	border: 1px solid #999;
	color: #999;
}
.e-nav-drawer nav .e-navigation-wrapper .e-nav-header {
	padding: 6px 16px!important;
}
.e-nav-drawer nav .e-navigation-wrapper .e-list-navigation {
	padding-top: 0!important;
}
.e-list-navigation > li:hover {
	background: inherit!important;
}
.e-list-navigation > .e-list-navigation li:hover {
	background: #e8e8e8!important;
}

.e-list-navigation .group-list-title {
	margin: 0;
	padding: 16px;
	font-weight: 400;
	text-transform: uppercase;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background-color: #EEEEEE;
	cursor: default;
}
.e-list-navigation .group-list-title img {
	vertical-align: middle;
	opacity: .6;
}
.e-search {
	margin: 0!important;
	width: 40%;
}
.icon-preview {
	float: left;
	width: 45px;
	height: 45px;
	padding: 12px;
	font-size: 30px;
	cursor: pointer;
	line-height: 45px!important;
	text-align: center;
}
.icon-preview:hover {
	color: #6B6B6B!important;
}

.colorDialog {
	padding: 0;
}
.colorDialog .e-dialogs-content {
	opacity: 1!important;
}
.colorDialog .preview {
	width: 100%;
    height: 200px;
}
.colorDialog .preview .rgb {
	color: #FFF;
	text-shadow: 1px 1px 3px #222;
	line-height: 100px;
}
.colorDialog .preview .hex {
	color: #FFF;
	text-shadow: 1px 1px 3px #222;
}

.padding-top-bottom-10 {
	padding-top: 10px;
	padding-bottom: 10px;
}

#navigationMenu {
	overflow-y: hidden; 
}

#navigationMenu > ul {
	overflow-y:scroll;
	height: 100%;
	padding-bottom: 70px;
}