@syncfusion/ej2-splitbuttons 21.2.3 → 22.1.34

package/styles/material3.scss

@@ -0,0 +1,6 @@
+
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'drop-down-button/material3.scss';
+@import 'split-button/material3.scss';
+@import 'button-group/material3.scss';
+@import 'progress-button/material3.scss';

package/styles/progress-button/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/progress-button/_material3-definition.scss

@@ -0,0 +1,25 @@
+//layout variables
+$progress-btn-circle-opacity: .3 !default;
+$progress-btn-transition: all .3s linear !default;
+$progress-btn-spinner-padding: 12px !default;
+$progress-btn-spinner-padding-small: 10px !default;
+$progress-btn-spinner-padding-bigger: 14px !default;
+$progress-btn-spinner-padding-bigger-small: 12px !default;
+$progress-btn-spin-btn-padding: 16px !default;
+$progress-btn-small-spin-btn-padding: 14px !default;
+$progress-btn-bigger-spin-btn-padding: 20px !default;
+$progress-btn-bigger-small-spin-btn-padding: 16px !default;
+$progress-btn-color: rgba($secondary-text-color) !default;
+$progress-btn-bgcolor: rgba($secondary-text-color, .12) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .12) !default;
+$progress-btn-primary-progress-color: $primary-bg-color-pressed !default;
+$progress-btn-success-progress-color: rgba($success-text, .12) !default;
+$progress-btn-info-progress-color: rgba($info-text, .12) !default;
+$progress-btn-danger-progress-color: rgba($danger-text, .12) !default;
+$progress-btn-warning-progress-color: rgba($warning-text, .12) !default;
+$progress-btn-flat-primary-progress-color: rgba($primary-bg-color, .12) !default;
+$progress-btn-flat-success-progress-color: rgba($success-bg-color, .12) !default;
+$progress-btn-flat-info-progress-color: rgba($info-bg-color, .12) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning-bg-color, .12) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger-bg-color, .12) !default;
+$btn-flat-primary-path-arc: rgba($white);

package/styles/progress-button/_theme.scss

@@ -7,7 +7,6 @@
       stroke: $progress-btn-color;
 
       .e-path-circle {
-        stroke: fade-out($btn-color, $progress-btn-circle-opacity);
         @if $skin-name == 'bootstrap4' {
           stroke-width: 1px;
         }
@@ -34,7 +33,9 @@
         stroke: $btn-primary-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -51,13 +52,13 @@
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
             }
-            @else {
+            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap'{
               stroke: fade-out($btn-flat-primary-color, $progress-btn-circle-opacity);
             }
           }
 
           .e-path-arc {
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
+            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
               stroke: $btn-flat-primary-path-arc;
             }
             @else {
@@ -68,6 +69,26 @@
       }
     }
 
+    #{if(&, '&', '*')}.e-primary.e-outline:hover,
+    #{if(&, '&', '*')}.e-primary.e-outline:focus {
+      @if $skin-name == 'Material3' {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-primary-bgcolor;
+          stroke: $btn-primary-bgcolor;
+
+          .e-path-circle {
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            stroke: $btn-primary-color;
+          }
+        }
+      }
+    }
+
     #{if(&, '&', '*')}.e-success,
     #{if(&, '&', '*')}.e-success.e-outline:hover,
     #{if(&, '&', '*')}.e-success.e-outline:focus,
@@ -78,7 +99,9 @@
         stroke: $btn-success-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -96,7 +119,9 @@
               stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
             }
             @else {
-              stroke: fade-out($btn-flat-success-color, $progress-btn-circle-opacity);
+              @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+                stroke: fade-out($btn-flat-success-color, $progress-btn-circle-opacity);
+              }
             }
           }
 
@@ -112,6 +137,26 @@
       }
     }
 
+    #{if(&, '&', '*')}.e-success.e-outline:hover,
+    #{if(&, '&', '*')}.e-success.e-outline:focus {
+      @if $skin-name == 'Material3' {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-success-bgcolor;
+          stroke: $btn-success-bgcolor;
+
+          .e-path-circle {
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            stroke: $btn-success-color;
+          }
+        }
+      }
+    }
+
     &.e-info,
     &.e-info.e-outline:hover,
     &.e-info.e-outline:focus,
@@ -122,7 +167,9 @@
         stroke: $btn-info-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -139,7 +186,7 @@
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
             }
