@syncfusion/ej2-splitbuttons 27.2.2 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,17 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'ej2-buttons/styles/button/bds-definition.scss';
+@import 'ej2-popups/styles/popup/bds-definition.scss';
+@import 'drop-down-button/bds-definition.scss';
+@import 'drop-down-button/icons/bds.scss';
+@import 'drop-down-button/all.scss';
+@import 'drop-down-button/bigger.scss';
+@import 'split-button/bds-definition.scss';
+@import 'split-button/all.scss';
+@import 'split-button/bigger.scss';
+@import 'button-group/bds-definition.scss';
+@import 'button-group/all.scss';
+@import 'button-group/bigger.scss';
+@import 'ej2-popups/styles/spinner/bds-definition.scss';
+@import 'progress-button/bds-definition.scss';
+@import 'progress-button/all.scss';
+@import 'progress-button/bigger.scss';

package/styles/bootstrap-dark-lite.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #2a2a2a;
   color: #f0f0f0;

package/styles/bootstrap-dark.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #2a2a2a;
   color: #f0f0f0;
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);

package/styles/bootstrap-lite.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #333;

package/styles/bootstrap.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #333;
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

package/styles/bootstrap4-lite.css

@@ -137,6 +137,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #212529;

package/styles/bootstrap4.css

@@ -137,6 +137,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #212529;
@@ -208,7 +219,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: none;

package/styles/bootstrap5-dark-lite.css

@@ -140,6 +140,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #343a40;
   color: #fff;

package/styles/bootstrap5-dark.css

@@ -140,6 +140,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #343a40;
   color: #fff;
@@ -211,7 +222,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 4px;

package/styles/bootstrap5-lite.css

@@ -140,6 +140,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #212529;

package/styles/bootstrap5.3-lite.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: var(--color-sf-flyout-bg-color);
   color: var(--color-sf-content-text-color);

package/styles/bootstrap5.3.css

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: var(--color-sf-flyout-bg-color);
   color: var(--color-sf-content-text-color);
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 4px;

package/styles/bootstrap5.css

@@ -140,6 +140,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #212529;
@@ -211,7 +222,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 4px;

package/styles/button-group/_group-button-mixin.scss

@@ -72,7 +72,7 @@
 }
 
 @mixin box-shadow-theme {
-  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
     box-shadow: none;
   }
   @if $skin-name == 'fabric' {
@@ -81,7 +81,7 @@
 }
 
 @mixin outline-box-shadow-theme {
-  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
+  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
     box-shadow: none;
   }
 }

package/styles/button-group/_layout.scss

@@ -16,7 +16,7 @@
     input:focus+label.e-btn,
     .e-btn:focus,
     .e-btn:hover {
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
+      @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
         z-index: 2;
       }
     }

package/styles/button-group/_tailwind3-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/_theme.scss

@@ -68,7 +68,7 @@
     input:focus-visible+label.e-btn,
     input:focus+label.e-btn {
       @include button-focus;
-      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
+      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
         box-shadow: none;
       }
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
@@ -83,6 +83,12 @@
         outline-offset: -4px;
       }
 
