Migrate to modernize template

Web/public/scss/override-component/_autocomplete.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.autocomplete-overrides(
+  (
+    container-elevation-shadow: var(--mat-sys-level2),
+  )
+);

Web/public/scss/override-component/_badge.scss

@@ -0,0 +1,7 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@include mat.badge-overrides(
+  (
+    background-color: var(--mat-sys-primary),
+  )
+);

Web/public/scss/override-component/_button-toggle.scss

@@ -0,0 +1,9 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@use "../variables" as *;
+
+@include mat.button-toggle-overrides(
+  (
+    shape: $border-radius,
+  )
+);

Web/public/scss/override-component/_button.scss

@@ -0,0 +1,136 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@use "../variables" as *;
+
+@include mat.button-overrides(
+  (
+    protected-hover-container-elevation-shadow: var(--mat-sys-level1),
+    filled-horizontal-padding: 15px,
+    outlined-horizontal-padding: 15px,
+    protected-horizontal-padding: 15px,
+    text-horizontal-padding: 15px,
+    filled-container-shape: var(--mat-sys-corner-small),
+    outlined-container-shape: var(--mat-sys-corner-small),
+    protected-container-shape: var(--mat-sys-corner-small),
+    text-container-shape: var(--mat-sys-corner-small),
+  )
+);
+
+@include mat.icon-button-overrides(
+  (
+    icon-color: $text-color,
+  )
+);
+
+// styles
+html {
+  .mat-mdc-button-base.bg-light-primary:hover,
+  .mat-mdc-button-base.bg-light-secondary:hover,
+  .mat-mdc-button-base.bg-light-error:hover,
+  .mat-mdc-button-base.bg-light-warning:hover,
+  .mat-mdc-button-base.bg-light-success:hover {
+    color: $white !important;
+  }
+
+  .mat-mdc-button-base.bg-light-primary {
+    &:hover {
+      background-color: var(--mat-sys-primary) !important;
+    }
+  }
+
+  .mat-mdc-button-base.bg-light-secondary {
+    &:hover {
+      background-color: var(--mat-sys-secondary) !important;
+    }
+  }
+
+  .mat-mdc-button-base.bg-light-error {
+    &:hover {
+      background-color: var(--mat-sys-error) !important;
+    }
+  }
+
+  .mat-mdc-button-base.bg-light-warning {
+    &:hover {
+      background-color: $warning !important;
+    }
+  }
+
+  .mat-mdc-button-base.bg-light-success {
+    &:hover {
+      background-color: $success !important;
+    }
+  }
+
+  .mat-mdc-outlined-button:not(:disabled) {
+    border-color: inherit !important;
+  }
+
+  .mat-mdc-button-base.text-secondary:hover {
+    .mat-mdc-button-persistent-ripple::before {
+      background-color: $secondary;
+    }
+  }
+
+  .mat-mdc-button-base.text-error:hover {
+    .mat-mdc-button-persistent-ripple::before {
+      background-color: $error;
+    }
+  }
+
+  .mat-mdc-button-base.text-warning:hover {
+    .mat-mdc-button-persistent-ripple::before {
+      background-color: $warning;
+    }
+  }
+
+  .mat-mdc-button-base.text-success:hover {
+    .mat-mdc-button-persistent-ripple::before {
+      background-color: $success;
+    }
+  }
+
+  .mat-mdc-outlined-button:not(:disabled).mat-secondary {
+    color: var(--mat-sys-secondary);
+    border-color: var(--mat-sys-secondary);
+
+    &:hover {
+      .mat-mdc-button-persistent-ripple::before {
+        background-color: $secondary;
+      }
+    }
+  }
+
+  .mat-mdc-outlined-button:not(:disabled).mat-success {
+    color: $success;
+    border-color: $success;
+
+    &:hover {
+      .mat-mdc-button-persistent-ripple::before {
+        background-color: $success;
+      }
+    }
+  }
+
+  .mat-mdc-outlined-button:not(:disabled).mat-error {
+    color: $error;
+    border-color: $error;
+
+    &:hover {
+      .mat-mdc-button-persistent-ripple::before {
+        background-color: $error;
+      }
+    }
+  }
+
+  .mat-mdc-outlined-button:not(:disabled).mat-warning {
+    color: $warning;
+    border-color: $warning;
+
+    &:hover {
+      .mat-mdc-button-persistent-ripple::before {
+        background-color: $warning;
+      }
+    }
+  }
+}