-            @else {
+            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-info-color, $progress-btn-circle-opacity);
             }
           }
@@ -156,6 +203,26 @@
       }
     }
 
+    #{if(&, '&', '*')}.e-info.e-outline:hover,
+    #{if(&, '&', '*')}.e-info.e-outline:focus {
+      @if $skin-name == 'Material3' {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-info-bgcolor;
+          stroke: $btn-info-bgcolor;
+
+          .e-path-circle {
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            stroke: $btn-info-color;
+          }
+        }
+      }
+    }
+
     &.e-warning,
     &.e-warning.e-outline:hover,
     &.e-warning.e-outline:focus,
@@ -166,7 +233,9 @@
         stroke: $btn-warning-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -200,6 +269,26 @@
       }
     }
 
+    #{if(&, '&', '*')}.e-warning.e-outline:hover,
+    #{if(&, '&', '*')}.e-warning.e-outline:focus {
+      @if $skin-name == 'Material3' {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-warning-bgcolor;
+          stroke: $btn-warning-bgcolor;
+
+          .e-path-circle {
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            stroke: $btn-warning-color;
+          }
+        }
+      }
+    }
+
     &.e-danger,
     &.e-danger.e-outline:hover,
     &.e-danger.e-outline:focus,
@@ -210,7 +299,9 @@
         stroke: $btn-danger-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -227,7 +318,7 @@
             @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
             }
-            @else {
+            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
               stroke: fade-out($btn-flat-danger-color, $progress-btn-circle-opacity);
             }
           }
@@ -244,6 +335,26 @@
       }
     }
 
+    #{if(&, '&', '*')}.e-danger.e-outline:hover,
+    #{if(&, '&', '*')}.e-danger.e-outline:focus {
+      @if $skin-name == 'Material3' {
+        .e-spinner-pane .e-spinner-inner svg {
+          fill: $btn-danger-bgcolor;
+          stroke: $btn-danger-bgcolor;
+
+          .e-path-circle {
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
+            }
+          }
+
+          .e-path-arc {
+            stroke: $btn-danger-color;
+          }
+        }
+      }
+    }
+
     &.e-outline,
     &.e-flat {
       &.e-primary {
@@ -252,7 +363,9 @@
           stroke: $btn-primary-bgcolor;
 
           .e-path-circle {
-            stroke: fade-out($btn-primary-bgcolor, $progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-primary-bgcolor, $progress-btn-circle-opacity);
+            }
           }
 
           .e-path-arc {
@@ -267,9 +380,10 @@
           stroke: $btn-success-bgcolor;
 
           .e-path-circle {
-            stroke: fade-out($btn-success-bgcolor, $progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-success-bgcolor, $progress-btn-circle-opacity);
+            }
           }
-
           .e-path-arc {
             stroke: $btn-success-bgcolor;
           }
@@ -282,7 +396,9 @@
           stroke: $btn-info-bgcolor;
 
           .e-path-circle {
-            stroke: fade-out($btn-info-bgcolor, $progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-info-bgcolor, $progress-btn-circle-opacity);
+            }
           }
 
           .e-path-arc {
@@ -297,7 +413,9 @@
           stroke: $btn-warning-bgcolor;
 
           .e-path-circle {
-            stroke: fade-out($btn-warning-bgcolor, $progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-warning-bgcolor, $progress-btn-circle-opacity);
+            }
           }
 
           .e-path-arc {
@@ -312,7 +430,9 @@
           stroke: $btn-danger-bgcolor;
 
           .e-path-circle {
-            stroke: fade-out($btn-danger-bgcolor, $progress-btn-circle-opacity);
+            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+              stroke: fade-out($btn-danger-bgcolor, $progress-btn-circle-opacity);
+            }
           }
 
           .e-path-arc {
@@ -328,7 +448,9 @@
         stroke: $btn-link-color;
 
         .e-path-circle {
-          stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
+          }
         }
 
         .e-path-arc {
@@ -351,66 +473,44 @@
     }
   }
 