+      @if $skin-name == 'tailwind3' {
+        background: $btn-bgcolor;
+        color: $btn-color;
+        box-shadow: $btn-focus-box-shadow;
+      }
+
       &.e-primary {
         @include primary-focus;
         @include box-shadow-theme;
@@ -90,6 +96,11 @@
           border-color: $btn-primary-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-primary-color;
+        @if $skin-name == 'tailwind3' {
+          background: $btn-primary-bgcolor;
+          color: $btn-primary-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
       }
 
       &.e-success {
@@ -99,6 +110,11 @@
           border-color: $btn-success-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-success-color;
+        @if $skin-name == 'tailwind3' {
+          background: $btn-success-bgcolor;
+          color: $btn-success-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
       }
 
       &.e-info {
@@ -108,6 +124,11 @@
           border-color: $btn-info-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-info-color;
+        @if $skin-name == 'tailwind3' {
+          background: $btn-info-bgcolor;
+          color: $btn-info-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
       }
 
       &.e-warning {
@@ -117,6 +138,11 @@
           border-color: $btn-warning-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-warning-color;
+        @if $skin-name == 'tailwind3' {
+          background: $btn-warning-bgcolor;
+          color: $btn-warning-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
       }
 
       &.e-danger {
@@ -126,6 +152,11 @@
           border-color: $btn-danger-focus-bgcolor;
         }
         outline-color: $btn-grp-outline-focus-danger-color;
+        @if $skin-name == 'tailwind3' {
+          background: $btn-danger-bgcolor;
+          color: $btn-danger-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
       }
 
       &.e-link {
@@ -142,6 +173,11 @@
         @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
           border-color: $btn-outline-focus-bgcolor;
         }
+        @if $skin-name == 'tailwind3' {
+          background: $transparent;
+          color: $btn-color;
+          box-shadow: $btn-focus-box-shadow;
+        }
 
         &.e-primary {
           @include outline-primary-focus;
@@ -149,6 +185,11 @@
           @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             border-color: $btn-outline-primary-focus-bgcolor;
           }
+          @if $skin-name == 'tailwind3' {
+            background: $transparent;
+            color: $btn-primary-bgcolor;
+            box-shadow: $btn-focus-box-shadow;
+          }
         }
 
         &.e-success {
@@ -157,6 +198,11 @@
           @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             border-color: $btn-success-focus-bgcolor;
           }
+          @if $skin-name == 'tailwind3' {
+            background: $transparent;
+            color: $btn-success-bgcolor;
+            box-shadow: $btn-focus-box-shadow;
+          }
         }
 
         &.e-info {
@@ -165,6 +211,11 @@
           @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             border-color: $btn-info-hover-bgcolor;
           }
+          @if $skin-name == 'tailwind3' {
+            background: $transparent;
+            color: $btn-info-bgcolor;
+            box-shadow: $btn-focus-box-shadow;
+          }
         }
 
         &.e-warning {
@@ -173,6 +224,11 @@
           @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             border-color: $btn-warning-hover-bgcolor;
           }
+          @if $skin-name == 'tailwind3' {
+            background: $transparent;
+            color: $btn-warning-bgcolor;
+            box-shadow: $btn-focus-box-shadow;
+          }
         }
 
         &.e-danger {
@@ -181,6 +237,11 @@
           @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             border-color: $btn-danger-hover-bgcolor;
           }
+          @if $skin-name == 'tailwind3' {
+            background: $transparent;
+            color: $btn-danger-bgcolor;
+            box-shadow: $btn-focus-box-shadow;
+          }
         }
       }
     }
@@ -258,42 +319,42 @@
 
       &.e-primary {
         @include primary-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-primary-border-color;
         }
       }
 
       &.e-success {
         @include success-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-success-border-color;
         }
       }
 
       &.e-info {
         @include info-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-info-border-color;
         }
       }
 
       &.e-warning {
         @include warning-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-warning-border-color;
         }
       }
 
       &.e-danger {
         @include danger-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-danger-border-color;
         }
       }
 
       &.e-link {
         @include link-disabled;
-        @if $skin-name != 'bootstrap4' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
           border-color: $btn-link-border-color;
         }
       }
@@ -304,27 +365,37 @@
 
         &.e-primary {
           @include outline-primary-disabled;
-          border-color: $btn-primary-bgcolor;
+          @if $skin-name != 'tailwind3' {
+            border-color: $btn-primary-bgcolor;
+          }
         }
 
         &.e-success {
           @include outline-success-disabled;
-          border-color: $btn-success-bgcolor;
+          @if $skin-name != 'tailwind3' {
+            border-color: $btn-success-bgcolor;
+          }
         }
 
         &.e-info {
           @include outline-info-disabled;
-          border-color: $btn-info-bgcolor;
+          @if $skin-name != 'tailwind3' {
+            border-color: $btn-info-bgcolor;
+          }
         }
 
         &.e-warning {
           @include outline-warning-disabled;
-          border-color: $btn-warning-bgcolor;
+          @if $skin-name != 'tailwind3' {
+            border-color: $btn-warning-bgcolor;
+          }
         }
 
         &.e-danger {
           @include outline-danger-disabled;
-          border-color: $btn-danger-bgcolor;
+          @if $skin-name != 'tailwind3' {
+            border-color: $btn-danger-bgcolor;
+          }
         }
       }
     }