@syncfusion/ej2-splitbuttons 19.2.62 → 19.3.47

package/styles/bootstrap5.scss

@@ -0,0 +1,4 @@
+@import 'drop-down-button/bootstrap5.scss';
+@import 'split-button/bootstrap5.scss';
+@import 'button-group/bootstrap5.scss';
+@import 'progress-button/bootstrap5.scss';

package/styles/button-group/_bootstrap5-dark-definition.scss

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

package/styles/button-group/_bootstrap5-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_tailwind-dark-definition.scss

@@ -1,30 +1 @@
-$btn-grp-margin: -1px !default;
-$btn-grp-margin-left: -1px !default;
-$btn-grp-wrapper-border: 4px !default;
-$btn-grp-round-radius: 20px !default;
-$btn-grp-icon-font-size: 18px !default;
-$btn-grp-icon-font-size-bigger: 22px !default;
-
-//Normal Outline GroupButton
-$btn-grp-outline-focus-border-color: $secondary-border-color !default;
-$btn-grp-outline-focus-color: inherit !default;
-
-//Outline Primary
-$btn-grp-outline-primary-focus-border-color: $primary !default;
-$btn-grp-outline-focus-primary-color: inherit !default;
-
-//Outline Success
-$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
-$btn-grp-outline-focus-success-color: inherit !default;
-
-//Outline Info
-$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
-$btn-grp-outline-focus-info-color: inherit !default;
-
-//Outline warning
-$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
-$btn-grp-outline-focus-warning-color: inherit !default;
-
-//Outline danger
-$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
-$btn-grp-outline-focus-danger-color: inherit !default;
+@import './tailwind-definition.scss';

package/styles/button-group/_tailwind-definition.scss

@@ -1,3 +1,4 @@
+//layout variables
 $btn-grp-margin: -1px !default;
 $btn-grp-margin-left: -1px !default;
 $btn-grp-wrapper-border: 4px !default;

package/styles/button-group/_theme.scss

@@ -22,7 +22,9 @@
     .e-btn:focus,
     input:focus+label.e-btn {
       @include button-focus;
-      box-shadow: none;
+      @if $skin-name != 'bootstrap5' {
+        box-shadow: none;
+      }
       outline-color: $btn-grp-outline-focus-color;
       @if $skin-name == 'fabric' {
         outline-offset: -2px;
@@ -34,7 +36,9 @@
 
       &.e-primary {
         @include primary-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
         outline-color: $btn-grp-outline-focus-primary-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -43,7 +47,9 @@
 
       &.e-success {
         @include success-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
         outline-color: $btn-grp-outline-focus-success-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -52,7 +58,9 @@
 
       &.e-info {
         @include info-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
         outline-color: $btn-grp-outline-focus-info-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -61,7 +69,9 @@
 
       &.e-warning {
         @include warning-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
         outline-color: $btn-grp-outline-focus-warning-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -70,7 +80,9 @@
 
       &.e-danger {
         @include danger-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
         outline-color: $btn-grp-outline-focus-danger-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -87,31 +99,43 @@
 
       &.e-outline {
         @include outline-focus;
-        box-shadow: none;
+        @if $skin-name != 'bootstrap5' {
+          box-shadow: none;
+        }
 
         &.e-primary {
           @include outline-primary-focus;
-          box-shadow: none;
+          @if $skin-name != 'bootstrap5' {
+            box-shadow: none;
+          }
         }
 
         &.e-success {
           @include outline-success-focus;
-          box-shadow: none;
+          @if $skin-name != 'bootstrap5' {
+            box-shadow: none;
+          }
         }
 
         &.e-info {
           @include outline-info-focus;
+          @if $skin-name != 'bootstrap5' {
             box-shadow: none;
+          }
         }
 
         &.e-warning {
           @include outline-warning-focus;
-          box-shadow: none;
+          @if $skin-name != 'bootstrap5' {
+            box-shadow: none;
+          }
         }
 
         &.e-danger {
           @include outline-danger-focus;
-          box-shadow: none;
+          @if $skin-name != 'bootstrap5' {
+            box-shadow: none;
+          }
         }
       }
     }
@@ -121,84 +145,48 @@
     input:active+label.e-btn,
     input:checked+label.e-btn {
       @include button-active;
-      @if $skin-name != 'bootstrap' {
-        box-shadow: none;
-      }
 
       &.e-primary {
         @include primary-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
       }
 
       &.e-success {
         @include success-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
       }
 
       &.e-info {
         @include info-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
       }
 
       &.e-warning {
         @include warning-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
       }
 
       &.e-danger {
         @include danger-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
       }
 
       &.e-outline {
         @include outline-active;
-        @if $skin-name != 'bootstrap' {
-          box-shadow: none;
-        }
 
         &.e-primary {
           @include outline-primary-active;
-          @if $skin-name != 'bootstrap' {
-            box-shadow: none;
-          }
         }
 
         &.e-success {
           @include outline-success-active;
-          @if $skin-name != 'bootstrap' {
-            box-shadow: none;
-          }
         }
 
         &.e-info {
           @include outline-info-active;
-          @if $skin-name != 'bootstrap' {
-            box-shadow: none;
-          }
         }
 
         &.e-warning {
           @include outline-warning-active;
-          @if $skin-name != 'bootstrap' {
-            box-shadow: none;
-          }
         }
 
         &.e-danger {
           @include outline-danger-active;
-          @if $skin-name != 'bootstrap' {
-            box-shadow: none;
-          }
         }
       }
     }

package/styles/button-group/bootstrap-dark.css

@@ -389,9 +389,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: #2a2a2a;
-  border-color: #585858;
-  color: #fff;
   box-shadow: none;
   box-shadow: none;
 }
@@ -400,9 +397,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #0058bd;
-  border-color: #0058bd;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -410,9 +404,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #265e28;
-  border-color: #265e28;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -420,9 +411,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #1b6d7b;
-  border-color: #175b66;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -430,9 +418,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #dd8907;
-  border-color: #7a4c04;
-  color: #000;
   box-shadow: none;
 }
 
@@ -440,9 +425,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #ac2a2a;
-  border-color: #982525;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -458,7 +440,6 @@
   outline: #393939 0 solid;
   outline-offset: 0;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -472,7 +453,6 @@
   color: #fff;
   outline: #393939 0 solid;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -485,7 +465,6 @@
   border-color: #265e28;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -495,10 +474,9 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #124851;
-  border-color: #175b66;
   color: #fff;
+  border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -511,7 +489,6 @@
   border-color: #ab6a05;
   color: #000;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -524,7 +501,6 @@
   border-color: #982525;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -537,7 +513,6 @@
   border-color: #585858;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -550,7 +525,6 @@
   border-color: #0058bd;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -563,7 +537,6 @@
   border-color: #265e28;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -576,7 +549,6 @@
   border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -589,7 +561,6 @@
   border-color: #ab6a05;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -602,7 +573,6 @@
   border-color: #982525;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,

package/styles/button-group/bootstrap.css

@@ -389,9 +389,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: #e6e6e6;
-  border-color: #8c8c8c;
-  color: #333;
   box-shadow: none;
   box-shadow: none;
 }
@@ -400,9 +397,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #21527d;
-  border-color: #0c1d2c;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -410,9 +404,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #124a1f;
-  border-color: black;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -420,9 +411,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #104b5d;
-  border-color: #010406;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -430,9 +418,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #613b05;
-  border-color: black;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -440,9 +425,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #a51c2a;
-  border-color: #4e0d14;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -492,8 +474,8 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #104b5d;
-  border-color: #082831;
   color: #fff;
+  border-color: #082831;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 

package/styles/button-group/bootstrap4.css

@@ -397,9 +397,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: #6c757d;
-  border-color: #6c757d;
-  color: #fff;
   box-shadow: 0 0 0 0.25em rgba(108, 117, 125, 0.5);
   box-shadow: none;
 }
@@ -408,9 +405,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #007bff;
-  border-color: #007bff;
-  color: #fff;
   box-shadow: 0 0 0 0.25em rgba(0, 123, 255, 0.5);
   box-shadow: none;
 }
@@ -419,9 +413,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #28a745;
-  border-color: #28a745;
-  color: #fff;
   box-shadow: 0 0 0 0.25em rgba(40, 167, 69, 0.5);
   box-shadow: none;
 }
