@syncfusion/ej2-layouts 20.1.61 → 20.2.36

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+## 20.1.61 (2022-06-21)
+
 ### Dashboard Layout
 
 #### Bug Fixes

package/dist/ej2-layouts.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.umd.min.js
-*  version : 20.1.61
+*  version : 20.2.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/ej2-layouts.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.min.js
-*  version : 20.1.61
+*  version : 20.2.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.61
+*  version : 20.2.36
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/helpers/e2e/dashboardHelper.js

@@ -1,97 +1,113 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class DashboardHelper extends e2e_1.TestHelper {
-    /**
-     * Initialize the Dashboard Layout E2E helpers.
-     * @param id element id of the Dashboard Layout component.
-     * @param wrapperFn pass the wrapper function.
-     */
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var DashboardHelper = /** @class */ (function (_super) {
+        __extends(DashboardHelper, _super);
+        /**
+         * Initialize the Dashboard Layout E2E helpers.
+         * @param id element id of the Dashboard Layout component.
+         * @param wrapperFn pass the wrapper function.
+         */
+        function DashboardHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    /**
-     * Gets the selector of the Dashboard Layout component.
-     */
-    selector(arg) {
-        return (this.wrapperFn ? this.wrapperFn(arg) : arg);
-    }
-    /**
-     * Gets root element of the Dashboard Layout component.
-     */
-    getElement() {
-        return this.selector('#' + this.id);
-    }
-    /**
-     * Gets the element of the Dashboard Layout component.
-     */
-    getDashboardLayout() {
-        return this.selector('#' + this.id + '.e-dashboardlayout');
-    }
-    /**
-     * Gets a panel container and its inner elements with the given id from dashboard layout component.
-     */
-    getPanelContainer() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-container');
-    }
-    /**
-     * Gets the panel element of Dashboard Layout component which consists the panel container and its inner elements
-     */
-    getPanelElement() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-panel');
-    }
-    /**
-     * Used to get the panel header of Dashboard Layout component which contains the header details.
-     */
-    getPanelHeader() {
-        return this.selector('#' + this.id + '.e-dashboardlayout  .e-panel-header');
-    }
-    /**
-     * Gets the panel content of Dashboard Layout component which contains the panel content class.
-     */
-    getPanelContent() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-content');
-    }
-    /**
-     * Gets the resize icon positioned on the South-East side in panel container.
-     */
-    getSouthEastResizeIcon() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-south-east .e-resize');
-    }
-    /**
-     * Gets the resize icon positioned on the North-East side in panel container.
-     */
-    getNorthEastResizeIcon() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-north-east .e-resize');
-    }
-    /**
-     * Gets the resize icon positioned on the North-West side in panel container.
-     */
-    getNorthWestResizeIcon() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-north-west .e-resize');
-    }
-    /**
-     * Gets the resize icon positioned on the South-West side in panel container.
-     */
-    getSouthWestResizeIcon() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-south-west .e-resize');
-    }
-    /**
-     * Gets the clear icon from the panel element.
-     */
-    getClearIcon() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-clear-icon');
-    }
-    /**
-     * Gets the transition of panel in Dashboard Layout component which is used to achieve the resizing behavior.
-     */
-    getPanelTansition() {
-        return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-transition');
-    }
-}
-exports.DashboardHelper = DashboardHelper;
+        /**
+         * Gets the selector of the Dashboard Layout component.
+         */
+        DashboardHelper.prototype.selector = function (arg) {
+            return (this.wrapperFn ? this.wrapperFn(arg) : arg);
+        };
+        /**
+         * Gets root element of the Dashboard Layout component.
+         */
+        DashboardHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id);
+        };
+        /**
+         * Gets the element of the Dashboard Layout component.
+         */
+        DashboardHelper.prototype.getDashboardLayout = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout');
+        };
+        /**
+         * Gets a panel container and its inner elements with the given id from dashboard layout component.
+         */
+        DashboardHelper.prototype.getPanelContainer = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-container');
+        };
+        /**
+         * Gets the panel element of Dashboard Layout component which consists the panel container and its inner elements
+         */
+        DashboardHelper.prototype.getPanelElement = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-panel');
+        };
+        /**
+         * Used to get the panel header of Dashboard Layout component which contains the header details.
+         */
+        DashboardHelper.prototype.getPanelHeader = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout  .e-panel-header');
+        };
+        /**
+         * Gets the panel content of Dashboard Layout component which contains the panel content class.
+         */
+        DashboardHelper.prototype.getPanelContent = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-content');
+        };
+        /**
+         * Gets the resize icon positioned on the South-East side in panel container.
+         */
+        DashboardHelper.prototype.getSouthEastResizeIcon = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-south-east .e-resize');
+        };
+        /**
+         * Gets the resize icon positioned on the North-East side in panel container.
+         */
+        DashboardHelper.prototype.getNorthEastResizeIcon = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-north-east .e-resize');
+        };
+        /**
+         * Gets the resize icon positioned on the North-West side in panel container.
+         */
+        DashboardHelper.prototype.getNorthWestResizeIcon = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-north-west .e-resize');
+        };
+        /**
+         * Gets the resize icon positioned on the South-West side in panel container.
+         */
+        DashboardHelper.prototype.getSouthWestResizeIcon = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-south-west .e-resize');
+        };
+        /**
+         * Gets the clear icon from the panel element.
+         */
+        DashboardHelper.prototype.getClearIcon = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-clear-icon');
+        };
+        /**
+         * Gets the transition of panel in Dashboard Layout component which is used to achieve the resizing behavior.
+         */
+        DashboardHelper.prototype.getPanelTansition = function () {
+            return this.selector('#' + this.id + '.e-dashboardlayout .e-panel-transition');
+        };
+        return DashboardHelper;
+    }(e2e_1.TestHelper));
+    exports.DashboardHelper = DashboardHelper;
+});

