@syncfusion/ej2-splitbuttons 25.2.3 → 26.1.35

package/styles/bootstrap5.scss

@@ -1,4 +1,14 @@
-@import 'drop-down-button/bootstrap5.scss';
-@import 'split-button/bootstrap5.scss';
-@import 'button-group/bootstrap5.scss';
-@import 'progress-button/bootstrap5.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
+@import 'drop-down-button/bootstrap5-definition.scss';
+@import 'drop-down-button/icons/bootstrap5.scss';
+@import 'drop-down-button/all.scss';
+
+@import 'split-button/bootstrap5-definition.scss';
+@import 'split-button/all.scss';
+@import 'button-group/bootstrap5-definition.scss';
+@import 'button-group/all.scss';
+@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
+@import 'progress-button/bootstrap5-definition.scss';
+@import 'progress-button/all.scss';

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

@@ -29,5 +29,3 @@ $btn-grp-outline-focus-warning-color: inherit !default;
 //Outline danger
 $btn-grp-outline-danger-focus-border-color:  inherit !default;
 $btn-grp-outline-focus-danger-color: inherit !default;
-
-//enddefault

package/styles/button-group/_bootstrap5.3-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: $text-base !default;
+$btn-grp-icon-font-size-bigger: $text-xl !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/_fabric-dark-definition.scss

@@ -29,5 +29,3 @@ $btn-grp-outline-focus-warning-color: $btn-warning-active-color !default;
 //Outline danger
 $btn-grp-outline-danger-focus-border-color:  inherit !default;
 $btn-grp-outline-focus-danger-color: $btn-danger-active-color !default;
-
-//enddefault

package/styles/button-group/_fluent2-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: $text-sm !default;
+$btn-grp-icon-font-size-bigger: 16px !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/_group-button-mixin.scss

@@ -70,3 +70,24 @@
   box-shadow: $btn-flat-box-shadow;
   color: $btn-disabled-color;
 }
+
+@mixin box-shadow-theme {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
+    box-shadow: none;
+  }
+  @if $skin-name == 'fabric' {
+    border-color: transparent;
+  }
+}
+
+@mixin outline-box-shadow-theme {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
+    box-shadow: none;
+  }
+}
+
+@mixin Mat3-box-shadow-none {
+  @if $skin-name == 'Material3' {
+    box-shadow: none;
+  }
+}

package/styles/button-group/_highcontrast-light-definition.scss

@@ -31,5 +31,3 @@ $btn-grp-outline-focus-warning-color: inherit !default;
 //Outline danger
 $btn-grp-outline-danger-focus-border-color: inherit !default;
 $btn-grp-outline-focus-danger-color: inherit !default;
-
-//enddefault

package/styles/button-group/_layout.scss

@@ -48,7 +48,7 @@
     // Sharp corner for sides individual Button and SplitButton
     &:not(.e-rtl):not(.e-vertical) {
       .e-btn {
-        @if $skin-name != 'Material3' {
+        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
           margin-left: $btn-grp-margin-left;
         }
 
@@ -56,7 +56,8 @@
           border-radius: 0;
         }
 
-        &:first-of-type {
+        &:first-of-type,
+        &:last-of-type:not(:last-child) {
           border-bottom-right-radius: 0;
           border-top-right-radius: 0;
         }
@@ -65,11 +66,6 @@
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
         }
-
-        &:last-of-type:not(:last-child) {
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-        }
       }
 
       .e-split-btn-wrapper {
@@ -115,7 +111,8 @@
           border-radius: 0;
         }
 
-        &:first-of-type {
+        &:first-of-type,
+        &:last-of-type:not(:last-child) {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
         }
@@ -124,11 +121,6 @@
           border-bottom-right-radius: 0;
           border-top-right-radius: 0;
         }
-
-        &:last-of-type:not(:last-child) {
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-        }
       }
 
       .e-split-btn-wrapper {

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

@@ -29,5 +29,3 @@ $btn-grp-outline-focus-warning-color: inherit !default;
 //Outline danger
 $btn-grp-outline-danger-focus-border-color: inherit !default;
 $btn-grp-outline-focus-danger-color: inherit !default;
-
-//enddefault

package/styles/button-group/_theme.scss

@@ -50,9 +50,17 @@
     }
   }
 
+  @if $skin-name == 'fluent2' {
+    .e-btn:focus-visible,
+    input:focus-visible+label.e-btn { // only for keybord
+      box-shadow: $btn-keyboard-focus-box-shadow !important;
+    }
+  }
+
     //Focus state for Normal and Outline GroupButton
     .e-btn:focus,
