new-front-common-library 16.1.0-REF-1 → 16.1.0-REF-2

package/assets/css/new-themes/_dark-theme-16.scss

@@ -63,44 +63,6 @@
 
   // END TITLE
 
-  // BUTTON
-  .primary {
-    background: $blue-primary !important;
-    color: #FFFFFF !important;
-  }
-
-  .secondary {
-    background: $gray-blue-primary !important;
-    color: #FFFFFF !important;
-  }
-
-  .accent {
-    background: $purple-primary !important;
-    color: #FFFFFF !important;
-  }
-
-  .positive {
-    background: $green-primary !important;
-    color: #FFFFFF !important;
-  }
-
-  .negative {
-    background: $red-primary;
-    color: #FFFFFF;
-  }
-
-  .primary-color {
-    color: $blue-primary !important;
-  }
-
-  // END BUTTON
-
-  //TABLE
-  .no-results {
-    background: $gray-primary;
-    color: white;
-  }
-  // END TABLE
 
   //EXPANSION PANEL
   .mat-expansion-panel-header {
@@ -121,7 +83,7 @@
   //
   .ng-select .ng-select-container {
     background-color: $background-lvl3;
-    color: $gray-light;
+    color: $gray-background-lightest;
     border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
@@ -146,12 +108,21 @@
     box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $gray-background-dark;
   }
 
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    color: $gray-light;
+    background-color: $background-lvl2;
+  }
+
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
     color: $gray-background-lightest;
   }
 
   // END NG-SELECT
 
+  .separator-line {
+    border-color: $gray-background-lightest;
+  }
+
 
   //.navigation-menu {
   //  background-color: $background-lvl2;
@@ -236,10 +207,6 @@
   //  color: $gray-primary;
   //}
 
-  //.separator-line {
-  //  border-color: $gray-background-lightest;
-  //}
-
   //// DRAG & DROP
 
   //.drag-drop-box {

package/assets/css/new-themes/_global-16.scss

@@ -105,6 +105,14 @@ body, html {
 
 
 // BUTTON
+
+.app-container .mat-mdc-button.mat-mdc-button-base,
+.app-container .mat-mdc-raised-button.mat-mdc-button-base,
+.app-container .mat-mdc-unelevated-button.mat-mdc-button-base,
+.app-container .mat-mdc-outlined-button.mat-mdc-button-base {
+  height: 32px;
+}
+
 .action-button {
   font-weight: bold !important;
   font-size: 14px;
@@ -226,6 +234,11 @@ body, html {
   box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $blue-primary;
 }
 
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+  display: flex;
+  align-items: center;
+}
+
 // END NG-SELECT
 
 .clickable {
@@ -252,6 +265,54 @@ body, html {
 
 // END THIRD PARTY AUTOCOMPLETE
 
+// BUTTON
+.primary {
+  background: $blue-primary !important;
+  color: #FFFFFF !important;
+}
+
+.secondary {
+  background: $gray-blue-primary !important;
+  color: #FFFFFF !important;
+}
+
+.accent {
+  background: $purple-primary !important;
+  color: #FFFFFF !important;
+}
+
+.positive {
+  background: $green-primary !important;
+  color: #FFFFFF !important;
+}
+
+.negative {
+  background: $red-primary !important;
+  color: #FFFFFF !important;
+}
+
+.primary-color {
+  color: $blue-primary !important;
+}
+
+// END BUTTON
+
+//TABLE
+.no-results {
+  background: $gray-primary;
+  color: white;
+}
+// END TABLE
+
+// TOOLTIP
+
+.mdc-tooltip__surface {
+  max-width: 250px;
+  max-height: 100%;
+}
+
+// END TOOLTIP
+
 
 //.spacer {
 //  flex: 1 1 auto;

package/assets/css/new-themes/_light-theme-16.scss

@@ -61,44 +61,8 @@
 
   // END TITLE
 
-  // BUTTON
-  .primary {
-    background: $blue-primary;
-    color: #FFFFFF;
-  }
-
-  .secondary {
-    background: $gray-blue-primary;
-    color: #FFFFFF;
-  }
-
-  .accent {
-    background: $purple-primary;
-    color: #FFFFFF;
-  }
-
-  .positive {
-    background: $green-primary;
-    color: #FFFFFF;
-  }
-
-  .negative {
-    background: $red-primary;
-    color: #FFFFFF;
-  }
-
-  .primary-color {
-    color: $blue-primary;
-  }
-  // END BUTTON
 
 
-  //TABLE
-  .no-results {
-    background: $gray-primary;
-    color: white;
-  }
-  // END TABLE
 
   //EXPANSION PANEL
   .mat-expansion-panel-header {
@@ -124,12 +88,19 @@
     border-color: $black-bluish;
     box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $black-bluish;
   }
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    color: $black-bluish;
+    background-color: #ebf5ff;
+  }
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
     color: $black-bluish;
   }
 
   // END NG-SELECT
 
+  .separator-line {
+    border-color: $black-bluish;
+  }
 
 
   //.navigation-menu {
@@ -215,10 +186,6 @@
   //  color: $gray-primary;
   //}
 
-  //.separator-line {
-  //  border-color: $black-bluish;
-  //}
-
   //// DRAG & DROP
   //
   //.drag-drop-box {
@@ -236,10 +203,8 @@
   //  color: $gray-light !important;
   //  font-size: 12px;
   //}
-  //
 
 
-  //
   //.secondary-bis {
   //  background: $gray-light !important;
   //  color: #FFFFFF !important;
@@ -249,6 +214,4 @@
   //  color: $black-bluish;
   //}
 
-
-
 }

