Adds: Sidebar background image

dmp-frontend/src/app/app.component.html

@@ -1,7 +1,9 @@
 <div class="wrapper">
-	<div class="sidebar" data-color="danger" data-background-color="white">
+	<div class="sidebar" data-color="danger" data-background-color="white"
+		data-image="./assets/images/logan-troxell-9187-unsplash.jpg">
 		<app-sidebar></app-sidebar>
-			<div class="sidebar-background"></div>
+		<div class="sidebar-background" style="background-image: url(./assets/images/logan-troxell-9187-unsplash.jpg)">
+		</div>
 	</div>
 	<div class="main-panel">
 		<app-navbar></app-navbar>

dmp-frontend/src/assets/css/demo.css

@@ -66,18 +66,17 @@ h4 {
 	color: #a1a1a1;
 }
 
-.sidebar[data-color="danger"] li.active > a {
+.sidebar[data-color="danger"] li.active>a {
 	background-color: #ffffff;
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
 }
 
-.sidebar .nav li.active > a i {
+.sidebar .nav li.active>a i {
 	color: rgb(89, 89, 89);
 }
 
-.sidebar .nav li a,
-.sidebar .nav li .dropdown-menu a {
+.sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
 	margin: 5px 15px 5px;
 	border-radius: 3px;
 	color: #3c4858;
@@ -98,8 +97,7 @@ h4 {
 	background-color: rgba(180, 180, 180, 0.3);
 }
 
-.form-control,
-.is-focused .form-control {
+.form-control, .is-focused .form-control {
 	background-image: none;
 }
 
@@ -130,50 +128,29 @@ h4 {
 	cursor: pointer;
 }
 
-.card .card-header-default .card-icon,
-.card .card-header-default .card-text,
-.card .card-header-default:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
+.card .card-header-default .card-icon, .card .card-header-default .card-text, .card .card-header-default:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
 	background: linear-gradient(60deg, #fff, #fff);
 }
 
-.card .card-header-default .card-icon,
-.card .card-header-default:not(.card-header-icon):not(.card-header-text),
-.card .card-header-default .card-text {
+.card .card-header-default .card-icon, .card .card-header-default:not(.card-header-icon):not(.card-header-text), .card .card-header-default .card-text {
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
 
-.card .card-header-plain .card-icon,
-.card .card-header-plain .card-text,
-.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
+.card .card-header-plain .card-icon, .card .card-header-plain .card-text, .card .card-header-plain:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
 	background: linear-gradient(60deg, #fff, #fff);
 }
 
-.card .card-header-plain .card-icon,
-.card .card-header-plain:not(.card-header-icon):not(.card-header-text),
-.card .card-header-plain .card-text {
+.card .card-header-plain .card-icon, .card .card-header-plain:not(.card-header-icon):not(.card-header-text), .card .card-header-plain .card-text {
 	-webkit-box-shadow: none;
 	box-shadow: none;
 }
 
-.card .card-header-blue .card-icon,
-.card .card-header-blue .card-text,
-.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
-.card.bg-warning,
-.card.card-rotate.bg-warning .front,
-.card.card-rotate.bg-warning .back {
+.card .card-header-blue .card-icon, .card .card-header-blue .card-text, .card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back {
 	background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182));
 }
 
-.card .card-header-blue .card-icon,
-.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
-.card .card-header-blue .card-text {
+.card .card-header-blue .card-icon, .card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card .card-header-blue .card-text {
 	-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 	box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14);
 }
@@ -187,8 +164,7 @@ h4 {
 	color: rgb(138, 170, 195);
 }
 
-.card [class*="card-header-"] .card-icon,
-.card [class*="card-header-"] .card-text {
+.card [class*="card-header-"] .card-icon, .card [class*="card-header-"] .card-text {
 	border-radius: 5px;
 	/* background-color: #999999; */
 	padding: 15px;
@@ -197,7 +173,7 @@ h4 {
 	float: left;
 }
 
-.card [class*="card-header-"] .card-title + .card-category {
+.card [class*="card-header-"] .card-title+.card-category {
 	color: #fff;
 	font-size: 12px;
 }
@@ -283,12 +259,7 @@ h4 {
 	position: relative;
 }
 
-table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
+table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
 	padding: 8px 8px;
 	vertical-align: middle;
 }
@@ -320,3 +291,14 @@ table > thead > tr > th,
 	outline: none;
 	box-shadow: none;
 }
+
+.sidebar .sidebar-background:after {
+	position: absolute;
+	z-index: 3;
+	width: 100%;
+	height: 100%;
+	content: "";
+	display: block;
+	background: rgba(250, 250, 250, 0.95);
+	opacity: .93;
+}