@@ -430,9 +421,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #138496;
-  border-color: #17a2b8;
-  color: #fff;
   box-shadow: 0 0 0 0.25em rgba(23, 162, 184, 0.5);
   box-shadow: none;
 }
@@ -441,9 +429,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #e0a800;
-  border-color: #ffc107;
-  color: #212529;
   box-shadow: 0 0 0 0.25em rgba(255, 193, 7, 0.5);
   box-shadow: none;
 }
@@ -452,9 +437,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #c82333;
-  border-color: #dc3545;
-  color: #fff;
   box-shadow: 0 0 0 0.25em rgba(220, 53, 69, 0.5);
   box-shadow: none;
 }
@@ -471,7 +453,6 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 0.25em rgba(79, 85, 91, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -485,7 +466,6 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 0.25em rgba(0, 92, 191, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -498,7 +478,6 @@
   border-color: #1c7430;
   color: #fff;
   box-shadow: 0 0 0 0.25em rgba(28, 116, 48, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -508,10 +487,9 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #117a8b;
-  border-color: #10707f;
   color: #fff;
+  border-color: #10707f;
   box-shadow: 0 0 0 0.25em rgba(16, 112, 128, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -524,7 +502,6 @@
   border-color: #c69500;
   color: #212529;
   box-shadow: 0 0 0 0.25em rgba(198, 149, 0, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -537,7 +514,6 @@
   border-color: #b21f2d;
   color: #fff;
   box-shadow: 0 0 0 0.25em rgba(178, 31, 45, 0.5);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -550,7 +526,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(79, 85, 91, 0.5);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -563,7 +538,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(0, 123, 255, 0.5);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -576,7 +550,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(28, 116, 48, 0.5);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -589,7 +562,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(16, 112, 128, 0.5);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -602,7 +574,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(198, 149, 0, 0.5);
   color: #212529;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -615,7 +586,6 @@
   border-color: transparent;
   box-shadow: 0 0 0 0.25em rgba(178, 31, 45, 0.5);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,