@syncfusion/ej2-layouts 20.2.45 → 20.3.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.45
+*  version : 20.3.47
 *  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/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-layouts@*",
-  "_id": "@syncfusion/ej2-layouts@20.2.43",
+  "_id": "@syncfusion/ej2-layouts@19.8.9",
   "_inBundle": false,
-  "_integrity": "sha512-sf1Yp2jURCkFs5HY1FmzkDnFcIgNFETDS5ok+/GQXc+5DEKnraDT3uLJAP85q2n1h493UdT+u3cc0YgX5m4xpw==",
+  "_integrity": "sha512-9pX/RW+qoUdKRtUKeb2HbHK8n+fCL+kq+lGtogw1e2MHJuEKxq9O2H2Cyf95Ngg9svZYymG9bldKMIsAFTBh+w==",
   "_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.2.43.tgz",
-  "_shasum": "aade8b2f52fdae56e814b25275150be790e1b39e",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-19.8.9.tgz",
+  "_shasum": "539f246fa7ad0466b424093597c955d94c8b6cd8",
   "_spec": "@syncfusion/ej2-layouts@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -36,12 +36,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.45"
+    "@syncfusion/ej2-base": "~20.3.47"
   },
   "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.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-layouts.es2015.js",
+  "es2015": "./dist/es6/ej2-layouts.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -76,6 +76,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "20.2.45",
+  "version": "20.3.47",
   "sideEffects": false
 }

package/src/dashboard-layout/dashboard-layout.js

