@softheon/armature 17.15.8 → 17.15.10

package/assets/styles/sof-styles.scss

@@ -1491,6 +1491,7 @@ button.mat-mdc-button
 .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{
   background: none !important;
 }
+
 button.sof-button-v2{
   
   display: flex;
@@ -1506,6 +1507,14 @@ button.sof-button-v2{
   line-height: normal !important;
   letter-spacing: 0px !important;
   text-transform: capitalize  !important;
+  
+  &.fixed-width {
+    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
+  }
 
   &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
     display: flex;
@@ -1515,88 +1524,86 @@ button.sof-button-v2{
       font-size: 20px;
     }
   }
-&.mat-mdc-unelevated-button span.mdc-button__label{
-  display: flex;
-  align-items: center;
-  justify-content: center !important;
-  width: 100% !important;
-  i{
-    margin-right: 8px !important;
-  }
-}
-&.full-width {
-   width: 100% !important; // Use this is button width will take size of flex percentage
-}
-&:enabled{
-  &.mat-primary{
-    background: mat.get-color-from-palette($arm-primary, 500);
-    color: map-get($arm-primary, contrast, 900);
-    &:hover{
-      background-color: var(--primary-color-500-parts);
+  &.mat-mdc-unelevated-button span.mdc-button__label{
+    display: flex;
+    align-items: center;
+    justify-content: center !important;
+    width: 100% !important;
+    i{
+      margin-right: 8px !important;
     }
-    &:focus{
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    } 
   }
-  &.mat-secondary{
-    background: #FAFAFA !important;
-    color: var(--primary-color-contrast-50-parts);
-    &:hover{
-      background-color: #FAFAFA !important;
+  &:enabled{
+    &.mat-primary{
+      background: mat.get-color-from-palette($arm-primary, 500);
+      color: map-get($arm-primary, contrast, 900);
+      &:hover{
+        background-color: var(--primary-color-500-parts);
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      } 
     }
-    &:focus{
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
+    &.mat-secondary{
+      background: #FAFAFA !important;
+      color: var(--primary-color-contrast-50-parts);
+      &:hover{
+        background-color: #FAFAFA !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: 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;
+      }
     }
   }
-  &.mat-tertiary{
-    color: var(--primary-color-contrast-50-parts);
-    background: none !important;    
+  &:disabled {
+    background:#fafafa!important;
+    color:rgba(0, 0, 0, 0.6) !important;
+    opacity: 1 !important;
     &:hover{
-      background-color: transparent !important;
+      background-color: mat.get-color-from-palette($arm-primary, 500);
     }
     &: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;
-    }
+  &.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;
   }
- }
-&:disabled {
-  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);
-  }
-  &: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 ,
-.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{
+
+button.sof-button-icon-v2{
   display: flex !important;
   padding: 8px!important;
   border-radius: 8px !important;