@syncfusion/ej2-layouts 19.4.47 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.47
+*  version : 20.1.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@19.4.43",
+  "_id": "@syncfusion/ej2-layouts@19.6.9",
   "_inBundle": false,
-  "_integrity": "sha512-BdHEKSCZ+ZTWDSXjSH3zNKFvItohCwZMzkUsIGaQd+8JuQ1PbOuNr8BuXpBmAl78ncpm/f30y0Smd9EFxlXt0w==",
+  "_integrity": "sha512-vFQ/1dU1Mufhh5X4nxZfPm6B1MDsUQx73+48FEY1Gt1AeMh6GM8RjlvdjsJo02CdpIbOewKAaVE7xpJvihWssA==",
   "_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-19.4.43.tgz",
-  "_shasum": "011b66ef3c020941ea19a18a765bff06489744c3",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-19.6.9.tgz",
+  "_shasum": "10ac1634e328f00c2525e459f31ae4d74e7075a4",
   "_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": "~19.4.42"
+    "@syncfusion/ej2-base": "~20.1.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.",
@@ -76,6 +76,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
   },
   "typings": "index.d.ts",
-  "version": "19.4.47",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/splitter/splitter.js

@@ -1594,7 +1594,7 @@ var Splitter = /** @class */ (function (_super) {
     };
     Splitter.prototype.getSeparatorPosition = function (e) {
         this.updateCursorPosition(e, 'current');
-        var rectBound = (this.orientation === 'Horizontal') ? this.element.getBoundingClientRect().left :
+        var rectBound = (this.orientation === 'Horizontal') ? this.element.getBoundingClientRect().left + window.scrollX :
             this.element.getBoundingClientRect().top + window.scrollY;
         var offSet = (this.orientation === 'Horizontal') ? this.element.offsetWidth : this.element.offsetHeight;
         return this.calcDragPosition(rectBound, offSet);

package/styles/avatar/_bootstrap5-definition.scss

@@ -17,6 +17,7 @@ $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;

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

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

package/styles/avatar/_layout.scss

@@ -50,6 +50,9 @@
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
+      @if ($skin-name == 'bootstrap5') {
+        border-radius: $avatar-large-border-radius;
+      }
       @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         height: 48px;
         line-height: $avatar-base-large-line-height;
@@ -59,6 +62,9 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
+      @if ($skin-name == 'bootstrap5') {
+        border-radius: $avatar-large-border-radius;
+      }
       @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         height: 56px;
         line-height: $avatar-base-xlarge-line-height;

package/styles/avatar/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/bootstrap5.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;

package/styles/avatar/fluent-dark.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #292827;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #a19f9d;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent-dark.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/avatar/fluent.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: #edebe9;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: #605e5c;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 24px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 20px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 24px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/fluent.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/bootstrap-dark.css

@@ -762,7 +762,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -770,7 +770,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -980,14 +980,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap.css

@@ -763,7 +763,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -771,7 +771,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -981,14 +981,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap4.css

@@ -769,7 +769,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -777,7 +777,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -987,14 +987,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {

package/styles/bootstrap5-dark.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
@@ -106,6 +108,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -159,7 +162,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -357,6 +360,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -463,7 +467,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -578,7 +582,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #212529;
-  border: 1px solid #ced4da;
+  border: 1px solid #444c54;
   box-shadow: none;
   color: #fff;
   outline: none;
@@ -764,7 +768,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -772,7 +776,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -982,14 +986,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -1111,7 +1115,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1166,7 +1170,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1360,7 +1364,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: none;
+  border-bottom: 1px solid #444c54;
   color: #fff;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;

package/styles/bootstrap5.css

@@ -48,6 +48,7 @@
 
 .e-avatar.e-avatar-large {
   font-size: 18px;
+  border-radius: 4px;
   height: 48px;
   line-height: 28px;
   width: 48px;
@@ -55,6 +56,7 @@
 
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
+  border-radius: 4px;
   height: 56px;
   line-height: 28px;
   width: 56px;
@@ -106,6 +108,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 16px;
+  padding-bottom: 0;
 }
 
 .e-bigger .e-card .e-card-header .e-card-content,
@@ -159,7 +162,7 @@
 
 .e-bigger .e-card .e-card-actions,
 .e-bigger.e-card .e-card-actions {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .e-bigger .e-card .e-card-actions.e-card-vertical,
@@ -357,6 +360,7 @@
   min-height: 22.5px;
   padding: 12px;
   width: inherit;
+  padding-bottom: 0;
 }
 
 .e-card .e-card-header .e-card-content {
@@ -463,7 +467,7 @@
   display: inline-block;
   -ms-flex-pack: start;
       justify-content: flex-start;
-  padding: 16px 20px;
+  padding: 12px;
 }
 
 .e-card .e-card-actions.e-card-vertical {
@@ -578,7 +582,7 @@
 .e-card {
   -webkit-tap-highlight-color: #0d6efd;
   background-color: #fff;
-  border: 1px solid #ced4da;
+  border: 1px solid #dee2e6;
   box-shadow: none;
   color: #212529;
   outline: none;
@@ -764,7 +768,7 @@
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   right: 22px;
 }
 
@@ -772,7 +776,7 @@
   border-radius: 50%;
   left: 22px;
   right: auto;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter.e-splitter-vertical.e-rtl .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -982,14 +986,14 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow:not(.e-arrow-down) {
   border-radius: 50%;
-  bottom: 18px;
+  bottom: 20px;
   left: 22px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down {
   border-radius: 50%;
   right: 22px;
-  top: 18px;
+  top: 20px;
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::before, .e-splitter .e-split-bar.e-split-bar-vertical .e-navigate-arrow.e-arrow-down::after {
@@ -1111,7 +1115,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-right, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-left, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-navigate-arrow.e-arrow-right {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1166,7 +1170,7 @@
 }
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover .e-navigate-arrow.e-arrow-down, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-up, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active .e-navigate-arrow.e-arrow-down {
-  background-color: #fff;
+  background-color: transparent;
   border-color: #0d6efd;
   border-width: 1px;
   opacity: .9;
@@ -1360,7 +1364,7 @@
 }
 
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
-  border-bottom: none;
+  border-bottom: 1px solid #dee2e6;
   color: #212529;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 14px;

package/styles/card/_bootstrap5-definition.scss

@@ -24,6 +24,7 @@ $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;
@@ -48,13 +49,13 @@ $card-action-btn-icon-height: 24px !default;
 $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-bigger-padding: 16px !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;
@@ -65,7 +66,7 @@ $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 20px !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;
@@ -78,7 +79,7 @@ $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: 16px 20px !default;
+$card-action-nrml-padding: 12px !default;
 //Layout Variables End
 
 //Theme Variables Start
@@ -92,7 +93,7 @@ $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: $gray-400 !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;

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

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

package/styles/card/_layout.scss

@@ -51,6 +51,10 @@
       min-height: $card-header-bigger-minheight;
       padding: $card-header-bigger-padding;
 
+      @if $skin-name == 'bootstrap5' {
+        padding-bottom: $card-header-bigger-padding-bottom;
+      }
+
       .e-card-content {
         padding-left: 0;
         padding-right: 0;
@@ -281,6 +285,10 @@
       padding: $card-header-nrml-padding;
       width: inherit;
 
+      @if $skin-name == 'bootstrap5' {
+        padding-bottom: $card-header-nrml-padding-bottom;
+      }
+
       .e-card-content {
         padding-left: 0;
         padding-right: 0;