@syncfusion/ej2-angular-layouts 21.2.9 → 22.1.34

package/license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-angular-layouts@*",
-  "_id": "@syncfusion/ej2-angular-layouts@21.2.6",
+  "_id": "@syncfusion/ej2-angular-layouts@20.1.58",
   "_inBundle": false,
-  "_integrity": "sha512-+x1jj8HqYyYL6enkQuwpQc+VU4Amm2nuUVvQKTiY1VPq2Z/RpcuFFocKZ0oB1beO6jr1l87N3nE+m3kE8nIZNQ==",
+  "_integrity": "sha512-L+OQqsOLo+EOYFKVuLOJ6fMnFmhLLjwVHzI72XBKfYHz6i51KIUqHpzWjMEbX9sP0Sz6HEStGpq5F0Z9CTfpCA==",
   "_location": "/@syncfusion/ej2-angular-layouts",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-angular-hotfix/@syncfusion/ej2-angular-layouts/-/ej2-angular-layouts-21.2.6.tgz",
-  "_shasum": "856a304817dd028744837f2da72c5a8c088ed5fd",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-angular-release/@syncfusion/ej2-angular-layouts/-/ej2-angular-layouts-20.1.58.tgz",
+  "_shasum": "38a553b2041347f7fa8305ad38f30ff2fcd5f731",
   "_spec": "@syncfusion/ej2-angular-layouts@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/ivypackages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-angular-base": "~21.2.3",
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-layouts": "21.2.9",
+    "@syncfusion/ej2-angular-base": "~22.1.34",
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-layouts": "22.1.34",
     "tslib": "^2.3.0"
   },
   "deprecated": false,
@@ -57,6 +57,15 @@
   "fesm2020": "fesm2020/syncfusion-ej2-angular-layouts.mjs",
   "homepage": "https://www.syncfusion.com/angular-components",
   "keywords": [
+    "splitter",
+    "split-panes",
+    "split-layout",
+    "split-view",
+    "split-area",
+    "resizable-splitter",
+    "split-container",
+    "dashboardlayout",
+    "panels",
     "angular-splitter",
     "ng-splitter",
     "angular-split-panes",
@@ -76,5 +85,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "syncfusion-ej2-angular-layouts.d.ts",
-  "version": "21.2.9"
+  "version": "22.1.34"
 }

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-layouts';
-export const pkgVer = '^21.2.9';
+export const pkgVer = '^20.1.58';
 export const moduleName = 'SplitterModule, DashboardLayoutModule';
-export const themeVer = '~21.2.9';
+export const themeVer = '~20.1.58';

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

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

package/styles/avatar/_material3-definition.scss

@@ -0,0 +1,26 @@
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: rgba($primary-light) !default;
+$avatar-base-font-size: $text-xl !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 20px !default;
+$avatar-base-text-color: rgba($primary-darker) !default;
+$avatar-base-font-weight: 500 !default;
+$avatar-base-img-height: 100% !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: 14px !default;
+$avatar-small-font-size: 18px !default;
+$avatar-large-font-size: 26px !default;
+$avatar-xlarge-font-size: 30px !default;
+$avatar-large-border-radius: 4px !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 14px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 26px !default;
+$avatar-base-xlarge-line-height: 30px !default;

package/styles/avatar/material3-dark.css

