@softheon/armature 17.5.7 → 17.5.8

package/assets/styles/sof-styles.scss

@@ -641,7 +641,6 @@ button.mat-mdc-button {
 // Secondary Button Styles 
 
 }
-
 button.mat-mdc-unelevated-button {
   --mat-mdc-button-persistent-ripple-color: none !important;
   --mdc-filled-button-label-text-color: none !important;
@@ -938,7 +937,6 @@ 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;
@@ -1477,14 +1475,28 @@ 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,
+.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{
+  background: none !important;
+}
 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;
@@ -1492,36 +1504,40 @@ button.sof-button-v2{
   font-weight: 500 !important;
   font-size: 16px !important;
   line-height: normal !important;
-  letter-spacing: 0.05em !important; 
+  letter-spacing: 0px !important;
   text-transform: capitalize  !important;
-  &.mat-button-focus-overlay{
-  pointer-events: none !important;
-}
-&.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{
+      font-size: 20px;
+    }
+  }
+&.mat-mdc-unelevated-button span.mdc-button__label{
   display: flex;
   align-items: center;
-  justify-content: space-evenly !important;
+  justify-content: center !important;
   width: 100% !important;
+  i{
+    margin-right: 8px !important;
+  }
 }
-&.fixed-width {
-  width: 120px !important;  // Use this is to match specific sizing
- }
-
- &.full-width {
+&.full-width {
    width: 100% !important; // Use this is button width will take size of flex percentage
- }
- &:enabled{
+}
+&:enabled{
   &.mat-primary{
-    color:white;
-
+    background: mat.get-color-from-palette($arm-primary, 500);
+    color: map-get($arm-primary, contrast, 900);
     &:hover{
-      background-color: mat.get-color-from-palette($arm-primary, 500);
+      background-color: var(--primary-color-500-parts);
     }
     &:focus{
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
       outline-offset: 2px !important;
-    }
-    
+    } 
   }
   &.mat-secondary{
     background: #FAFAFA !important;
@@ -1533,13 +1549,12 @@ button.sof-button-v2{
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
       outline-offset: 2px !important;
     }
-
   }
   &.mat-tertiary{
     color: var(--primary-color-contrast-50-parts);
     background: none !important;    
     &:hover{
-      background-color: mat.get-color-from-palette($arm-primary, 500);
+      background-color: transparent !important;
     }
     &:focus{
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
@@ -1549,22 +1564,18 @@ button.sof-button-v2{
   &.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: #f7f7f7 !important;
+&:disabled {
+  background:#fafafa!important;
   color:rgba(0, 0, 0, 0.6) !important;
   opacity: 1 !important;
   &:hover{
@@ -1575,89 +1586,88 @@ button.sof-button-v2{
     outline-offset: 2px !important;
   } 
 }
-
+&.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
+{
+  background-color: transparent;
+}
 }
 button.soft-button-icon-v2{
   display: flex !important;
-  padding: 8px 16px !important;
+  padding: 8px!important;
   border-radius: 8px !important;
   height: 40px !important;
   justify-content: center !important;
   align-items: center !important;
   gap: 8px !important;
-  flex: 1 0 0 !important;
-  
+  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{
+    min-width: 40px;
   }
   
-  
-  &.fixed-width {
-    max-width: 36px !important;  // Use this is to match specific sizing
-   }
-   &.full-width {
+  &.full-width {
     width: 100% !important; // Use this is button width will take size of flex percentage
   }
   &:enabled{
     &.mat-primary{
-      color:white;
-      border-radius: 8px !important;
-  
-      &:hover{
-        background-color: mat.get-color-from-palette($arm-primary, 500);
+      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;
+        color: map-get($arm-error, contrast, 700);
       }
-      &:focus{
+      &:focus {
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
-      
     }
     &.mat-secondary{
-      background: #FAFAFA !important;
+      background-color: #FAFAFA !important;
       color: var(--primary-color-contrast-50-parts);
-      &:hover{
-        background-color: mat.get-color-from-palette($arm-primary, 500);
-      }
+     &: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{
       color: var(--primary-color-contrast-50-parts);
-      background: none !important;   
-      &:hover{
-        background-color: mat.get-color-from-palette($arm-primary, 500);
-      }
+      background: transparent !important;  
       &:focus{
         outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
         outline-offset: 2px !important;
       }
     }
     &.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;
-    }
+      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: #f7f7f7 !important;
+    background: #fafafa !important;
     color:rgba(0, 0, 0, 0.6) !important;
     opacity: 1 !important;
-
     &:hover{
       background-color: mat.get-color-from-palette($arm-primary, 500);
     }
@@ -1667,8 +1677,6 @@ button.soft-button-icon-v2{
     } 
   }
 }
-
-
 mat-card {
   &.mat-mdc-card.item-list {
     box-shadow: 0px 1px 7px rgb(166 159 159 / 25%) !important;
@@ -1678,7 +1686,6 @@ mat-card {
     padding: 0px !important;
   }
 }
-
 .mat-mdc-dialog-title {
   font-family: Merriweather, serif !important;
   font-style: normal !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softheon/armature",
-  "version": "17.5.7",
+  "version": "17.5.8",
   "dependencies": {
     "tslib": "^2.5.0"
   },