add dynamic color background info drawer (#2292)

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

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 {
+.adf-filters__entry {
-  cursor: pointer; }
+  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 {
+.adf-filters__entry-icon {
-  cursor: pointer; }
+  padding-right: 12px !important;
-
+  padding-left: 0px !important; }
-.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-comment-img-container {
   float: left;

ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.scss

@@ -1,34 +1,38 @@
-.adf {
+@mixin mat-info-drawer-theme($theme) {
-    &-info-drawer-layout {
+    $background: map-get($theme, background);
-        width: 350px;
-        display: block;
-        padding: 8px 0;
-        background-color: #FAFAFA;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-        &-header {
+    .adf {
-            padding: 8px 24px 24px 24px;
+        &-info-drawer-layout {
-            display: flex;
+            width: 350px;
-            justify-content: space-between;
+            display: block;
-            font-size: 20px;
+            padding: 8px 0;
+            background-color: mat-color($background, dialog);
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
-            &-buttons {
+            &-header {
-                md-icon {
+                padding: 8px 24px 24px 24px;
-                    cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                font-size: 20px;
+
+                &-buttons {
+                    md-icon {
+                        cursor: pointer;
+                    }
                 }
             }
-        }
 
-        &-content {
+            &-content {
-            padding: 10px;
+                padding: 10px;
 
-            > * {
+                > * {
-                margin-bottom: 20px;
+                    margin-bottom: 20px;
-                display: block;
+                    display: block;
-            }
+                }
 
-            > *:last-child {
+                > *:last-child {
-                margin-bottom: 0;
+                    margin-bottom: 0;
+                }
             }
         }
     }

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);
 }