@@ -0,0 +1,114 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
+:root {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 208, 188, 255;
+  --color-sf-primary-container: 79, 55, 139;
+  --color-sf-secondary: 204, 194, 220;
+  --color-sf-secondary-container: 74, 68, 88;
+  --color-sf-tertiary: 239, 184, 200;
+  --color-sf-tertiary-container: 99, 59, 72;
+  --color-sf-surface: 28, 27, 31;
+  --color-sf-surface-variant: 73, 69, 79;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 55, 30, 115;
+  --color-sf-on-primary-container: 234, 221, 255;
+  --color-sf-on-secondary: 51, 45, 65;
+  --color-sf-on-secondary-container: 232, 222, 248;
+  --color-sf-on-tertiary: 73, 37, 50;
+  --color-sf-on-tertiary-containe: 255, 216, 228;
+  --color-sf-on-surface: 230, 225, 229;
+  --color-sf-on-surface-variant: 202, 196, 208;
+  --color-sf-on-background: 230, 225, 229;
+  --color-sf-outline: 147, 143, 153;
+  --color-sf-outline-variant: 68, 71, 70;
+  --color-sf-shadow: 0, 0, 0;
+  --color-sf-surface-tint-color: 208, 188, 255;
+  --color-sf-inverse-surface: 230, 225, 229;
+  --color-sf-inverse-on-surface: 49, 48, 51;
+  --color-sf-inverse-primary: 103, 80, 164;
+  --color-sf-scrim: 0, 0, 0;
+  --color-sf-error: 242, 184, 181;
+  --color-sf-error-container: 140, 29, 24;
+  --color-sf-on-error: 96, 20, 16;
+  --color-sf-on-error-container: 249, 222, 220;
+  --color-sf-success: 83, 202, 23;
+  --color-sf-success-container: 22, 62, 2;
+  --color-sf-on-success: 13, 39, 0;
+  --color-sf-on-success-container: 183, 250, 150;
+  --color-sf-info: 71, 172, 251;
+  --color-sf-info-container: 0, 67, 120;
+  --color-sf-on-info: 0, 51, 91;
+  --color-sf-on-info-container: 173, 219, 255;
+  --color-sf-warning: 245, 180, 130;
+  --color-sf-warning-container: 123, 65, 0;
+  --color-sf-on-warning: 99, 52, 0;
+  --color-sf-on-warning-container: 255, 220, 193;
+  --color-sf-spreadsheet-gridline: 231, 224, 236;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-success-text: 0, 0, 0;
+  --color-sf-warning-text: 0, 0, 0;
+  --color-sf-info-text: 0, 0, 0;
+  --color-sf-danger-text: 0, 0, 0;
+  --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}
+
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: rgba(var(--color-sf-primary-container));
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: rgba(var(--color-sf-on-primary-container));
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 20px;
+}
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-xsmall {
+  font-size: 14px;
+  height: 24px;
+  line-height: 14px;
+  width: 24px;
+}
+.e-avatar.e-avatar-small {
+  font-size: 18px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+.e-avatar.e-avatar-large {
+  font-size: 26px;
+  height: 48px;
+  line-height: 26px;
+  width: 48px;
+}
+.e-avatar.e-avatar-xlarge {
+  font-size: 30px;
+  height: 56px;
+  line-height: 30px;
+  width: 56px;
+}

package/styles/avatar/material3-dark.scss

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

package/styles/avatar/material3.css

@@ -0,0 +1,170 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
+:root {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 103, 80, 164;
+  --color-sf-primary-container: 234, 221, 255;
+  --color-sf-secondary: 98, 91, 113;
+  --color-sf-secondary-container: 232, 222, 248;
+  --color-sf-tertiary: 125, 82, 96;
+  --color-sf-tertiary-container: 255, 216, 228;
+  --color-sf-surface: 255, 255, 255;
+  --color-sf-surface-variant: 231, 224, 236;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 255, 255, 255;
+  --color-sf-on-primary-container: 33, 0, 94;
+  --color-sf-on-secondary: 255, 255, 255;
+  --color-sf-on-secondary-container: 30, 25, 43;
+  --color-sf-on-tertiary: 255, 255, 255;
+  --color-sf-on-tertiary-containe: 55, 11, 30;
+  --color-sf-on-surface: 28, 27, 31;
+  --color-sf-on-surface-variant: 73, 69, 78;
+  --color-sf-on-background: 28, 27, 31;
+  --color-sf-outline: 121, 116, 126;
+  --color-sf-outline-variant: 196, 199, 197;
+  --color-sf-shadow: 0, 0, 0;
+  --color-sf-surface-tint-color: 103, 80, 164;
+  --color-sf-inverse-surface: 49, 48, 51;
+  --color-sf-inverse-on-surface: 244, 239, 244;
+  --color-sf-inverse-primary: 208, 188, 255;
+  --color-sf-scrim: 0, 0, 0;
+  --color-sf-error: 179, 38, 30;
+  --color-sf-error-container: 249, 222, 220;
+  --color-sf-on-error: 255, 250, 250;
+  --color-sf-on-error-container: 65, 14, 11;
+  --color-sf-success: 32, 81, 7;
+  --color-sf-success-container: 209, 255, 186;
+  --color-sf-on-success: 244, 255, 239;
+  --color-sf-on-success-container: 13, 39, 0;
+  --color-sf-info: 1, 87, 155;
+  --color-sf-info-container: 233, 245, 255;
+  --color-sf-on-info: 250, 253, 255;
+  --color-sf-on-info-container: 0, 51, 91;
+  --color-sf-warning: 145, 76, 0;
+  --color-sf-warning-container: 254, 236, 222;
+  --color-sf-on-warning: 255, 255, 255;
+  --color-sf-on-warning-container: 47, 21, 0;
+  --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
+  --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
+  --color-sf-diagram-palette-background: --color-sf-white;
+  --color-sf-success-text: 255, 255, 255;
+  --color-sf-warning-text: 255, 255, 255;
+  --color-sf-danger-text: 255, 255, 255;
+  --color-sf-info-text: 255, 255, 255;
+  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
+  --color-sf-secondary-bg-color: var(--color-sf-surface);
+}
+
+.e-dark-mode {
+  --color-sf-black: 0, 0, 0;
+  --color-sf-white: 255, 255, 255;
+  --color-sf-primary: 208, 188, 255;
+  --color-sf-primary-container: 79, 55, 139;
+  --color-sf-secondary: 204, 194, 220;
+  --color-sf-secondary-container: 74, 68, 88;
+  --color-sf-tertiary: 239, 184, 200;
+  --color-sf-tertiary-container: 99, 59, 72;
+  --color-sf-surface: 28, 27, 31;
+  --color-sf-surface-variant: 28, 27, 31;
+  --color-sf-background: var(--color-sf-surface);
+  --color-sf-on-primary: 55, 30, 115;
+  --color-sf-on-primary-container: 234, 221, 255;
+  --color-sf-on-secondary: 51, 45, 65;
+  --color-sf-on-secondary-container: 232, 222, 248;
+  --color-sf-on-tertiary: 73, 37, 50;
+  --color-sf-on-tertiary-containe: 255, 216, 228;
+  --color-sf-on-surface: 230, 225, 229;
+  --color-sf-on-surface-variant: 202, 196, 208;
+  --color-sf-on-background: 230, 225, 229;
+  --color-sf-outline: 147, 143, 153;
+  --color-sf-outline-variant: 68, 71, 70;
+  --color-sf-shadow: 0, 0, 0;
+  --color-sf-surface-tint-color: 208, 188, 255;
+  --color-sf-inverse-surface: 230, 225, 229;
+  --color-sf-inverse-on-surface: 49, 48, 51;
+  --color-sf-inverse-primary: 103, 80, 164;
+  --color-sf-scrim: 0, 0, 0;
+  --color-sf-error: 242, 184, 181;
+  --color-sf-error-container: 140, 29, 24;
+  --color-sf-on-error: 96, 20, 16;
+  --color-sf-on-error-container: 249, 222, 220;
+  --color-sf-success: 83, 202, 23;
+  --color-sf-success-container: 22, 62, 2;
+  --color-sf-on-success: 13, 39, 0;
+  --color-sf-on-success-container: 183, 250, 150;
+  --color-sf-info: 71, 172, 251;
+  --color-sf-info-container: 0, 67, 120;
+  --color-sf-on-info: 0, 51, 91;
+  --color-sf-on-info-container: 173, 219, 255;
+  --color-sf-warning: 245, 180, 130;
+  --color-sf-warning-container: 123, 65, 0;
+  --color-sf-on-warning: 99, 52, 0;
+  --color-sf-on-warning-container: 255, 220, 193;
+  --color-sf-spreadsheet-gridline: 231, 224, 236;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-success-text: 0, 0, 0;
+  --color-sf-warning-text: 0, 0, 0;
+  --color-sf-info-text: 0, 0, 0;
+  --color-sf-danger-text: 0, 0, 0;
+  --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
+  --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
+}
+
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  background-color: rgba(var(--color-sf-primary-container));
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 4px;
+  color: rgba(var(--color-sf-on-primary-container));
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  height: 40px;
+  -ms-flex-pack: center;
+      justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 20px;
+}
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
+  border-radius: 50%;
+}
+.e-avatar.e-avatar-xsmall {
+  font-size: 14px;
+  height: 24px;
+  line-height: 14px;
+  width: 24px;
+}
+.e-avatar.e-avatar-small {
+  font-size: 18px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+.e-avatar.e-avatar-large {
+  font-size: 26px;
+  height: 48px;
+  line-height: 26px;
+  width: 48px;
+}
+.e-avatar.e-avatar-xlarge {
+  font-size: 30px;
+  height: 56px;
+  line-height: 30px;
+  width: 56px;
+}

package/styles/avatar/material3.scss

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

package/styles/bootstrap4.css

@@ -56,7 +56,7 @@
 }
 .e-bigger .e-card .e-card-content,
 .e-bigger.e-card .e-card-content {
-  font-size: 16px;
+  font-size: 14px;
 }
 .e-bigger .e-card > .e-card-header-title,
 .e-bigger.e-card > .e-card-header-title {
@@ -92,6 +92,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 20px;
+  padding-bottom: 0;
 }
 .e-bigger .e-card .e-card-header .e-card-content,
 .e-bigger.e-card .e-card-header .e-card-content {
@@ -178,7 +179,7 @@
 }
 .e-bigger .e-card .e-card-content,
 .e-bigger.e-card .e-card-content {
-  padding: 20px;
+  padding: 16px;
 }
 .e-bigger .e-card .e-card-content + :not(.e-card-content),
 .e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,

