@syncfusion/ej2-splitbuttons 20.4.50 → 21.1.37

package/styles/button-group/tailwind.css

@@ -257,7 +257,7 @@
 .e-btn-group input:focus + label.e-btn,
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus + label.e-btn {
-  background-color: #f3f4f6;
+  background: #f3f4f6;
   border-color: #d1d5db;
   color: #374151;
   outline: #fff 0 solid;
@@ -269,7 +269,7 @@
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background-color: #4338ca;
+  background: #4338ca;
   border-color: #4f46e5;
   color: #fff;
   outline: #fff 0 solid;
@@ -280,7 +280,7 @@
 .e-btn-group input:focus + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background-color: #166534;
+  background: #166534;
   border-color: #15803d;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
@@ -290,7 +290,7 @@
 .e-btn-group input:focus + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background-color: #155e75;
+  background: #155e75;
   border-color: #0e7490;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
@@ -300,7 +300,7 @@
 .e-btn-group input:focus + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background-color: #9a3412;
+  background: #9a3412;
   border-color: #c2410c;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
@@ -310,7 +310,7 @@
 .e-btn-group input:focus + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background-color: #b91c1c;
+  background: #b91c1c;
   border-color: #dc2626;
   color: #fff;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
@@ -370,7 +370,7 @@
 .e-css.e-btn-group .e-btn:active,
 .e-css.e-btn-group input:active + label.e-btn,
 .e-css.e-btn-group input:checked + label.e-btn {
-  background-color: #e5e7eb;
+  background: #e5e7eb;
   border-color: #d1d5db;
   color: #374151;
   outline: #fff 0 solid;
@@ -383,7 +383,7 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
-  background-color: #3730a3;
+  background: #3730a3;
   border-color: #3730a3;
   color: #fff;
   outline: #fff 0 solid;
@@ -395,7 +395,7 @@
 .e-css.e-btn-group .e-btn:active.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
-  background-color: #14532d;
+  background: #14532d;
   border-color: #14532d;
   color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -406,7 +406,7 @@
 .e-css.e-btn-group .e-btn:active.e-info,
 .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: #164e63;
+  background: #164e63;
   color: #fff;
   border-color: #164e63;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -417,7 +417,7 @@
 .e-css.e-btn-group .e-btn:active.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
-  background-color: #7c2d12;
+  background: #7c2d12;
   border-color: #7c2d12;
   color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -428,7 +428,7 @@
 .e-css.e-btn-group .e-btn:active.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
-  background-color: #991b1b;
+  background: #991b1b;
   border-color: #991b1b;
   color: #fff;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -439,7 +439,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline,
 .e-css.e-btn-group input:active + label.e-btn.e-outline,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
-  background-color: #e5e7eb;
+  background: #e5e7eb;
   border-color: #d1d5db;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #374151;
@@ -450,7 +450,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
-  background-color: #3730a3;
+  background: #3730a3;
   border-color: #4f46e5;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
@@ -461,7 +461,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
-  background-color: #14532d;
+  background: #14532d;
   border-color: #14532d;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
@@ -472,7 +472,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
-  background-color: #164e63;
+  background: #164e63;
   border-color: #164e63;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
@@ -483,7 +483,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
-  background-color: #7c2d12;
+  background: #7c2d12;
   border-color: #7c2d12;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
@@ -494,7 +494,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
-  background-color: #991b1b;
+  background: #991b1b;
   border-color: #991b1b;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #fff;
@@ -513,7 +513,7 @@
 .e-btn-group input:disabled + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-primary {
-  background-color: #a5b4fc;
+  background: #a5b4fc;
   border-color: #a5b4fc;
   box-shadow: none;
   color: #fff;
@@ -523,7 +523,7 @@
 .e-btn-group input:disabled + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-success {
-  background-color: #86efac;
+  background: #86efac;
   border-color: #86efac;
   box-shadow: none;
   color: #fff;
@@ -533,7 +533,7 @@
 .e-btn-group input:disabled + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-info {
-  background-color: #67e8f9;
+  background: #67e8f9;
   border-color: #67e8f9;
   box-shadow: none;
   color: #fff;
@@ -543,7 +543,7 @@
 .e-btn-group input:disabled + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-warning {
-  background-color: #fdba74;
+  background: #fdba74;
   border-color: #fdba74;
   box-shadow: none;
   color: #fff;
@@ -553,7 +553,7 @@
 .e-btn-group input:disabled + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-danger {
-  background-color: #fca5a5;
+  background: #fca5a5;
   border-color: #fca5a5;
   box-shadow: none;
   color: #fff;
@@ -564,7 +564,7 @@
 .e-css.e-btn-group .e-btn:disabled.e-link,
 .e-css.e-btn-group input:disabled + label.e-btn.e-link {
   color: #9ca3af;
-  background-color: transparent;
+  background: transparent;
   box-shadow: none;
   text-decoration: none;
   border-color: transparent;
@@ -573,7 +573,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:disabled.e-outline,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline {
-  background-color: transparent;
+  background: transparent;
   border-color: #e5e7eb;
   color: #9ca3af;
   border-color: #d1d5db;
@@ -582,7 +582,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-primary {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(79, 70, 229, 0.65);
   box-shadow: none;
   color: rgba(79, 70, 229, 0.65);
@@ -592,7 +592,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(21, 128, 61, 0.65);
   box-shadow: none;
   color: rgba(21, 128, 61, 0.65);
@@ -602,7 +602,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(14, 116, 144, 0.65);
   box-shadow: none;
   color: rgba(14, 116, 144, 0.65);
@@ -612,7 +612,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(194, 65, 12, 0.65);
   box-shadow: none;
   color: rgba(194, 65, 12, 0.65);
@@ -622,7 +622,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(220, 38, 38, 0.65);
   box-shadow: none;
   color: rgba(220, 38, 38, 0.65);

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

@@ -6,7 +6,7 @@ $drop-down-btn-bigger-font-size: $text-base !default;
 $drop-down-btn-bigger-li-height: 32px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: $text-sm !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
@@ -16,7 +16,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: 18px !default;
+$drop-down-btn-menu-icon-font-size: $text-lg !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;
@@ -24,9 +24,9 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
-$drop-down-btn-caret-icon-font-size: 10px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 12px !default;
+$drop-down-btn-caret-icon-font-size: $text-xxs !default;
+$drop-down-btn-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xs !default;
 $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 2px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;

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

@@ -6,7 +6,7 @@ $drop-down-btn-bigger-font-size: $text-base !default;
 $drop-down-btn-bigger-li-height: 40px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: $text-sm !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
@@ -16,7 +16,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: 18px !default;
+$drop-down-btn-menu-icon-font-size: $text-lg !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;
@@ -24,9 +24,9 @@ $drop-down-btn-ul-border-radius: 2px !default;
 $drop-down-btn-ul-padding: 0 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 0 !default;
 $drop-down-btn-ul-small-padding: 0 0 !default;
-$drop-down-btn-caret-icon-font-size: 16px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 20px !default;
+$drop-down-btn-caret-icon-font-size: $text-base !default;
+$drop-down-btn-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
 $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 4px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;

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

@@ -24,6 +24,12 @@
       }
     }
 
+    &:focus-visible { // only for keybord
+      @if $skin-name == 'Material3' {
+        box-shadow: $btn-keyboard-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+
     &:active {
       box-shadow: $btn-active-box-shadow;
     }
@@ -56,6 +62,9 @@
 
         & .e-item  {
           padding: $drop-down-btn-small-li-padding;
+          @if $skin-name == 'Material3' {
+            height: $drop-down-btn-small-li-height;
+          }
         }
       }
 
@@ -143,6 +152,9 @@
         &.e-disabled {
           cursor: auto;
           pointer-events: none;
+          @if $skin-name == 'Material3' {
+            box-shadow: $drop-down-btn-sub-ul-box-shadow;
+          }
         }
 
         &.e-separator {

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

@@ -6,7 +6,7 @@ $drop-down-btn-bigger-font-size: $text-base !default;
 $drop-down-btn-bigger-li-height: 36px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: $text-sm !default;
 $drop-down-btn-icon-margin-right: 12px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
@@ -16,7 +16,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: 18px !default;
+$drop-down-btn-menu-icon-font-size: $text-lg !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;
@@ -24,8 +24,8 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 4px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
-$drop-down-btn-caret-icon-font-size: 18px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size: $text-lg !default;
+$drop-down-btn-icon-font-size-bigger: $text-base !default;
 $drop-down-btn-caret-icon-font-size-bigger: 22px !default;
 $drop-down-btn-box-shadow: $shadow-focus-ring2 !default;
 $drop-down-btn-popup-margin-top: 4px !default;