@syncfusion/ej2-layouts 19.3.53 → 19.4.38

package/.github/PULL_REQUEST_TEMPLATE/Bug.md

@@ -0,0 +1,41 @@
+### Bug description
+
+(Clearly and concisely describe the problem.)
+                
+### Root Cause / Analysis
+
+(Briefly describe root cause/analysis of the problem. If there is an internal discussion on the forum, provide the link.)
+                
+### Reason for not identifying earlier
+
+(Explain how it was missed to identify in our earlier testing/development.)
+                
+### Is Breaking issue.?
+
+(If it is a breaking issue, provide the commit detail which caused this break.)
+
+### Is reported by customer in incident/forum.?
+
+(If it is reported by customer, provide the incident or forum details.)
+
+### Solution Description
+
+(Describe your code changes in detail for reviewers.)
+
+### Areas affected and ensured
+
+(List out the areas are affected by your code changes.)
+
+### E2E report details against this fix
+
+(Run E2E locally and mention the details with mail attachment.)
+
+### Did you included unit test cases.?
+
+(Provide unit testing spec coverage details.)
+
+### Is there any API name changes.?
+
+/label ~bug
+/assign @ScrumMaster
+/cc @ProductOwner

package/.github/PULL_REQUEST_TEMPLATE/Feature.md

@@ -0,0 +1,27 @@
+### Feature description
+
+(Clearly and concisely describe the feature.)
+                
+### Analysis / Design
+
+(Briefly describe analysis of the feature. If there is an internal discussion on the Forum, provide the link.)
+
+### Solution Description
+
+(Describe your code changes in detail for reviewers.)
+
+### Areas affected and ensured
+
+(List out the areas are affected by your code changes.)
+
+### Did you included unit test cases.?
+
+(Provide unit testing spec coverage details.)
+
+### Is there any API name changes.?
+
+(Provide new or update of API details)
+
+/label ~bug
+/assign @ScrumMaster
+/cc @ProductOwner

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.3.44 (2021-10-05)
+## 19.3.43 (2021-09-30)
 
 ### Splitter
 
@@ -10,14 +10,6 @@
 
 - `#I341650` - The issue with "Resize event handler is not properly un-wired, when destroying the splitter component" has been resolved.
 
-## 19.2.55 (2021-08-11)
-
-### Dashboard Layout
-
-#### Bug Fixes
-
-- `#I306072` - The Floating issue in Dashboard Layout when the scroll bar is in the middle of the page has been resolved.
-
 ## 19.2.48 (2021-07-20)
 
 ### Splitter

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-layouts.umd.min.js
-*  version : 19.3.53
+*  version : 19.4.38
 *  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 : 19.3.53
+*  version : 19.4.38
 *  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 : 19.3.53
+*  version : 19.4.38
 *  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.6.1",
   "_inBundle": false,
-  "_integrity": "sha512-+tAdEU4xho9kvR35bvJnp4xfh5vb5hayEZ/4/iWMkgzGN/+YmoZ7rAySqyjk5XIrN9AVV6nYqHduNhBgqKQBTQ==",
+  "_integrity": "sha512-yZstbGKh0iOM7GI35dTDE5aGS9VbAjQ6txU9DECtFqvti2S3REdvhp4xNv2+pPEC7d+yYFvB3/wkoNBvhkHwNw==",
   "_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-release/@syncfusion/ej2-layouts/-/ej2-layouts-19.6.1.tgz",
+  "_shasum": "55c4a2968ce826fb4c44a1761da70d1813dfd349",
   "_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.38"
   },
   "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.38",
   "sideEffects": false
 }

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;
+    }
+  }
 }