@syncfusion/ej2-splitbuttons 26.2.10 → 27.1.48

package/styles/drop-down-button/_bigger.scss

@@ -0,0 +1,79 @@
+@include export-module('drop-down-button-bigger') {
+  .e-bigger .e-dropdown-btn,
+  .e-bigger.e-dropdown-btn {
+    .e-btn-icon {
+      font-size: $drop-down-btn-icon-font-size-bigger;
+    }
+
+    .e-caret {
+      font-size: $drop-down-btn-caret-icon-font-size-bigger;
+    }
+
+    &.e-vertical {
+      line-height: 1;
+      padding: $drop-down-btn-vertical-bigger-padding;
+    }
+
+    &.e-small {
+      &.e-vertical {
+        line-height: 1;
+        padding: $drop-down-btn-vertical-bigger-padding;
+      }
+    }
+  }
+
+  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
+      background-color: transparent;
+      border-radius: $drop-down-btn-ul-border-radius;
+    }
+  }
+
+  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup ul,
+  #{if(&, '&', '*')}.e-bigger.e-dropdown-popup ul {
+    box-shadow: $drop-down-btn-parent-ul-box-shadow;
+    font-size: $drop-down-btn-bigger-font-size;
+    max-width: $drop-down-btn-bigger-max-width;
+    min-width: $drop-down-btn-bigger-min-width;
+    padding: $drop-down-btn-ul-bigger-padding;
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+      background-color: $drop-down-btn-ul-bgcolor;
+      margin-top: $drop-down-btn-bigger-popup-margin-top;
+    }
+
+    & .e-item  {
+      height: $drop-down-btn-bigger-li-height;
+      @if $skin-name != 'fluent2' {
+        line-height: $drop-down-btn-bigger-li-height;
+      }
+      @if $skin-name == 'fluent2' {
+        height: 40px;
+        line-height: 22px;
+      }
+      padding: $drop-down-btn-bigger-li-padding;
+
+      &.e-url {
+        padding: 0;
+      }
+
+      & .e-menu-url {
+        @if $skin-name == 'fluent2' {
+          padding: 8px 8px 10px;
+        }
+      }
+
+      & .e-menu-icon {
+        font-size: $drop-down-btn-menu-icon-bigger-font-size;
+        line-height: $drop-down-btn-bigger-li-height;
+        @if $skin-name == 'fluent2' {
+          line-height: 22px;
+        }
+      }
+
+      &.e-separator {
+        height: auto;
+        line-height: normal;
+      }
+    }
+  }
+}

package/styles/drop-down-button/_bootstrap5.3-definition.scss

@@ -15,7 +15,7 @@ $drop-down-btn-bigger-li-padding: 0 16px !default;
 $drop-down-btn-small-li-padding: 0 8px !default;
 $drop-down-btn-max-width: 178px !default;
 $drop-down-btn-menu-icon-bigger-font-size: 22px !default;
-$drop-down-btn-menu-icon-font-size: $text-lg !default;
+$drop-down-btn-menu-icon-font-size: $text-base !default;
 $drop-down-btn-min-width: 120px !default;
 $drop-down-btn-seperator-padding: 3px 0 !default;
 $drop-down-btn-sub-ul-box-shadow: none !default;

package/styles/drop-down-button/_layout.scss

@@ -1,7 +1,7 @@
 @include export-module('drop-down-button-layout') {
   .e-dropdown-btn,
   .e-dropdown-btn.e-btn {
-    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'fluent2' {
+    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' {
       box-shadow: none;
     }
     text-transform: none;
@@ -13,13 +13,13 @@
     }
 
     &:hover {
-      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'Material3' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'Material3' {
         box-shadow: none;
       }
     }
 
     &:focus {
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
         box-shadow: $drop-down-btn-box-shadow;
       }
       @else {
@@ -84,32 +84,9 @@
     }
   }
 
-  .e-bigger .e-dropdown-btn,
-  .e-bigger.e-dropdown-btn {
-    .e-btn-icon {
-      font-size: $drop-down-btn-icon-font-size-bigger;
-    }
-
-    .e-caret {
-      font-size: $drop-down-btn-caret-icon-font-size-bigger;
-    }
-
-    &.e-vertical {
-      line-height: 1;
-      padding: $drop-down-btn-vertical-bigger-padding;
-    }
-
-    &.e-small {
-      &.e-vertical {
-        line-height: 1;
-        padding: $drop-down-btn-vertical-bigger-padding;
-      }
-    }
-  }
-
   .e-dropdown-popup {
     position: absolute;
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
       border-radius: $drop-down-btn-ul-border-radius;
       margin-top: $drop-down-btn-popup-margin-top;
     }
@@ -225,59 +202,4 @@
       margin-right: 0;
     }
   }