Web/public/scss/override-component/_card.scss

@@ -0,0 +1,60 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@use "../variables" as *;
+
+@include mat.card-overrides(
+  (
+    elevated-container-color: $white,
+    title-text-size: 1.125rem,
+    subtitle-text-size: 14px,
+    title-text-line-height: 1.6rem,
+    title-text-weight: 600,
+    subtitle-text-weight: 400,
+    elevated-container-shape: var(--mat-sys-corner-small),
+    outlined-container-shape: var(--mat-sys-corner-small),
+    elevated-container-elevation: var(--mat-sys-level2),
+  )
+);
+
+// styles
+html {
+  .mat-mdc-card {
+    margin-bottom: $card-spacer;
+
+    .mat-mdc-card-header {
+      padding: $card-spacer $card-spacer 0 !important;
+    }
+
+    .mat-mdc-card-header + .mat-mdc-card-content {
+      padding: 0 $card-spacer $card-spacer;
+    }
+
+    > .mat-mdc-card-content {
+      padding: $card-spacer !important;
+    }
+
+    .mdc-card__actions {
+      padding: $card-spacer !important;
+    }
+  }
+
+  .card-hover {
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover {
+      scale: 1.01;
+      transition: all 0.1s ease-in 0s;
+    }
+  }
+
+  .cardBorder {
+    .mdc-card {
+      box-shadow: none !important;
+      border: 1px solid $borderColor !important;
+
+      &.shadow-none {
+        border: 0 !important;
+      }
+    }
+  }
+}

Web/public/scss/override-component/_checkbox.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.checkbox-overrides(
+  (
+    unselected-focus-icon-color:
+      var(--mat-checkbox-unselected-hover-state-layer-color),
+  )
+);
+
+//   styles
+html {
+  .mdc-checkbox__background {
+    border-radius: 4px;
+    width: 21px;
+    height: 21px;
+    border: 1px solid var(--mat-sys-outline);
+  }
+
+  .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple {
+    background-color: var(--mat-checkbox-unselected-hover-state-layer-color);
+  }
+}

Web/public/scss/override-component/_chip.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.chips-overrides(
+  (
+    focus-state-layer-color: var(--mat-option-focus-state-layer-color),
+  )
+);

Web/public/scss/override-component/_datepicker.scss

@@ -0,0 +1,11 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.datepicker-overrides(
+  (
+    calendar-container-background-color:
+      var(--mat-card-elevated-container-color),
+    calendar-container-touch-elevation-shadow: var(--mat-sys-level1),
+    calendar-container-elevation-shadow: var(--mat-sys-level1),
+  )
+);

Web/public/scss/override-component/_dialog.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.dialog-overrides(
+  (
+    container-shape: var(--mat-sys-corner-small),
+    subhead-size: 18px,
+    subhead-weight: 600,
+    content-padding: 20px 24px,
+    actions-padding: 20px 24px,
+    container-min-width: 300px,
+    subhead-tracking: unset,
+    supporting-text-tracking: unset,
+  )
+);

Web/public/scss/override-component/_drawer.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.sidenav-overrides(
+  (
+    container-shape: 0,
+  )
+);

Web/public/scss/override-component/_expansion.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.expansion-overrides(
+  (
+    container-background-color: var(--mat-card-elevated-container-color),
+  )
+);

Web/public/scss/override-component/_fab.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.fab-overrides(
+  (
+    small-container-shape: 30px,
+    container-shape: 30px,
+    container-elevation-shadow: none,
+    small-container-elevation-shadow: none,
+    small-hover-container-elevation-shadow: var(--mat-sys-level3),
+    hover-container-elevation-shadow: var(--mat-sys-level3),
+    extended-hover-container-elevation-shadow: var(--mat-sys-level3),
+    extended-container-elevation-shadow: none,
+  )
+);

