v20.3.56 is released

Author: pipeline

controls/base/src/component.ts

@@ -373,7 +373,9 @@ export abstract class Component<ElementType extends HTMLElement> extends Base<El
 
     //tslint:disable-next-line
     protected renderReactTemplates(callback?: any): void {
-        //No Code
+        if (!isNullOrUndefined(callback)) {
+            callback();
+        }
     }
 
     // eslint-disable-next-line

controls/base/themestudio/styles/buttons/check-box/_theme.scss

@@ -102,6 +102,9 @@
 
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
 
             &:not(.e-check),

controls/base/themestudio/styles/buttons/floating-action-button/_tailwind-definition.scss

@@ -25,3 +25,4 @@ $fab-bigger-small-padding: 0 17px !default;
 $fab-bigger-small-icon-font-size: 14px !default;
 
 $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
+$fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;

controls/base/themestudio/styles/buttons/floating-action-button/_theme.scss

@@ -4,11 +4,19 @@
     box-shadow: $fab-box-shadow;
 
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap-dark-definition.scss

@@ -5,8 +5,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap-definition.scss

@@ -5,8 +5,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;

controls/base/themestudio/styles/buttons/speed-dial/_bootstrap5-definition.scss

@@ -55,11 +55,12 @@ $sd-disabled-font-color: $content-text-color-disabled !default;
 $sd-focus-li-bg: $content-bg-color-focus !default;
 $sd-focus-li-border-color: $border-focus !default;
 $sd-focus-font-color: $content-text-color-focus !default;
+$sd-focus-box-shadow: $secondary-shadow-focus !default;
 
 $sd-hover-li-bg: $content-bg-color-hover !default;
 $sd-hover-li-border-color: $border-hover !default;
 $sd-hover-font-color: $content-text-color-hover !default;
 
-$sd-active-li-bg: $content-text-color-pressed !default;
+$sd-active-li-bg: $content-bg-color-pressed !default;
 $sd-active-li-border-color: $content-bg-color-pressed !default;
 $sd-active-font-color: $content-text-color-focus !default;

controls/base/themestudio/styles/buttons/speed-dial/_fluent-definition.scss

@@ -55,7 +55,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-focus-li-bg $shadow-lg !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring1 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;

controls/base/themestudio/styles/buttons/speed-dial/_tailwind-definition.scss

@@ -55,7 +55,7 @@ $sd-disabled-font-color: $secondary-text-color-disabled !default;
 $sd-focus-li-bg: $secondary-bg-color-focus !default;
 $sd-focus-li-border-color: $secondary-border-color-focus !default;
 $sd-focus-font-color: $secondary-text-color-focus !default;
-$sd-focus-box-shadow: $sd-li-shadow $shadow-focus-ring2 !default;
+$sd-focus-box-shadow: $sd-li-shadow, $shadow-focus-ring2 !default;
 
 $sd-hover-li-bg: $secondary-bg-color-hover !default;
 $sd-hover-li-border-color: $secondary-border-color-hover !default;

controls/base/themestudio/styles/buttons/speed-dial/_theme.scss

