FEAT #125 add scss file + compile command node-sass

apps/maarch_entreprise/css/engine.css

-/*@font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
-  }
-  
-  .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -moz-font-feature-settings: 'liga';
-    -moz-osx-font-smoothing: grayscale;
-  }*/
-
 /******* CORECTION BUG CSS WITH V1 (A SUPPRIMER A LA FIN) *********/
 
 .page-header h1 {
@@ -125,21 +102,6 @@ table tr:not(.filters) .mat-input-container {
     background: white;
 }
 
-[color=primary] {
-    color: #135f7f;
-}
-
-[color=warn] {
-    color: #8e3e52;
-}
-
-[color=accent] {
-    color: #006841;
-}
-
-.jstree-clicked {
-    background: #135f7f;
-}
 
 /*** FIX BUG EXPANSION PANEL MATERIAL WITH TABS (DELETE AFTER CORRECTION) ***/
 

apps/maarch_entreprise/css/maarch-material.scss

+// import all mixins and utils to create a theme
+@import "./node_modules/@angular/material/_theming.scss";
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core();
+
+// theme colors
+// @function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)
+$mat-maarch-primary: (
+  100: #4e8cae,
+  500: #135f7f,
+  700: #003552,
+  contrast: (
+    100: $dark-primary-text,
+    500: $light-primary-text,
+    700: $light-primary-text
+  )
+);
+
+$mat-maarch-warn: (
+  100: #c16b7e,
+  500: #8e3e52,
+  700: #5d102a,
+  contrast: (
+    100: $dark-primary-text,
+    500: $light-primary-text,
+    700: $light-primary-text
+  )
+);
+
+$mat-maarch-accent: (
+  100: #41976c,
+  500: #006841,
+  700: #003c1a,
+  contrast: (
+    100: $dark-primary-text,
+    500: $light-primary-text,
+    700: $light-primary-text
+  )
+);
+
+$primary: mat-palette($mat-maarch-primary,500);
+$accent: mat-palette($mat-maarch-accent,500);
+$warn: mat-palette($mat-maarch-warn,500);
+
+// create theme from palettes
+$theme: mat-light-theme($primary, $accent, $warn);
+// apply theme
+@include angular-material-theme($theme);
+
+
+/******** BOOTSTRAP THEMING **********/
+$theme-colors: (
+  "primary": mat-color($primary, 500),
+  "danger": mat-color($warn, 500)
+);
+@import "./node_modules/bootstrap/less/bootstrap.less";
+
+
+[color=primary] {
+    color: mat-color($primary, 500);
+}
+
+[color=warn] {
+    color: mat-color($warn, 500);
+}
+
+[color=accent] {
+    color: mat-color($accent, 500);
+}
+
+.jstree-proton .jstree-clicked {
+    background : mat-color($primary, 100) !important;
+}
+.jstree-proton .jstree-hovered {
+    background: mat-color($primary, 100) !important;
+    box-shadow: inset 0 0 1px mat-color($primary, 500) !important;
+}
\ No newline at end of file

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

@@ -31,7 +31,6 @@ 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',
                 'css/maarch-material.css',
                 'css/engine.css',
                 'css/jstree-custom.min.css',

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

@@ -17,7 +17,6 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
     encapsulation: ViewEncapsulation.None,
     styleUrls: [
         '../../node_modules/bootstrap/dist/css/bootstrap.min.css',
-        //'../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
         'css/maarch-material.css',
         'css/engine.css',
         'css/jstree-custom.min.css', //treejs module