@softheon/armature 17.16.4 → 17.17.0

package/assets/styles/sof-styles.scss

@@ -7,11 +7,11 @@
 
 // Theme pallets
 $main-theme: mat.define-light-theme((color: (primary: mat.define-palette($arm-primary),
-        accent: mat.define-palette($arm-accent)),
+      accent: mat.define-palette($arm-accent)),
       typography: mat.define-typography-config(),
       density: 0));
 $main-theme-dark: mat.define-dark-theme((color: (primary: mat.define-palette($arm-primary),
-        accent: mat.define-palette($arm-accent)),
+      accent: mat.define-palette($arm-accent)),
       typography: mat.define-typography-config(),
       density: 0));
 
@@ -107,6 +107,7 @@ h4 {
   line-height: 24px;
   letter-spacing: normal;
 
+  // this does nothing ... 
   @media only screen and (max-width: $screen-sm-end) {
     font-size: 16px;
   }
@@ -256,9 +257,10 @@ mat-button-toggle-group {
       letter-spacing: 0.05em !important;
       text-align: center !important;
       color: black !important;
+
       // remove selected check indicator 
       .mat-pseudo-checkbox {
-        display: none!important;
+        display: none !important;
       }
     }
 
@@ -369,7 +371,7 @@ mat-button-toggle-group {
 button.mat-mdc-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
   --mdc-text-button-label-text-color: none !important;
-  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.05)!important;
+  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
 
   &.sof-button {
     padding: 0px 24px !important;
@@ -381,11 +383,11 @@ button.mat-mdc-button {
     font-size: 16px !important;
     line-height: 24px !important;
     letter-spacing: 0.05em !important;
-    text-transform: uppercase !important; 
+    text-transform: uppercase !important;
 
 
     &.fixed-width {
-     width: 200px !important;  // Use this is to match specific sizing
+      width: 200px !important; // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -638,17 +640,19 @@ button.mat-mdc-button {
     min-width: 56px !important;
     font-size: 26px !important;
   }
-// Secondary Button Styles 
+
+  // Secondary Button Styles 
 
 }
+
 button.mat-mdc-unelevated-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
   --mdc-filled-button-label-text-color: none !important;
-  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1)!important;
+  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1) !important;
 
 
   &.sof-flat-button {
-    padding:  0px 24px !important;
+    padding: 0px 24px !important;
     height: 48px !important;
     border-radius: 6px !important;
     font-family: Poppins !important;
@@ -657,8 +661,8 @@ button.mat-mdc-unelevated-button {
     font-size: 16px !important;
     line-height: 24px !important;
     letter-spacing: 0.05em !important;
-    text-transform: uppercase  !important;
-    
+    text-transform: uppercase !important;
+
 
     &.fixed-width {
       width: 200px !important; // Use this is to match specific sizing
@@ -673,24 +677,27 @@ button.mat-mdc-unelevated-button {
       &.mat-primary {
         background: mat.get-color-from-palette($arm-primary, 500);
         color: map-get($arm-primary, contrast, 500);
-        
-        &:hover{
+
+        &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 700);
           color: map-get($arm-primary, contrast, 700);
         }
-        
+
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
+
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
         color: map-get($arm-accent, contrast, 500);
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-accent, 700);
           color: map-get($arm-accent, contrast, 700);
         }
+
         &:focus {
           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
@@ -707,7 +714,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -722,7 +729,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -737,7 +744,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -752,7 +759,7 @@ button.mat-mdc-unelevated-button {
         }
 
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -815,14 +822,16 @@ button.mat-mdc-unelevated-button {
         color: map-get($arm-primary, contrast, 500);
 
         &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
+
         &:hover {
           background-color: mat.get-color-from-palette($arm-primary, 700);
           color: map-get($arm-primary, contrast, 700);
         }
       }
+
       &.mat-accent {
         background: mat.get-color-from-palette($arm-accent, 500);
         color: map-get($arm-accent, contrast, 500);
@@ -846,8 +855,9 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-warn, 700);
           color: map-get($arm-warn, contrast, 700);
         }
-    &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -860,8 +870,9 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-success, 700);
           color: map-get($arm-success, contrast, 700);
         }
