new-front-common-library 18.2.0 → 18.2.2

package/assets/css/_themes.scss

@@ -1,55 +1,55 @@
-@use '@angular/material' as mat;
-
-@include mat.core();
-
-//Fonts
-@import url('https://fonts.googleapis.com/css?family=Poppins');
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
-@import url('https://fonts.googleapis.com/css?family=Roboto');
-
-//Imports
-@import "mat-palettes";
-
-// Define a light theme
-$mat-theme-ignore-duplication-warnings: true;
-$light-primary: mat.m2-define-palette($light-unity-palette);
-$light-accent: mat.m2-define-palette($light-unity-palette);
-$light-typography: mat.m2-define-typography-config(
-  $font-family: '"Roboto","Source Sans Pro",Poppins',
-  $button: mat.m2-define-typography-level(14px, 14px, 500, $letter-spacing: 0.25px)
-);
-$light-theme: mat.m2-define-light-theme((
-  color: (
-    primary: $light-primary,
-    accent: $light-accent,
-  ),
-  typography: $light-typography
-));
-
-// Define a dark theme
-$dark-primary: mat.m2-define-palette($dark-unity-palette);
-$dark-accent: mat.m2-define-palette($dark-unity-palette);
-$dark-theme: mat.m2-define-dark-theme((
-  color: (
-    primary: $dark-primary,
-    accent: $dark-accent
-  ),
-));
-
-.dark-theme {
-  @include mat.all-component-themes($dark-theme);
-}
-
-.light-theme {
-  @include mat.all-component-themes($light-theme);
-}
-
-@include mat.all-component-themes($light-theme);
-
-.the-dense-zone {
-  @include mat.form-field-density(-2);
-}
-
-@import "material/mdc";
-@import "global";
-
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+//Fonts
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+//Imports
+@import "mat-palettes";
+
+// Define a light theme
+$mat-theme-ignore-duplication-warnings: true;
+$light-primary: mat.m2-define-palette($light-unity-palette);
+$light-accent: mat.m2-define-palette($light-unity-palette);
+$light-typography: mat.m2-define-typography-config(
+  $font-family: '"Roboto","Source Sans Pro",Poppins',
+  $button: mat.m2-define-typography-level(14px, 14px, 500, $letter-spacing: 0.25px)
+);
+$light-theme: mat.m2-define-light-theme((
+  color: (
+    primary: $light-primary,
+    accent: $light-accent,
+  ),
+  typography: $light-typography
+));
+
+// Define a dark theme
+$dark-primary: mat.m2-define-palette($dark-unity-palette);
+$dark-accent: mat.m2-define-palette($dark-unity-palette);
+$dark-theme: mat.m2-define-dark-theme((
+  color: (
+    primary: $dark-primary,
+    accent: $dark-accent
+  ),
+));
+
+.dark-theme {
+  @include mat.all-component-themes($dark-theme);
+}
+
+.light-theme {
+  @include mat.all-component-themes($light-theme);
+}
+
+@include mat.all-component-themes($light-theme);
+
+.the-dense-zone {
+  @include mat.form-field-density(-2);
+}
+
+@import "material/mdc";
+@import "global";
+

package/assets/css/material/_mdc-dark-theme.scss