-
-  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
-      background-color: transparent;
-      border-radius: $drop-down-btn-ul-border-radius;
-    }
-  }
-
-  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup ul,
-  #{if(&, '&', '*')}.e-bigger.e-dropdown-popup ul {
-    box-shadow: $drop-down-btn-parent-ul-box-shadow;
-    font-size: $drop-down-btn-bigger-font-size;
-    max-width: $drop-down-btn-bigger-max-width;
-    min-width: $drop-down-btn-bigger-min-width;
-    padding: $drop-down-btn-ul-bigger-padding;
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
-      background-color: $drop-down-btn-ul-bgcolor;
-      margin-top: $drop-down-btn-bigger-popup-margin-top;
-    }
-
-    & .e-item  {
-      height: $drop-down-btn-bigger-li-height;
-      @if $skin-name != 'fluent2' {
-        line-height: $drop-down-btn-bigger-li-height;
-      }
-      @if $skin-name == 'fluent2' {
-        height: 40px;
-        line-height: 22px;
-      }
-      padding: $drop-down-btn-bigger-li-padding;
-
-      &.e-url {
-        padding: 0;
-      }
-
-      & .e-menu-url {
-        @if $skin-name == 'fluent2' {
-          padding: 8px 8px 10px;
-        }
-      }
-
-      & .e-menu-icon {
-        font-size: $drop-down-btn-menu-icon-bigger-font-size;
-        line-height: $drop-down-btn-bigger-li-height;
-        @if $skin-name == 'fluent2' {
-          line-height: 22px;
-        }
-      }
-
-      &.e-separator {
-        height: auto;
-        line-height: normal;
-      }
-    }
-  }
 }

package/styles/drop-down-button/_theme.scss

@@ -21,7 +21,7 @@
         }
 
         &:hover {
-          @if $skin-name == 'bootstrap5' {
+          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
             background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
@@ -59,6 +59,11 @@
           @if $theme-name == 'fluent2' {
             background-color: $flyout-bg-color-focus;
             box-shadow: $btn-keyboard-focus-box-shadow;
+            color: $flyout-text-color-focus;
+
+            & .e-menu-icon {
+              color: $flyout-text-color-focus;
+            }
           }
         }
       }

package/styles/drop-down-button/bootstrap-dark.css

@@ -55,25 +55,6 @@
   line-height: 1;
   padding: 6px 12px;
 }
-.e-bigger .e-dropdown-btn .e-btn-icon,
-.e-bigger.e-dropdown-btn .e-btn-icon {
-  font-size: 16px;
-}
-.e-bigger .e-dropdown-btn .e-caret,
-.e-bigger.e-dropdown-btn .e-caret {
-  font-size: 10px;
-}
-.e-bigger .e-dropdown-btn.e-vertical,
-.e-bigger.e-dropdown-btn.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-.e-bigger .e-dropdown-btn.e-small.e-vertical,
-.e-bigger.e-dropdown-btn.e-small.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-
 .e-dropdown-popup {
   position: absolute;
 }
@@ -160,36 +141,6 @@
   margin-right: 0;
 }
 
-*.e-bigger .e-dropdown-popup ul,
-*.e-bigger.e-dropdown-popup ul {
-  -webkit-box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
-          box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
-  font-size: 15px;
-  max-width: 280px;
-  min-width: 112px;
-  padding: 5px 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item,
-*.e-bigger.e-dropdown-popup ul .e-item {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 14px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-url,
-*.e-bigger.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
-*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 40px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
-*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
-  height: auto;
-  line-height: normal;
-}
-
 .e-dropdown-popup {
   background: #2a2a2a;
   color: #f0f0f0;
@@ -241,4 +192,53 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: inherit;
+}
+
+.e-bigger .e-dropdown-btn .e-btn-icon,
+.e-bigger.e-dropdown-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-bigger .e-dropdown-btn .e-caret,
+.e-bigger.e-dropdown-btn .e-caret {
+  font-size: 10px;
+}
+.e-bigger .e-dropdown-btn.e-vertical,
+.e-bigger.e-dropdown-btn.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+.e-bigger .e-dropdown-btn.e-small.e-vertical,
+.e-bigger.e-dropdown-btn.e-small.e-vertical {
+  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);
+          box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+  font-size: 15px;
+  max-width: 280px;
+  min-width: 112px;
+  padding: 5px 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item,
+*.e-bigger.e-dropdown-popup ul .e-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 14px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-url,
+*.e-bigger.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
+*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 40px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
+*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
+  height: auto;
+  line-height: normal;
 }

package/styles/drop-down-button/bootstrap-dark.scss

@@ -4,3 +4,4 @@
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/drop-down-button/bootstrap.css

@@ -55,25 +55,6 @@
   line-height: 1;
   padding: 6px 12px;
 }
