new-front-common-library 0.0.17 → 0.0.21

package/assets/css/_dark-theme.scss

@@ -2,7 +2,7 @@
 
 .dark-theme {
   //1
-  .u-sidenav-container {
+  .page-container {
     background-color: $background-lvl3;
   }
 
@@ -34,6 +34,10 @@
     background-color: whitesmoke;
   }
 
+  .expandable-row:hover {
+    background-color: transparent !important;
+  }
+
   //7
   /* Table header coloring*/
   .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -103,6 +107,10 @@
     color: $gray-light;
   }
 
+  a {
+    color: $gray-background-lightest;
+  }
+
   .mat-row, row-drop {
     border-radius: 3%;
     border-left-width: 1px;
@@ -183,7 +191,11 @@
   }
 
   .mat-menu-item {
-    color: $gray-light !important;
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-menu-panel {
+    background: $background-lvl2 !important
   }
 
   .cancel-button{
@@ -199,16 +211,6 @@
 
   }
 
-  .expand-button {
-    background-color: $gray-blue-primary !important;
-    color: white !important;
-    font-family: Sofia Pro;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 12px;
-    line-height: 12px;
-  }
-
   .mat-badge-content {
     color: white;
     background: $red-primary !important;
@@ -245,10 +247,11 @@
   //END SCROLL BAR
 
   .mat-select-panel {
-    max-height: 300px !important;
-    max-width: 450px !important;
-    min-width: auto !important;
-    width: auto !important;
+    background: $dark-background-color !important;
+  }
+
+  .mat-option {
+    color: $gray-background-lightest !important;
   }
 
   .block-title {
@@ -333,6 +336,11 @@
     color: #FFFFFF !important;
   }
 
+  .mat-chip.mat-standard-chip {
+    background: $black-bluish;
+    color: white;
+  }
+
   .row-drop {
     background-color: $background-lvl2;
     border-color: $gray-background-lightest;
@@ -344,6 +352,14 @@
     background-color: whitesmoke;
   }
 
+  .mat-checkbox {
+    color: $gray-primary;
+  }
+
+  .mat-radio-button {
+    color: $gray-primary;
+  }
+
   .mat-checkbox-checked.mat-accent .mat-checkbox-background {
     background-color: $blue-primary;
   }
@@ -382,30 +398,12 @@
     color: $gray-background-lightest !important;
   }
 
-  .mat-dialog-container .text {
+  .mat-dialog-container h4 {
     color: $gray-background-lightest !important;
   }
 
-  .mat-dialog-container .btn-ok {
-    color: white !important;
-    background: $blue-primary !important;
-    border: none;
-    padding: 5px 10px 5px 10px;
-    border-radius: 4px;height: 32px;
-    min-width: 64px;
-    margin-right: 10px;
-    cursor: pointer;
-  }
-
-  .mat-dialog-container .btn-ko {
-    color: white !important;
-    background: $red-primary !important;
-    border: none;
-    padding: 5px 10px 5px 10px;
-    border-radius: 4px;height: 32px;
-    min-width: 64px;
-    margin-right: 10px;
-    cursor: pointer;
+  .mat-dialog-container .text {
+    color: $gray-background-lightest !important;
   }
 
   // END POPUP
@@ -422,12 +420,12 @@
   }
 
   .mat-paginator-page-size .mat-select-trigger {
-    background: $gray-strong;
+    background: $background-lvl2;
     padding: 2px;
   }
 
   .mat-paginator .mat-select-value-text {
-    color: $black-bluish !important;
+    color: $gray-background-lightest !important;
   }
 
   //END PAGINATOR
@@ -453,7 +451,12 @@
   // END DRAG & DROP
 
   .text {
-    color: $gray-background-lightest;
+    color: $gray-background-lightest !important;
+  }
+
+  .see-more-text {
+    color: $black-bluish !important;
+    font-size: 12px;
   }
 
   .no-results {
@@ -527,7 +530,7 @@
   // END CALENDAR
 
   .mat-raised-button.mat-accent {
-    background: $gray-blue-primary !important;;
+    background: $gray-blue-primary !important;
   }
 
   // HEADER

package/assets/css/_global.scss

@@ -2,12 +2,24 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins');
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
 
+@import "mat-palettes";
+
 body, html {
   margin: 0;
   padding: 0;
   font-family: 'Sofia Pro'!important;
 }
 
+.page-container {
+  flex: 1;
+  margin-top: 64px;
+  position: relative;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
+
 .spacer {
   flex: 1 1 auto;
 }
@@ -105,6 +117,11 @@ body, html {
   height: 12px !important;
 }
 
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
 .form-group > mat-label {
   text-transform: uppercase;
   font-size: 8px;
@@ -295,6 +312,10 @@ textarea {
   letter-spacing: 0.25px;
 }
 
+.mat-chip.mat-standard-chip {
+  padding: 10px !important;
+}
+
 .mat-row .mat-input-element {
   padding: 4px;
   border-radius: 4px;
@@ -310,6 +331,10 @@ textarea {
   height: auto;
 }
 
+.mat-cell input.mat-input-element {
+  margin-top: 0.08em !important;
+}
+
 .mat-table .mat-checkbox-inner-container {
   height: 12px;
   width: 12px;
@@ -378,6 +403,7 @@ textarea {
 .action-menu .material-icons-outlined {
   font-size: 15px;
   margin-right: 10px;
+  margin-bottom: 2px;
 }
 
 .action-menu span {
@@ -411,6 +437,23 @@ textarea {
   cursor: pointer;
 }
 
+.expand-button {
+  background-color: $gray-blue-primary !important;
+  color: white !important;
+  font-family: Sofia Pro;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 12px;
+  height: 24px;
+  padding: 5px;
+}
+
+.expand-button span {
+  color: #FFFFFF;
+  font-size: 12px;
+}
+
 // END BUTTONS
 
 .transparent {
@@ -459,3 +502,71 @@ textarea {
 .sub-toolbar .icon {
   margin-right: 5px;
 }
+
+.table-icon {
+  font-size: 16px !important;
+}
+
+// POPUP
+
+.mat-dialog-container .btn-primary {
+  height: 24px !important;
+  color: white !important;
+  background: $blue-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.mat-dialog-container .btn-danger {
+  height: 24px !important;
+  color: white !important;
+  background: $red-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.mat-dialog-container .btn-secondary {
+  height: 24px !important;
+  color: white !important;
+  background: $purple-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.btn-secondary {
+  height: 24px !important;
+  color: white !important;
+  background: $purple-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+// END POPUP
+
+.mat-select-panel {
+  max-height: 300px !important;
+  max-width: 450px !important;
+  min-width: auto !important;
+  width: auto !important;
+}
+

package/assets/css/_light-theme.scss

@@ -2,7 +2,7 @@
 
 .light-theme {
   //1
-  .u-sidenav-container {
+  .page-container {
     background-color: $gray-background-lightest;
   }
 
@@ -34,6 +34,10 @@
     background-color: whitesmoke;
   }
 
+  .expandable-row:hover {
+    background-color: whitesmoke !important;
+  }
+
   //7
   /* Table header coloring*/
   .mat-form-field-appearance-legacy .mat-form-field-label {
@@ -103,6 +107,10 @@
     color: $black-bluish;
   }
 
+  a {
+    color: $black-bluish;
+  }
+
   .mat-row, row-drop {
     border-radius: 3%;
     border-left-width: 1px;
@@ -186,6 +194,10 @@
     color: $black-bluish !important;
   }
 
+  .mat-menu-panel {
+    background: #FFFFFF !important
+  }
+
   .cancel-button{
     background-color: $red-primary !important;
     color: white !important;
@@ -199,16 +211,6 @@
 
   }
 
-  .expand-button {
-    background-color: $gray-blue-primary !important;
-    color: white !important;
-    font-family: Sofia Pro;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 12px;
-    line-height: 12px;
-  }
-
   .mat-badge-content {
     color: white;
     background: $red-primary !important;
@@ -245,10 +247,11 @@
   // END SCROLL BAR
 
   .mat-select-panel {
-    max-height: 300px !important;
-    max-width: 450px !important;
-    min-width: auto !important;
-    width: auto !important;
+    background: #FFFFFF !important;
+  }
+
+  .mat-option {
+    color: $black-bluish !important;
   }
 
   .block-title {
@@ -333,6 +336,11 @@
     color: #FFFFFF !important;
   }
 
+  .mat-chip.mat-standard-chip {
+    background: $black-bluish;
+    color: white;
+  }
+
   .row-drop {
     background-color: $gray-background-light2;
     border-color: $gray-strong;
@@ -344,6 +352,14 @@
     background-color: whitesmoke;
   }
 
+  .mat-checkbox {
+    color: $gray-primary;
+  }
+
+  .mat-radio-button {
+    color: $gray-primary;
+  }
+
   .mat-checkbox-checked.mat-accent .mat-checkbox-background {
     background-color: $blue-primary;
   }
@@ -382,11 +398,15 @@
     color: $black-bluish !important;
   }
 
+  .mat-dialog-container h4 {
+    color: $black-bluish !important;
+  }
+
   .mat-dialog-container .text {
     color: $black-bluish !important;
   }
 
-  .mat-dialog-container .btn-ok {
+  .mat-dialog-container .btn- {
     color: white !important;
     background: $blue-primary !important;
     border: none;
@@ -453,7 +473,12 @@
   // END DRAG & DROP
 
   .text {
-    color: $black-bluish;
+    color: $black-bluish !important;
+  }
+
+  .see-more-text {
+    color: $gray-light !important;
+    font-size: 12px;
   }
 
   .no-results {
@@ -527,7 +552,7 @@
   // END CALENDAR
 
   .mat-raised-button.mat-accent {
-    background: $gray-blue-primary !important;;
+    background: $gray-blue-primary !important;
   }
 
   // HEADER

package/assets/i18n/front-common/de.json

@@ -0,0 +1,17 @@
+{
+  "COMMON": {
+    "GLOBAL_SEARCH" : {
+      "ADVANCED": "Advanced"
+    },
+    "HEADER": {
+      "HISTORY": {
+        "PRODUCT": "Product",
+        "PO": "Purchase order",
+        "DEAL": "Deal",
+        "WORK": "Work",
+        "CONTRACT_ACQ": "Contract",
+        "CONTRACT_CESS": "Contract"
+      }
+    }
+  }
+}

package/assets/i18n/front-common/en.json

@@ -0,0 +1,17 @@
+{
+  "COMMON": {
+    "GLOBAL_SEARCH" : {
+      "ADVANCED": "Advanced"
+    },
+    "HEADER": {
+      "HISTORY": {
+        "PRODUCT": "Product",
+        "PO": "Purchase order",
+        "DEAL": "Deal",
+        "WORK": "Work",
+        "CONTRACT_ACQ": "Contract",
+        "CONTRACT_CESS": "Contract"
+      }
+    }
+  }
+}

package/assets/i18n/front-common/fr.json

@@ -0,0 +1,17 @@
+{
+  "COMMON": {
+    "GLOBAL_SEARCH" : {
+      "ADVANCED": "Avancée"
+    },
+    "HEADER": {
+      "HISTORY": {
+        "PRODUCT": "Produit",
+        "PO": "Commande",
+        "DEAL": "Deal",
+        "WORK": "Fiche",
+        "CONTRACT_ACQ": "Contrat",
+        "CONTRACT_CESS": "Contrat"
+      }
+    }
+  }
+}