@@ -1,265 +1,265 @@
-@import "../mat-palettes";
-
-.dark-theme {
-
-  // MAT SELECT
-  .mat-mdc-select {
-    color: $gray-light;
-  }
-
-  .mat-mdc-select-panel {
-    background: $background-lvl2;
-  }
-
-
-  // END MAT SELECT
-  // MAT OPTION
-  .mat-mdc-option {
-    color: $gray-background-lightest;
-  }
-
-  // END MAT OPTION
-
-  // MAT MENU
-  .mat-mdc-menu-item, .mat-mdc-menu-item .mat-icon {
-    color: $gray-background-lightest !important;
-  }
-
-  .mat-mdc-menu-panel {
-    background: $background-lvl2 !important
-  }
-
-  // END MAT MENU
-
-  // MAT LABEL
-  mat-label {
-    color: $gray-primary !important;
-    font-weight: bold;
-  }
-  .mat-mdc-floating-label {
-    color: $gray-background-lightest !important;
-    font-weight: bold;
-  }
-
-  // END MAT LABEL
-
-  // PAGINATOR
-  .mat-mdc-paginator {
-    background-color: $background-lvl3;
-  }
-
-  .mat-mdc-paginator-container {
-    background-color: $background-lvl3;
-    color: $gray-background-lightest;
-  }
-
-  .mat-mdc-paginator-icon {
-    fill: $gray-background-lightest;
-  }
-
-  //END PAGINATOR
-
-  // FORM FIELD
-  .mat-mdc-text-field-wrapper {
-    background: $background-lvl3;
-    border-radius: 4px;
-  }
-  .mdc-notched-outline > * {
-    border-color: $dark-border-color;
-  }
-  .mdc-text-field--focused .mdc-notched-outline > * {
-    border-color: $gray-light;
-  }
-
-  .mat-mdc-checkbox .mdc-form-field {
-    -webkit-font-smoothing: initial;
-  }
-  // END FORM FIELD
-
-  // TABLE
-  .mat-mdc-header-cell, .mat-mdc-header-cell .mat-mdc-floating-label {
-    color: $gray-background-lightest;
-    font-weight: bold;
-  }
-
-  .mat-mdc-header-cell mat-label {
-    color: $gray-strong !important;
-  }
-
-
-  mat-row:hover {
-    background-color: adjust-color($background-lvl2, $lightness: 10%);
-  }
-
-  .mat-mdc-table {
-    background-color: $background-lvl2;
-    border-color: $background-lvl3;
-    border-bottom: 1px solid $background-lvl3;
-  }
-
-  .mat-mdc-header-row {
-    background: $background-lvl3;
-  }
-
-  .mat-sort-header-arrow {
-    color: $black-bluish;
-  }
-
-  .expandable-row .mat-mdc-cell {
-    background: transparent;
-  }
-
-  .mat-mdc-row, row-drop {
-    border-left-width: 1px;
-    border-right-width: 1px;
-    border-left-color: $background-lvl3;
-    border-right-color: $background-lvl3;
-  }
-
-  .mat-mdc-row mat-label {
-    background: $gray-strong;
-  }
-
-  .mat-mdc-row .mdc-text-field--filled {
-    background: $background-lvl3;
-  }
-
-  .mat-mdc-row .mat-mdc-select {
-    background: $background-lvl3;
-  }
-
-  .mat-mdc-cell {
-    color: $gray-light;;
-  }
-
-  // END TABLE
-
-  // CALENDAR
-  .mat-calendar-body-selected {
-    background: $blue-primary;
-    border-color: $blue-primary;
-    color: white;
-  }
-
-  .mat-calendar-body-today {
-    background: rgb(0 0 0 / 40%) !important;
-    border-color: rgb(0 0 0 / 40%) !important;
-    color: white !important;
-  }
-
-  .mat-calendar-arrow {
-    fill: $blue-primary;
-  }
-
-  .mat-datepicker-toggle,
-  .mat-datepicker-content .mat-calendar-next-button,
-  .mat-datepicker-content .mat-calendar-previous-button {
-    color: $blue-primary;
-  }
-  .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
-  --mdc-checkbox-selected-icon-color: #{$blue-primary};
-  --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
-
-  // POPUP
-
-  .mat-mdc-dialog-container {
-    --mdc-dialog-container-color: #{$background-lvl3};
-  }
-
-  .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;
-  }
-
-  // END POPUP
-
-  //RADIO BUTTON
-  .mat-mdc-radio-button.mat-accent {
-    --mdc-radio-unselected-hover-icon-color: #{$blue-primary};
-    --mdc-radio-unselected-icon-color: #{$blue-primary};
-    --mdc-radio-unselected-pressed-icon-color: #{$blue-primary};
-    --mdc-radio-selected-focus-icon-color: #{$blue-primary};
-    --mdc-radio-selected-hover-icon-color: #{$blue-primary};
-    --mdc-radio-selected-icon-color: #{$blue-primary};
-    --mdc-radio-selected-pressed-icon-color: #{$blue-primary};
-  }
-  //END RADIO BUTTON
-
-  //TEXTAREA
-  --mdc-filled-text-field-input-text-color: #{$gray-light};
-  //END TEXTAREA
-
-  //DRAWER
-  .mat-drawer-container {
-    background-color: $background-lvl3;
-  }
-
-  .mat-drawer-backdrop.mat-drawer-shown {
-    background-color: rgb(0 0 0 / 70%) !important;
-  }
-
-  .mat-expansion-panel-header:hover, .mat-expansion-panel-header:focus {
-    background-color: $background-lvl1 !important;
-  }
-  //END DRAWER
-
-  //.mat-mdc-card {
-  //  padding: 5px !important;
-  //  background: $background-lvl3;
-  //  color: $gray-background-dark;
-  //}
-
-  //.mat-mdc-footer-cell {
-  //  font-style: italic;
-  //  font-weight: normal;
-  //  font-size: 14px;
-  //  background-color: $background-lvl2;
-  //  border-color: $background-lvl2;
-  //}
-
-  //mat-toolbar-row {
-  //  background-color: $background-lvl2;
-  //}
-
-  //.mat-footer-cell {
-  //  font-style: italic;
-  //  font-weight: normal;
-  //  font-size: 14px;
-  //  //color: $gray-light;
-  //  background-color: $background-lvl2;
-  //  border-color: $background-lvl2;
-  //}
-
-  //mat-footer-row {
-  //  background-color: $background-lvl2;
-  //}
-
-  //.mat-drag-panel {
-  //  color: $gray-background-lightest;
-  //}
-
-  //.mat-raised-button.mat-accent {
-  //  background: $gray-blue-primary !important;
-  //}
-
-}
+@import "../mat-palettes";
+
+.dark-theme {
+
+  // MAT SELECT
+  .mat-mdc-select {
+    color: $gray-light;
+  }
+
+  .mat-mdc-select-panel {
+    background: $background-lvl2;
+  }
+
+
+  // END MAT SELECT
+  // MAT OPTION
+  .mat-mdc-option {
+    color: $gray-background-lightest;
+  }
+
+  // END MAT OPTION
+
+  // MAT MENU
+  .mat-mdc-menu-item, .mat-mdc-menu-item .mat-icon {
+    color: $gray-background-lightest !important;
+  }
+
+  .mat-mdc-menu-panel {
+    background: $background-lvl2 !important
+  }
+
+  // END MAT MENU
+
+  // MAT LABEL
+  mat-label {
+    color: $gray-primary !important;
+    font-weight: bold;
+  }
+  .mat-mdc-floating-label {
+    color: $gray-background-lightest !important;
+    font-weight: bold;
+  }
+
+  // END MAT LABEL
+
+  // PAGINATOR
+  .mat-mdc-paginator {
+    background-color: $background-lvl3;
+  }
+
+  .mat-mdc-paginator-container {
+    background-color: $background-lvl3;
+    color: $gray-background-lightest;
+  }
+
+  .mat-mdc-paginator-icon {
+    fill: $gray-background-lightest;
+  }
+
+  //END PAGINATOR
+
+  // FORM FIELD
+  .mat-mdc-text-field-wrapper {
+    background: $background-lvl3;
+    border-radius: 4px;
+  }
+  .mdc-notched-outline > * {
+    border-color: $dark-border-color;
+  }
+  .mdc-text-field--focused .mdc-notched-outline > * {
+    border-color: $gray-light;
+  }
+
+  .mat-mdc-checkbox .mdc-form-field {
+    -webkit-font-smoothing: initial;
+  }
+  // END FORM FIELD
+
+  // TABLE
+  .mat-mdc-header-cell, .mat-mdc-header-cell .mat-mdc-floating-label {
+    color: $gray-background-lightest;
+    font-weight: bold;
+  }
+
+  .mat-mdc-header-cell mat-label {
+    color: $gray-strong !important;
+  }
+
+
+  mat-row:hover {
+    background-color: adjust-color($background-lvl2, $lightness: 10%);
+  }
+
+  .mat-mdc-table {
+    background-color: $background-lvl2;
+    border-color: $background-lvl3;
+    border-bottom: 1px solid $background-lvl3;
+  }
+
+  .mat-mdc-header-row {
+    background: $background-lvl3;
+  }
+
+  .mat-sort-header-arrow {
+    color: $black-bluish;
+  }
+
+  .expandable-row .mat-mdc-cell {
+    background: transparent;
+  }
+
+  .mat-mdc-row, row-drop {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-left-color: $background-lvl3;
+    border-right-color: $background-lvl3;
+  }
+
+  .mat-mdc-row mat-label {
+    background: $gray-strong;
+  }
+
+  .mat-mdc-row .mdc-text-field--filled {
+    background: $background-lvl3;
+  }
+
+  .mat-mdc-row .mat-mdc-select {
+    background: $background-lvl3;
+  }
+
+  .mat-mdc-cell {
+    color: $gray-light;;
+  }
+
+  // END TABLE
+
+  // CALENDAR
+  .mat-calendar-body-selected {
+    background: $blue-primary;
+    border-color: $blue-primary;
+    color: white;
+  }
+
+  .mat-calendar-body-today {
+    background: rgb(0 0 0 / 40%) !important;
+    border-color: rgb(0 0 0 / 40%) !important;
+    color: white !important;
+  }
+
+  .mat-calendar-arrow {
+    fill: $blue-primary;
+  }
+
+  .mat-datepicker-toggle,
+  .mat-datepicker-content .mat-calendar-next-button,
+  .mat-datepicker-content .mat-calendar-previous-button {
+    color: $blue-primary;
+  }
+  .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
+  --mdc-checkbox-selected-icon-color: #{$blue-primary};
+  --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
+
+  // POPUP
+
+  .mat-mdc-dialog-container {
+    --mdc-dialog-container-color: #{$background-lvl3};
+  }
+
+  .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;
+  }
+
+  // END POPUP
+
+  //RADIO BUTTON
+  .mat-mdc-radio-button.mat-accent {
+    --mdc-radio-unselected-hover-icon-color: #{$blue-primary};
+    --mdc-radio-unselected-icon-color: #{$blue-primary};
+    --mdc-radio-unselected-pressed-icon-color: #{$blue-primary};
+    --mdc-radio-selected-focus-icon-color: #{$blue-primary};
+    --mdc-radio-selected-hover-icon-color: #{$blue-primary};
+    --mdc-radio-selected-icon-color: #{$blue-primary};
+    --mdc-radio-selected-pressed-icon-color: #{$blue-primary};
+  }
+  //END RADIO BUTTON
+
+  //TEXTAREA
+  --mdc-filled-text-field-input-text-color: #{$gray-light};
+  //END TEXTAREA
+
+  //DRAWER
+  .mat-drawer-container {
+    background-color: $background-lvl3;
+  }
+
+  .mat-drawer-backdrop.mat-drawer-shown {
+    background-color: rgb(0 0 0 / 70%) !important;
+  }
+
+  .mat-expansion-panel-header:hover, .mat-expansion-panel-header:focus {
+    background-color: $background-lvl1 !important;
+  }
+  //END DRAWER
+
+  //.mat-mdc-card {
+  //  padding: 5px !important;
+  //  background: $background-lvl3;
+  //  color: $gray-background-dark;
+  //}
+
+  //.mat-mdc-footer-cell {
+  //  font-style: italic;
+  //  font-weight: normal;
+  //  font-size: 14px;
+  //  background-color: $background-lvl2;
+  //  border-color: $background-lvl2;
+  //}
+
+  //mat-toolbar-row {
+  //  background-color: $background-lvl2;
+  //}
+
+  //.mat-footer-cell {
+  //  font-style: italic;
+  //  font-weight: normal;
+  //  font-size: 14px;
+  //  //color: $gray-light;
+  //  background-color: $background-lvl2;
+  //  border-color: $background-lvl2;
+  //}
+
+  //mat-footer-row {
+  //  background-color: $background-lvl2;
+  //}
+
+  //.mat-drag-panel {
+  //  color: $gray-background-lightest;
+  //}
+
+  //.mat-raised-button.mat-accent {
+  //  background: $gray-blue-primary !important;
+  //}
+
+}