-    &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -874,8 +885,9 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-error, 700);
           color: map-get($arm-error, contrast, 700);
         }
-    &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -888,8 +900,9 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-info, 700);
           color: map-get($arm-info, contrast, 700);
         }
-    &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -902,8 +915,9 @@ button.mat-mdc-unelevated-button {
           background-color: mat.get-color-from-palette($arm-neutral, 700);
           color: map-get($arm-neutral, contrast, 700);
         }
-    &:focus {
-           outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
+
+        &:focus {
+          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -911,7 +925,7 @@ button.mat-mdc-unelevated-button {
 
     &:disabled {
       background: #f7f7f7 !important;
-      color:rgba(0, 0, 0, 0.6) !important;
+      color: rgba(0, 0, 0, 0.6) !important;
       opacity: 1 !important;
     }
   }
@@ -937,10 +951,11 @@ button.mat-mdc-unelevated-button {
     font-size: 26px !important;
   }
 }
+
 button.mat-mdc-outlined-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
   --mdc-outlined-button-label-text-color: none !important;
-  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.05)!important;
+  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
 
   &.sof-stroked-button {
     padding: 0px 24px !important;
@@ -956,7 +971,7 @@ button.mat-mdc-outlined-button {
     text-transform: uppercase !important;
 
     &.fixed-width {
-     width: 200px !important;  // Use this is to match specific sizing
+      width: 200px !important; // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -1084,7 +1099,7 @@ button.mat-mdc-outlined-button {
     text-transform: uppercase !important;
 
     &.fixed-width {
-     width: 200px !important; // Use this is to match specific sizing
+      width: 200px !important; // Use this is to match specific sizing
     }
 
     &.full-width {
@@ -1475,29 +1490,30 @@ button.mat-mdc-outlined-button {
     font-size: 26px !important;
   }
 }
+
 // Button Redesign
 
-button.mat-mdc-button 
-.mat-mdc-button-ripple, 
-.mat-mdc-button 
-.mat-mdc-button-persistent-ripple,
+button.mat-mdc-button .mat-mdc-button-ripple,
+.mat-mdc-button .mat-mdc-button-persistent-ripple,
 .mat-mdc-button .mat-mdc-button-persistent-ripple::before,
-.mat-mdc-unelevated-button .mat-mdc-button-ripple, 
-.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple, 
-.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before, 
-.mat-mdc-raised-button .mat-mdc-button-ripple, .mat-mdc-raised-button .mat-mdc-button-persistent-ripple, 
-.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before, 
-.mat-mdc-outlined-button .mat-mdc-button-ripple, .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple, 
-.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{
+.mat-mdc-unelevated-button .mat-mdc-button-ripple,
+.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
+.mat-mdc-raised-button .mat-mdc-button-ripple,
+.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
+.mat-mdc-outlined-button .mat-mdc-button-ripple,
+.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,
+.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
   background: none !important;
 }
 
-button.sof-button-v2{
-  
+button.sof-button-v2 {
+
   display: flex;
   justify-content: center;
   align-items: center;
-  padding:8px !important;
+  padding: 8px !important;
   height: 40px !important;
   border-radius: 8px !important;
   font-family: Poppins !important;
@@ -1506,198 +1522,238 @@ button.sof-button-v2{
   font-size: 16px !important;
   line-height: normal !important;
   letter-spacing: 0px !important;
-  text-transform: capitalize  !important;
-  
+  text-transform: capitalize !important;
+
   &.fixed-width {
-    width: 200px !important;  // Use this is to match specific sizing
+    width: 200px !important; // Use this is to match specific sizing
   }
 
   &.full-width {
-     width: 100% !important; // Use this is button width will take size of flex percentage
+    width: 100% !important; // Use this is button width will take size of flex percentage
   }
 
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
     display: flex;
     align-items: center;
     font-size: 16px;
-    i{
+
+    i {
       font-size: 20px;
     }
   }
-  &.mat-mdc-unelevated-button span.mdc-button__label{
+
+  &.mat-mdc-unelevated-button span.mdc-button__label {
     display: flex;
     align-items: center;
     justify-content: center !important;
     width: 100% !important;
-    i{
+
+    i {
       margin-right: 8px !important;
     }
   }
-  &:enabled{
-    &.mat-primary{
+
+  &:enabled {
+    &.mat-primary {
       background: mat.get-color-from-palette($arm-primary, 500);
       color: map-get($arm-primary, contrast, 900);
-      &:hover{
+
+      &:hover {
         background-color: var(--primary-color-500-parts);
       }
-      &:focus{
+
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
-      } 
+      }
     }
-    &.mat-secondary{
+
+    &.mat-secondary {
       background: #FAFAFA !important;
       color: var(--primary-color-contrast-50-parts);
-      &:hover{
+
+      &:hover {
         background-color: #FAFAFA !important;
       }
-      &:focus{
+
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
-    &.mat-tertiary{
+
+    &.mat-tertiary {
       color: var(--primary-color-contrast-50-parts);
-      background: none !important;    
-      &:hover{
+      background: none !important;
+
+      &:hover {
         background-color: transparent !important;
       }
-      &:focus{
+
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
-      } 
+      }
     }
-    &.mat-error{
+
+    &.mat-error {
       background: mat.get-color-from-palette($arm-error, 900);
       color: map-get($arm-error, contrast, 900);
+
       &:hover {
         background-color: mat.get-color-from-palette($arm-error, 700);
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
   }
+
   &:disabled {
-    background:#fafafa!important;
-    color:rgba(0, 0, 0, 0.6) !important;
+    background: #fafafa !important;
+    color: rgba(0, 0, 0, 0.6) !important;
     opacity: 1 !important;
-    &:hover{
+
+    &:hover {
       background-color: mat.get-color-from-palette($arm-primary, 500);
     }
-    &:focus{
+
+    &:focus {
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
       outline-offset: 2px !important;
-    } 
+    }
   }
-  &.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay ,
+
+  // have not seen this (.no-hover-effect) class? remove if not needed,
+  // also need to disable ripple effects globally
+  &.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
   .no-hover-effect.mat-button.mat-secondary .mat-button-focus-overlay,
   .no-hover-effect.mat-button.mat-tertiary .mat-button-focus-overlay,
   .no-hover-effect.mat-button.mat-error .mat-button-focus-overlay,
   .no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
-  {
+  .no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay {
     background-color: transparent;
   }
 }
 
-button.sof-button-icon-v2{
+button.sof-button-icon-v2 {
   display: flex !important;
-  padding: 8px!important;
+  padding: 8px !important;
   border-radius: 8px !important;
   height: 40px !important;
   justify-content: center !important;
   align-items: center !important;
   gap: 8px !important;
-  max-width: 36px !important; 
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
+  max-width: 36px !important;
+
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
     display: flex;
     align-items: center;
     font-size: 24px;
-    
+
   }
-  &.mdc-button{
+
+  &.mdc-button {
     min-width: 40px;
   }
-  
+
   &.full-width {
     width: 100% !important; // Use this is button width will take size of flex percentage
   }
-  &:enabled{
-    &.mat-primary{
+
+  &:enabled {
+    &.mat-primary {
       background: mat.get-color-from-palette($arm-primary, 500);
       color: map-get($arm-error, contrast, 900);
+
       &:hover {
-        background-color:  mat.get-color-from-palette($arm-primary, 500) !important;
+        background-color: mat.get-color-from-palette($arm-primary, 500) !important;
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
-    &.mat-secondary{
+
+    &.mat-secondary {
       background-color: #FAFAFA !important;
       color: var(--primary-color-contrast-50-parts);
-     &:hover{
-      background-color: #FAFAFA !important;
-      color: var(--primary-color-contrast-50-parts) !important;
-     }
-      &:focus{
+
+      &:hover {
+        background-color: #FAFAFA !important;
+        color: var(--primary-color-contrast-50-parts) !important;
+      }
+
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
-    &.mat-tertiary{
+
+    &.mat-tertiary {
       color: var(--primary-color-contrast-50-parts);
-      background: transparent !important;  
-      &:focus{
+      background: transparent !important;
+
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
-    &.mat-error{
+
+    &.mat-error {
       background: mat.get-color-from-palette($arm-error, 900);
       color: map-get($arm-error, contrast, 900);
+
       &:hover {
         background-color: mat.get-color-from-palette($arm-error, 700);
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
-   }
-   &:disabled {
+  }
+
+  &:disabled {
     background: #fafafa !important;
-    color:rgba(0, 0, 0, 0.6) !important;
+    color: rgba(0, 0, 0, 0.6) !important;
     opacity: 1 !important;
-    &:hover{
+
+    &:hover {
       background-color: mat.get-color-from-palette($arm-primary, 500);
     }
-    &:focus{
+
+    &:focus {
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
       outline-offset: 2px !important;
-    } 
+    }
   }
 }
-.cdk-overlay-connected-position-bounding-box{
+
+// this could be bad ... see if this effects all material overlays ... 
+.cdk-overlay-connected-position-bounding-box {
   margin-top: 10px !important;
   margin-bottom: 10px !important;
 }
 
+// if this is just for utility buttons ... add a custom class so does not effect all menu's ... 
 .mat-mdc-menu-panel {
   background-color: $surface-color-level-one-light !important;
-  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.10) !important;
+  box-shadow: 0px 4px 8px 0px mat.get-color-from-palette($arm-neutral, A300) !important;
+  border-radius: 8px !important;
 }
 
-.mat-mdc-menu-item-text{
-  font-weight: 500  !important;
+.mat-mdc-menu-item-text {
+  font-weight: 500 !important;
   color: rgba(0, 0, 0, 0.87) !important;
-  font-family: Poppins  !important;
+  font-family: Poppins !important;
 }
 
 button.button-icon-utility {
@@ -1705,10 +1761,10 @@ button.button-icon-utility {
   justify-content: center !important;
   align-items: center !important;
   gap: 8px !important;
-  padding: 0px!important;
+  padding: 0px !important;
   border-radius: 4px !important;
   height: 24px !important;
-  width: 24px !important; 
+  width: 24px !important;
 
   &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
     display: flex;
@@ -1719,7 +1775,7 @@ button.button-icon-utility {
   &.mdc-button {
     min-width: 24px;
   }
-  
+
   &.full-width {
     width: 100% !important; // Use this is button width will take size of flex percentage
   }
@@ -1749,12 +1805,12 @@ button.button-icon-utility {
       background-color: #FAFAFA !important;
       color: #146EF6 !important;
 
-      &:hover{
+      &:hover {
         background-color: #F5F5F5 !important;
         color: #146EF6 !important;
       }
 
-      &:focus{
+      &:focus {
         background-color: #E9E9E9 !important;
       }
     }
@@ -1763,43 +1819,43 @@ button.button-icon-utility {
       color: #146EF6 !important;
       background: transparent !important;
 
-      &:focus{
+      &:focus {
         background-color: rgba(20, 110, 246, 0.08) !important;
       }
 
-      &:hover{
+      &:hover {
         background-color: rgba(20, 110, 246, 0.04) !important;
       }
     }
 
     &.mat-contained {
       color: #146EF6 !important;
-      background: none !important; 
-      border: 2px solid #146EF6 !important; 
+      background: none !important;
+      border: 2px solid #146EF6 !important;
 
       &:focus {
-        border:  3px solid mat.get-color-from-palette($arm-primary, 700) !important;
+        border: 3px solid mat.get-color-from-palette($arm-primary, 700) !important;
         color: map-get($arm-error, contrast, 700);
         background-color: rgba(20, 110, 246, 0.08) !important;
       }
 
       &:hover {
-        background-color:rgba(20, 110, 246, 0.04)!important;
+        background-color: rgba(20, 110, 246, 0.04) !important;
       }
     }
 
     &.mat-contained-error {
-      color:rgba(215, 36, 26, 1) !important;
-      background: none !important; 
-      border: 2px solid rgba(215, 36, 26, 1) !important; 
+      color: rgba(215, 36, 26, 1) !important;
+      background: none !important;
+      border: 2px solid rgba(215, 36, 26, 1) !important;
 
-      &:focus{
-        border:  3px solid mat.get-color-from-palette($arm-error, 700) !important;
+      &:focus {
+        border: 3px solid mat.get-color-from-palette($arm-error, 700) !important;
         color: map-get($arm-error, contrast, 700);
-        background-color:rgba(215, 36, 26, 0.08) !important;
+        background-color: rgba(215, 36, 26, 0.08) !important;
       }
 
-      &:hover{
+      &:hover {
         background-color: rgba(215, 36, 26, 0.04) !important;
       }
     }
@@ -1828,7 +1884,7 @@ button.button-icon-utility {
       }
 
       &:focus {
-        background-color:rgba(233, 233, 233, 1) !important;
+        background-color: rgba(233, 233, 233, 1) !important;
       }
     }
 
@@ -1848,44 +1904,52 @@ button.button-icon-utility {
   }
 
   &:disabled {
-    &.mat-primary{
+    &.mat-primary {
       background-color: #FAFAFA !important;
     }
-    &.mat-secondary{
+
+    &.mat-secondary {
       background-color: transparent !important;
     }
-    &.mat-contained{
-      background-color: transparent  !important;
+
+    &.mat-contained {
+      background-color: transparent !important;
       border: 2px solid rgba(0, 0, 0, 0.38) !important;
-      color:rgba(0, 0, 0, 0.38) !important ;
+      color: rgba(0, 0, 0, 0.38) !important;
     }
-    &.mat-contained-error{
-      background-color: transparent  !important;
+
+    &.mat-contained-error {
+      background-color: transparent !important;
       border: 3px solid rgba(0, 0, 0, 0.38) !important;
-      color:rgba(0, 0, 0, 0.38) !important;
+      color: rgba(0, 0, 0, 0.38) !important;
     }
-    &.mat-tertiary{
+
+    &.mat-tertiary {
       background-color: transparent !important;
     }
-    &.mat-error{
+
+    &.mat-error {
       background: rgba(250, 250, 250, 1) !important;
     }
-    &.mat-error-primary{
+
+    &.mat-error-primary {
       background: rgba(250, 250, 250, 1) !important;
-      
+
     }
-    &.mat-error-tertiary{
+
+    &.mat-error-tertiary {
       background: rgba(250, 250, 250, 1) !important;
-      
+
     }
-    &.mat-error-secondary{
+
+    &.mat-error-secondary {
       background: rgba(250, 250, 250, 1) !important;
     }
   }
 }
 
-button .mat-badge-content{
-background-color: #333333 !important;
+button .mat-badge-content {
+  background-color: #333333 !important;
 }
 
 mat-card {
@@ -1945,7 +2009,7 @@ mat-card {
   font-weight: 100 !important;
   font-family: Poppins !important;
   line-height: normal !important;
-  background-color: #333333!important;
+  background-color: #333333 !important;
   border-radius: 4px !important;
   text-align: center !important;
   position: relative;
@@ -1953,14 +2017,17 @@ mat-card {
   padding-right: 4px !important;
   padding-bottom: 0px !important;
   padding-top: 1px !important;
+
   &::after {
     width: 0;
     height: 0;
     content: '';
     position: absolute;
   }
+
   &.below {
     overflow: initial;
+
     &:after {
       top: -0.5rem;
       right: calc(50% - 0.3rem);
@@ -1975,6 +2042,7 @@ mat-card {
   &.above {
     overflow: initial;
     margin-bottom: 1.25rem;
+
     &:after {
       bottom: -0.5rem;
       right: calc(50% - 0.3rem);
@@ -1989,9 +2057,10 @@ mat-card {
   &.right {
     overflow: initial;
     margin-left: 0.75rem;
+
     &:after {
       left: -0.40rem;
-      top: calc(50% -  0.50rem);
+      top: calc(50% - 0.50rem);
       transform: rotate(270deg);
       border-left: 0.3rem solid transparent;
       border-right: 0.3rem solid transparent;
@@ -2003,9 +2072,10 @@ mat-card {
   &.left {
     overflow: initial;
     margin-right: 0.75rem;
+
     &:after {
       right: -0.40rem;
-      top: calc(50% -  0.50rem) ;
+      top: calc(50% - 0.50rem);
       transform: rotate(90deg);
       border-left: 0.3rem solid transparent;
       border-right: 0.3rem solid transparent;
@@ -2043,7 +2113,9 @@ mat-form-field.sof-form-field {
       border-left: none !important;
     }
 
-    .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
       border-width: 2px !important;
     }
 
@@ -3328,66 +3400,66 @@ mat-slide-toggle.sof-slide-toggle {
 
 /** Calendar Settings */
 
-  .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    color: rgba(0, 0, 0, 0.38) !important;
-  }
+.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+  color: rgba(0, 0, 0, 0.38) !important;
+}
 
-  .mat-calendar-previous-button,
-  .mat-calendar-next-button,
-  .mat-calendar-period-button {
-    color: #000000 !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    letter-spacing: 0px !important;
-  }
+.mat-calendar-previous-button,
+.mat-calendar-next-button,
+.mat-calendar-period-button {
+  color: #000000 !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  letter-spacing: 0px !important;
+}
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: mat.get-color-from-palette($arm-primary, 500) !important;
-    color: white;
-  }
+.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
+  color: white;
+}
 
-  body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    color: white;
-  }
+body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+  color: white;
+}
 
-  .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    border: none;
-  }
+.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+  border: none;
+}
 
-  body .mat-calendar-body-today.mat-calendar-body-selected {
-    box-shadow: none;
-  }
+body .mat-calendar-body-today.mat-calendar-body-selected {
+  box-shadow: none;
+}
 
-  .mat-calendar-body-in-range::before {
-    background: mat.get-color-from-palette($arm-primary, 50) !important;
-  }
+.mat-calendar-body-in-range::before {
+  background: mat.get-color-from-palette($arm-primary, 50) !important;
+}
 
-  .mat-calendar-body-selected {
-    background-color: mat.get-color-from-palette($arm-primary, 500) !important;
-    border: none;
-  }
+.mat-calendar-body-selected {
+  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
+  border: none;
+}
 
-  .mat-datepicker-content {
-    border-radius: 10px !important;
-  }
+.mat-datepicker-content {
+  border-radius: 10px !important;
+}
 
-  .mat-calendar-previous-button.mat-button-disabled,
-  .mat-calendar-next-button.mat-button-disabled {
-    color: rgba(0, 0, 0, 0.54) !important;
-  }
+.mat-calendar-previous-button.mat-button-disabled,
+.mat-calendar-next-button.mat-button-disabled {
+  color: rgba(0, 0, 0, 0.54) !important;
+}
 
-  .mat-calendar-table-header th {
-    font-size: 14px !important;
-    line-height: 30px;
-    color: rgba(0, 0, 0, 0.6) !important;
-  }
+.mat-calendar-table-header th {
+  font-size: 14px !important;
+  line-height: 30px;
+  color: rgba(0, 0, 0, 0.6) !important;
+}
 
-  .mat-calendar-table-header-divider {
-    position: absolute !important;
-    left: 20px;
-    width: -webkit-fill-available;
-    right: 20px;
-  }
+.mat-calendar-table-header-divider {
+  position: absolute !important;
+  left: 20px;
+  width: -webkit-fill-available;
+  right: 20px;
+}
 
 /** text emphasis classes (per design) */
 
@@ -3395,14 +3467,17 @@ mat-slide-toggle.sof-slide-toggle {
 .text-high-emphasis {
   color: $text-high-emphasis;
 }
+
 [text-medium-emphasis],
 .text-medium-emphasis {
   color: $text-medium-emphasis;
 }
+
 [text-low-emphasis],
 .text-low-emphasis {
   color: $text-low-emphasis;
 }
+
 [text-inverse],
 .text-inverse {
   color: $text-inverse;