package/assets/css/new-themes/material-16/_mdc-dark-theme.scss

@@ -61,13 +61,14 @@
     border-radius: 4px;
   }
   .mdc-notched-outline > * {
-    border-color: $dark-border-color !important;
+    border-color: $dark-border-color;
   }
   .mdc-text-field--focused .mdc-notched-outline > * {
-    border-color: $gray-light !important;
+    border-color: $gray-light;
   }
-  .mdc-text-field--invalid .mdc-notched-outline > * {
-    border-color: red !important;
+
+  .mat-mdc-checkbox .mdc-form-field {
+    -webkit-font-smoothing: initial;
   }
   // END FORM FIELD
 
@@ -137,9 +138,9 @@
   }
 
   .mat-calendar-body-today {
-    background: rgb(0 0 0 / 40%);
-    border-color: rgb(0 0 0 / 40%);
-    color: white;
+    background: rgb(0 0 0 / 40%) !important;
+    border-color: rgb(0 0 0 / 40%) !important;
+    color: white !important;
   }
 
   .mat-calendar-arrow {
@@ -154,6 +155,12 @@
   .mat-datepicker-content .mat-mdc-button.mat-unthemed {
     --mdc-text-button-label-text-color: #{$blue-primary};
   }
+
+  .mat-calendar-body-cell-content, .mat-date-range-input-separator {
+    color: $gray-background-lightest;
+    border-color: transparent;
+  }
+
   // END CALENDAR
 
   // CHECKBOX
@@ -161,6 +168,8 @@
   --mdc-checkbox-selected-hover-icon-color: #{$blue-primary};
   --mdc-checkbox-selected-focus-icon-color: #{$blue-primary};
   --mdc-checkbox-selected-pressed-icon-color: #{$blue-primary};
+  --mdc-checkbox-unselected-hover-icon-color:#{$blue-primary};
+  --mdc-checkbox-unselected-focus-icon-color:#{$blue-primary};
 
   // END CHECKBOX
 
@@ -170,22 +179,10 @@
     --mdc-dialog-container-color: #{$background-lvl3};
   }
 
-  .mat-mdc-dialog-container h1 {
-    color: $gray-background-lightest !important;
-  }
-
-  .mat-mdc-dialog-container h2 {
-    color: $gray-background-lightest !important;
-  }
-
-  .mat-mdc-dialog-container h3 {
-    color: $gray-background-lightest !important;
-  }
-
-  .mat-mdc-dialog-container h4 {
-    color: $gray-background-lightest !important;
-  }
-
+  .mat-mdc-dialog-container h1,
+  .mat-mdc-dialog-container h2,
+  .mat-mdc-dialog-container h3,
+  .mat-mdc-dialog-container h4,
   .mat-mdc-dialog-container .text {
     color: $gray-background-lightest !important;
   }
@@ -204,6 +201,15 @@
   }
   //END RADIO BUTTON
 
+  //BADGE
+
+  .mat-badge-content {
+    color: white;
+    background: $red-primary !important;
+  }
+
+  //END BADGE
+
 
   //.mat-mdc-card {
   //  padding: 5px !important;
@@ -236,11 +242,6 @@
   //  background-color: $background-lvl2;
   //}
 
-  //.mat-badge-content {
-  //  color: white;
-  //  background: $red-primary !important;
-  //}
-
   //.mat-drag-panel {
   //  color: $gray-background-lightest;
   //}

package/assets/css/new-themes/material-16/_mdc-light-theme.scss

@@ -52,16 +52,16 @@
       border-radius: 4px;
     }
     .mdc-notched-outline > * {
-      border-color: $light-border-color !important;
+      border-color: $light-border-color;
     }
     .mdc-text-field--focused .mdc-notched-outline > * {
-      border-color: $black-bluish !important;
+      border-color: $black-bluish;
     }
   }
-
-  .mdc-text-field--invalid .mdc-notched-outline > * {
-    border-color: red !important;
+  .mat-mdc-checkbox .mdc-form-field {
+    -webkit-font-smoothing: initial;
   }
+
   --mdc-filled-text-field-container-color: transparent;
 
   // END FORM FIELD
@@ -128,9 +128,9 @@
   }
 
   .mat-calendar-body-today {
-    background: $black-bluish;
-    border-color: $black-bluish;
-    color: white;
+    background: $black-bluish !important;
+    border-color: $black-bluish !important;
+    color: white !important;
   }
 
   .mat-calendar-arrow {
@@ -147,6 +147,11 @@
     --mdc-text-button-label-text-color: #{$blue-primary};
   }
 