@@ -207,7 +207,6 @@ var DashboardLayout = /** @class */ (function (_super) {
                 var td = document.createElement('td');
                 td.classList.add('e-dashboard-gridline');
                 this.setAttributes({ value: { row: i.toString(), col: j.toString(), sizeX: '1', sizeY: '1' } }, td);
-                td.setAttribute('id', '' + j);
                 this.setPanelPosition(td, i, j);
                 this.setHeightAndWidth(td, { row: i, col: j, sizeX: 1, sizeY: 1 });
                 tr.appendChild(td);
@@ -764,13 +763,13 @@ var DashboardLayout = /** @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.getMinWidth = function (item) {
-        return (item.minSizeX) * this.getCellSize()[0];
+        return (((item.minSizeX) * this.getCellSize()[0]) + (item.minSizeX - 1) * this.cellSpacing[0]);
     };
     DashboardLayout.prototype.getMaxWidth = function (item) {
         return (item.maxSizeX) * this.getCellSize()[0];
     };
     DashboardLayout.prototype.getMinHeight = function (item) {
-        return (item.minSizeY) * this.getCellSize()[1];
+        return (((item.minSizeY) * this.getCellSize()[1]) + (item.minSizeY - 1) * this.cellSpacing[1]);
     };
     DashboardLayout.prototype.getMaxHeight = function (item) {
         return (item.maxSizeY) * this.getCellSize()[1];

package/src/splitter/splitter.d.ts

@@ -297,6 +297,7 @@ export declare class Splitter extends Component<HTMLElement> {
      * @blazorProperty 'Collapsed'
      */
     collapsed: EmitType<ExpandedEventArgs>;
+    protected needsID: boolean;
     /**
      * Triggers when after panes get expanded.
      *

package/src/splitter/splitter.js

@@ -118,7 +118,9 @@ var Splitter = /** @class */ (function (_super) {
      * @param element  - Specifies the element that is rendered as an Splitter.
      */
     function Splitter(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.needsID = true;
+        return _this;
     }
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.

package/styles/avatar/_bootstrap-dark-definition.scss

@@ -1,4 +1,3 @@
-
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;

package/styles/avatar/_fabric-dark-definition.scss

@@ -1,4 +1,3 @@
-
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;

package/styles/avatar/_highcontrast-light-definition.scss

@@ -1,4 +1,3 @@
-
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;

package/styles/avatar/_material-dark-definition.scss

@@ -1,4 +1,3 @@
-
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;

package/styles/avatar/_theme.scss

@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */

package/styles/bootstrap-dark.css

@@ -337,12 +337,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 13px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 18px;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 12px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 14px;
   padding: 0 0 8px;
 }
@@ -450,8 +450,8 @@
   text-overflow: ellipsis;
   width: inherit;
 }
-.e-card .e-card-actions .e-card-btn else,
-.e-card .e-card-actions a else {
+.e-card .e-card-actions .e-card-btn,
+.e-card .e-card-actions a {
   border-radius: 2px;
 }
 .e-card .e-card-actions .e-card-btn,
@@ -487,6 +487,7 @@
 }
 
 /*! card theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: #6e6e6e;
@@ -609,8 +610,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -643,8 +644,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -1046,7 +1047,8 @@
   pointer-events: none;
 }
 
-/*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable-line no-empty-source */ /*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
   height: 100%;
   padding: 20px 0;

package/styles/bootstrap.css

@@ -338,12 +338,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: normal;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: normal;
   padding: 6px 0 0;
 }
@@ -451,8 +451,8 @@
   text-overflow: ellipsis;
   width: inherit;
 }
-.e-card .e-card-actions .e-card-btn else,
-.e-card .e-card-actions a else {
+.e-card .e-card-actions .e-card-btn,
+.e-card .e-card-actions a {
   border-radius: 2px;
 }
 .e-card .e-card-actions .e-card-btn,
@@ -488,6 +488,7 @@
 }
 
 /*! card theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: #fff;
@@ -610,8 +611,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -644,8 +645,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -1047,7 +1048,8 @@
   pointer-events: none;
 }
 
-/*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable-line no-empty-source */ /*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
   height: 100%;
   padding: 20px 0;

package/styles/bootstrap4.css

@@ -343,12 +343,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 21px;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 16px;
   padding: 10px 0 0;
 }
@@ -456,8 +456,8 @@
   text-overflow: ellipsis;
   width: inherit;
 }
-.e-card .e-card-actions .e-card-btn else,
-.e-card .e-card-actions a else {
+.e-card .e-card-actions .e-card-btn,
+.e-card .e-card-actions a {
   border-radius: 2px;
 }
 .e-card .e-card-actions .e-card-btn,
@@ -493,6 +493,7 @@
 }
 
 /*! card theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background-color: #fff;
@@ -614,8 +615,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -648,8 +649,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -1051,7 +1052,8 @@
   pointer-events: none;
 }
 
-/*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable-line no-empty-source */ /*! component's theme wise override bootstrap-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
   height: 100%;
   padding: 20px 0;

package/styles/bootstrap5-dark.css

@@ -352,12 +352,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 16px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 1.5;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 1.5;
   padding: 4px 0 0;
 }
@@ -465,8 +465,8 @@
   text-overflow: ellipsis;
   width: inherit;
 }
-.e-card .e-card-actions .e-card-btn else,
-.e-card .e-card-actions a else {
+.e-card .e-card-actions .e-card-btn,
+.e-card .e-card-actions a {
   border-radius: 2px;
 }
 .e-card .e-card-actions .e-card-btn,
@@ -502,6 +502,7 @@
 }
 
 /*! card theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #212529;
@@ -617,8 +618,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -651,8 +652,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -1054,7 +1055,8 @@
   pointer-events: none;
 }
 
-/*! component's theme wise override tailwind-definitions and variables */
+/* stylelint-disable-line no-empty-source */ /*! component's theme wise override tailwind-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
   height: 100%;
   padding: 20px 0;

package/styles/bootstrap5.css

@@ -352,12 +352,12 @@
 }
 .e-card .e-card-header .e-card-header-caption .e-card-header-title {
   font-size: 16px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 1.5;
 }
 .e-card .e-card-header .e-card-header-caption .e-card-sub-title {
   font-size: 14px;
-  font-weight: 400;
+  font-weight: normal;
   line-height: 1.5;
   padding: 4px 0 0;
 }
@@ -465,8 +465,8 @@
   text-overflow: ellipsis;
   width: inherit;
 }
-.e-card .e-card-actions .e-card-btn else,
-.e-card .e-card-actions a else {
+.e-card .e-card-actions .e-card-btn,
+.e-card .e-card-actions a {
   border-radius: 2px;
 }
 .e-card .e-card-actions .e-card-btn,
@@ -502,6 +502,7 @@
 }
 
 /*! card theme */
+/* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #fff;
@@ -617,8 +618,8 @@
 }
 .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal.e-pane-hidden, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-horizontal {
   -ms-flex-direction: row;
@@ -651,8 +652,8 @@
 }
 .e-splitter.e-splitter-vertical .e-pane-vertical.e-pane-hidden {
   -ms-flex-preferred-size: 0 !important;
-      flex-basis: 0 !important;
-  overflow: hidden !important;
+      flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::before,
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down)::after {
@@ -1054,7 +1055,8 @@
   pointer-events: none;
 }
 
-/*! component's theme wise override tailwind-definitions and variables */
+/* stylelint-disable-line no-empty-source */ /*! component's theme wise override tailwind-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
   height: 100%;
   padding: 20px 0;

package/styles/card/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
+@import 'layout.scss';
 @import 'theme.scss';

package/styles/card/_bootstrap-dark-definition.scss

@@ -1,9 +1,8 @@
-
 /*! component's default definitions and variables */
 $skin-name: 'material' !default;
 $card-img-brdr-radious: 50% !default;
 $card-brdr-radious: $border-radius !default;
-$card-action-btn-txt-transform: none !default;;
+$card-action-btn-txt-transform: none !default;
 $card-bg-color: $default-bg-color !default;
 $card-focus-bg-color: $default-bg-color !default;
 $card-hover-bg-color: $default-bg-color !default;
@@ -94,14 +93,13 @@ $card-image-title-bigger-font: 24px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
-
 //color
 
-$card-brdr-size: 1px  !default;
+$card-brdr-size: 1px !default;
 $card-brdr-type: solid !default;
 $card-brdr-color: $default-border-color !default;
 $card-sep-margin: 16px 0 !default;
-$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-size: 1px !default;
 $card-sep-brdr-type: solid !default;
 $card-sep-brdr-color: $default-border-color !default;
 $card-image-title-color: $default-font-color !default;
@@ -123,6 +121,7 @@ $card-header-txt-title-color: $default-font-color !default;
 $card-header-txt-subtitle-color: $default-font-color !default;
 $card-content-font-color: $card-header-txt-subtitle-color !default;
 $card-action-btn-icon-color: $default-font-color !default;
+
 /*! component's theme wise override material-definitions and variables */
 $skin-name: 'bootstrap' !default;
 $card-img-brdr-radious: 50% !default;
@@ -172,7 +171,6 @@ $card-image-title-font: 17px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
 
-
 // Touch
 
 $card-bigger-lheight: 45px !default;
@@ -208,14 +206,13 @@ $card-image-title-bigger-font: 17px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
-
 // color
 
 $card-bg-color: $grey-white !default;
-$card-brdr-size: 1px  !default;
+$card-brdr-size: 1px !default;
 $card-brdr-type: solid !default;
 $card-brdr-color: $grey-dd !default;
-$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-size: 1px !default;
 $card-sep-brdr-type: solid !default;
 $card-sep-brdr-color: $grey-dd !default;
 $card-image-title-color: $grey-dark-font !default;

package/styles/card/_bootstrap-definition.scss

@@ -50,7 +50,6 @@ $card-image-title-font: 17px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
 
-
 // Touch
 
 $card-bigger-lheight: 45px !default;
@@ -86,14 +85,13 @@ $card-image-title-bigger-font: 17px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
-
 // color
 
 $card-bg-color: $grey-white !default;
-$card-brdr-size: 1px  !default;
+$card-brdr-size: 1px !default;
 $card-brdr-type: solid !default;
 $card-brdr-color: $grey-dd !default;
-$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-size: 1px !default;
 $card-sep-brdr-type: solid !default;
 $card-sep-brdr-color: $grey-dd !default;
 $card-image-title-color: $grey-dark-font !default;

package/styles/card/_bootstrap4-definition.scss

@@ -50,7 +50,6 @@ $card-image-title-font: 20px !default;
 $card-action-btn-icon-width: 24px !default;
 $card-action-btn-icon-height: 24px !default;
 
-
 // Touch
 
 $card-bigger-lheight: 45px !default;
@@ -87,14 +86,13 @@ $card-image-title-bigger-font: 20px !default;
 $card-action-btn-bigger-icon-width: 24px !default;
 $card-action-btn-bigger-icon-height: 24px !default;
 
-
 // color
 
 $card-bg-color: $white !default;
-$card-brdr-size: 1px  !default;
+$card-brdr-size: 1px !default;
 $card-brdr-type: solid !default;
 $card-brdr-color: rgba($black, .12) !default;
-$card-sep-brdr-size: 1px  !default;
+$card-sep-brdr-size: 1px !default;
 $card-sep-brdr-type: solid !default;
 $card-sep-brdr-color: rgba($black, .12) !default;
 $card-image-title-color: $white !default;

package/styles/card/_bootstrap5-definition.scss

@@ -1,8 +1,10 @@
 $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;
@@ -12,6 +14,7 @@ $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;
@@ -45,6 +48,7 @@ $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;
@@ -80,6 +84,7 @@ $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
@@ -91,10 +96,10 @@ $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-size: 1px !default;
 $card-brdr-type: solid !default;
 $card-brdr-color: $border-light !default;
-$card-sep-brdr-size: 1px  !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;
@@ -118,4 +123,5 @@ $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