@softheon/armature 10.45.3 → 15.0.0

package/assets/styles/material-overrides.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @import "../../../../../node_modules/@angular/material/theming";
 @import "./arm-theme.scss";
 
@@ -6,24 +7,39 @@
 // Please implement in the 'sof-styles.scss' style sheet. That style sheet is more in line with the current UX design guide
 // Will keep this file until ready to completely remove it
 
-@include mat-core();
-
-$main-theme-primary: mat-palette($arm-primary);
-$main-theme-accent: mat-palette($arm-accent);
-$main-theme-warn: mat-palette($arm-warn);
-$main-theme-info: mat-palette($arm-info);
-$main-theme-success: mat-palette($arm-success);
-$main-theme-error: mat-palette($arm-error);
+@include mat.core();
+$main-theme-primary: mat.define-palette($arm-primary);
+$main-theme-accent: mat.define-palette($arm-accent);
+$main-theme-warn: mat.define-palette($arm-warn);
+$main-theme-info: mat.define-palette($arm-info);
+$main-theme-success: mat.define-palette($arm-success);
+$main-theme-error: mat.define-palette($arm-error);
 $main-dark-gray: #646464;
 $main-dark-disabled: #4f4f4f;
-$main-theme: mat-light-theme($main-theme-primary, $main-theme-accent, $main-theme-warn);
-$main-dark: mat-dark-theme($main-theme-primary, $main-theme-accent, $main-theme-warn);
+$main-theme: mat.define-light-theme((
+    color: (
+        primary: $main-theme-primary,
+        accent: $main-theme-accent,
+        warn: $main-theme-warn
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+));
+$main-dark: mat.define-dark-theme((
+    color: (
+        primary: $main-theme-primary,
+        accent: $main-theme-accent,
+        warn: $main-theme-warn
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+));
 
 body {
     letter-spacing: 0px;
     font-family: "Poppins", sans-serif !important;
     font-size: 14px;
-    @include angular-material-theme($main-theme);
+    @include mat.core-theme($main-theme);
     margin: 0 !important;
 }
 
@@ -32,7 +48,7 @@ body {
     font-size: 1em !important;
 }
 
-.mat-button {
+.mat-mdc-button {
     font-family: "Poppins", sans-serif !important;
     font-size: 1em !important;
     font-weight: 500;
@@ -40,7 +56,7 @@ body {
     height: 40px;
 }
 
-.mat-flat-button {
+.mat-mdc-unelevated-button {
     font-family: "Poppins", sans-serif;
     font-size: 1em !important;
     font-weight: 500;
@@ -48,33 +64,33 @@ body {
     height: 40px !important;
 
     &.mat-primary {
-        background-color: mat-color($main-theme-primary, default);
+        background-color: mat.get-color-from-palette($main-theme-primary, default);
     }
 
     &.mat-accent {
-        background-color: mat-color($main-theme-accent, default);
+        background-color: mat.get-color-from-palette($main-theme-accent, default);
     }
 
     &.mat-warn {
-        background-color: mat-color($main-theme-warn, default);
+        background-color: mat.get-color-from-palette($main-theme-warn, default);
     }
 }
 
-.mat-flat-button:hover {
+.mat-mdc-unelevated-button:hover {
     &.mat-primary {
-        background-color: mat-color($main-theme-primary, 700);
+        background-color: mat.get-color-from-palette($main-theme-primary, 700);
     }
 
     &.mat-accent {
-        background-color: mat-color($main-theme-accent, 700);
+        background-color: mat.get-color-from-palette($main-theme-accent, 700);
     }
 
     &.mat-warn {
-        background-color: mat-color($main-theme-warn, 700);
+        background-color: mat.get-color-from-palette($main-theme-warn, 700);
     }
 }
 
-.mat-stroked-button {
+.mat-mdc-outlined-button {
     font-family: "Poppins", sans-serif;
     font-size: 1em !important;
     font-weight: 500;
@@ -82,31 +98,31 @@ body {
     height: 40px !important;
 
     &.mat-primary {
-        border: 2px solid mat-color($main-theme-primary, default) !important;
+        border: 2px solid mat.get-color-from-palette($main-theme-primary, default) !important;
     }
 
     &.mat-accent {
-        border: 2px solid mat-color($main-theme-accent, default) !important;
+        border: 2px solid mat.get-color-from-palette($main-theme-accent, default) !important;
     }
 
     &.mat-warn {
-        border: 2px solid mat-color($main-theme-warn, default) !important;
+        border: 2px solid mat.get-color-from-palette($main-theme-warn, default) !important;
     }
 }
 
-.mat-stroked-button:hover {
+.mat-mdc-outlined-button:hover {
     color: white !important;
 
     &.mat-primary {
-        background-color: mat-color($main-theme-primary, default);
+        background-color: mat.get-color-from-palette($main-theme-primary, default);
     }
 
     &.mat-accent {
-        background-color: mat-color($main-theme-accent, default);
+        background-color: mat.get-color-from-palette($main-theme-accent, default);
     }
 
     &.mat-warn {
-        background-color: mat-color($main-theme-warn, default);
+        background-color: mat.get-color-from-palette($main-theme-warn, default);
     }
 }
 
@@ -117,26 +133,26 @@ mat-form-field {
     line-height: 24px !important;
 }
 
-.mat-option-text {
+mat-option .mdc-list-item__primary-text {
     font-size: medium;
 }
 
-.mat-select,
-.mat-list-item {
+.mat-mdc-select,
+.mat-mdc-list-item {
     font-family: "Poppins", sans-serif !important;
 }
 
-.mat-list-item-content {
+.mdc-list-item__content {
     padding: 0px !important;
 }
 
-.mat-list-item button {
+.mat-mdc-list-item button {
     padding-left: 0px !important;
     padding-right: 0px !important;
 }
 
-.mat-raised-button.mat-primary.disabled,
-.mat-raised-button.mat-primary[disabled] {
+.mat-mdc-raised-button.mat-primary.disabled,
+.mat-mdc-raised-button.mat-primary[disabled] {
     background-color: #c6c6c7 !important;
 }
 
@@ -147,28 +163,28 @@ mat-form-field {
     vertical-align: middle;
 }
 
-::ng-deep .mat-card {
+::ng-deep .mat-mdc-card {
     font-size: 1em !important;
     font-family: "Poppins", sans-serif !important;
     box-sizing: border-box;
 }
 
-.mat-card-content {
+.mat-mdc-card-content {
     font-size: 1em !important;
     font-family: "Poppins", sans-serif !important;
     box-sizing: border-box;
 }
 
-::ng-deep .mat-expansion-panel-header .mat-card-content {
+::ng-deep .mat-expansion-panel-header .mat-mdc-card-content {
     font-family: "Poppins", sans-serif !important;
     font-size: 1em !important;
 }
 
-.mat-card-header-text {
+.mat-mdc-card-header-text {
     margin: 0 0 !important;
 }
 
-.mat-tooltip {
+.mat-mdc-tooltip {
     font-size: 0.75em !important;
     line-height: 17px !important;
 }
@@ -179,125 +195,124 @@ mat-form-field {
     font-size: 1em;
 }
 
-.mat-checkbox-checked.mat-accent .mat-checkbox-background,
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-    background-color: mat-color($main-theme-primary, default) !important;
+.mat-mdc-checkbox-checked.mat-accent .mdc-checkbox__background {
+    background-color: mat.get-color-from-palette($main-theme-primary, default) !important;
 }
 
-.mat-checkbox-checked .mat-ripple-element {
+.mat-mdc-checkbox-checked .mat-ripple-element {
     background: rgba(82, 133, 223, 0.3) !important;
 }
 
-.mat-checkbox-inner-container {
+.mdc-checkbox {
     height: 18px !important;
     width: 18px !important;
 }
 
-.mat-checkbox-frame {
+.mdc-checkbox__background {
     border-color: #333333;
 }
 /* Material table style override */
-.mat-table {
+.mat-mdc-table {
     font-size: 1em !important;
     font-family: "Poppins", sans-serif !important;
 }
 
-.mat-cell {
+.mat-mdc-cell {
     font-size: 1em !important;
 }
 
-.mat-header-cell {
+.mat-mdc-header-cell {
     font-size: 16px !important;
     font-weight: 700;
 }
 
-.mat-header-cell,
-.mat-cell {
+.mat-mdc-header-cell,
+.mat-mdc-cell {
     padding-left: 8px;
     padding-right: 8px;
 }
 
-.mat-header-row {
+.mat-mdc-header-row {
     height: 56px;
 }
 
-.mat-row {
+.mat-mdc-row {
     height: 52px;
 }
 
-.with-action .mat-row {
+.with-action .mat-mdc-row {
     height: 72px;
 }
 
-.mat-cell:first-of-type,
-.mat-header-cell:first-of-type,
-td.mat-cell:first-of-type,
-td.mat-header-cell:first-of-type {
+.mat-mdc-cell:first-of-type,
+.mat-mdc-header-cell:first-of-type,
+td.mat-mdc-cell:first-of-type,
+td.mat-mdc-header-cell:first-of-type {
     padding-left: 16px !important;
 }
 
-.mat-cell:last-of-type,
-.mat-header-cell:last-of-type,
-td.mat-cell:last-of-type,
-td.mat-header-cell:last-of-type {
+.mat-mdc-cell:last-of-type,
+.mat-mdc-header-cell:last-of-type,
+td.mat-mdc-cell:last-of-type,
+td.mat-mdc-header-cell:last-of-type {
     padding-right: 16px !important;
 }
 
-.mat-tab-link {
+.mat-mdc-tab-link {
     font-size: 1.286em !important;
 }
 
-.mat-dialog-container .title-container {
+.mat-mdc-dialog-container .title-container {
     color: white;
     height: 64px !important;
     padding-top: 0 !important;
-    background-color: mat-color($main-theme-primary, 900) !important;
+    background-color: mat.get-color-from-palette($main-theme-primary, 900) !important;
 }
 
-.mat-form-field-label {
+.mat-mdc-floating-label {
     font-size: 1em !important;
 }
 
-.mat-focused .mat-form-field-label {
+.mat-focused .mat-mdc-floating-label {
     /*change color of label*/
-    color: mat-color($main-theme-accent, 900) !important;
+    color: mat.get-color-from-palette($main-theme-accent, 900) !important;
 }
 
-.mat-form-field-ripple {
+mat-form-field .mdc-line-ripple {
     /*change color of underline when focused*/
-    background-color: mat-color($main-theme-accent, 900) !important;
+    background-color: mat.get-color-from-palette($main-theme-accent, 900) !important;
 }
 
-.mat-select:focus {
-    .mat-select-arrow {
-        color: mat-color($main-theme-accent, 900) !important;
+.mat-mdc-select:focus {
+    .mat-mdc-select-arrow {
+        color: mat.get-color-from-palette($main-theme-accent, 900) !important;
     }
 }
 
-.mat-select:active {
-    .mat-select-arrow {
-        color: mat-color($main-theme-accent, 900) !important;
+.mat-mdc-select:active {
+    .mat-mdc-select-arrow {
+        color: mat.get-color-from-palette($main-theme-accent, 900) !important;
     }
 }
 
-.mat-select-arrow:active {
-    color: mat-color($main-theme-accent, 900) !important;
+.mat-mdc-select-arrow:active {
+    color: mat.get-color-from-palette($main-theme-accent, 900) !important;
 }
 
-.mat-select-arrow:focus {
-    color: mat-color($main-theme-accent, 900) !important;
+.mat-mdc-select-arrow:focus {
+    color: mat.get-color-from-palette($main-theme-accent, 900) !important;
 }
 
-.mat-select-trigger {
-    color: mat-color($main-theme-accent, 900) !important;
+.mat-mdc-select-trigger {
+    color: mat.get-color-from-palette($main-theme-accent, 900) !important;
 }
 
-.mat-paginator {
+.mat-mdc-paginator {
     background: transparent !important;
 }
 
-.mat-tab-header-pagination-chevron {
-    border-color: mat-color($main-theme-primary, 700);
+.mat-mdc-tab-header-pagination-chevron {
+    border-color: mat.get-color-from-palette($main-theme-primary, 700);
 }
 
 .mat-stepper-horizontal {
@@ -329,13 +344,13 @@ td.mat-header-cell:last-of-type {
 .mat-step-header .mat-step-icon-selected,
 .mat-step-header .mat-step-icon-state-done,
 .mat-step-header .mat-step-icon-state-edit {
-    background-color: mat-color($main-theme-primary, default);
+    background-color: mat.get-color-from-palette($main-theme-primary, default);
     color: white;
 }
 
 .mat-step-header .mat-step-icon-state-error {
     background-color: transparent;
-    color: mat-color($main-theme-warn, default);
+    color: mat.get-color-from-palette($main-theme-warn, default);
 }
 
 .mat-step-header .mat-step-label.mat-step-label-active {
@@ -343,5 +358,5 @@ td.mat-header-cell:last-of-type {
 }
 
 .mat-step-header .mat-step-label.mat-step-label-error {
-    color: mat-color($main-theme-warn, default);
+    color: mat.get-color-from-palette($main-theme-warn, default);
 }