-  @if $skin-name == 'Material3' {
-    #{if(&, '&', '*')}.e-primary {
-      .e-progress {
-        background: $progress-btn-primary-progress-color;
-      }
-    }
-  
-    #{if(&, '&', '*')}.e-success {
-      .e-progress {
-        background: $progress-btn-success-progress-color;
-      }
-    }
-  
-    #{if(&, '&', '*')}.e-danger {
-      .e-progress {
-        background: $progress-btn-danger-progress-color;
-      }
-    }
-  
-    #{if(&, '&', '*')}.e-info {
-      .e-progress {
-        background: $progress-btn-info-progress-color;
-      }
-    }
-  }
-
-  #{if(&, '&', '*')}.e-warning {
-    .e-progress {
-      background: $progress-btn-warning-progress-color;
-    }
-  }
-
   #{if(&, '&', '*')}.e-flat {
     &.e-primary {
       .e-progress {
-        background: fade-out($progress-btn-flat-primary-progress-color, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($progress-btn-flat-primary-progress-color, .8);
+        }
       }
     }
 
     &.e-success {
       .e-progress {
-        background: fade-out($progress-btn-flat-success-progress-color, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($progress-btn-flat-success-progress-color, .8);
+        }
       }
     }
 
     &.e-info {
       .e-progress {
-        background: fade-out($progress-btn-flat-info-progress-color, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($progress-btn-flat-info-progress-color, .8);
+        }
       }
     }
 
     &.e-warning {
       .e-progress {
-        background: fade-out($progress-btn-flat-warning-progress-color, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($progress-btn-flat-warning-progress-color, .8);
+        }
       }
     }
 
     &.e-danger {
       .e-progress {
-        background: fade-out($progress-btn-flat-danger-progress-color, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($progress-btn-flat-danger-progress-color, .8);
+        }
       }
     }
   }
@@ -418,31 +518,76 @@
   #{if(&, '&', '*')}.e-outline:not(:focus) {
     &.e-primary {
       .e-progress {
-        background: fade-out($btn-primary-bgcolor, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($btn-primary-bgcolor, .8);
+        }
       }
     }
 
     &.e-success {
       .e-progress {
-        background: fade-out($btn-success-bgcolor, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($btn-success-bgcolor, .8);
+        }
       }
     }
 
     &.e-info {
       .e-progress {
-        background: fade-out($btn-info-bgcolor, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($btn-info-bgcolor, .8);
+        }
       }
     }
 
     &.e-warning {
       .e-progress {
-        background: fade-out($btn-warning-bgcolor, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($btn-warning-bgcolor, .8);
+        }
       }
     }
 
     &.e-danger {
       .e-progress {
-        background: fade-out($btn-danger-bgcolor, .8);
+        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+          background: fade-out($btn-danger-bgcolor, .8);
+        }
+      }
+    }
+  }
+  
+  @if $skin-name == 'Material3' {
+    #{if(&, '&', '*')}.e-flat,
+    #{if(&, '&', '*')}.e-flat:not(:focus) {
+      &.e-primary {
+        .e-progress {
+          background: $progress-btn-flat-primary-progress-color;
+        }
+      }
+
+      &.e-success {
+        .e-progress {
+          background: $progress-btn-flat-success-progress-color;
+        }
+      }
+
+      &.e-info {
+        .e-progress {
+          background: $progress-btn-flat-info-progress-color;
+        }
+      }
+
+      &.e-warning {
+        .e-progress {
+          background: $progress-btn-flat-warning-progress-color;
+        }
+      }
+
+      &.e-danger {
+        .e-progress {
+          background: $progress-btn-flat-danger-progress-color;
+        }
       }
     }
   }
@@ -451,31 +596,41 @@
     @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
       &.e-primary {
         .e-progress {
-          background: fade-out($btn-primary-bgcolor, .8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            background: fade-out($btn-primary-bgcolor, .8);
+          }
         }
       }
 
       &.e-success {
         .e-progress {
-          background: fade-out($btn-success-bgcolor, .8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            background: fade-out($btn-success-bgcolor, .8);
+          }
         }
       }
 
       &.e-info {
         .e-progress {
-          background: fade-out($btn-info-bgcolor, .8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            background: fade-out($btn-info-bgcolor, .8);
+          }
         }
       }
 
       &.e-warning {
         .e-progress {
-          background: fade-out($btn-warning-bgcolor, .8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            background: fade-out($btn-warning-bgcolor, .8);
+          }
         }
       }
 
       &.e-danger {
         .e-progress {
-          background: fade-out($btn-danger-bgcolor, .8);
+          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
+            background: fade-out($btn-danger-bgcolor, .8);
+          }
         }
       }
     }