FEAT #41 add custom css for material (in progress)

apps/maarch_entreprise/css/engine.css

@@ -45,33 +45,10 @@
 #container{
     padding: 0px !important;
 }
-.md2-toast {
-    display: table;
-    background-color: #337ab7 !important;
-    vertical-align: middle;
-    /*background-color: rgba(63, 81, 181, 0.6) !important;*/
-    /*background-color: rgba(0, 0, 0, 0.6) !important;*/
-}
-
-.md2-toast i{
-    display: table-cell;
-    padding:5px;
-    vertical-align: middle;
-}
-
-.md2-toast span{
-    display: table-cell;
-    padding:5px;
-    vertical-align: middle;
-}
-.mat-input-container,.md2-select,md2-datepicker{
+.mat-input-container{
     width:100% !important;
 }
 
-.md2-select{
-    padding-bottom: 1.29688em;
-}
-
 .mat-tab-body-wrapper{
     padding: 10px;
 }
@@ -107,3 +84,63 @@ table tr:not(.filters) .mat-input-container{
 .modal-footer{
     background:white;
 }
+
+[color=primary] {
+    /*color: #3f51b5;*/
+    color:#135f7f;
+}
+
+[color=warn] {
+    color: #8e3e52;
+}
+
+[color=accent] {
+    /*color: #4CAF50;*/
+    color:#006841;
+}
+
+.jstree-clicked {
+    background: #135f7f;
+}
+
+/*** FIX BUG EXPANSION PANEL MATERIAL WITH TABS (DELETE AFTER CORRECTION) ***/
+div.mat-expansion-panel-content:not(.mat-expanded) {
+    height: 0px;
+    visibility: hidden;
+}
+
+.mat-expansion-panel-header:not(.mat-expanded)  {
+    height: 48px;
+}
+
+.mat-expansion-panel-header  {
+    height: 64px;
+    .mat-content {
+        font-weight: 100;
+        font-size: 18px;
+    }
+    &.mat-expanded {        
+        .mat-expansion-indicator {
+            transform: rotate(180deg);
+        }
+    }
+}
+/*********************************/
+
+.example-headers-align .mat-expansion-panel-header-title, 
+.example-headers-align .mat-expansion-panel-header-description {
+  /*flex-basis: 0;*/
+  width:50%;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mat-autocomplete-panel .mat-option{
+    font-size:80%;
+}
+.mat-autocomplete-panel .mat-option small{
+    opacity: 0.7;
+}
\ No newline at end of file

apps/maarch_entreprise/js/angular/app/app.component.js

@@ -18,7 +18,8 @@ var AppComponent = /** @class */ (function () {
             encapsulation: core_1.ViewEncapsulation.None,
             styleUrls: [
                 '../../node_modules/bootstrap/dist/css/bootstrap.min.css',
-                '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+                //'../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+                'css/maarch-material.css',
                 'css/engine.css',
                 'css/jstree-custom.min.css' //treejs module
             ]

apps/maarch_entreprise/js/angular/app/app.component.ts

@@ -7,7 +7,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
     encapsulation: ViewEncapsulation.None,
     styleUrls   : [
         '../../node_modules/bootstrap/dist/css/bootstrap.min.css',
-        '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+        //'../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+        'css/maarch-material.css',
         'css/engine.css',
         'css/jstree-custom.min.css' //treejs module
     ]

apps/maarch_entreprise/js/angular/app/app.module.js

@@ -12,8 +12,8 @@ var animations_1 = require("@angular/platform-browser/animations");
 var forms_1 = require("@angular/forms");
 var http_1 = require("@angular/common/http");
 var app_material_module_1 = require("./app-material.module");
-var md2_1 = require("md2");
 //import { HeaderComponent }                      from './header.component';
+var notification_service_1 = require("./notification.service");
 var app_component_1 = require("./app.component");
 var app_routing_module_1 = require("./app-routing.module");
 var administration_module_1 = require("./administration/administration.module");
@@ -31,16 +31,18 @@ var AppModule = /** @class */ (function () {
                 http_1.HttpClientModule,
                 administration_module_1.AdministrationModule,
                 app_routing_module_1.AppRoutingModule,
-                app_material_module_1.AppMaterialModule,
-                md2_1.Md2Module,
-                md2_1.NoConflictStyleCompatibilityMode
+                app_material_module_1.AppMaterialModule
             ],
             declarations: [
                 //HeaderComponent,
                 app_component_1.AppComponent,
                 profile_component_1.ProfileComponent,
                 signature_book_component_1.SignatureBookComponent,
-                signature_book_component_1.SafeUrlPipe
+                signature_book_component_1.SafeUrlPipe,
+                notification_service_1.CustomSnackbarComponent
+            ],
+            entryComponents: [
+                notification_service_1.CustomSnackbarComponent
             ],
             bootstrap: [app_component_1.AppComponent]
         })

apps/maarch_entreprise/js/angular/app/app.module.ts

@@ -4,9 +4,10 @@ import { BrowserAnimationsModule }              from '@angular/platform-browser/
 import { FormsModule }                          from '@angular/forms';
 import { HttpClientModule }                     from '@angular/common/http';
 import { AppMaterialModule }                    from './app-material.module';
-import { Md2Module,NoConflictStyleCompatibilityMode }                            from 'md2';
 
 //import { HeaderComponent }                      from './header.component';
+import { CustomSnackbarComponent }              from './notification.service';
+
 import { AppComponent }                         from './app.component';
 import { AppRoutingModule }                     from './app-routing.module';
 import { AdministrationModule }                 from './administration/administration.module';
@@ -22,16 +23,18 @@ import { SignatureBookComponent, SafeUrlPipe }  from './signature-book.component
         HttpClientModule,
         AdministrationModule,
         AppRoutingModule,
-        AppMaterialModule,
-        Md2Module,
-        NoConflictStyleCompatibilityMode
+        AppMaterialModule
     ],
     declarations: [
         //HeaderComponent,
         AppComponent,
         ProfileComponent,
         SignatureBookComponent,
-        SafeUrlPipe
+        SafeUrlPipe,
+        CustomSnackbarComponent
+    ],
+    entryComponents: [
+        CustomSnackbarComponent
     ],
     bootstrap: [AppComponent]
 })