@syncfusion/ej2-layouts 19.3.53 → 19.4.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.53
+*  version : 19.4.48
 *  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.3.44",
+  "_id": "@syncfusion/ej2-layouts@19.4.47",
   "_inBundle": false,
-  "_integrity": "sha512-+tAdEU4xho9kvR35bvJnp4xfh5vb5hayEZ/4/iWMkgzGN/+YmoZ7rAySqyjk5XIrN9AVV6nYqHduNhBgqKQBTQ==",
+  "_integrity": "sha512-k2D2jBLKMl8Sn7PiSp5d3phARZNgP+sphvnC47DsXF45jQbbCxEXBZQddjmbgpaZSx3YzCQkMQypNHruj2ad4A==",
   "_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/@syncfusion/ej2-layouts/-/ej2-layouts-19.3.44.tgz",
-  "_shasum": "a83ee561cb5b9b02f20271de35a222269fefd27d",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-19.4.47.tgz",
+  "_shasum": "00745c5b3b99242be66ebbef86c9adaf4a60b8a4",
   "_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.3.53"
+    "@syncfusion/ej2-base": "~19.4.48"
   },
   "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.3.53",
+  "version": "19.4.48",
   "sideEffects": false
 }

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

@@ -872,8 +872,9 @@ var DashboardLayout = /** @class */ (function (_super) {
         else {
             if (this.element.classList.contains(responsive)) {
                 removeClass([this.element], [responsive]);
-                for (var i = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
-                    var ele = this.element.querySelectorAll('.e-panel')[i];
+                var internalPanels = this.element.querySelectorAll(((this.element.id) ? '#' + this.element.id + ' > ' : '') + '.e-panel');
+                for (var i = 0; i < internalPanels.length; i++) {
+                    var ele = internalPanels[i];
                     var cellInstance = this.getCellInstance(ele.id);
                     var row = parseInt(ele.getAttribute('data-row'), 10);
                     var col = parseInt(ele.getAttribute('data-col'), 10);

package/src/splitter/splitter.d.ts

@@ -321,6 +321,7 @@ export declare class Splitter extends Component<HTMLElement> {
      */
     onPropertyChanged(newProp: SplitterModel, oldProp: SplitterModel): void;
     private updatePaneSize;
+    protected initializeValues(): void;
     protected preRender(): void;
     protected getPersistData(): string;
     /**

package/src/splitter/splitter.js

@@ -118,25 +118,7 @@ var Splitter = /** @class */ (function (_super) {
      * @param element  - Specifies the element that is rendered as an Splitter.
      */
     function Splitter(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.allPanes = [];
-        _this.paneOrder = [];
-        _this.separatorOrder = [];
-        _this.allBars = [];
-        _this.previousCoordinates = {};
-        _this.currentCoordinates = {};
-        _this.updatePrePaneInPercentage = false;
-        _this.updateNextPaneInPercentage = false;
-        _this.panesDimensions = [];
-        _this.border = 0;
-        _this.validDataAttributes = ['data-size', 'data-min', 'data-max', 'data-collapsible',
-            'data-resizable', 'data-content', 'data-collapsed'];
-        _this.validElementAttributes = ['data-orientation', 'data-width', 'data-height'];
-        _this.iconsDelay = 300;
-        _this.templateElement = [];
-        _this.collapseFlag = false;
-        _this.expandFlag = true;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
@@ -259,7 +241,27 @@ var Splitter = /** @class */ (function (_super) {
         }
         this.allPanes[index].classList.add(STATIC_PANE);
     };
+    Splitter.prototype.initializeValues = function () {
+        this.allPanes = [];
+        this.paneOrder = [];
+        this.separatorOrder = [];
+        this.allBars = [];
+        this.previousCoordinates = {};
+        this.currentCoordinates = {};
+        this.updatePrePaneInPercentage = false;
+        this.updateNextPaneInPercentage = false;
+        this.panesDimensions = [];
+        this.border = 0;
+        this.validDataAttributes = ['data-size', 'data-min', 'data-max', 'data-collapsible',
+            'data-resizable', 'data-content', 'data-collapsed'];
+        this.validElementAttributes = ['data-orientation', 'data-width', 'data-height'];
+        this.iconsDelay = 300;
+        this.templateElement = [];
+        this.collapseFlag = false;
+        this.expandFlag = true;
+    };
     Splitter.prototype.preRender = function () {
+        this.initializeValues();
         this.onReportWindowSize = this.reportWindowSize.bind(this);
         this.onMouseMoveHandler = this.onMouseMove.bind(this);
         this.onMouseUpHandler = this.onMouseUp.bind(this);

package/styles/avatar/_fluent-definition.scss

@@ -0,0 +1,25 @@
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-base !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 24px !default;
+$avatar-base-text-color: $icon-color !default;
+$avatar-base-font-weight: $font-weight-normal !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-xl !default;
+$avatar-xlarge-font-size: $text-2xl !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/_layout.scss

@@ -17,7 +17,7 @@
     overflow: hidden;
     position: relative;
     width: $avatar-base-width;
-    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
       line-height: $avatar-base-line-height;
     }
 
@@ -32,7 +32,7 @@
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         height: 24px;
         line-height: $avatar-base-xsmall-line-height;
         width: 24px;
@@ -41,7 +41,7 @@
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
         height: 32px;
         line-height: $avatar-base-small-line-height;
         width: 32px;
@@ -50,7 +50,7 @@
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
+      @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;
         width: 48px;
@@ -59,7 +59,7 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5') {
+      @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;
         width: 56px;

package/styles/bootstrap-dark.css

@@ -885,7 +885,8 @@
 .e-splitter .e-split-bar.e-split-bar-vertical {
   -ms-flex-align: center;
       align-items: center;
-  border: none;
+  border-left: none;
+  border-right: none;
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 0 0 auto;
@@ -1073,7 +1074,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal {
   background: #484848;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
@@ -1097,6 +1099,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
   background: #0070f0;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
@@ -1155,6 +1159,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0070f0;
+  border-left: none;
+  border-right: none;
 }
 
 .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 {

package/styles/bootstrap.css

@@ -886,7 +886,8 @@
 .e-splitter .e-split-bar.e-split-bar-vertical {
   -ms-flex-align: center;
       align-items: center;
-  border: none;
+  border-left: none;
+  border-right: none;
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 0 0 auto;
@@ -1074,7 +1075,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal {
   background: #ddd;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
@@ -1098,6 +1100,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
   background: #317ab9;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
@@ -1156,6 +1160,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #317ab9;
+  border-left: none;
+  border-right: none;
 }
 
 .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 {

package/styles/bootstrap4.css

@@ -892,7 +892,8 @@
 .e-splitter .e-split-bar.e-split-bar-vertical {
   -ms-flex-align: center;
       align-items: center;
-  border: none;
+  border-left: none;
+  border-right: none;
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 0 0 auto;
@@ -1080,7 +1081,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal {
   background: #dee2e6;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
@@ -1104,6 +1106,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
   background: #007bff;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
@@ -1162,6 +1166,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #007bff;
+  border-left: none;
+  border-right: none;
 }
 
 .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 {

package/styles/bootstrap5-dark.css

@@ -887,7 +887,8 @@
 .e-splitter .e-split-bar.e-split-bar-vertical {
   -ms-flex-align: center;
       align-items: center;
-  border: none;
+  border-left: none;
+  border-right: none;
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 0 0 auto;
@@ -1075,7 +1076,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal {
   background: #444c54;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
@@ -1099,6 +1101,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
   background: #0d6efd;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
@@ -1157,6 +1161,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;
+  border-left: none;
+  border-right: none;
 }
 
 .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 {

package/styles/bootstrap5.css

@@ -887,7 +887,8 @@
 .e-splitter .e-split-bar.e-split-bar-vertical {
   -ms-flex-align: center;
       align-items: center;
-  border: none;
+  border-left: none;
+  border-right: none;
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 0 0 auto;
@@ -1075,7 +1076,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal {
   background: #dee2e6;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler {
@@ -1099,6 +1101,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
   background: #0d6efd;
+  border-left: none;
+  border-right: none;
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler, .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
@@ -1157,6 +1161,8 @@
 
 .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-hover, .e-splitter .e-split-bar.e-split-bar-vertical.e-split-bar-active {
   background: #0d6efd;
+  border-left: none;
+  border-right: none;
 }
 
 .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 {

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

@@ -26,6 +26,7 @@ $card-action-btn-font: 14px !default;
 $card-nrml-content-padding: 16px !default;
 $card-nrml-nested-content-padding: 16px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-title-nrml-padding: 8px !default;
 $card-action-nrml-padding: 8px !default;
 $card-action-nrml-nested-margin: 8px !default;

package/styles/card/_bootstrap-definition.scss

@@ -11,6 +11,7 @@ $card-title-font: 17px !default;
 $card-action-btn-icon-font: 14px !default;
 $card-action-btn-font: 14px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-header-title-font: 14px !default;
 $card-header-sub-title-font: 14px !default;
 

package/styles/card/_bootstrap5-definition.scss

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

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

@@ -27,6 +27,7 @@ $card-action-btn-font: 14px !default;
 $card-nrml-content-padding: 16px !default;
 $card-nrml-nested-content-padding: 16px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-title-nrml-padding: 8px !default;
 $card-action-nrml-padding: 8px !default;
 $card-action-nrml-nested-margin: 8px !default;

package/styles/card/_fabric-definition.scss

@@ -11,6 +11,7 @@ $card-title-font: 17px !default;
 $card-action-btn-icon-font: 14px !default;
 $card-action-btn-font: 14px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-header-title-font: 14px !default;
 $card-header-sub-title-font: 14px !default;
 

package/styles/card/_fluent-definition.scss

@@ -0,0 +1,124 @@
+$skin-name: 'FluentUI' !default;
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: $model-radius !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-lg !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-xs !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-normal !default;
+$card-title-nrml-padding: 16px !default;
+$card-title-nrml-lheight: $leading-normal !default;
+$card-hor-image-margin: 0 !default;
+$card-sep-margin: 12px 0 !default;
+$card-header-minheight: 22.5px !default;
+$card-header-nrml-padding: 16px 16px 0 16px !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: 30px !default;
+$card-header-image-height: 30px !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 6px 0 !default;
+$card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-margin: 0 0 0 6px !default;
+$card-action-btn-nrml-padding: 0 6px !default;
+$card-nrml-content-padding: 16px !default;
+$card-header-txt-nrml-title-font: $text-base !default;
+$card-header-txt-nrml-subtitle-font: $text-xs !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: 20px 20px 0 20px !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 20px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 0 !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-bigger-padding: 20px 20px 16px 20px !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: 40px !default;
+$card-header-image-bigger-height: 40px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;
+$card-image-title-bigger-mheight: 40px !default;
+$card-action-bigger-vertical-padding: 16px !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 6px !default;
+$card-bigger-content-padding: 20px !default;
+$card-header-txt-bigger-title-font: $text-lg !default;
+$card-header-txt-bigger-subtitle-font: $text-sm !default;
+$card-image-title-bigger-font: $text-lg !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 8px 16px !default;
+$card-img-title-bigger-padding: 12px 20px !default;
+$card-action-nrml-padding: 16px !default;
+$card-action-bigger-padding: 20px !default;
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: $primary !default;
+$card-bg-color: $flyout-bg-color !default;
+$card-focus-bg-color: $flyout-bg-color !default;
+$card-hover-bg-color: $flyout-bg-color !default;
+$card-active-bg-color: $flyout-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: 0  !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: $shadow-sm !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: $shadow-lg !default;
+//Theme Variables End
+
+$card-hover-class-box-shadow: $shadow-lg !default;
+$card-selection-class-border: 1px solid $border-selected !default;
+$card-selection-class-box-shadow: $shadow-lg !default;

package/styles/card/_highcontrast-definition.scss

@@ -11,6 +11,7 @@ $card-title-font: 17px !default;
 $card-action-btn-icon-font: 14px !default;
 $card-action-btn-font: 14px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-header-title-font: 14px !default;
 $card-header-sub-title-font: 14px !default;
 

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

@@ -27,6 +27,7 @@ $card-action-btn-font: 14px !default;
 $card-nrml-content-padding: 16px !default;
 $card-nrml-nested-content-padding: 16px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-title-nrml-padding: 8px !default;
 $card-action-nrml-padding: 8px !default;
 $card-action-nrml-nested-margin: 8px !default;

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

@@ -22,6 +22,7 @@ $card-action-btn-font: 14px !default;
 $card-nrml-content-padding: 16px !default;
 $card-nrml-nested-content-padding: 16px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-title-nrml-padding: 8px !default;
 $card-action-nrml-padding: 8px !default;
 $card-action-nrml-nested-margin: 8px !default;

package/styles/card/_material-definition.scss

@@ -11,6 +11,7 @@ $card-title-font: 18px !default;
 $card-action-btn-icon-font: 14px !default;
 $card-action-btn-font: 14px !default;
 $card-content-font-size: 14px !default;
+$card-content-bigger-font-size: 16px !default;
 $card-header-title-font: 15px !default;
 $card-header-sub-title-font: 14px !default;
 

package/styles/card/_tailwind-definition.scss

@@ -9,6 +9,7 @@ $card-title-font: 16px !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-sm !default;
 $card-header-sub-title-font: $text-sm !default;
 // Mouse

package/styles/card/_theme.scss

@@ -90,4 +90,15 @@
       color: $card-content-font-color;
     }
   }
+
+  @if $skin-name == 'FluentUI' {
+    .e-card-hover:hover {
+      box-shadow: $card-hover-class-box-shadow;
+    }
+
+    .e-card-active:active {
+      border: $card-selection-class-border;
+      box-shadow: $card-selection-class-box-shadow;
+    }
+  }
 }