-    input:focus-visible+label.e-btn {
+    input:focus-visible+label.e-btn,
+    input:focus+label.e-btn {
       @include button-focus;
       @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
         box-shadow: none;
@@ -71,72 +79,47 @@
 
       &.e-primary {
         @include primary-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-primary-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-primary-color;
-        @if $skin-name == 'fabric' {
-          border-color: transparent;
-        }
       }
 
       &.e-success {
         @include success-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-success-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-success-color;
-        @if $skin-name == 'fabric' {
-          border-color: transparent;
-        }
       }
 
       &.e-info {
         @include info-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-info-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-info-color;
-        @if $skin-name == 'fabric' {
-          border-color: transparent;
-        }
       }
 
       &.e-warning {
         @include warning-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-warning-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-warning-color;
-        @if $skin-name == 'fabric' {
-          border-color: transparent;
-        }
       }
 
       &.e-danger {
         @include danger-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-danger-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-danger-color;
-        @if $skin-name == 'fabric' {
-          border-color: transparent;
-        }
       }
 
       &.e-link {
@@ -149,18 +132,14 @@
 
       &.e-outline {
         @include outline-focus;
-        @if $skin-name != 'bootstrap5' $skin-name != 'bootstrap4' and and $skin-name != 'tailwind' {
-          box-shadow: none;
-        }
+        @include outline-box-shadow-theme;
         @if $skin-name == 'bootstrap5' {
           border-color: $btn-outline-focus-bgcolor;
         }
 
         &.e-primary {
           @include outline-primary-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-            box-shadow: none;
-          }
+          @include outline-box-shadow-theme;
           @if $skin-name == 'bootstrap5' {
             border-color: $btn-outline-primary-focus-bgcolor;
           }
@@ -168,9 +147,7 @@
 
         &.e-success {
           @include outline-success-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-            box-shadow: none;
-          }
+          @include outline-box-shadow-theme;
           @if $skin-name == 'bootstrap5' {
             border-color: $btn-success-focus-bgcolor;
           }
@@ -178,9 +155,7 @@
 
         &.e-info {
           @include outline-info-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-            box-shadow: none;
-          }
+          @include outline-box-shadow-theme;
           @if $skin-name == 'bootstrap5' {
             border-color: $btn-info-hover-bgcolor;
           }
@@ -188,9 +163,7 @@
 
         &.e-warning {
           @include outline-warning-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-            box-shadow: none;
-          }
+          @include outline-box-shadow-theme;
           @if $skin-name == 'bootstrap5' {
             border-color: $btn-warning-hover-bgcolor;
           }
@@ -198,9 +171,7 @@
 
         &.e-danger {
           @include outline-danger-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
-            box-shadow: none;
-          }
+          @include outline-box-shadow-theme;
           @if $skin-name == 'bootstrap5' {
             border-color: $btn-danger-hover-bgcolor;
           }
@@ -213,84 +184,60 @@
     input:active+label.e-btn,
     input:checked+label.e-btn {
       @include button-active;
-      @if $skin-name == 'Material3' {
-        box-shadow: none;
-      }
+      @include Mat3-box-shadow-none;
 
       &.e-primary {
         @include primary-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
       }
 
       &.e-success {
         @include success-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
       }
 
       &.e-info {
         @include info-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
       }
 
       &.e-warning {
         @include warning-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
       }
 
       &.e-danger {
         @include danger-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
       }
 
       &.e-outline {
         @include outline-active;
-        @if $skin-name == 'Material3' {
-          box-shadow: none;
-        }
+        @include Mat3-box-shadow-none;
 
         &.e-primary {
           @include outline-primary-active;
-          @if $skin-name == 'Material3' {
-            box-shadow: none;
-          }
+          @include Mat3-box-shadow-none;
         }
 
         &.e-success {
           @include outline-success-active;
-          @if $skin-name == 'Material3' {
-            box-shadow: none;
-          }
+          @include Mat3-box-shadow-none;
         }
 
         &.e-info {
           @include outline-info-active;
-          @if $skin-name == 'Material3' {
-            box-shadow: none;
-          }
+          @include Mat3-box-shadow-none;
         }
 
         &.e-warning {
           @include outline-warning-active;
-          @if $skin-name == 'Material3' {
-            box-shadow: none;
-          }
+          @include Mat3-box-shadow-none;
         }
 
         &.e-danger {
           @include outline-danger-active;
-          @if $skin-name == 'Material3' {
-            box-shadow: none;
-          }
+          @include Mat3-box-shadow-none;
         }
       }
     }