-.e-bigger .e-dropdown-btn .e-btn-icon,
-.e-bigger.e-dropdown-btn .e-btn-icon {
-  font-size: 16px;
-}
-.e-bigger .e-dropdown-btn .e-caret,
-.e-bigger.e-dropdown-btn .e-caret {
-  font-size: 10px;
-}
-.e-bigger .e-dropdown-btn.e-vertical,
-.e-bigger.e-dropdown-btn.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-.e-bigger .e-dropdown-btn.e-small.e-vertical,
-.e-bigger.e-dropdown-btn.e-small.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-
 .e-dropdown-popup {
   position: absolute;
 }
@@ -160,36 +141,6 @@
   margin-right: 0;
 }
 
-*.e-bigger .e-dropdown-popup ul,
-*.e-bigger.e-dropdown-popup ul {
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  font-size: 15px;
-  max-width: 280px;
-  min-width: 112px;
-  padding: 5px 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item,
-*.e-bigger.e-dropdown-popup ul .e-item {
-  height: 40px;
-  line-height: 40px;
-  padding: 0 14px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-url,
-*.e-bigger.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
-*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 40px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
-*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
-  height: auto;
-  line-height: normal;
-}
-
 .e-dropdown-popup {
   background: #fff;
   color: #333;
@@ -241,4 +192,53 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: inherit;
+}
+
+.e-bigger .e-dropdown-btn .e-btn-icon,
+.e-bigger.e-dropdown-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-bigger .e-dropdown-btn .e-caret,
+.e-bigger.e-dropdown-btn .e-caret {
+  font-size: 10px;
+}
+.e-bigger .e-dropdown-btn.e-vertical,
+.e-bigger.e-dropdown-btn.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+.e-bigger .e-dropdown-btn.e-small.e-vertical,
+.e-bigger.e-dropdown-btn.e-small.e-vertical {
+  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);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  font-size: 15px;
+  max-width: 280px;
+  min-width: 112px;
+  padding: 5px 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item,
+*.e-bigger.e-dropdown-popup ul .e-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 14px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-url,
+*.e-bigger.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
+*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 40px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
+*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
+  height: auto;
+  line-height: normal;
 }

package/styles/drop-down-button/bootstrap.scss

@@ -4,3 +4,4 @@
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/drop-down-button/bootstrap4.css

@@ -48,25 +48,6 @@
   line-height: 1;
   padding: 6px 12px;
 }
-.e-bigger .e-dropdown-btn .e-btn-icon,
-.e-bigger.e-dropdown-btn .e-btn-icon {
-  font-size: 16px;
-}
-.e-bigger .e-dropdown-btn .e-caret,
-.e-bigger.e-dropdown-btn .e-caret {
-  font-size: 10px;
-}
-.e-bigger .e-dropdown-btn.e-vertical,
-.e-bigger.e-dropdown-btn.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-.e-bigger .e-dropdown-btn.e-small.e-vertical,
-.e-bigger.e-dropdown-btn.e-small.e-vertical {
-  line-height: 1;
-  padding: 8px 16px;
-}
-
 .e-dropdown-popup {
   position: absolute;
 }
@@ -153,36 +134,6 @@
   margin-right: 0;
 }
 
-*.e-bigger .e-dropdown-popup ul,
-*.e-bigger.e-dropdown-popup ul {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  font-size: 16px;
-  max-width: 280px;
-  min-width: 112px;
-  padding: 8px 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item,
-*.e-bigger.e-dropdown-popup ul .e-item {
-  height: 32px;
-  line-height: 32px;
-  padding: 0 24px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-url,
-*.e-bigger.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
-*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 32px;
-}
-*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
-*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
-  height: auto;
-  line-height: normal;
-}
-
 .e-dropdown-popup {
   background: #fff;
   color: #212529;
@@ -234,4 +185,53 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   color: inherit;
+}
+
+.e-bigger .e-dropdown-btn .e-btn-icon,
+.e-bigger.e-dropdown-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-bigger .e-dropdown-btn .e-caret,
+.e-bigger.e-dropdown-btn .e-caret {
+  font-size: 10px;
+}
+.e-bigger .e-dropdown-btn.e-vertical,
+.e-bigger.e-dropdown-btn.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+.e-bigger .e-dropdown-btn.e-small.e-vertical,
+.e-bigger.e-dropdown-btn.e-small.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+
+*.e-bigger .e-dropdown-popup ul,
+*.e-bigger.e-dropdown-popup ul {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  font-size: 16px;
+  max-width: 280px;
+  min-width: 112px;
+  padding: 8px 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item,
+*.e-bigger.e-dropdown-popup ul .e-item {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 24px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-url,
+*.e-bigger.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
+*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 32px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
+*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
+  height: auto;
+  line-height: normal;
 }

package/styles/drop-down-button/bootstrap4.scss

@@ -4,3 +4,4 @@
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';
 @import 'all.scss';
+@import 'bigger.scss';