package/helpers/e2e/index.js

@@ -1,7 +1,9 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./dashboardHelper"));
-__export(require("./splitter-helper"));
+define(["require", "exports", "./dashboardHelper", "./splitter-helper"], function (require, exports, dashboardHelper_1, splitter_helper_1) {
+    "use strict";
+    function __export(m) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+    Object.defineProperty(exports, "__esModule", { value: true });
+    __export(dashboardHelper_1);
+    __export(splitter_helper_1);
+});

package/helpers/e2e/splitter-helper.js

@@ -1,59 +1,75 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
-class SplitterHelper extends e2e_1.TestHelper {
-    constructor(id, wrapperFn) {
-        super();
-        this.id = id;
-        if (wrapperFn !== undefined) {
-            this.wrapperFn = wrapperFn;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+define(["require", "exports", "@syncfusion/ej2-base/helpers/e2e"], function (require, exports, e2e_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    var SplitterHelper = /** @class */ (function (_super) {
+        __extends(SplitterHelper, _super);
+        function SplitterHelper(id, wrapperFn) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            if (wrapperFn !== undefined) {
+                _this.wrapperFn = wrapperFn;
+            }
+            return _this;
         }
-        return this;
-    }
-    /**
-     * The method which returns Splitter's root element.
-     */
-    getElement() {
-        return this.selector('#' + this.id + ".e-splitter");
-    }
-    /**
-     * The method which returns Splitter's all pane elements.
-     */
-    getPaneElement() {
-        let element = this.selector('#' + this.id + ".e-splitter");
-        let pane = [];
-        return pane.filter.call(element.children, (ele) => pane.includes.call(ele.classList, 'e-pane'));
-    }
-    /**
-     * The method which returns Splitter's separator (split-bar) elements.
-     */
-    getSplitBar() {
-        let element = this.selector('#' + this.id + ".e-splitter");
-        let split = [];
-        return split.filter.call(element.children, (ele) => split.includes.call(ele.classList, 'e-split-bar'));
-    }
-    /**
-     * The getModel method is used to return value of the property.
-     * @param property - Specifies name of the property. It must be string type.
-     */
-    getModel(property) {
-        this.getModel(property);
-    }
-    /**
-     * The setModel method is used to set value for the property. It will accepts two arguments.
-     * @param property - Specifices name of the property which value is to be updated.
-     * @param value - Specifies corresponding value of the property.
-     */
-    setModel(property, value) {
-        this.setModel(property, value);
-    }
-    /**
-     * The invoke method is used to set value for the property. It will accepts two arguments.
-     * @param property - Specifices name of the property which value is to be updated.
-     * @param value - Specifies corresponding value of the property.
-     */
-    invoke(fName, args) {
-        this.invoke(fName, args);
-    }
-}
-exports.SplitterHelper = SplitterHelper;
+        /**
+         * The method which returns Splitter's root element.
+         */
+        SplitterHelper.prototype.getElement = function () {
+            return this.selector('#' + this.id + ".e-splitter");
+        };
+        /**
+         * The method which returns Splitter's all pane elements.
+         */
+        SplitterHelper.prototype.getPaneElement = function () {
+            var element = this.selector('#' + this.id + ".e-splitter");
+            var pane = [];
+            return pane.filter.call(element.children, function (ele) { return pane.includes.call(ele.classList, 'e-pane'); });
+        };
+        /**
+         * The method which returns Splitter's separator (split-bar) elements.
+         */
+        SplitterHelper.prototype.getSplitBar = function () {
+            var element = this.selector('#' + this.id + ".e-splitter");
+            var split = [];
+            return split.filter.call(element.children, function (ele) { return split.includes.call(ele.classList, 'e-split-bar'); });
+        };
+        /**
+         * The getModel method is used to return value of the property.
+         * @param property - Specifies name of the property. It must be string type.
+         */
+        SplitterHelper.prototype.getModel = function (property) {
+            this.getModel(property);
+        };
+        /**
+         * The setModel method is used to set value for the property. It will accepts two arguments.
+         * @param property - Specifices name of the property which value is to be updated.
+         * @param value - Specifies corresponding value of the property.
+         */
+        SplitterHelper.prototype.setModel = function (property, value) {
+            this.setModel(property, value);
+        };
+        /**
+         * The invoke method is used to set value for the property. It will accepts two arguments.
+         * @param property - Specifices name of the property which value is to be updated.
+         * @param value - Specifies corresponding value of the property.
+         */
+        SplitterHelper.prototype.invoke = function (fName, args) {
+            this.invoke(fName, args);
+        };
+        return SplitterHelper;
+    }(e2e_1.TestHelper));
+    exports.SplitterHelper = SplitterHelper;
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@20.1.58",
+  "_id": "@syncfusion/ej2-layouts@19.7.2",
   "_inBundle": false,
-  "_integrity": "sha512-Yoo0oKLRCpNrc4VWz4kGIEsSdF8tTh62hLzM2wPE7ULszPbucUZgaiLzu3SKEbpg4Qf0oi4mamZQ7q5gXyRGOg==",
+  "_integrity": "sha512-DQo39Lbsf5i76XqDmlzTLZx0LjV4l7lwC3I7RqmMz4cP3So+ICA0jxT7V+vGEA6ekR5X4ZIOrOLLBp38ltrzMw==",
   "_location": "/@syncfusion/ej2-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -27,8 +27,8 @@
     "/@syncfusion/ej2-react-layouts",
     "/@syncfusion/ej2-vue-layouts"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-20.1.58.tgz",
-  "_shasum": "b31c51a86cbcaf3e5dd7b85f415b6a77b60e4964",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-19.7.2.tgz",
+  "_shasum": "f0631fa5b423a32987127c9bd0c04fe2ff8e2d25",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,7 +36,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.61"
+    "@syncfusion/ej2-base": "~20.2.36"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -76,6 +76,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "20.1.61",
+  "version": "20.2.36",
   "sideEffects": false
 }

package/styles/avatar/_fusionnew-definition.scss

@@ -0,0 +1,26 @@
+// Avatar Base
+$avatar-base-border-radius: 2px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;

package/styles/avatar/_material3-definition.scss

@@ -0,0 +1,26 @@
+// Avatar Base
+$avatar-base-border-radius: 2px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;

package/styles/card/_fusionnew-definition.scss

@@ -0,0 +1,121 @@
+$skin-name: 'bootstrap5' !default;
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: 4px !default;
+$card-action-btn-txt-transform: none !default;
+// Font
+$card-header-font: $text-base !default;
+$card-title-font: $text-lg !default;
+$card-action-btn-icon-font: $text-sm !default;
+$card-action-btn-font: $text-sm !default;
+$card-content-font-size: $text-sm !default;
+$card-content-bigger-font-size: $text-base !default;
+$card-header-title-font: $text-base !default;
+$card-header-sub-title-font: $text-sm !default;
+// Mouse
+$card-content-line-height: $leading-normal !default;
+$card-nrml-lheight: 36px !default;
+$card-nrml-mheight: 36px !default;
+$card-header-padding: 12px !default;
+$card-header-lheight: $leading-tight !default;
+$card-title-nrml-padding: 12px !default;
+$card-title-nrml-lheight: $leading-normal !default;
+$card-hor-image-margin: 2px !default;
+$card-sep-margin: 12px 0 !default;
+$card-header-minheight: 22.5px !default;
+$card-header-nrml-padding: 12px !default;
+$card-header-nrml-padding-bottom: 0 !default;
+$card-header-txt-nrml-padding: 0 0 0 12px !default;
+$card-header-txt-title-lheight: $leading-normal !default;
+$card-header-txt-title-nrml-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-lheight: $leading-normal !default;
+$card-header-image-width: 52px !default;
+$card-header-image-height: 50px !default;
+$card-image-mheight: 112.5px !default;
+$card-image-title-lheight: 30px !default;
+$card-image-title-mheight: 30px !default;
+$card-action-nrml-vertical-padding: 12px !default;
+$card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-padding: 0 6px !default;
+$card-nrml-content-padding: 12px !default;
+$card-header-txt-nrml-title-font: $text-base !default;
+$card-header-txt-nrml-subtitle-font: $text-sm !default;
+$card-image-title-font: $text-base !default;
+$card-action-btn-icon-width: 24px !default;
+$card-action-btn-icon-height: 24px !default;
+// Touch
+$card-bigger-lheight: 48px !default;
+$card-bigger-mheight: 48px !default;
+$card-header-bigger-padding: 16px !default;
+$card-header-bigger-padding-bottom: 0 !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 16px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 2px !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-txt-bigger-padding: 0 0 0 16px !default;
+$card-header-txt-title-bigger-lheight: $leading-normal !default;
+$card-header-txt-title-bigger-padding: 8px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
+$card-header-image-bigger-width: 55px !default;
+$card-header-image-bigger-height: 60px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;
+$card-image-title-bigger-mheight: 40px !default;
+$card-img-title-bigger-padding: 12px 16px !default;
+$card-action-bigger-padding: 16px !default;
+$card-action-bigger-vertical-padding: 16px 20px !default;
+$card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
+$card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-margin: 0 0 0 13px !default;
+$card-action-btn-bigger-padding: 0 8px !default;
+$card-bigger-content-padding: 16px !default;
+$card-header-txt-bigger-title-font: $text-xl !default;
+$card-header-txt-bigger-subtitle-font: $text-base !default;
+$card-image-title-bigger-font: 18px !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 12px 16px !default;
+$card-action-nrml-padding: 12px !default;
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: $primary !default;
+$card-bg-color: $content-bg-color !default;
+$card-focus-bg-color: $content-bg-color !default;
+$card-hover-bg-color: $content-bg-color !default;
+$card-active-bg-color: $content-bg-color !default;
+$card-focus-brdr-color: $border-light !default;
+$card-hover-brdr-color: $border-dark !default;
+$card-active-brdr-color: $primary !default;
+$card-brdr-size: 1px  !default;
+$card-brdr-type: solid !default;
+$card-brdr-color: $border-light !default;
+$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-type: solid !default;
+$card-sep-brdr-color: $border-light !default;
+$card-image-title-color: $white !default;
+$card-image-title-bg: $overlay-bg-color !default;
+$card-action-btn-bg-color: $transparent !default;
+$card-action-btn-font-color: $primary !default;
+$card-action-btn-border: 1px solid $primary !default;
+$card-action-btn-hover-bg:  $primary !default;
+$card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
+$card-action-btn-hover-font: $white !default;
+$card-action-btn-focus-bg: $secondary-bg-color-focus !default;
+$card-action-btn-focus-border: 1px solid !default;
+$card-action-btn-focus-font:  $secondary-text-color-focus !default;
+$card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
+$card-action-btn-pressed-font: $secondary-text-color-pressed !default;
+$card-font-color: $content-text-color !default;
+$card-header-txt-title-color: $content-text-color !default;
+$card-header-txt-subtitle-color: $content-text-color-alt2 !default;
+$card-content-font-color: $content-text-color-alt1 !default;
+$card-box-shadow: none !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: none !default;
+//Theme Variables End

package/styles/card/_material3-definition.scss

@@ -0,0 +1,121 @@
+$skin-name: 'bootstrap5' !default;
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: 4px !default;
+$card-action-btn-txt-transform: none !default;
+// Font
+$card-header-font: $text-base !default;
+$card-title-font: $text-lg !default;
+$card-action-btn-icon-font: $text-sm !default;
+$card-action-btn-font: $text-sm !default;
+$card-content-font-size: $text-sm !default;
+$card-content-bigger-font-size: $text-base !default;
+$card-header-title-font: $text-base !default;
+$card-header-sub-title-font: $text-sm !default;
+// Mouse
+$card-content-line-height: $leading-normal !default;
+$card-nrml-lheight: 36px !default;
+$card-nrml-mheight: 36px !default;
+$card-header-padding: 12px !default;
+$card-header-lheight: $leading-tight !default;
+$card-title-nrml-padding: 12px !default;
+$card-title-nrml-lheight: $leading-normal !default;
+$card-hor-image-margin: 2px !default;
+$card-sep-margin: 12px 0 !default;
+$card-header-minheight: 22.5px !default;
+$card-header-nrml-padding: 12px !default;
+$card-header-nrml-padding-bottom: 0 !default;
+$card-header-txt-nrml-padding: 0 0 0 12px !default;
+$card-header-txt-title-lheight: $leading-normal !default;
+$card-header-txt-title-nrml-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-lheight: $leading-normal !default;
+$card-header-image-width: 52px !default;
+$card-header-image-height: 50px !default;
+$card-image-mheight: 112.5px !default;
+$card-image-title-lheight: 30px !default;
+$card-image-title-mheight: 30px !default;
+$card-action-nrml-vertical-padding: 12px !default;
+$card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-padding: 0 6px !default;
+$card-nrml-content-padding: 12px !default;
+$card-header-txt-nrml-title-font: $text-base !default;
+$card-header-txt-nrml-subtitle-font: $text-sm !default;
+$card-image-title-font: $text-base !default;
+$card-action-btn-icon-width: 24px !default;
+$card-action-btn-icon-height: 24px !default;
+// Touch
+$card-bigger-lheight: 48px !default;
+$card-bigger-mheight: 48px !default;
+$card-header-bigger-padding: 16px !default;
+$card-header-bigger-padding-bottom: 0 !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 16px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 2px !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-txt-bigger-padding: 0 0 0 16px !default;
+$card-header-txt-title-bigger-lheight: $leading-normal !default;
+$card-header-txt-title-bigger-padding: 8px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
+$card-header-image-bigger-width: 55px !default;
+$card-header-image-bigger-height: 60px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;
+$card-image-title-bigger-mheight: 40px !default;
+$card-img-title-bigger-padding: 12px 16px !default;
+$card-action-bigger-padding: 16px !default;
+$card-action-bigger-vertical-padding: 16px 20px !default;
+$card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
+$card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-margin: 0 0 0 13px !default;
+$card-action-btn-bigger-padding: 0 8px !default;
+$card-bigger-content-padding: 16px !default;
+$card-header-txt-bigger-title-font: $text-xl !default;
+$card-header-txt-bigger-subtitle-font: $text-base !default;
+$card-image-title-bigger-font: 18px !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 12px 16px !default;
+$card-action-nrml-padding: 12px !default;
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: $primary !default;
+$card-bg-color: $content-bg-color !default;
+$card-focus-bg-color: $content-bg-color !default;
+$card-hover-bg-color: $content-bg-color !default;
+$card-active-bg-color: $content-bg-color !default;
+$card-focus-brdr-color: $border-light !default;
+$card-hover-brdr-color: $border-dark !default;
+$card-active-brdr-color: $primary !default;
+$card-brdr-size: 1px  !default;
+$card-brdr-type: solid !default;
+$card-brdr-color: $border-light !default;
+$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-type: solid !default;
+$card-sep-brdr-color: $border-light !default;
+$card-image-title-color: $white !default;
+$card-image-title-bg: $overlay-bg-color !default;
+$card-action-btn-bg-color: $transparent !default;
+$card-action-btn-font-color: $primary !default;
+$card-action-btn-border: 1px solid $primary !default;
+$card-action-btn-hover-bg:  $primary !default;
+$card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
+$card-action-btn-hover-font: $white !default;
+$card-action-btn-focus-bg: $secondary-bg-color-focus !default;
+$card-action-btn-focus-border: 1px solid !default;
+$card-action-btn-focus-font:  $secondary-text-color-focus !default;
+$card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
+$card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
+$card-action-btn-pressed-font: $secondary-text-color-pressed !default;
+$card-font-color: $content-text-color !default;
+$card-header-txt-title-color: $content-text-color !default;
+$card-header-txt-subtitle-color: $content-text-color-alt2 !default;
+$card-content-font-color: $content-text-color-alt1 !default;
+$card-box-shadow: none !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: none !default;
+//Theme Variables End

package/styles/dashboard-layout/_fusionnew-definition.scss

@@ -0,0 +1,109 @@
+/*! component's theme wise override tailwind-definitions and variables */
+
+// Generic
+$icon-zero: 0 !default;
+$icon-border-radius: 50% !default;
+$grid-layout-position: relative !default;
+$panel-position: absolute !default;
+$panel-box-sizing: border-box !default;
+
+// Header styles
+
+// Mouse
+$panel-header-height: 38px !default;
+$panel-header-padding: 8px 18px !default;
+$panel-header-line-height: 22px !default;
+$panel-header-border-radius: 4px !default;
+$panel-header-color: $content-text-color !default;
+$panel-header-font-size: $text-sm !default;
+$panel-header-bg-color: $content-bg-color-alt1 !default;
+$panel-header-font-weight: $font-weight-medium !default;
+$panel-header-border-bottom: 1px solid $border-light !default;
+$panel-header-font-family: $font-family !default;
+$panel-header-white-space: nowrap !default;
+$panel-header-overflow: hidden !default;
+$panel-header-text-overflow: ellipsis !default;
+
+// Touch
+$panel-bigger-header-height: 40px !default;
+$panel-bigger-header-padding: 8px 18px !default;
+$panel-bigger-header-line-height: 24px !default;
+$panel-bigger-header-color: $content-text-color !default;
+$panel-bigger-header-font-size: $text-base !default;
+$panel-bigger-header-font-weight: $font-weight-medium !default;
+
+// Panel styles
+$panel-border: 1px solid $border-light !default;
+$panel-border-radius: 4px !default;
+$panel-full-height: 100% !default;
+$panel-full-width: 100% !default;
+$panel-hover-border: 1px solid $border-dark !default;
+$panel-active-border: 1px solid $primary-border-color !default;
+
+// icons styles
+$panel-resize-one-dimensional-icon-height: 8px !default;
+$panel-resize-one-dimensional-icon-width: 8px !default;
+$panel-resize-one-dimensional-icon-background: none !default;
+$panel-resize-one-dimensional-icon-border: none !default;
+$panel-resize-one-dimensional-icon-shadow: none !default;
+
+$panel-resize-two-dimensional-icon-height: 8px !default;
+$panel-resize-two-dimensional-icon-width: 8px !default;
+$panel-resize-two-dimensional-inner-icon-height: 8px !default;
+$panel-resize-two-dimensional-inner-icon-width: 8px !default;
+$panel-resize-two-dimensional-icon-background: none !default;
+$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
+$panel-resize-two-dimensional-icon-border: none !default;
+$panel-resize-two-dimensional-icon-shadow: none !default;
+
+// south-east-icon-styles
+$panel-south-east-icon-right: 2px !default;
+$panel-south-east-icon-bottom: 2px !default;
+
+// south-west-icon-style
+$panel-south-west-icon-left: 2px !default;
+$panel-south-west-icon-bottom: 2px !default;
+
+// north-east-icon-styles
+$panel-north-east-icon-right: 2px !default;
+$panel-north-east-icon-top: 2px !default;
+
+// north-west-icon-styles
+$panel-north-west-icon-left: 2px !default;
+$panel-north-west-icon-top: 2px !default;
+
+// droppable area border
+$panel-drop-border-radius: 4px !default;
+
+// dragging element style
+$panel-dragging-cursor: move !default;
+$panel-drag-prevent: none !default;
+
+// Blazor ContentTemplate styles
+$panel-content-template-height: inherit !default;
+$panel-content-template-width: inherit !default;
+
+// sass-lint:disable-all
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+
+// sass-lint:disable-all
+$element-width-complete: 100% !important !default;
+
+// colors
+
+// Panel styles
+$panel-active-background: $flyout-bg-color !default;
+$panel-hover-box-shadow: $shadow !default;
+$panel-active-drag-box-shadow: $shadow !default;
+$panel-background: $flyout-bg-color !default;
+$panel-box-shadow: $shadow-sm;
+
+// droppable area border
+$panel-drop-background: $primary-lighter !default;
+$panel-drop-border: 1px $primary-border-color dashed !default;
+
+//gridlines
+$gridline-background: $content-bg-color-alt1 !default;
+$gridline-border: $border-dark !default;
+$gridline-border-radius: 6px !default;

package/styles/dashboard-layout/_material3-definition.scss

@@ -0,0 +1,109 @@
+/*! component's theme wise override tailwind-definitions and variables */
+
+// Generic
+$icon-zero: 0 !default;
+$icon-border-radius: 50% !default;
+$grid-layout-position: relative !default;
+$panel-position: absolute !default;
+$panel-box-sizing: border-box !default;
+
+// Header styles
+
+// Mouse
+$panel-header-height: 38px !default;
+$panel-header-padding: 8px 18px !default;
+$panel-header-line-height: 22px !default;
+$panel-header-border-radius: 4px !default;
+$panel-header-color: $content-text-color !default;
+$panel-header-font-size: $text-sm !default;
+$panel-header-bg-color: $content-bg-color-alt1 !default;
+$panel-header-font-weight: $font-weight-medium !default;
+$panel-header-border-bottom: 1px solid $border-light !default;
+$panel-header-font-family: $font-family !default;
+$panel-header-white-space: nowrap !default;
+$panel-header-overflow: hidden !default;
+$panel-header-text-overflow: ellipsis !default;
+
+// Touch
+$panel-bigger-header-height: 40px !default;
+$panel-bigger-header-padding: 8px 18px !default;
+$panel-bigger-header-line-height: 24px !default;
+$panel-bigger-header-color: $content-text-color !default;
+$panel-bigger-header-font-size: $text-base !default;
+$panel-bigger-header-font-weight: $font-weight-medium !default;
+
+// Panel styles
+$panel-border: 1px solid $border-light !default;
+$panel-border-radius: 4px !default;
+$panel-full-height: 100% !default;
+$panel-full-width: 100% !default;
+$panel-hover-border: 1px solid $border-dark !default;
+$panel-active-border: 1px solid $primary-border-color !default;
+
+// icons styles
+$panel-resize-one-dimensional-icon-height: 8px !default;
+$panel-resize-one-dimensional-icon-width: 8px !default;
+$panel-resize-one-dimensional-icon-background: none !default;
+$panel-resize-one-dimensional-icon-border: none !default;
+$panel-resize-one-dimensional-icon-shadow: none !default;
+
+$panel-resize-two-dimensional-icon-height: 8px !default;
+$panel-resize-two-dimensional-icon-width: 8px !default;
+$panel-resize-two-dimensional-inner-icon-height: 8px !default;
+$panel-resize-two-dimensional-inner-icon-width: 8px !default;
+$panel-resize-two-dimensional-icon-background: none !default;
+$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
+$panel-resize-two-dimensional-icon-border: none !default;
+$panel-resize-two-dimensional-icon-shadow: none !default;
+
+// south-east-icon-styles
+$panel-south-east-icon-right: 2px !default;
+$panel-south-east-icon-bottom: 2px !default;
+
+// south-west-icon-style
+$panel-south-west-icon-left: 2px !default;
+$panel-south-west-icon-bottom: 2px !default;
+
+// north-east-icon-styles
+$panel-north-east-icon-right: 2px !default;
+$panel-north-east-icon-top: 2px !default;
+
+// north-west-icon-styles
+$panel-north-west-icon-left: 2px !default;
+$panel-north-west-icon-top: 2px !default;
+
+// droppable area border
+$panel-drop-border-radius: 4px !default;
+
+// dragging element style
+$panel-dragging-cursor: move !default;
+$panel-drag-prevent: none !default;
+
+// Blazor ContentTemplate styles
+$panel-content-template-height: inherit !default;
+$panel-content-template-width: inherit !default;
+
+// sass-lint:disable-all
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+
+// sass-lint:disable-all
+$element-width-complete: 100% !important !default;
+
+// colors
+
+// Panel styles
+$panel-active-background: $flyout-bg-color !default;
+$panel-hover-box-shadow: $shadow !default;
+$panel-active-drag-box-shadow: $shadow !default;
+$panel-background: $flyout-bg-color !default;
+$panel-box-shadow: $shadow-sm;
+
+// droppable area border
+$panel-drop-background: $primary-lighter !default;
+$panel-drop-border: 1px $primary-border-color dashed !default;
+
+//gridlines
+$gridline-background: $content-bg-color-alt1 !default;
+$gridline-border: $border-dark !default;
+$gridline-border-radius: 6px !default;

package/styles/dashboard-layout/icons/_fusionnew.scss

@@ -0,0 +1,81 @@
+@include export-module('dashboardlayout-fusionnew-icons') {
+  .e-dashboardlayout.e-control {
+    & .e-panel {
+
+      & .e-resize.e-single,
+      & .e-resize.e-double {
+        &.e-east {
+          height: 100%;
+          padding: 20px 0;
+          right: 1px;
+          top: 0;
+          width: 12px;
+
+        }
+
+        &.e-west {
+          height: 100%;
+          left: 0;
+          padding: 20px 0;
+          top: 0;
+          width: 12px;
+        }
+
+        &.e-north {
+          height: 12px;
+          padding: 0 20px;
+          top: 1px;
+          width: 100%;
+        }
+
+        &.e-south {
+          bottom: 1px;
+          height: 12px;
+          padding: 0 20px;
+          width: 100%;
+        }
+
+        &.e-south-east {
+          bottom: 0;
+          right: 1px;
+          z-index: 10;
+        }
+
+        &.e-north-west {
+          left: 2px;
+          top: 2px;
+          z-index: 10;
+        }
+
+        &.e-north-east {
+          right: 2px;
+          top: 2px;
+          z-index: 10;
+        }
+
+        &.e-south-west {
+          bottom: 1px;
+          left: 1px;
+          z-index: 10;
+        }
+
+        &.e-south-east::before {
+          bottom: 4px;
+          content: '\e761';
+          font-size: 12px;
+          position: absolute;
+          right: 4px;
+        }
+
+        &.e-south-west::before {
+          bottom: 4px;
+          content: '\e761';
+          font-size: 12px;
+          left: 4px;
+          position: absolute;
+          transform: rotateY(180deg);
+        }
+      }
+    }
+  }
+}

package/styles/dashboard-layout/icons/_material3.scss

@@ -0,0 +1,81 @@
+@include export-module('dashboardlayout-material3-icons') {
+  .e-dashboardlayout.e-control {
+    & .e-panel {
+
+      & .e-resize.e-single,
+      & .e-resize.e-double {
+        &.e-east {
+          height: 100%;
+          padding: 20px 0;
+          right: 1px;
+          top: 0;
+          width: 12px;
+
+        }
+
+        &.e-west {
+          height: 100%;
+          left: 0;
+          padding: 20px 0;
+          top: 0;
+          width: 12px;
+        }
+
+        &.e-north {
+          height: 12px;
+          padding: 0 20px;
+          top: 1px;
+          width: 100%;
+        }
+
+        &.e-south {
+          bottom: 1px;
+          height: 12px;
+          padding: 0 20px;
+          width: 100%;
+        }
+
+        &.e-south-east {
+          bottom: 0;
+          right: 1px;
+          z-index: 10;
+        }
+
+        &.e-north-west {
+          left: 2px;
+          top: 2px;
+          z-index: 10;
+        }
+
+        &.e-north-east {
+          right: 2px;
+          top: 2px;
+          z-index: 10;
+        }
+
+        &.e-south-west {
+          bottom: 1px;
+          left: 1px;
+          z-index: 10;
+        }
+
+        &.e-south-east::before {
+          bottom: 4px;
+          content: '\e761';
+          font-size: 12px;
+          position: absolute;
+          right: 4px;
+        }
+
+        &.e-south-west::before {
+          bottom: 4px;
+          content: '\e761';
+          font-size: 12px;
+          left: 4px;
+          position: absolute;
+          transform: rotateY(180deg);
+        }
+      }
+    }
+  }
+}

package/styles/splitter/_fusionnew-definition.scss

@@ -0,0 +1,30 @@
+$skin-name: 'bootstrap' !default;
+//Layout Variables Start
+$splitpane-font-size: $text-sm  !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: $primary !default;
+$navigation-icon-border-hover: $primary !default;
+$splitter-border-color: $border-light !default;
+$splitter-background-color: $primary-text-color !default;
+$splitpane-font-color: $content-text-color !default;
+$splitbar-border-color: $border-light !default;
+$splitbar-hover-border-color: $primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $icon-color !default;
+$collapse-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+//Theme Variables End

package/styles/splitter/_material3-definition.scss

@@ -0,0 +1,30 @@
+$skin-name: 'bootstrap' !default;
+//Layout Variables Start
+$splitpane-font-size: $text-sm  !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: $primary !default;
+$navigation-icon-border-hover: $primary !default;
+$splitter-border-color: $border-light !default;
+$splitter-background-color: $primary-text-color !default;
+$splitpane-font-color: $content-text-color !default;
+$splitbar-border-color: $border-light !default;
+$splitbar-hover-border-color: $primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $icon-color !default;
+$collapse-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+//Theme Variables End

package/styles/splitter/icons/_fusionnew.scss

@@ -0,0 +1,39 @@
+@include export-module('splitter-material-icons') {
+  .e-splitter {
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler::before {
+          content: '\e7e3';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        & .e-resize-handler::before {
+          content: '\e7fd';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+    }
+  }
+
+  .e-bigger {
+    .e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+
+    &.e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+  }
+}

package/styles/splitter/icons/_material3.scss

@@ -0,0 +1,39 @@
+@include export-module('splitter-material-icons') {
+  .e-splitter {
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler::before {
+          content: '\e7e3';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        & .e-resize-handler::before {
+          content: '\e7fd';
+          font-family: 'e-icons';
+          font-size: $splitbar-icon-size;
+        }
+      }
+    }
+  }
+
+  .e-bigger {
+    .e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+
+    &.e-splitter {
+      .e-split-bar {
+        .e-resize-handler::before {
+          font-size: $bigger-splitbar-icon-size;
+        }
+      }
+    }
+  }
+}