@syncfusion/ej2-layouts 26.2.10 → 27.1.48

package/styles/card/tailwind-dark.css

@@ -1,138 +1,3 @@
-.e-bigger .e-card,
-.e-bigger.e-card {
-  line-height: 48px;
-  min-height: 48px;
-}
-.e-bigger .e-card > .e-card-header-title,
-.e-bigger.e-card > .e-card-header-title {
-  line-height: 1.5;
-  padding: 24px 24px 16px 24px;
-}
-.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
-.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card > .e-card-title,
-.e-bigger.e-card > .e-card-title {
-  line-height: 1.5;
-  padding: 8px 24px 16px 24px;
-}
-.e-bigger .e-card > .e-card-title + :not(.e-card-title),
-.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card.e-card-horizontal .e-card-image,
-.e-bigger .e-card.e-card-horizontal img,
-.e-bigger .e-card .e-card-horizontal .e-card-image,
-.e-bigger .e-card .e-card-horizontal img,
-.e-bigger.e-card.e-card-horizontal .e-card-image,
-.e-bigger.e-card.e-card-horizontal img,
-.e-bigger.e-card .e-card-horizontal .e-card-image,
-.e-bigger.e-card .e-card-horizontal img {
-  margin: 2px;
-}
-.e-bigger .e-card .e-card-header,
-.e-bigger.e-card .e-card-header {
-  min-height: 30px;
-  padding: 24px 24px 16px 24px;
-}
-.e-bigger .e-card .e-card-header .e-card-content,
-.e-bigger.e-card .e-card-header .e-card-content {
-  padding-left: 0;
-  padding-right: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption,
-.e-bigger.e-card .e-card-header .e-card-header-caption {
-  padding: 0 0 0 24px;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
-.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
-  padding: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
-  font-size: 14px;
-  line-height: 1.5;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
-  font-size: 16px;
-  line-height: 1.5;
-  padding: 4px 0 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-image,
-.e-bigger.e-card .e-card-header .e-card-header-image {
-  background-size: cover;
-  height: 50px;
-  width: 46px;
-}
-.e-bigger .e-card .e-card-image,
-.e-bigger.e-card .e-card-image {
-  min-height: 150px;
-}
-.e-bigger .e-card .e-card-image .e-card-title,
-.e-bigger.e-card .e-card-image .e-card-title {
-  font-size: 18px;
-  line-height: 1.25;
-  min-height: 40px;
-  padding: 12px 16px;
-}
-.e-bigger .e-card .e-card-actions,
-.e-bigger.e-card .e-card-actions {
-  padding: 24px 24px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-actions.e-card-vertical {
-  padding: 12px 24px 24px 24px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger .e-card .e-card-actions.e-card-vertical a,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger.e-card .e-card-actions.e-card-vertical a {
-  margin: 0 0 8px 0;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
-  margin-bottom: 0;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn span,
-.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
-.e-bigger.e-card .e-card-actions .e-card-btn span,
-.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
-  height: 24px;
-  width: 24px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn,
-.e-bigger .e-card .e-card-actions a,
-.e-bigger.e-card .e-card-actions .e-card-btn,
-.e-bigger.e-card .e-card-actions a {
-  line-height: 38px;
-  margin: 0 0 0 8px;
-  min-height: 38px;
-  padding: 0 6px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger .e-card .e-card-actions a:first-child,
-.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger.e-card .e-card-actions a:first-child {
-  margin-left: 0;
-}
-.e-bigger .e-card .e-card-content,
-.e-bigger.e-card .e-card-content {
-  padding: 0 24px 16px 24px;
-}
-.e-bigger .e-card .e-card-content + :not(.e-card-content),
-.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-content + :not(.e-card-content),
-.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
-  margin-top: 0;
-  padding-top: 0;
-}
-
 .e-card {
   border-radius: 6px;
   -webkit-box-sizing: border-box;
@@ -554,4 +419,139 @@
 }
 .e-card .e-card-content {
   color: #d1d5db;
+}
+
+.e-bigger .e-card,
+.e-bigger.e-card {
+  line-height: 48px;
+  min-height: 48px;
+}
+.e-bigger .e-card > .e-card-header-title,
+.e-bigger.e-card > .e-card-header-title {
+  line-height: 1.5;
+  padding: 24px 24px 16px 24px;
+}
+.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
+.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card > .e-card-title,
+.e-bigger.e-card > .e-card-title {
+  line-height: 1.5;
+  padding: 8px 24px 16px 24px;
+}
+.e-bigger .e-card > .e-card-title + :not(.e-card-title),
+.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card.e-card-horizontal .e-card-image,
+.e-bigger .e-card.e-card-horizontal img,
+.e-bigger .e-card .e-card-horizontal .e-card-image,
+.e-bigger .e-card .e-card-horizontal img,
+.e-bigger.e-card.e-card-horizontal .e-card-image,
+.e-bigger.e-card.e-card-horizontal img,
+.e-bigger.e-card .e-card-horizontal .e-card-image,
+.e-bigger.e-card .e-card-horizontal img {
+  margin: 2px;
+}
+.e-bigger .e-card .e-card-header,
+.e-bigger.e-card .e-card-header {
+  min-height: 30px;
+  padding: 24px 24px 16px 24px;
+}
+.e-bigger .e-card .e-card-header .e-card-content,
+.e-bigger.e-card .e-card-header .e-card-content {
+  padding-left: 0;
+  padding-right: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption,
+.e-bigger.e-card .e-card-header .e-card-header-caption {
+  padding: 0 0 0 24px;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
+.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
+  padding: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 4px 0 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-image,
+.e-bigger.e-card .e-card-header .e-card-header-image {
+  background-size: cover;
+  height: 50px;
+  width: 46px;
+}
+.e-bigger .e-card .e-card-image,
+.e-bigger.e-card .e-card-image {
+  min-height: 150px;
+}
+.e-bigger .e-card .e-card-image .e-card-title,
+.e-bigger.e-card .e-card-image .e-card-title {
+  font-size: 18px;
+  line-height: 1.25;
+  min-height: 40px;
+  padding: 12px 16px;
+}
+.e-bigger .e-card .e-card-actions,
+.e-bigger.e-card .e-card-actions {
+  padding: 24px 24px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-actions.e-card-vertical {
+  padding: 12px 24px 24px 24px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger .e-card .e-card-actions.e-card-vertical a,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger.e-card .e-card-actions.e-card-vertical a {
+  margin: 0 0 8px 0;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
+  margin-bottom: 0;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn span,
+.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
+.e-bigger.e-card .e-card-actions .e-card-btn span,
+.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
+  height: 24px;
+  width: 24px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn,
+.e-bigger .e-card .e-card-actions a,
+.e-bigger.e-card .e-card-actions .e-card-btn,
+.e-bigger.e-card .e-card-actions a {
+  line-height: 38px;
+  margin: 0 0 0 8px;
+  min-height: 38px;
+  padding: 0 6px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger .e-card .e-card-actions a:first-child,
+.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger.e-card .e-card-actions a:first-child {
+  margin-left: 0;
+}
+.e-bigger .e-card .e-card-content,
+.e-bigger.e-card .e-card-content {
+  padding: 0 24px 16px 24px;
+}
+.e-bigger .e-card .e-card-content + :not(.e-card-content),
+.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-content + :not(.e-card-content),
+.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
+  margin-top: 0;
+  padding-top: 0;
 }

package/styles/card/tailwind-dark.scss

@@ -1,3 +1,4 @@
 @import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/card/tailwind.css

@@ -1,138 +1,3 @@
-.e-bigger .e-card,
-.e-bigger.e-card {
-  line-height: 48px;
-  min-height: 48px;
-}
-.e-bigger .e-card > .e-card-header-title,
-.e-bigger.e-card > .e-card-header-title {
-  line-height: 1.5;
-  padding: 24px 24px 16px 24px;
-}
-.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
-.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card > .e-card-title,
-.e-bigger.e-card > .e-card-title {
-  line-height: 1.5;
-  padding: 8px 24px 16px 24px;
-}
-.e-bigger .e-card > .e-card-title + :not(.e-card-title),
-.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
-  margin-top: 0;
-  padding-top: 0;
-}
-.e-bigger .e-card.e-card-horizontal .e-card-image,
-.e-bigger .e-card.e-card-horizontal img,
-.e-bigger .e-card .e-card-horizontal .e-card-image,
-.e-bigger .e-card .e-card-horizontal img,
-.e-bigger.e-card.e-card-horizontal .e-card-image,
-.e-bigger.e-card.e-card-horizontal img,
-.e-bigger.e-card .e-card-horizontal .e-card-image,
-.e-bigger.e-card .e-card-horizontal img {
-  margin: 2px;
-}
-.e-bigger .e-card .e-card-header,
-.e-bigger.e-card .e-card-header {
-  min-height: 30px;
-  padding: 24px 24px 16px 24px;
-}
-.e-bigger .e-card .e-card-header .e-card-content,
-.e-bigger.e-card .e-card-header .e-card-content {
-  padding-left: 0;
-  padding-right: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption,
-.e-bigger.e-card .e-card-header .e-card-header-caption {
-  padding: 0 0 0 24px;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
-.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
-  padding: 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
-  font-size: 14px;
-  line-height: 1.5;
-}
-.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
-.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
-  font-size: 16px;
-  line-height: 1.5;
-  padding: 4px 0 0;
-}
-.e-bigger .e-card .e-card-header .e-card-header-image,
-.e-bigger.e-card .e-card-header .e-card-header-image {
-  background-size: cover;
-  height: 50px;
-  width: 46px;
-}
-.e-bigger .e-card .e-card-image,
-.e-bigger.e-card .e-card-image {
-  min-height: 150px;
-}
-.e-bigger .e-card .e-card-image .e-card-title,
-.e-bigger.e-card .e-card-image .e-card-title {
-  font-size: 18px;
-  line-height: 1.25;
-  min-height: 40px;
-  padding: 12px 16px;
-}
-.e-bigger .e-card .e-card-actions,
-.e-bigger.e-card .e-card-actions {
-  padding: 24px 24px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-actions.e-card-vertical {
-  padding: 12px 24px 24px 24px;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger .e-card .e-card-actions.e-card-vertical a,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
-.e-bigger.e-card .e-card-actions.e-card-vertical a {
-  margin: 0 0 8px 0;
-}
-.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
-.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
-  margin-bottom: 0;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn span,
-.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
-.e-bigger.e-card .e-card-actions .e-card-btn span,
-.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
-  height: 24px;
-  width: 24px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn,
-.e-bigger .e-card .e-card-actions a,
-.e-bigger.e-card .e-card-actions .e-card-btn,
-.e-bigger.e-card .e-card-actions a {
-  line-height: 38px;
-  margin: 0 0 0 8px;
-  min-height: 38px;
-  padding: 0 6px;
-}
-.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger .e-card .e-card-actions a:first-child,
-.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
-.e-bigger.e-card .e-card-actions a:first-child {
-  margin-left: 0;
-}
-.e-bigger .e-card .e-card-content,
-.e-bigger.e-card .e-card-content {
-  padding: 0 24px 16px 24px;
-}
-.e-bigger .e-card .e-card-content + :not(.e-card-content),
-.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
-.e-bigger.e-card .e-card-content + :not(.e-card-content),
-.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
-  margin-top: 0;
-  padding-top: 0;
-}
-
 .e-card {
   border-radius: 6px;
   -webkit-box-sizing: border-box;
@@ -554,4 +419,139 @@
 }
 .e-card .e-card-content {
   color: #374151;
+}
+
+.e-bigger .e-card,
+.e-bigger.e-card {
+  line-height: 48px;
+  min-height: 48px;
+}
+.e-bigger .e-card > .e-card-header-title,
+.e-bigger.e-card > .e-card-header-title {
+  line-height: 1.5;
+  padding: 24px 24px 16px 24px;
+}
+.e-bigger .e-card > .e-card-header-title + :not(.e-card-header-title),
+.e-bigger.e-card > .e-card-header-title + :not(.e-card-header-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card > .e-card-title,
+.e-bigger.e-card > .e-card-title {
+  line-height: 1.5;
+  padding: 8px 24px 16px 24px;
+}
+.e-bigger .e-card > .e-card-title + :not(.e-card-title),
+.e-bigger.e-card > .e-card-title + :not(.e-card-title) {
+  margin-top: 0;
+  padding-top: 0;
+}
+.e-bigger .e-card.e-card-horizontal .e-card-image,
+.e-bigger .e-card.e-card-horizontal img,
+.e-bigger .e-card .e-card-horizontal .e-card-image,
+.e-bigger .e-card .e-card-horizontal img,
+.e-bigger.e-card.e-card-horizontal .e-card-image,
+.e-bigger.e-card.e-card-horizontal img,
+.e-bigger.e-card .e-card-horizontal .e-card-image,
+.e-bigger.e-card .e-card-horizontal img {
+  margin: 2px;
+}
+.e-bigger .e-card .e-card-header,
+.e-bigger.e-card .e-card-header {
+  min-height: 30px;
+  padding: 24px 24px 16px 24px;
+}
+.e-bigger .e-card .e-card-header .e-card-content,
+.e-bigger.e-card .e-card-header .e-card-content {
+  padding-left: 0;
+  padding-right: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption,
+.e-bigger.e-card .e-card-header .e-card-header-caption {
+  padding: 0 0 0 24px;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption:first-child,
+.e-bigger.e-card .e-card-header .e-card-header-caption:first-child {
+  padding: 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-header-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-header-title {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.e-bigger .e-card .e-card-header .e-card-header-caption .e-card-sub-title,
+.e-bigger.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 4px 0 0;
+}
+.e-bigger .e-card .e-card-header .e-card-header-image,
+.e-bigger.e-card .e-card-header .e-card-header-image {
+  background-size: cover;
+  height: 50px;
+  width: 46px;
+}
+.e-bigger .e-card .e-card-image,
+.e-bigger.e-card .e-card-image {
+  min-height: 150px;
+}
+.e-bigger .e-card .e-card-image .e-card-title,
+.e-bigger.e-card .e-card-image .e-card-title {
+  font-size: 18px;
+  line-height: 1.25;
+  min-height: 40px;
+  padding: 12px 16px;
+}
+.e-bigger .e-card .e-card-actions,
+.e-bigger.e-card .e-card-actions {
+  padding: 24px 24px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-actions.e-card-vertical {
+  padding: 12px 24px 24px 24px;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger .e-card .e-card-actions.e-card-vertical a,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn,
+.e-bigger.e-card .e-card-actions.e-card-vertical a {
+  margin: 0 0 8px 0;
+}
+.e-bigger .e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger .e-card .e-card-actions.e-card-vertical a:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical .e-card-btn:last-child,
+.e-bigger.e-card .e-card-actions.e-card-vertical a:last-child {
+  margin-bottom: 0;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn span,
+.e-bigger .e-card .e-card-actions .e-card-btn span.e-icons,
+.e-bigger.e-card .e-card-actions .e-card-btn span,
+.e-bigger.e-card .e-card-actions .e-card-btn span.e-icons {
+  height: 24px;
+  width: 24px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn,
+.e-bigger .e-card .e-card-actions a,
+.e-bigger.e-card .e-card-actions .e-card-btn,
+.e-bigger.e-card .e-card-actions a {
+  line-height: 38px;
+  margin: 0 0 0 8px;
+  min-height: 38px;
+  padding: 0 6px;
+}
+.e-bigger .e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger .e-card .e-card-actions a:first-child,
+.e-bigger.e-card .e-card-actions .e-card-btn:first-child,
+.e-bigger.e-card .e-card-actions a:first-child {
+  margin-left: 0;
+}
+.e-bigger .e-card .e-card-content,
+.e-bigger.e-card .e-card-content {
+  padding: 0 24px 16px 24px;
+}
+.e-bigger .e-card .e-card-content + :not(.e-card-content),
+.e-bigger .e-card .e-card-content + .e-card-actions.e-card-vertical,
+.e-bigger.e-card .e-card-content + :not(.e-card-content),
+.e-bigger.e-card .e-card-content + .e-card-actions.e-card-vertical {
+  margin-top: 0;
+  padding-top: 0;
 }

package/styles/card/tailwind.scss

@@ -1,3 +1,4 @@
 @import 'ej2-base/styles/definition/tailwind.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';
+@import 'bigger.scss';

package/styles/dashboard-layout/_bigger.scss

@@ -0,0 +1,39 @@
+@mixin bigger-header-style {
+  font-size: $panel-bigger-header-font-size;
+  font-weight: $panel-bigger-header-font-weight;
+  height: $panel-bigger-header-height;
+  padding: $panel-bigger-header-padding;
+  @if ($skin-name == 'tailwind') {
+    line-height: $panel-bigger-header-line-height;
+  }
+}
+
+@include export-module('dashboardlayout-bigger') {
+  .e-bigger {
+    .e-dashboardlayout.e-control {
+      & .e-panel {
+        & .e-panel-header {
+          @include bigger-header-style;
+        }
+
+        & .e-panel-content {
+          @if $skin-name == 'tailwind' {
+            padding: $panel-bigger-content-padding;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger {
+    & .e-panel-header {
+      color: $panel-bigger-header-color;
+    }
+  }
+
+  .e-bigger {
+    & .e-panel-header {
+      @include bigger-header-style;
+    }
+  }
+}

package/styles/dashboard-layout/_bootstrap5.3-definition.scss

@@ -15,9 +15,9 @@ $panel-header-padding: 8px 18px !default;
 $panel-header-line-height: 22px !default;
 $panel-header-border-radius: 4px !default;
 $panel-header-color: $content-text-color !default;
-$panel-header-font-size: $text-sm !default;
-$panel-header-bg-color: $content-bg-color-alt1 !default;
-$panel-header-font-weight: $font-weight-medium !default;
+$panel-header-font-size: $text-base !default;
+$panel-header-bg-color: $content-bg-color !default;
+$panel-header-font-weight: $font-weight-normal !default;
 $panel-header-border-bottom: 1px solid $border-light !default;
 $panel-header-font-family: $font-family !default;
 $panel-header-white-space: nowrap !default;
@@ -25,12 +25,12 @@ $panel-header-overflow: hidden !default;
 $panel-header-text-overflow: ellipsis !default;
 
 // Touch
-$panel-bigger-header-height: 40px !default;
+$panel-bigger-header-height: 44px !default;
 $panel-bigger-header-padding: 8px 18px !default;
 $panel-bigger-header-line-height: 24px !default;
 $panel-bigger-header-color: $content-text-color !default;
 $panel-bigger-header-font-size: $text-base !default;
-$panel-bigger-header-font-weight: $font-weight-medium !default;
+$panel-bigger-header-font-weight: $font-weight-normal !default;
 
 // Panel styles
 $panel-border: 1px solid $border-light !default;

package/styles/dashboard-layout/_fluent2-definition.scss

@@ -96,11 +96,10 @@ $element-width-complete: 100% !important !default;
 
 // Panel styles
 $panel-active-background: $flyout-bg-color-selected !default;
-$panel-hover-box-shadow: $shadow-lg !default;
-$panel-active-drag-box-shadow: $shadow !default;
+$panel-hover-box-shadow: $shadow-sm!default;
+$panel-active-drag-box-shadow: $shadow-sm !default;
 $panel-background: $flyout-bg-color !default;
-$panel-box-shadow: $shadow;
-
+$panel-box-shadow: $shadow-sm;
 // droppable area border
 $panel-drop-background: $primary-lighter !default;
 $panel-drop-border: 1px $primary dashed !default;

package/styles/dashboard-layout/_layout.scss

@@ -1,13 +1,3 @@
-@mixin bigger-header-style {
-  font-size: $panel-bigger-header-font-size;
-  font-weight: $panel-bigger-header-font-weight;
-  height: $panel-bigger-header-height;
-  padding: $panel-bigger-header-padding;
-  @if ($skin-name == 'tailwind') {
-    line-height: $panel-bigger-header-line-height;
-  }
-}
-
 @include export-module('dashboardlayout-layout') {
   .e-dashboardlayout.e-control {
 
@@ -207,12 +197,6 @@
           }
         }
       }
-
-      &.e-bigger {
-        & .e-panel-header {
-          @include bigger-header-style;
-        }
-      }
     }
 
     & .e-drag:hover {
@@ -242,22 +226,6 @@
     }
   }
 
-  .e-bigger {
-    .e-dashboardlayout.e-control {
-      & .e-panel {
-        & .e-panel-header {
-          @include bigger-header-style;
-        }
-
-        & .e-panel-content {
-          @if $skin-name == 'tailwind' {
-            padding: $panel-bigger-content-padding;
-          }
-        }
-      }
-    }
-  }
-
   .e-content-placeholder.e-dashboardlayout.e-placeholder-dashboardlayout {
     height: $panel-full-height;
     width: $panel-full-width;