@@ -7,12 +7,7 @@
     .e-speeddial-li {
       color: $sd-font-color;
 
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -21,11 +16,7 @@
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -35,27 +26,19 @@
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
 
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -64,11 +47,7 @@
 
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
-
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

controls/base/themestudio/styles/dropdowns/drop-down-base/_fabric-definition.scss

@@ -11,7 +11,7 @@ $ddl-list-border-color: rgba($neutral-light, .25) !default;
 $ddl-list-font-family: inherit !default;
 $ddl-list-gradient-color: transparent !default;
 $mention-gradient-color: $neutral-white !default;
-$mention-list-box-shadow-color: 0 0 5px 0 rgba(0, 0, 0, .4) !default;
+$mention-list-box-shadow-color: rgba(0, 0, 0, .4) !default;
 $mention-chip-bg-color: $neutral-lighter !default;
 $mention-chip-border-radius: 0 !default;
 $mention-chip-border: none !default;

controls/base/themestudio/styles/dropdowns/drop-down-tree/_layout.scss

@@ -436,8 +436,16 @@
       box-shadow: $ddt-box-shadow;
       position: absolute;
 
+      .e-active .e-checkbox-wrapper {
+        .e-frame:not(.e-check) {
+          @if$ddt-skin-name == 'bootstrap5' {
+            background-color: $ddt-readonly-input-bg-color;
+          }
+        }
+      }
+
       .e-checkbox-wrapper {
-        .e-frame {
+        .e-frame:not(.e-check) {
           @if$ddt-skin-name == 'bootstrap5' {
             background-color: transparent;
           }

controls/base/themestudio/styles/filemanager/file-manager/_layout.scss

@@ -80,25 +80,6 @@
         border-width: 0 0 1px;
       }
 
-      .e-toolbar-items .e-toolbar-item.e-template {
-        height: 30px;
-
-        .e-upload.e-fm-upload {
-          border: 0;
-
-          .e-file-select-wrap {
-            padding-left: 1px;
-            padding-right: 1px;
-
-            .e-css.e-btn:hover {
-              @if $fm-skin-name == 'material' {
-                box-shadow: none;
-              }
-            }
-          }
-        }
-      }
-
       .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
         border: 0;
         box-shadow: none;

controls/base/themestudio/styles/grids/grid/_bootstrap-dark-definition.scss

@@ -92,8 +92,8 @@ $grid-columnchooser-input-padding-bottom: 8px !default;
 $grid-columnchooser-input-padding-left: 4px !default;
 $grid-columnchooser-ul-margin: 13px 0 !default;
 $grid-column-chooser-dlg-footer-padding: 8px !default;
-$grid-rtl-bigger-sortnumber-margin: 6px 0 0 5px !default;
-$grid-rtl-bigger-rightalign-sortnumber-margin: $grid-rtl-bigger-sortnumber-margin !default;
+$grid-rtl-bigger-sortnumber-margin: 6px 0 0 10px !default;
+$grid-rtl-bigger-rightalign-sortnumber-margin: 8px 0 0 4px !default;
 $grid-rtl-group-text-marign-right: 0 !default;
 $grid-rtl-group-text-margin-right: 0 !default;
 $grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
@@ -241,7 +241,7 @@ $grid-sortnumber-rightalign-margin: $grid-fltr-sortnumber-rightalign-margin !def
 $grid-sortnumer-line-height: 15px !default;
 $grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
 $grid-sortdiv-right-align-margin: -29px -5px !default;
-$grid-sortdiv-margin:  -29px 10px !default;
+$grid-sortdiv-margin:  -29px -10px !default;
 $grid-sortdiv-padding: 15px 0 !default;
 $grid-ungroup-button-line-height: 23px !default;
 $grid-ungroup-button-font-size: 10px !default;
@@ -296,11 +296,11 @@ $grid-rtl-group-headercell-margin-right: 8px !default;
 $grid-rtl-group-headercell-margin-left: 0 !default;
 $grid-fltr-rtl-sortnumber-margin: 9px 0 0 9px !default;
 $grid-rtl-sortnumber-margin: $grid-fltr-rtl-sortnumber-margin !default;
-$grid-fltr-rtl-sortnumber-rightalign-margin: 9px 0 0 25px !default;
-$grid-rtl-sortnumber-rightalign-margin: $grid-fltr-rtl-sortnumber-rightalign-margin !default;
+$grid-fltr-rtl-sortnumber-rightalign-margin: 7px 0 0 6px !default;
+$grid-rtl-sortnumber-rightalign-margin: 7px 0 0 14px !default;
 $grid-rtl-sortcelldiv-margin: -29px 10px !default;
-$grid-rtl-sortcelldiv-right-align-margin: -29px 10px !default;
-$grid-rtl-bigger-sortcelldiv-right-align-margin: -31px 22px !default;
+$grid-rtl-sortcelldiv-right-align-margin: -29px -8px !default;
+$grid-rtl-bigger-sortcelldiv-right-align-margin: -31px -10px !default;
 $grid-rtl-bigger-sortcelldiv-margin: -31px 5px !default;
 $grid-rtl-grouped-headercell-padding: 7px 0 !default;
 $grid-rtl-group-text-margin-left: 0 !default;
@@ -368,7 +368,7 @@ $grid-columnchooser-content-margin: 37px 0 0 !default;
 $grid-bigger-columnchooser-content-margin: 37px 0 0 !default;
 $grid-bigger-columnchooser-btn-font-size: 12px !default;
 $grid-bigger-sortdiv-rightalign-margin: -29px -5px !default;
-$grid-bigger-sortdiv-margin: -30px 8px !default;
+$grid-bigger-sortdiv-margin: -29px -10px !default;
 $grid-bigger-header-icons-font-size: 14px !default;
 $grid-bigger-grouptext-width: auto !default;
 $grid-edit-input-margin-top: 2px !default;
@@ -404,21 +404,21 @@ $grid-rtl-fltrdiv-margin: -20px 0 -20px -36px !default;
 $grid-rtl-bigger-fltrdiv-margin: -20px 0 -18px -25px !default;
 $grid-bigger-rtl-headercelldiv-fltricon-padding: -5px -10px -5px 0 !default;
 $grid-bigger-fltrdiv-margin: -21px -7px !default;
-$grid-sortdiv-filtericon-margin: -29px 28px -29px 0 !default;
+$grid-sortdiv-filtericon-margin: -29px 14px -29px 0 !default;
 $grid-sortdiv-filtericon-rightalign-margin: -29px -11px 0 0 !default;
 $grid-rtl-sortdiv-filtericon-rightalign-margin: -29px 0 0 10px !default;
 $grid-rtl-sortdiv-filtericon-margin: -29px 0 0 10px !default;
 $grid-bigger-fltricon-sortdiv-rightalign-margin: -30px -20px 0 0 !default;
-$grid-bigger-fltricon-sortdiv-margin: -30px 28px -31px 0 !default;
+$grid-bigger-fltricon-sortdiv-margin: -30px 16px -30px 0 !default;
 $grid-rtl-bigger-fltricon-sortdiv-margin: -29px 0 0 22px !default;
-$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -29px 0 0 29px !default;
+$grid-rtl-bigger-fltricon-sortdiv-rightalign-margin: -29px -8px 0 10px !default;
 $grid-column-menu-sub-menu-box-shadow: 0 6px 12px rgba($shadow, .175) !default;
 $grid-bigger-checkbox-filter-min-height: 360px !default;
 $grid-checkbox-filter-min-height: 338px !default;
 $grid-column-menu-margin: -20px !default;
 $grid-column-menu-padding: 6px !default;
 $grid-textwrap-column-menu-margin: -15px -20px -20px -20px !default;
-$grid-bigger-column-menu-margin: -7px -7px !default;
+$grid-bigger-column-menu-margin: -20px -18px !default;
 $grid-column-menu-top-touch: 31px !default;
 $grid-column-menu-bottom-touch: 31px !default;
 $grid-column-menu-right-touch: 23px !default;
@@ -466,10 +466,10 @@ $grid-unboundcelldiv-margin: 0 3.5px !default;
 $grid-bigger-flmenu-padding: $grid-flmenu-padding !default;
 $grid-rowcell-wrap-height: 18px !default;
 $grid-rowcell-wrap-max-height: 36px !default;
-$grid-bigger-fltr-sortnumber-rightalign-margin: $grid-sortnumber-rightalign-margin !default;
-$grid-bigger-sortnumber-rightalign-margin: $grid-bigger-fltr-sortnumber-rightalign-margin !default;
+$grid-bigger-fltr-sortnumber-rightalign-margin: 7px 0 0 20px !default;
+$grid-bigger-sortnumber-rightalign-margin: 7px 0 0 20px !default;
 $grid-bigger-columnmenu-bottom: 16px !default;
-$grid-bigger-sortnumber-margin: $grid-sortnumber-margin !default;
+$grid-bigger-sortnumber-margin: 7px 8px 0 2px !default;
 $grid-bigger-fltr-sortnumber-margin: $grid-bigger-sortnumber-margin !default;
 $grid-rtl-searchclear: 0 !default;
 $grid-column-chosser-searchdiv-top: -46px !default;
@@ -575,8 +575,8 @@ $grid-bigger-sort-number-size: $grid-sort-number-size !default;
 $grid-sort-number-font-size: 9px !default;
 $grid-filter-border-radius: 6px !default;
 $grid-adaptive-toolbar-icon-hover-bottom: 0 !default;
-$grid-bigger-sort-margin: -14px 3px !default;
-$grid-bigger-sort-right-margin: 0 2px 0 0 !default;
+$grid-bigger-sort-margin: -29px 3px !default;
+$grid-bigger-sort-right-margin: 7px 2px 0 0 !default;
 $grid-skin: 'bootstrap' !default;
 $grid-biggerreorderarrow-font-size: $grid-reorderarrow-font-size !default;
 $grid-bigger-drag-count-padding: 3px 7px 4px !default;