npm - @syncfusion/blazor-themes - Versions diffs - 26.1.35 → 26.1.40 - Mend

@syncfusion/blazor-themes 26.1.35 → 26.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/SCSS-Themes/querybuilder/query-builder/fluent.scss CHANGED Viewed

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/fluent2-dark.scss CHANGED Viewed

@@ -171,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -206,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/fluent2.scss CHANGED Viewed

@@ -171,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -206,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/highcontrast.scss CHANGED Viewed

@@ -126,6 +126,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: $content-font !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -168,7 +169,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -203,9 +204,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/material-dark.scss CHANGED Viewed

@@ -127,6 +127,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
 $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-dark-font !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -169,7 +170,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -204,9 +205,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/material.scss CHANGED Viewed

@@ -126,6 +126,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
 $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: rgba($grey-black, .87) !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -168,7 +169,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -203,9 +204,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/material3-dark.scss CHANGED Viewed

@@ -131,6 +131,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 26px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: rgba($secondary-text-color) !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -173,7 +174,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -208,9 +209,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/material3.scss CHANGED Viewed

@@ -131,6 +131,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 26px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: rgba($secondary-text-color) !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -173,7 +174,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -208,9 +209,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/tailwind-dark.scss CHANGED Viewed

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/querybuilder/query-builder/tailwind.scss CHANGED Viewed

@@ -128,6 +128,7 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;
 @mixin fluent2-small-round-btn {
   @if $theme-name == 'fluent2' {
@@ -170,7 +171,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
       & .e-rule-value-delete {
@@ -205,9 +206,7 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
     & .e-group-header .e-drag-qb-rule {

package/SCSS-Themes/ribbon/ribbon/bds-dark.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 12px !default;
 $ribbon-dropdown-caret-btn-size: $text-xs !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 2px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
 $ribbon-large-items-btn-padding: 0 2px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 50px !default;
 $ribbon-bigger-dropdown-btn-size: $text-xs !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 2px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
 $ribbon-bigger-dropdown-caret-icon-size: $text-base !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bds.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 12px !default;
 $ribbon-dropdown-caret-btn-size: $text-xs !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 2px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-icon-padding: 8px 6px 4px !default;
 $ribbon-large-items-btn-padding: 0 2px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 50px !default;
 $ribbon-bigger-dropdown-btn-size: $text-xs !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 2px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
 $ribbon-bigger-dropdown-caret-icon-size: $text-base !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 13px !default;
 $ribbon-dropdown-caret-btn-size: 16px !default;
 $ribbon-dropdown-caret-btn-height: 16px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 3px !default;
 $ribbon-large-items-btn-height: 18px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 41px !default;
 $ribbon-bigger-dropdown-btn-size: 16px !default;
 $ribbon-bigger-dropdown-btn-line-height: 16px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: 16px !default;
 $ribbon-bigger-dropdown-caret-icon-size: 14px !default;
 $ribbon-bigger-dropdown-caret-btn-height: 16px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bootstrap.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 13px !default;
 $ribbon-dropdown-caret-btn-size: 16px !default;
 $ribbon-dropdown-caret-btn-height: 16px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 3px !default;
 $ribbon-large-items-btn-height: 18px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 41px !default;
 $ribbon-bigger-dropdown-btn-size: 16px !default;
 $ribbon-bigger-dropdown-btn-line-height: 16px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: 16px !default;
 $ribbon-bigger-dropdown-caret-icon-size: 14px !default;
 $ribbon-bigger-dropdown-caret-btn-height: 16px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 13px !default;
 $ribbon-dropdown-caret-btn-size: 16px !default;
 $ribbon-dropdown-caret-btn-height: 16px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 3px !default;
 $ribbon-large-items-btn-height: 22px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 44px !default;
 $ribbon-bigger-dropdown-btn-size: 20px !default;
 $ribbon-bigger-dropdown-btn-line-height: 16px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 4px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: 20px !default;
 $ribbon-bigger-dropdown-caret-icon-size: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-height: 16px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 12px !default;
 $ribbon-dropdown-caret-btn-size: $text-xs !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 2px 4px !default;
 $ribbon-large-items-btn-height: 18px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 50px !default;
 $ribbon-bigger-dropdown-btn-size: 12px !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 2px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
 $ribbon-bigger-dropdown-caret-icon-size: $text-lg !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 12px !default;
 $ribbon-dropdown-caret-btn-size: $text-xs !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 2px 4px !default;
 $ribbon-large-items-btn-height: 18px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 50px !default;
 $ribbon-bigger-dropdown-btn-size: 12px !default;
 $ribbon-bigger-dropdown-btn-line-height: 12px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 2px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: $text-sm !default;
 $ribbon-bigger-dropdown-caret-icon-size: $text-lg !default;
 $ribbon-bigger-dropdown-caret-btn-height: 12px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;

package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss CHANGED Viewed

@@ -52,6 +52,7 @@ $ribbon-dropdown-btn-padding: 0 15px !default;
 $ribbon-dropdown-caret-btn-size: 12px !default;
 $ribbon-dropdown-caret-btn-height: 12px !default;
 $ribbon-dropdown-caret-btn-padding: 2px 4px !default;
+$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
 $ribbon-items-padding: 2px !default;
 $ribbon-large-items-btn-padding: 0 3px !default;
 $ribbon-large-items-btn-height: 18px !default;
@@ -230,6 +231,7 @@ $ribbon-bigger-menu-blank-icon-padding: 36px !default;
 $ribbon-bigger-dropdown-btn-size: 16px !default;
 $ribbon-bigger-dropdown-btn-line-height: 16px !default;
 $ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
+$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
 $ribbon-bigger-dropdown-caret-btn-size: 16px !default;
 $ribbon-bigger-dropdown-caret-icon-size: 18px !default;
 $ribbon-bigger-dropdown-caret-btn-height: 16px !default;
@@ -749,6 +751,10 @@ $ribbon-items-focus-box-shadow: none !default;
     .e-ribbon-tab-item {
       display: inline-flex;
+      &.e-disabled {
+        pointer-events: none;
+      }
     }
     .e-ribbon-group {
@@ -1228,6 +1234,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
           padding: $ribbon-dropdown-caret-btn-padding;
@@ -1919,6 +1929,10 @@ $ribbon-items-focus-box-shadow: none !default;
           }
         }
+        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
+          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
+        }
         .e-dropdown-btn .e-caret {
           @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
           padding: $ribbon-bigger-dropdown-caret-btn-padding;