[ADF-1434] Theming ADF component (#2228)

* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides

ng2-components/ng2-activiti-analytics/index.ts

@@ -25,9 +25,9 @@ import { AnalyticsReportHeatMapComponent } from './src/components/analytics-repo
 import { AnalyticsReportListComponent } from './src/components/analytics-report-list.component';
 import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component';
 import { AnalyticsComponent } from './src/components/analytics.component';
-import { AnalyticsService } from './src/services/analytics.service';
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
 import { MaterialModule } from './src/material.module';
+import { AnalyticsService } from './src/services/analytics.service';
 
 export * from './src/components/analytics.component';
 export * from './src/components/analytics-generator.component';

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.css

@@ -1,52 +0,0 @@
-.mdl-list__item {
-    cursor: pointer;
-}
-
-.activiti-filters__entry {
-    cursor: pointer;
-}
-
-.activiti-filters__entry-icon {
-    margin-right: 12px !important;
-}
-
-.activiti-filters__entry.active {
-    color: rgb(68,138,255);
-}
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-    color: rgb(68,138,255);
-}
-
-.application-title {
-    color: white;
-    z-index: 7;
-}
-
-.logo {
-    position: absolute;
-    right: 20px;
-    top: 35px;
-    z-index: 6;
-}
-.logo i{
-    font-size: 70px;
-}
-
-.theme-1 {
-    background-color: #269abc;
-}
-
-.theme-1 .logo i {
-    color: #168aac;
-}
-.theme-1 .mdl-card__actions i {
-    color: #168aac;
-}
-.theme-1 .mdl-card__actions i:hover {
-    color: #b7dfea;
-}
-
-.selectedIcon{
-    color: #e9f1f3!important;
-}

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html

@@ -1,4 +1,4 @@
-<div class="menu-container">
+<div class="adf-analytics-report-list menu-container">
     <ul class='mdl-list' *ngIf="isList()">
         <li class="mdl-list__item activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index"
             [class.active]="currentReport === report">

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss

@@ -0,0 +1,62 @@
+@mixin mat-analytics-report-list-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf-analytics-report-list {
+
+        .mdl-list__item {
+            cursor: pointer;
+        }
+
+        .activiti-filters__entry {
+            cursor: pointer;
+        }
+
+        .activiti-filters__entry-icon {
+            margin-right: 12px !important;
+        }
+
+        .activiti-filters__entry.active {
+            color:  mat-color($primary);
+        }
+
+        .activiti-filters__entry.active .activiti-filters__entry-icon {
+            color:  mat-color($primary);
+        }
+
+        .application-title {
+            z-index: 7;
+        }
+
+        .logo {
+            position: absolute;
+            right: 20px;
+            top: 35px;
+            z-index: 6;
+        }
+
+        .logo i {
+            font-size: 70px;
+        }
+
+        .theme-1 {
+            background-color: #269abc;
+        }
+
+        .theme-1 .logo i {
+            color: #168aac;
+        }
+
+        .theme-1 .mdl-card__actions i {
+            color: #168aac;
+        }
+
+        .theme-1 .mdl-card__actions i:hover {
+            color: #b7dfea;
+        }
+
+        .selectedIcon {
+            color: #e9f1f3 !important;
+        }
+    }
+
+}

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts

@@ -23,7 +23,7 @@ import { AnalyticsService } from '../services/analytics.service';
 @Component({
     selector: ' adf-analytics-report-list, analytics-report-list',
     templateUrl: './analytics-report-list.component.html',
-    styleUrls: ['./analytics-report-list.component.css'],
+    styleUrls: ['./analytics-report-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AnalyticsReportListComponent implements OnInit {