Web/public/scss/override-component/_form-field.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.form-field-overrides(
+  (
+    container-height: 37px,
+    outlined-container-shape: var(--mat-sys-corner-small),
+    container-vertical-padding: 6px,
+  )
+);
+
+// forms
+html {
+  .hide-hint {
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+  }
+
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+    top: calc(var(--mat-form-field-container-height) / 2.15);
+  }
+
+  .demo-inline-calendar-card {
+    width: 300px;
+  }
+}

Web/public/scss/override-component/_index.scss

@@ -0,0 +1,23 @@
+@use "autocomplete";
+@use "badge";
+@use "button";
+@use "button-toggle";
+@use "card";
+@use "checkbox";
+@use "chip";
+@use "dialog";
+@use "datepicker";
+@use "fab";
+@use "form-field";
+@use "radio";
+@use "list";
+@use "menu";
+@use "paginator";
+@use "theme";
+@use "table";
+@use "tree";
+@use "typography";
+@use "stepper";
+@use "expansion";
+@use "drawer";
+@use "progress";

Web/public/scss/override-component/_list.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.list-overrides(
+  (
+    list-item-hover-state-layer-color: var(--mat-sys-primary),
+    list-item-container-shape: var(--mat-sys-corner-small),
+    active-indicator-shape: var(--mat-sys-corner-small),
+    list-item-two-line-container-height: 70px,
+    list-item-three-line-container-height: 100px,
+  )
+);

Web/public/scss/override-component/_menu.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.menu-overrides(
+  (
+    container-shape: var(--mat-sys-corner-small),
+  )
+);
+
+//   styles
+html {
+  .mat-mdc-menu-panel {
+    box-shadow: var(--mat-sys-level3) !important;
+  }
+
+  .mat-mdc-select-panel {
+    padding: 8px !important;
+  }
+}

Web/public/scss/override-component/_paginator.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.paginator-overrides(
+  (
+    container-background-color: var(--mat-card-elevated-container-color),
+  )
+);

Web/public/scss/override-component/_progress.scss

@@ -0,0 +1,7 @@
+html {
+  .mat-secondary {
+    .mdc-linear-progress__bar-inner {
+      border-color: var(--mat-sys-secondary);
+    }
+  }
+}

Web/public/scss/override-component/_radio.scss

@@ -0,0 +1,14 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.radio-overrides(
+  (
+    unselected-icon-color: var(--mat-sys-outline-variant),
+  )
+);
+
+html {
+  .mat-mdc-radio-button .mdc-radio__outer-circle {
+    border-width: 1px;
+  }
+}

Web/public/scss/override-component/_stepper.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.stepper-overrides(
+  (
+    container-color: var(--mat-card-elevated-container-color),
+  )
+);

Web/public/scss/override-component/_table.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.table-overrides(
+  (
+    background-color: var(--mat-card-elevated-container-color),
+  )
+);

Web/public/scss/override-component/_theme.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@use "../variables" as *;
+
+html {
+  @include mat.theme(
+    (
+      color: mat.$azure-palette,
+      typography: $font-family,
+    )
+  );
+
+  @include mat.theme-overrides(
+    (
+      primary: rgb(93, 135, 255),
+      error: rgb(250, 137, 107),
+      body-medium-size: 14px,
+      body-large-size: 14px,
+      outline-variant: #d7dde2,
+      level1: 0px 12px 24px -4px rgb(145 158 171 / 30%),
+      level2: rgba(145, 158, 171, 0.12) 0px 1px 16px,
+      level3: 0px 12px 24px -4px rgb(145 158 171 / 30%),
+    )
+  );
+}

Web/public/scss/override-component/_tree.scss

@@ -0,0 +1,8 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@include mat.tree-overrides(
+  (
+    container-background-color: var(--mat-card-elevated-container-color),
+  )
+);

Web/public/scss/override-component/_typography.scss

@@ -0,0 +1,9 @@
+@use "../variables" as *;
+html {
+  .mdc-list-item__primary-text,
+  .mat-drawer-container,
+  .mat-drawer,
+  .text-body {
+    color: $text-color;
+  }
+}