+  .mat-calendar-body-cell-content, .mat-date-range-input-separator {
+    color: $black-bluish;
+    border-color: transparent;
+  }
+
   //.mat-calendar-controls {
   //  display: flex;
   //  margin: 0% calc(33% / 7 - 16px);
@@ -160,6 +165,8 @@
   --mdc-checkbox-selected-focus-icon-color: #{$blue-primary};
   --mdc-checkbox-selected-pressed-icon-color: #{$blue-primary};
   --mdc-checkbox-unselected-icon-color:#{$gray-primary};
+  --mdc-checkbox-unselected-hover-icon-color:#{$gray-primary};
+  --mdc-checkbox-unselected-focus-icon-color:#{$gray-primary};
 
   // END CHECKBOX
 
@@ -170,25 +177,14 @@
     --mdc-dialog-container-color: #{$gray-background-lightest};
   }
 
-  .mat-mdc-dialog-container h1 {
-    color: $black-bluish !important;
-  }
-
-  .mat-mdc-dialog-container h2 {
-    color: $black-bluish !important;
-  }
-
-  .mat-mdc-dialog-container h3 {
-    color: $black-bluish !important;
-  }
-
-  .mat-mdc-dialog-container h4 {
-    color: $black-bluish !important;
-  }
-
+  .mat-mdc-dialog-container h1,
+  .mat-mdc-dialog-container h2,
+  .mat-mdc-dialog-container h3,
+  .mat-mdc-dialog-container h4,
   .mat-mdc-dialog-container .text {
     color: $black-bluish !important;
   }
+
   //// END POPUP
 
   //RADIO BUTTON
@@ -203,6 +199,15 @@
   }
   //END RADIO BUTTON
 
+  //BADGE
+
+  .mat-badge-content {
+    color: white;
+    background: $red-primary !important;
+  }
+
+  //END BADGE
+
 
 
   //.mat-mdc-card {
@@ -238,10 +243,7 @@
   //  background-color: $gray-background-light2;
   //}
 
-  //.mat-badge-content {
-  //  color: white;
-  //  background: $red-primary !important;
-  //}
+
 
   //.mat-drag-panel {
   //  color: $black-bluish;

package/assets/css/new-themes/material-16/_mdc.scss

@@ -97,6 +97,11 @@
   color: $blue-primary;
 }
 
+.mdc-text-field--outlined {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
 // END FORM FIELD
 
 //ICON in form-field
@@ -187,15 +192,23 @@
 }
 
 .mat-mdc-row {
+  -webkit-font-smoothing: initial;
+  line-height: normal;
+
   .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
     display: none;
   }
 
-  .mat-mdc-input-element, .mat-mdc-select, .mdc-text-field--filled {
+  .mat-mdc-input-element, .mat-mdc-select {
     padding: 0 4px 0 2px;
     border-radius: 4px;
   }
 
+  .mdc-text-field--filled {
+    padding: 0;
+    border-radius: 4px;
+  }
+
   .mat-mdc-form-field-infix {
     padding: 0 !important;
     min-height: 26px;
@@ -233,18 +246,6 @@
 
 
   .mat-mdc-form-field.mat-form-field-appearance-fill {
-    .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
-      display: none;
-    }
-
-    .mat-mdc-form-field-focus-overlay {
-      opacity: 0;
-    }
-
-    .mat-mdc-text-field-wrapper {
-      padding: 0;
-    }
-
     .mat-mdc-form-field-infix {
       min-height: 52px;
       max-height: 52px;
@@ -263,6 +264,20 @@
   }
 }
 
+.mat-mdc-form-field.mat-form-field-appearance-fill {
+  .mdc-line-ripple, .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .mat-mdc-form-field-focus-overlay {
+    opacity: 0 !important;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    padding: 0;
+  }
+}
+
 // END TABLE
 
 
@@ -324,6 +339,10 @@ input:-webkit-autofill:active{
   padding: 2px 4px;
 }
 
+.mat-mdc-standard-chip .mdc-evolution-chip__text-label {
+  font-size: 12px;
+}
+
 // END CHIP
 
 // FORM
@@ -332,11 +351,11 @@ input:-webkit-autofill:active{
 }
 
 .mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-mdc-select {
-  border: 2px solid red;
+  border: 1px solid red;
 }
 
 .mat-mdc-cell .mat-form-field-invalid .mat-mdc-input-element, .mat-cell .mat-form-field-invalid .mat-select {
-  border: 2px solid red;
+  border: 1px solid red;
 }
 
 //END FORM
@@ -360,6 +379,7 @@ input:-webkit-autofill:active{
 .mat-mdc-option {
   min-height: unset;
   font-size: 12px;
+  -webkit-font-smoothing: initial;
 }
 
 .cdk-overlay-pane .mat-mdc-option .mdc-list-item__primary-text {