@syncfusion/ej2-splitbuttons 25.2.4 → 26.1.35-750253

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

@@ -1,9 +1,7 @@
 @include export-module('drop-down-button-layout') {
-
-  /*! drop-down button layout */
   .e-dropdown-btn,
   .e-dropdown-btn.e-btn {
-    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
+    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'fluent2' {
       box-shadow: none;
     }
     text-transform: none;
@@ -30,7 +28,7 @@
     }
 
     &:focus-visible { // only for keybord
-      @if $skin-name == 'Material3' {
+      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
         box-shadow: $btn-keyboard-focus-box-shadow;
       }
     }
@@ -77,6 +75,12 @@
         line-height: 1;
         padding: $drop-down-btn-vertical-btn-padding;
       }
+
+      & .e-btn-icon.e-caret {
+        @if $skin-name == 'fluent2' {
+          font-size: 12px;
+        }
+      }
     }
   }
 
@@ -109,6 +113,9 @@
       border-radius: $drop-down-btn-ul-border-radius;
       margin-top: $drop-down-btn-popup-margin-top;
     }
+    @if $skin-name == 'fluent2' {
+      border-radius: $drop-down-btn-ul-border-radius;
+    }
 
     & ul {
       border: $drop-down-btn-ul-border;
@@ -133,6 +140,15 @@
         height: $drop-down-btn-li-height;
         line-height: $drop-down-btn-li-height;
         padding: $drop-down-btn-li-padding;
+        @if $skin-name == 'fluent2' {
+          line-height: 19px;
+          margin: 4px;
+          border-radius: 4px;
+        }
+
+        &.e-separator {
+          padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+        }
 
         &.e-url {
           padding: 0;
@@ -148,7 +164,13 @@
         & .e-menu-icon {
           float: left;
           font-size: $drop-down-btn-menu-icon-font-size;
-          line-height: $drop-down-btn-li-height;
+          @if $skin-name == 'fluent2' {
+            line-height: 18px;
+            padding: 2px;
+          }
+          @else {
+            line-height: $drop-down-btn-li-height;
+          }
           margin-right: $drop-down-btn-icon-margin-right;
           vertical-align: middle;
           width: 1em;
@@ -160,6 +182,14 @@
           @if $skin-name == 'Material3' {
             box-shadow: $drop-down-btn-sub-ul-box-shadow;
           }
+          @if $skin-name == 'fluent2' {
+            color: $flyout-text-color-disabled;
+            opacity: 1;
+
+            & .e-menu-icon {
+              color: $flyout-text-color-disabled;
+            }
+          }
         }
 
         &.e-separator {
@@ -217,16 +247,31 @@
 
     & .e-item  {
       height: $drop-down-btn-bigger-li-height;
-      line-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 {

package/styles/drop-down-button/_material-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 12px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 16px 16px !default;
@@ -47,5 +46,3 @@ $drop-down-btn-caret-icon-font-size-bigger: 10px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;
-
-//enddefault

package/styles/drop-down-button/_material3-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $drop-down-btn-arrow-content: '\e70d' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

package/styles/drop-down-button/_tailwind-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $drop-down-btn-arrow-content: '\e706' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;

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

@@ -1,13 +1,6 @@
 @include export-module('drop-down-button-theme') {
-
-  /*! drop-down button theme */
   .e-dropdown-popup {
-    @if $skin-name == 'Material3' {
-      background: $drop-down-btn-ul-bgcolor;
-    }
-    @else {
-      background: $drop-down-btn-ul-bgcolor;
-    }
+    background: $drop-down-btn-ul-bgcolor;
     color: $drop-down-btn-color;
 
     & ul {
@@ -55,6 +48,13 @@
             }
           }
         }
+
+        &:focus-visible {
+          @if $theme-name == 'fluent2' {
+            background-color: $flyout-bg-color-focus;
+            box-shadow: $btn-keyboard-focus-box-shadow;
+          }
+        }
       }
 
       & .e-separator {

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

@@ -3,24 +3,27 @@
   content: "\e969";
 }
 
-/*! drop-down button layout */
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   text-transform: none;
   white-space: normal;
 }
 .e-dropdown-btn:hover,
 .e-dropdown-btn.e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-btn:focus,
 .e-dropdown-btn.e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-btn:active,
 .e-dropdown-btn.e-btn:active {
-  box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
+  -webkit-box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
+          box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
 }
 .e-dropdown-btn .e-btn-icon,
 .e-dropdown-btn.e-btn .e-btn-icon {
@@ -52,7 +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;
@@ -78,8 +80,10 @@
 .e-dropdown-popup ul {
   border: 1px solid #414141;
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
-  box-sizing: border-box;
+  -webkit-box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+          box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-size: 14px;
   font-weight: normal;
   list-style-image: none;
@@ -90,18 +94,23 @@
   overflow: hidden;
   padding: 3px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
 .e-dropdown-popup ul .e-item {
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 26px;
   line-height: 26px;
   padding: 0 14px;
 }
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-dropdown-popup ul .e-item.e-url {
   padding: 0;
 }
@@ -134,7 +143,8 @@
 }
 .e-dropdown-popup.e-transparent {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup.e-transparent .e-dropdown-menu {
   border: 0;
@@ -152,7 +162,8 @@
 
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
-  box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);
+  -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;
@@ -179,7 +190,6 @@
   line-height: normal;
 }
 
-/*! drop-down button theme */
 .e-dropdown-popup {
   background: #2a2a2a;
   color: #f0f0f0;
@@ -192,7 +202,8 @@
 }
 .e-dropdown-popup ul .e-item.e-focused {
   background: transparent;
-  box-shadow: inset 0 0 0 1px #585858;
+  -webkit-box-shadow: inset 0 0 0 1px #585858;
+          box-shadow: inset 0 0 0 1px #585858;
 }
 .e-dropdown-popup ul .e-item:hover {
   background: #414141;
@@ -216,7 +227,8 @@
 .e-dropdown-btn.e-btn.e-inherit {
   background: inherit;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
@@ -226,6 +238,7 @@
 .e-dropdown-btn.e-btn.e-inherit.e-active {
   background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }

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

@@ -3,24 +3,27 @@
   content: "\e969";
 }
 
-/*! drop-down button layout */
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   text-transform: none;
   white-space: normal;
 }
 .e-dropdown-btn:hover,
 .e-dropdown-btn.e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-btn:focus,
 .e-dropdown-btn.e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-btn:active,
 .e-dropdown-btn.e-btn:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .e-dropdown-btn .e-btn-icon,
 .e-dropdown-btn.e-btn .e-btn-icon {
@@ -52,7 +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;
@@ -78,8 +80,10 @@
 .e-dropdown-popup ul {
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-sizing: border-box;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-size: 14px;
   font-weight: normal;
   list-style-image: none;
@@ -90,18 +94,23 @@
   overflow: hidden;
   padding: 3px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
 .e-dropdown-popup ul .e-item {
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 26px;
   line-height: 26px;
   padding: 0 14px;
 }
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-dropdown-popup ul .e-item.e-url {
   padding: 0;
 }
@@ -134,7 +143,8 @@
 }
 .e-dropdown-popup.e-transparent {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup.e-transparent .e-dropdown-menu {
   border: 0;
@@ -152,7 +162,8 @@
 
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -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;
@@ -179,7 +190,6 @@
   line-height: normal;
 }
 
-/*! drop-down button theme */
 .e-dropdown-popup {
   background: #fff;
   color: #333;
@@ -192,7 +202,8 @@
 }
 .e-dropdown-popup ul .e-item.e-focused {
   background: transparent;
-  box-shadow: 0 0 0 1px #8c8c8c inset;
+  -webkit-box-shadow: 0 0 0 1px #8c8c8c inset;
+          box-shadow: 0 0 0 1px #8c8c8c inset;
 }
 .e-dropdown-popup ul .e-item:hover {
   background: #e6e6e6;
@@ -216,7 +227,8 @@
 .e-dropdown-btn.e-btn.e-inherit {
   background: inherit;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
@@ -226,6 +238,7 @@
 .e-dropdown-btn.e-btn.e-inherit.e-active {
   background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }

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

@@ -3,7 +3,6 @@
   content: "\e744";
 }
 
-/*! drop-down button layout */
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
   text-transform: none;
@@ -11,11 +10,13 @@
 }
 .e-dropdown-btn:focus,
 .e-dropdown-btn.e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-btn:active,
 .e-dropdown-btn.e-btn:active {
-  box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
 }
 .e-dropdown-btn .e-btn-icon,
 .e-dropdown-btn.e-btn .e-btn-icon {
@@ -47,7 +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;
@@ -73,8 +73,10 @@
 .e-dropdown-popup ul {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-size: 14px;
   font-weight: normal;
   list-style-image: none;
@@ -85,18 +87,23 @@
   overflow: hidden;
   padding: 6px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
 .e-dropdown-popup ul .e-item {
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 26px;
   line-height: 26px;
   padding: 0 20px;
 }
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-dropdown-popup ul .e-item.e-url {
   padding: 0;
 }
@@ -129,7 +136,8 @@
 }
 .e-dropdown-popup.e-transparent {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup.e-transparent .e-dropdown-menu {
   border: 0;
@@ -147,7 +155,8 @@
 
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   font-size: 16px;
   max-width: 280px;
   min-width: 112px;
@@ -174,7 +183,6 @@
   line-height: normal;
 }
 
-/*! drop-down button theme */
 .e-dropdown-popup {
   background: #fff;
   color: #212529;
@@ -187,7 +195,8 @@
 }
 .e-dropdown-popup ul .e-item.e-focused {
   background: #f2f4f6;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup ul .e-item:hover {
   background: #f2f4f6;
@@ -211,7 +220,8 @@
 .e-dropdown-btn.e-btn.e-inherit {
   background: inherit;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
@@ -221,6 +231,7 @@
 .e-dropdown-btn.e-btn.e-inherit.e-active {
   background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }

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

@@ -4,7 +4,6 @@
   content: "\e70d";
 }
 
-/*! drop-down button layout */
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
   text-transform: none;
@@ -12,11 +11,13 @@
 }
 .e-dropdown-btn:focus,
 .e-dropdown-btn.e-btn:focus {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-dropdown-btn:active,
 .e-dropdown-btn.e-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-dropdown-btn .e-btn-icon,
 .e-dropdown-btn.e-btn .e-btn-icon {
@@ -48,7 +49,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;
@@ -76,8 +76,10 @@
 .e-dropdown-popup ul {
   border: 1px solid #444c54;
   border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   font-size: 14px;
   font-weight: 400;
   list-style-image: none;
@@ -88,18 +90,23 @@
   overflow: hidden;
   padding: 4px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
 .e-dropdown-popup ul .e-item {
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 30px;
   line-height: 30px;
   padding: 0 12px;
 }
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-dropdown-popup ul .e-item.e-url {
   padding: 0;
 }
@@ -132,7 +139,8 @@
 }
 .e-dropdown-popup.e-transparent {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup.e-transparent .e-dropdown-menu {
   border: 0;
@@ -155,7 +163,8 @@
 
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   font-size: 16px;
   max-width: 202px;
   min-width: 112px;
@@ -184,7 +193,6 @@
   line-height: normal;
 }
 
-/*! drop-down button theme */
 .e-dropdown-popup {
   background: #343a40;
   color: #fff;
@@ -197,7 +205,8 @@
 }
 .e-dropdown-popup ul .e-item.e-focused {
   background: #31373d;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup ul .e-item:hover {
   background: #444c54;
@@ -221,7 +230,8 @@
 .e-dropdown-btn.e-btn.e-inherit {
   background: inherit;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
@@ -231,6 +241,7 @@
 .e-dropdown-btn.e-btn.e-inherit.e-active {
   background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }