From f6db06a585c24dbd25d1e465106bc1ae224d3194 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Mon, 4 Sep 2017 21:46:10 +0200
Subject: [PATCH] add dynamic color background info drawer (#2292)

---
 .../prebuilt-themes/adf-blue-orange.css       | 53 +++++++++++-----
 .../prebuilt-themes/adf-blue-purple.css       | 53 +++++++++++-----
 .../prebuilt-themes/adf-cyan-orange.css       | 53 +++++++++++-----
 .../prebuilt-themes/adf-cyan-purple.css       | 53 +++++++++++-----
 .../prebuilt-themes/adf-green-orange.css      | 51 ++++++++++-----
 .../prebuilt-themes/adf-green-purple.css      | 51 ++++++++++-----
 .../prebuilt-themes/adf-indigo-pink.css       | 53 +++++++++++-----
 .../prebuilt-themes/adf-pink-bluegrey.css     | 53 +++++++++++-----
 .../prebuilt-themes/adf-purple-green.css      | 53 +++++++++++-----
 .../info-drawer-layout.component.scss         | 62 ++++++++++---------
 .../ng2-alfresco-core/styles/_index.scss      |  2 +
 11 files changed, 357 insertions(+), 180 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
index bc65d9b241..f0ba13a4e7 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: white;
+    color: rgba(0, 0, 0, 0.87);
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #2196f3;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #2196f3; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #2196f3; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
index b2c8a258ed..d21ef8f60a 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-blue-purple.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: white;
+    color: rgba(0, 0, 0, 0.87);
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #2196f3;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #2196f3; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #2196f3; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
index 094ac15574..3d181bf6d7 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-orange.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: white;
+    color: rgba(0, 0, 0, 0.87);
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #00bcd4;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #00bcd4; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #00bcd4; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
index 55996e678a..cc9273c4be 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-cyan-purple.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: white;
+    color: rgba(0, 0, 0, 0.87);
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #00bcd4;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #00bcd4; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #00bcd4; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
index 6140d6fdd6..f35eb3e683 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-orange.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #8bc34a;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #8bc34a; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #8bc34a; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
index 0f46173f43..61471d4b84 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-green-purple.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #8bc34a;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #8bc34a; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #8bc34a; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
index 8712190d24..c219b8386c 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-indigo-pink.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.87);
+    color: rgba(0, 0, 0, 0.87);
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #3f51b5;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #3f51b5; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #3f51b5; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
index 88e4bc7a8f..25eb0700c1 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-pink-bluegrey.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: #424242;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(255, 255, 255, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.87);
+    color: white;
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #c2185b;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #c2185b; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #c2185b; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
index 79dbca06e7..43a24c5f1e 100644
--- a/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
+++ b/ng2-components/ng2-alfresco-core/prebuilt-themes/adf-purple-green.css
@@ -1333,6 +1333,27 @@ input.mat-input-element:-webkit-autofill + .mat-input-placeholder .mat-placehold
   font-size: 14px;
   white-space: normal; }
 
+.adf-info-drawer-layout {
+  width: 350px;
+  display: block;
+  padding: 8px 0;
+  background-color: #424242;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); }
+  .adf-info-drawer-layout-header {
+    padding: 8px 24px 24px 24px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px; }
+    .adf-info-drawer-layout-header-buttons md-icon {
+      cursor: pointer; }
+  .adf-info-drawer-layout-content {
+    padding: 10px; }
+    .adf-info-drawer-layout-content > * {
+      margin-bottom: 20px;
+      display: block; }
+    .adf-info-drawer-layout-content > *:last-child {
+      margin-bottom: 0; }
+
 .adf-pagination {
   display: flex;
   border-top: 1px solid rgba(255, 255, 255, 0.07);
@@ -1661,7 +1682,7 @@ container-widget .mat-grid-tile {
     letter-spacing: 0;
     height: 56px;
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.87);
+    color: white;
     padding-bottom: 8px;
     box-sizing: border-box; }
     .adf-dynamic-table th.sortable {
@@ -1713,23 +1734,21 @@ container-widget .mat-grid-tile {
   .adf-dynamic-table .full-width {
     width: 100%; }
 
-.mdl-list__item {
-  cursor: pointer; }
+.adf-filters__entry {
+  cursor: pointer;
+  font-size: 14px !important;
+  font-weight: bold;
+  opacity: .54;
+  padding-left: 30px; }
+  .adf-filters__entry .mat-list-item-content {
+    height: 34px; }
+  .adf-filters__entry.active, .adf-filters__entry:hover {
+    color: #7b1fa2;
+    opacity: 1; }
 
-.activiti-filters__entry {
-  cursor: pointer; }
-
-.activiti-filters__entry-icon {
-  margin-right: 12px !important; }
-
-.activiti-filters__entry.active {
-  color: #7b1fa2; }
-
-.activiti-filters__entry:hover {
-  opacity: 0.8; }
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-  color: #7b1fa2; }
+.adf-filters__entry-icon {
+  padding-right: 12px !important;
+  padding-left: 0px !important; }
 
 .adf-comment-img-container {
   float: left;
diff --git a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
index 34d5aba472..95fec8d433 100644
--- a/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
+++ b/ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss
@@ -1,35 +1,39 @@
-.adf {
-    &-info-drawer-layout {
-        width: 350px;
-        display: block;
-        padding: 8px 0;
-        background-color: #FAFAFA;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+@mixin mat-info-drawer-theme($theme) {
+    $background: map-get($theme, background);
 
-        &-header {
-            padding: 8px 24px 24px 24px;
-            display: flex;
-            justify-content: space-between;
-            font-size: 20px;
+    .adf {
+        &-info-drawer-layout {
+            width: 350px;
+            display: block;
+            padding: 8px 0;
+            background-color: mat-color($background, dialog);
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-            &-buttons {
-                md-icon {
-                    cursor: pointer;
+            &-header {
+                padding: 8px 24px 24px 24px;
+                display: flex;
+                justify-content: space-between;
+                font-size: 20px;
+
+                &-buttons {
+                    md-icon {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            &-content {
+                padding: 10px;
+
+                > * {
+                    margin-bottom: 20px;
+                    display: block;
+                }
+
+                > *:last-child {
+                    margin-bottom: 0;
                 }
             }
         }
-
-        &-content {
-            padding: 10px;
-
-            > * {
-                margin-bottom: 20px;
-                display: block;
-            }
-
-            > *:last-child {
-                margin-bottom: 0;
-            }
-        }
     }
-}
\ No newline at end of file
+}
diff --git a/ng2-components/ng2-alfresco-core/styles/_index.scss b/ng2-components/ng2-alfresco-core/styles/_index.scss
index e7c664278d..34e4070f3e 100644
--- a/ng2-components/ng2-alfresco-core/styles/_index.scss
+++ b/ng2-components/ng2-alfresco-core/styles/_index.scss
@@ -5,6 +5,7 @@
 @import '../src/components/view/card-view.component';
 @import '../src/components/toolbar/toolbar.component';
 @import '../src/components/pagination/pagination.component';
+@import '../src/components/info-drawer/info-drawer-layout.component';
 
 @mixin alfresco-core-theme($theme) {
     @include mat-accordion-theme($theme);
@@ -12,6 +13,7 @@
     @include mat-card-view-dateitem-theme($theme);
     @include mat-card-view-theme($theme);
     @include mat-adf-toolbar-theme($theme);
+    @include mat-info-drawer-theme($theme);
     @include mat-pagination-theme($theme);
     @include mat-colors-theme($theme);
 }