@syncfusion/ej2-splitbuttons 19.4.52 → 20.1.47

package/styles/split-button/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/split-button/_fluent-definition.scss

@@ -1,11 +1,11 @@
 //layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 0 !default;
-$split-btn-focus-outline-offset: 0 !default;
+$split-btn-focus-outline-offset: -3px !default;
 $split-btn-vertical-secondary-icon-line-height: .334em !default;
 $split-btn-seperator-border: 1px solid !default;
 $split-btn-sec-btn-margin-left: -1px !default;
-$split-btn-icon-btn-padding: 10px !default;
+$split-btn-icon-btn-padding: 8px !default;
 $split-btn-icon-btn-padding-bigger: 12px !default;
 $split-btn-focus-border-color: $secondary-border-color !default;
 $split-btn-focus-vertical-border-color: $secondary-border-color !default;

package/styles/split-button/_layout.scss

@@ -18,8 +18,8 @@
         padding-left: 12px;
         padding-right: 12px;
       }
-      @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
-        padding: 0 19px;
+      @else if $skin-name == 'FluentUI' {
+        padding: 3px 7px;
       }
       @else {
         padding-left: 10px;
@@ -59,7 +59,12 @@
       .e-btn-icon {
         font-size: $drop-down-btn-icon-font-size;
         margin-left: 0;
-        padding-right: 8px;
+        @if $skin-name == 'FluentUI' {
+          padding-right: 4px;
+        }
+        @else {
+          padding-right: 8px;
+        }
         width: auto;
       }
 
@@ -82,11 +87,11 @@
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       margin-left: $split-btn-sec-btn-margin-left;
-      @if $skin-name == 'bootstrap4' {
+      @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
         padding-left: $split-btn-icon-btn-padding;
         padding-right: $split-btn-icon-btn-padding;
       }
-      @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+      @else if $skin-name == 'FluentUI' {
         padding: 4px;
       }
       @else {
@@ -166,7 +171,7 @@
         border-top-left-radius: 0;
         border-top-right-radius: $split-btn-border-radius;
         margin-left: $split-btn-sec-btn-margin-left;
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
           padding-left: $split-btn-icon-btn-padding;
           padding-right: $split-btn-icon-btn-padding;
         }
@@ -181,7 +186,12 @@
 
         .e-btn-icon {
           margin-right: 0;
-          padding-left: 8px;
+          @if $skin-name == 'FluentUI' {
+            padding-left: 4px;
+          }
+          @else {
+            padding-left: 8px;
+          }
           padding-right: 0;
         }
 
@@ -224,7 +234,7 @@
         border-bottom-left-radius: 0;
         border-top-right-radius: $split-btn-border-radius;
         line-height: 1;
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
           padding-bottom: $split-btn-icon-btn-padding;
           padding-right: $split-btn-icon-btn-padding;
         }