package/styles/card/_bootstrap4-definition.scss

@@ -60,6 +60,7 @@ $card-hor-image-bigger-margin: 2px !default;
 $card-sep-bigger-margin: 16px 0 !default;
 $card-header-bigger-minheight: 30px !default;
 $card-header-bigger-padding: 20px !default;
+$card-header-bigger-padding-bottom: 0 !default;
 $card-header-txt-bigger-padding: 0 0 0 12px !default;
 $card-header-txt-title-bigger-lheight: 24px !default;
 $card-header-txt-title-bigger-padding: 12px 0 0 !default;
@@ -76,10 +77,10 @@ $card-action-bigger-btn-vertical-margin: 0 0 10px 0 !default;
 $card-action-btn-bigger-height: 38px !default;
 $card-action-btn-bigger-margin: 0 0 0 20px !default;
 $card-action-btn-bigger-padding: 0 6px !default;
-$card-bigger-content-padding: 20px !default;
+$card-bigger-content-padding: 16px !default;
 $card-header-txt-bigger-title-font: 20px !default;
 $card-txt-bigger-title-font: 20px !default;
-$card-content-bigger-font-size: 16px !default;
+$card-content-bigger-font-size: 14px !default;
 $card-header-txt-bigger-subtitle-font: 16px !default;
 $card-image-title-bigger-font: 20px !default;
 $card-action-btn-bigger-icon-width: 24px !default;

package/styles/card/_layout.scss

@@ -52,7 +52,7 @@
       min-height: $card-header-bigger-minheight;
       padding: $card-header-bigger-padding;
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
         padding-bottom: $card-header-bigger-padding-bottom;
       }
 
@@ -178,7 +178,7 @@
     &:hover {
       @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
         border-width: 2px;
-        padding: 0;
+        padding: 1px;
       }
     }
 

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

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

package/styles/card/_material3-definition.scss

@@ -0,0 +1,125 @@
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: 12px !default;
+$card-action-btn-txt-transform: none !default;
+
+// Font
+$card-header-font: $text-sm !default;
+$card-title-font: $text-sm !default;
+$card-action-btn-icon-font: $text-xs !default;
+$card-action-btn-font: $text-xs !default;
+$card-content-font-size: $text-sm !default;
+$card-content-bigger-font-size: $text-sm !default;
+$card-header-title-font: $text-sm !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-snug !default;
+$card-title-nrml-padding: 12px !default;
+$card-title-nrml-lheight: $leading-normal !default;
+$card-hor-image-margin: 2px !default;
+$card-sep-margin: 12px 0 !default;
+$card-header-minheight: 22.5px !default;
+$card-header-nrml-padding: 12px !default;
+$card-header-nrml-padding-bottom: 0 !default;
+$card-header-txt-nrml-padding: 0 0 0 12px !default;
+$card-header-txt-title-lheight: $leading-normal !default;
+$card-header-txt-title-nrml-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-lheight: $leading-normal !default;
+$card-header-image-width: 52px !default;
+$card-header-image-height: 50px !default;
+$card-image-mheight: 112.5px !default;
+$card-image-title-lheight: 30px !default;
+$card-image-title-mheight: 30px !default;
+$card-action-nrml-vertical-padding: 12px !default;
+$card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-height: 30px !default;
+$card-action-btn-nrml-margin: 0 0 0 8px !default;
+$card-action-btn-nrml-padding: 0 6px !default;
+$card-nrml-content-padding: 12px !default;
+$card-header-txt-nrml-title-font: $text-sm !default;
+$card-header-txt-nrml-subtitle-font: $text-xs !default;
+$card-image-title-font: $text-sm !default;
+$card-action-btn-icon-width: 24px !default;
+$card-action-btn-icon-height: 24px !default;
+
+// Touch
+$card-bigger-lheight: 48px !default;
+$card-bigger-mheight: 48px !default;
+$card-header-bigger-padding: 16px !default;
+$card-header-bigger-padding-bottom: 0 !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 16px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 2px !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-txt-bigger-padding: 0 0 0 16px !default;
+$card-header-txt-title-bigger-lheight: $leading-normal !default;
+$card-header-txt-title-bigger-padding: 8px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
+$card-header-image-bigger-width: 55px !default;
+$card-header-image-bigger-height: 60px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;
+$card-image-title-bigger-mheight: 40px !default;
+$card-img-title-bigger-padding: 12px 16px !default;
+$card-action-bigger-padding: 16px !default;
+$card-action-bigger-vertical-padding: 16px 20px !default;
+$card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
+$card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-margin: 0 0 0 13px !default;
+$card-action-btn-bigger-padding: 0 8px !default;
+$card-bigger-content-padding: 16px !default;
+$card-header-txt-bigger-title-font: $text-base !default;
+$card-header-txt-bigger-subtitle-font: $text-sm !default;
+$card-image-title-bigger-font: 16px !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 12px 16px !default;
+$card-action-nrml-padding: 12px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: rgba($primary) !default;
+$card-bg-color: $content-bg-color-alt1 !default;
+$card-focus-bg-color: $content-bg-color-alt1 !default;
+$card-hover-bg-color: $content-bg-color-alt1 !default;
+$card-active-bg-color: $content-bg-color-alt1 !default;
+$card-focus-brdr-color: rgba($border-light) !default;
+$card-hover-brdr-color: $border-dark !default;
+$card-active-brdr-color: rgba($primary) !default;
+$card-brdr-size: none !default;
+$card-brdr-type: none !default;
+$card-brdr-color: none !default;
+$card-sep-brdr-size: 1px !default;
+$card-sep-brdr-type: solid !default;
+$card-sep-brdr-color: rgba($border-light) !default;
+$card-image-title-color: rgba($white) !default;
+$card-image-title-bg: $overlay-bg-color !default;
+$card-action-btn-bg-color: rgba($primary-bg-color) !default;
+$card-action-btn-font-color: rgba($primary-text) !default;
+$card-action-btn-border: 1px solid rgba($primary) !default;
+$card-action-btn-hover-bg: rgba($primary) !default;
+$card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
+$card-action-btn-hover-font: rgba($primary-text) !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: rgba($secondary-text-color-pressed) !default;
+$card-font-color: rgba($content-text-color) !default;
+$card-header-txt-title-color: rgba($content-text-color) !default;
+$card-header-txt-subtitle-color: rgba($content-text-color) !default;
+$card-content-font-color: rgba($content-text-color) !default;
+$card-box-shadow: $shadow-md !default;
+$card-action-btn-icon-color: rgba($primary) !default;
+$card-hover-box-shadow: $shadow-lg !default;
+
+//Theme Variables End