@@ -276,7 +286,7 @@
   .e-bigger .e-split-btn-wrapper,
   .e-bigger.e-split-btn-wrapper {
     .e-split-btn {
-      @if $skin-name == 'bootstrap4' {
+      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
         padding-left: $split-btn-icon-btn-padding-bigger;
         padding-right: $split-btn-icon-btn-padding-bigger;
       }
@@ -297,7 +307,12 @@
       .e-btn-icon {
         font-size: $drop-down-btn-icon-font-size-bigger;
         margin-left: 0;
-        padding-right: 10px;
+        @if $skin-name == 'FluentUI' {
+          padding-right: 8px;
+        }
+        @else {
+          padding-right: 10px;
+        }
         width: auto;
       }
 
@@ -346,7 +361,12 @@
         }
 
         .e-btn-icon {
-          padding-left: 10px;
+          @if $skin-name == 'FluentUI' {
+            padding-left: 8px;
+          }
+          @else {
+            padding-left: 10px;
+          }
           padding-right: 0;
         }
 
@@ -367,7 +387,7 @@
 
     &.e-vertical {
       .e-split-btn {
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
           padding-bottom: $split-btn-icon-btn-padding-bigger;
           padding-right: $split-btn-icon-btn-padding-bigger;
         }

package/styles/split-button/_tailwind-definition.scss

@@ -5,7 +5,7 @@ $split-btn-focus-outline-offset: 0 !default;
 $split-btn-vertical-secondary-icon-line-height: .334em !default;
 $split-btn-seperator-border: 1px solid !default;
 $split-btn-sec-btn-margin-left: -1px !default;
-$split-btn-icon-btn-padding: 10px !default;
+$split-btn-icon-btn-padding: 8px !default;
 $split-btn-icon-btn-padding-bigger: 12px !default;
 $split-btn-focus-border-color: $secondary-border-color !default;
 $split-btn-focus-vertical-border-color: $secondary-border-color !default;

package/styles/split-button/fluent-dark.css

@@ -0,0 +1,363 @@
+/*! splitbutton layout */
+.e-split-btn-wrapper {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  white-space: nowrap;
+  width: min-content;
+}
+
+.e-split-btn-wrapper .e-split-btn {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  text-transform: none;
+  z-index: 1;
+  padding: 3px 7px;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  outline-offset: -3px;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  box-shadow: none;
+}
+
+.e-split-btn-wrapper .e-split-btn:active {
+  box-shadow: 0 0 rgba(0, 0, 0, 0);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.e-split-btn-wrapper .e-split-btn .e-btn-icon {
+  font-size: 14px;
+  margin-left: 0;
+  padding-right: 4px;
+  width: auto;
+}
+
+.e-split-btn-wrapper .e-split-btn .e-icon-top {
+  padding-bottom: 4px;
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-icon-btn {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  margin-left: -1px;
+  padding: 4px;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:active {
+  box-shadow: 0 0 rgba(0, 0, 0, 0);
+  z-index: 2;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
+  z-index: 0;
+}
+
+.e-split-btn-wrapper .e-dropdown-btn:focus {
+  outline-offset: -3px;
+}
+
+.e-split-btn-wrapper .e-btn:focus {
+  box-shadow: none;
+}
+
+.e-split-btn-wrapper .e-btn:active {
+  box-shadow: 0 0 rgba(0, 0, 0, 0);
+}
+
+.e-split-btn-wrapper .e-btn:disabled {
+  box-shadow: none;
+  outline: 0;
+  outline-offset: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-left: -1px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
+  margin-right: 0;
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
+  padding-left: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-left: 0;
+}
+
+.e-split-btn-wrapper.e-rtl .e-dropdown-btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-left: 0;
+}
+
+.e-split-btn-wrapper.e-vertical {
+  display: inline-block;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn,
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  display: block;
+  width: 100%;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn {
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  line-height: 1;
+  padding-bottom: 4px;
+  padding-right: 10px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
+  padding-bottom: 4px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  line-height: 0.334em;
+  margin-left: 0;
+  margin-top: -1px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
+  padding-top: 0;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+  margin-left: 0;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-dropdown-btn {
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-top-icon-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper .e-split-btn .e-btn-icon {
+  font-size: 16px;
+  margin-left: 0;
+  padding-right: 8px;
+  width: auto;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn .e-icon-top,
+.e-bigger.e-split-btn-wrapper .e-split-btn .e-icon-top {
+  padding-bottom: 6px;
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper .e-dropdown-btn,
+.e-bigger.e-split-btn-wrapper .e-dropdown-btn {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn {
+  padding-left: 6px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-btn-icon {
+  padding-left: 8px;
+  padding-right: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn .e-icon-top {
+  padding-left: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon,
+.e-bigger.e-split-btn-wrapper.e-rtl .e-split-btn.e-icon-btn .e-btn-icon {
+  padding-left: 0;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-split-btn,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-split-btn {
+  padding-bottom: 6px;
+  padding-right: 12px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn {
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.e-bigger .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom,
+.e-bigger.e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
+  padding-top: 0;
+}
+
+/*! splitbutton theme */
+.e-split-btn-wrapper .e-split-btn {
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper .e-split-btn:focus {
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper .e-split-btn:active {
+  border-right-color: #292827;
+}
+
+.e-split-btn-wrapper .e-split-btn:disabled {
+  border-right-color: #252423;
+}
+
+.e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper:hover :not(e-active) .e-split-btn:disabled {
+  border-right-color: #323130;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn {
+  border-left-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:focus {
+  border-left-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:active {
+  border-left-color: #292827;
+  border-right-color: #292827;
+}
+
+.e-split-btn-wrapper.e-rtl .e-split-btn:disabled {
+  border-left-color: #323130;
+  border-right-color: #323130;
+}
+
+.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active) {
+  border-left-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-rtl:hover .e-split-btn :not(e-active):disabled {
+  border-left-color: #323130;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn {
+  border-bottom-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:focus {
+  border-bottom-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:active {
+  border-bottom-color: #292827;
+  border-right-color: #292827;
+}
+
+.e-split-btn-wrapper.e-vertical .e-split-btn:disabled {
+  border-bottom-color: #323130;
+  border-right-color: #323130;
+}
+
+.e-split-btn-wrapper.e-vertical:hover .e-split-btn {
+  border-bottom-color: #8a8886;
+  border-right-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
+  border-bottom-color: #323130;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn {
+  border-left-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:focus {
+  border-left-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:active {
+  border-left-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl .e-split-btn:disabled {
+  border-left-color: #8a8886;
+}
+
+.e-split-btn-wrapper.e-vertical.e-rtl:hover .e-split-btn {
+  border-left-color: #8a8886;
+}

package/styles/split-button/fluent-dark.scss

@@ -0,0 +1,6 @@
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
+@import './../drop-down-button/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';