package/styles/card/bootstrap4.css

@@ -10,7 +10,7 @@
 }
 .e-bigger .e-card .e-card-content,
 .e-bigger.e-card .e-card-content {
-  font-size: 16px;
+  font-size: 14px;
 }
 .e-bigger .e-card > .e-card-header-title,
 .e-bigger.e-card > .e-card-header-title {
@@ -46,6 +46,7 @@
 .e-bigger.e-card .e-card-header {
   min-height: 30px;
   padding: 20px;
+  padding-bottom: 0;
 }
 .e-bigger .e-card .e-card-header .e-card-content,
 .e-bigger.e-card .e-card-header .e-card-content {
@@ -132,7 +133,7 @@
 }
 .e-bigger .e-card .e-card-content,
 .e-bigger.e-card .e-card-content {
-  padding: 20px;
+  padding: 16px;
 }
 .e-bigger .e-card .e-card-content + :not(.e-card-content),
 .e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,

package/styles/card/fabric.css

@@ -158,7 +158,7 @@
 }
 .e-card:hover {
   border-width: 2px;
-  padding: 0;
+  padding: 1px;
 }
 .e-card:active {
   border-width: 2px;

package/styles/card/highcontrast.css

@@ -158,7 +158,7 @@
 }
 .e-card:hover {
   border-width: 2px;
-  padding: 0;
+  padding: 1px;
 }
 .e-card:active {
   border-width: 2px;