@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/styles/bootstrap5.scss

@@ -1,5 +1,14 @@
-@import 'avatar/bootstrap5.scss';
-@import 'card/bootstrap5.scss';
-@import 'splitter/bootstrap5.scss';
-@import 'dashboard-layout/bootstrap5.scss';
-@import 'timeline/bootstrap5.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
+@import 'avatar/bootstrap5-definition.scss';
+@import 'avatar/all.scss';
+
+@import 'card/bootstrap5-definition.scss';
+@import 'card/all.scss';
+@import 'splitter/bootstrap5-definition.scss';
+@import 'splitter/icons/bootstrap5.scss';
+@import 'splitter/all.scss';
+@import 'dashboard-layout/bootstrap5-definition.scss';
+@import 'dashboard-layout/icons/bootstrap5.scss';
+@import 'dashboard-layout/all.scss';
+@import 'timeline/bootstrap5-definition.scss';
+@import 'timeline/all.scss';

package/styles/card/_bootstrap5.3-definition.scss

@@ -0,0 +1,125 @@
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: 4px !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-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
+$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-tight !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-base !default;
+$card-header-txt-nrml-subtitle-font: $text-sm !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: 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-xl !default;
+$card-header-txt-bigger-subtitle-font: $text-base !default;
+$card-image-title-bigger-font: 18px !default;
+$card-action-btn-bigger-icon-width: 24px !default;
+$card-action-btn-bigger-icon-height: 24px !default;
+$card-image-title-nrml-padding: 12px 16px !default;
+$card-action-nrml-padding: 12px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$card-highlight-color: $primary !default;
+$card-bg-color: $content-bg-color !default;
+$card-focus-bg-color: $content-bg-color !default;
+$card-hover-bg-color: $content-bg-color !default;
+$card-active-bg-color: $content-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: 1px !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: none !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: none !default;
+
+//Theme Variables End

package/styles/card/_fluent2-definition.scss

@@ -0,0 +1,123 @@
+//Layout Variables Start
+$card-img-brdr-radious: 50% !default;
+$card-brdr-radious: 6px !default;
+$card-action-btn-txt-transform: none !default;
+
+// Font
+$card-header-font: $text-sm !default;
+$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
+$card-content-line-height: $leading-normal !default;
+$card-nrml-lheight: 24px !default;
+$card-nrml-mheight: 36px !default;
+$card-header-padding: 12px !default;
+$card-header-lheight: $leading-tight !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-txt-nrml-padding: 0 0 0 18px !default;
+$card-header-txt-title-lheight: $leading-normal !default;
+$card-header-txt-title-nrml-padding: 2px 0 0 !default;
+$card-header-txt-subtitle-lheight: $leading-normal !default;
+$card-header-image-width: 46px !default;
+$card-header-image-height: 46px !default;
+$card-image-mheight: 112.5px !default;
+$card-image-title-lheight: 30px !default;
+$card-image-title-mheight: 30px !default;
+$card-action-nrml-vertical-padding: 18px 18px !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: 0 12px 12px !default;
+$card-header-txt-nrml-title-font: 14px !default;
+$card-header-txt-nrml-subtitle-font: 12px !default;
+$card-image-title-font: 14px !default;
+$card-action-btn-icon-width: 24px !default;   //Need to check UI
+$card-action-btn-icon-height: 24px !default;   //Need to check UI
+// Touch
+$card-bigger-lheight: 48px !default;
+$card-bigger-mheight: 48px !default;
+$card-header-bigger-padding: 16px !default;
+$card-header-bigger-lheight: $leading-normal !default;
+$card-title-bigger-margin: 8px 24px 16px 24px !default;
+$card-title-bigger-lheight: $leading-normal !default;
+$card-hor-image-bigger-margin: 2px !default;
+$card-sep-bigger-margin: 16px 0 !default;
+$card-header-bigger-minheight: 30px !default;
+$card-header-bigger-padding: 24px !default;
+$card-header-txt-bigger-padding: 0 0 0 24px !default;
+$card-header-txt-title-bigger-lheight: $leading-normal !default;
+$card-header-txt-title-bigger-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
+$card-header-image-bigger-width: 46px !default;
+$card-header-image-bigger-height: 50px !default;
+$card-image-bigger-mheight: 150px !default;
+$card-image-title-bigger-lheight: $leading-tight !default;  //Need to check UI
+$card-image-title-bigger-mheight: 40px !default;  //Need to check UI
+$card-img-title-bigger-padding: 12px 16px !default;
+$card-action-bigger-padding: 16px 16px !default;
+$card-action-bigger-vertical-padding: 12px 24px 24px 24px !default;
+$card-action-bigger-btn-vertical-margin: 0 0 8px 0 !default;//Need to check UI
+$card-action-btn-bigger-height: 38px !default;
+$card-action-btn-bigger-margin: 0 0 0 8px !default;
+$card-action-btn-bigger-padding: 0 6px !default;
+$card-bigger-content-padding: 0 16px 16px 16px !default;
+$card-header-txt-bigger-title-font: $text-base !default;
+$card-header-txt-bigger-subtitle-font: 14px !default;
+$card-image-title-bigger-font: 16px !default;
+$card-action-btn-bigger-icon-width: 24px !default;  //Need to chek UI
+$card-action-btn-bigger-icon-height: 24px !default;  //Need to check UI
+$card-image-title-nrml-padding: 8px 16px !default;
+$card-action-nrml-padding: 18px 18px !default;
+$card-highlight-color: $primary !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$card-bg-color: $flyout-bg-color !default;
+$card-focus-bg-color: $flyout-bg-color-pressed !default;
+$card-hover-bg-color: $flyout-bg-color-hover !default;
+$card-active-bg-color: $flyout-bg-color-selected !default;
+$card-focus-brdr-color: $border-light !default;
+$card-hover-brdr-color: $border-light !default;
+$card-active-brdr-color: $border-light !default;
+$card-brdr-size: 1px !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: $content-text-color !default;
+$card-image-title-bg: $overlay-bg-color !default;
+$card-action-btn-bg-color: $transparent !default;
+$card-action-btn-font-color: $secondary-text-color !default;
+$card-action-btn-border: 1px solid $secondary-border-color !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 !default;
+$card-action-btn-icon-color: $primary !default;  //Doubt
+$card-hover-box-shadow: $shadow !default;
+
+//Theme Variables End

package/styles/card/_layout.scss

@@ -1,6 +1,4 @@
 @include export-module('card-layout') {
-
-  /*! card layout */
   .e-bigger .e-card,
   .e-bigger.e-card {
     line-height: $card-bigger-lheight;
@@ -41,7 +39,6 @@
 
     &.e-card-horizontal,
     .e-card-horizontal {
-
       .e-card-image,
       img {
         margin: $card-hor-image-bigger-margin;
@@ -71,6 +68,9 @@
         .e-card-header-title {
           font-size: $card-header-txt-bigger-title-font;
           line-height: $card-header-txt-title-bigger-lheight;
+          @if $skin-name == 'fluent2' {
+            font-weight: 600;
+          }
         }
 
         .e-card-sub-title {
@@ -101,6 +101,9 @@
         line-height: $card-image-title-bigger-lheight;
         min-height: $card-image-title-bigger-mheight;
         padding: $card-img-title-bigger-padding;
+        @if $skin-name == 'fluent2' {
+          font-weight: 600;
+        }
       }
     }
 
@@ -141,6 +144,9 @@
 
     .e-card-content {
       padding: $card-bigger-content-padding;
+      @if $skin-name == 'fluent2' {
+        font-size: 16px;
+      }
 
       + :not(.e-card-content),
       + .e-card-actions.e-card-vertical {
@@ -341,7 +347,7 @@
         .e-card-header-title {
           font-size: $card-header-txt-nrml-title-font;
           font-weight: normal;
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
+          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
             font-weight: 600;
           }
           line-height: $card-header-txt-title-lheight;
@@ -390,6 +396,9 @@
         position: absolute;
         text-overflow: ellipsis;
         width: inherit;
+        @if $skin-name == 'fluent2' {
+          font-weight: 600;
+        }
 
         &.e-card-top-left,
         &.e-card-top-right {

package/styles/card/_material3-definition.scss

@@ -1,9 +1,6 @@
-//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;
@@ -12,8 +9,6 @@ $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;
@@ -46,8 +41,6 @@ $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;
@@ -82,10 +75,6 @@ $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;
@@ -121,5 +110,3 @@ $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/_theme.scss

@@ -1,8 +1,5 @@
 @include export-module('card-theme') {
-
-  /*! card theme */
   /* stylelint-disable property-no-vendor-prefix */
-
   .e-card {
     -webkit-tap-highlight-color: $card-highlight-color;
     background: $card-bg-color;
@@ -32,18 +29,14 @@
     .e-card-separator {
       border-bottom: $card-sep-brdr-size $card-sep-brdr-type $card-sep-brdr-color;
     }
-
     .e-card-header-caption {
-
       .e-card-header-title {
         color: $card-header-txt-title-color;
       }
-
       .e-card-sub-title {
         color: $card-header-txt-subtitle-color;
       }
     }
-
     .e-card-image {
 
       .e-card-title {
@@ -51,17 +44,15 @@
         color: $card-image-title-color;
       }
     }
-
     .e-card-actions {
 
       .e-card-btn span,
       .e-card-btn span.e-icons {
         color: $card-action-btn-icon-color;
       }
-
       .e-card-btn,
       a {
-        @if $skin-name == 'Material3' {
+        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
           background: $card-action-btn-bg-color;
         }
         @else {
@@ -70,9 +61,8 @@
         border: $card-action-btn-border;
         color: $card-action-btn-font-color;
         outline: 0;
-
         &:hover {
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $card-action-btn-hover-bg;
           }
           @else {
@@ -81,9 +71,8 @@
           border: $card-action-btn-hover-border;
           color: $card-action-btn-hover-font;
         }
-
         &:focus {
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $card-action-btn-focus-bg;
           }
           @else {
@@ -92,9 +81,8 @@
           border: $card-action-btn-focus-border;
           color: $card-action-btn-focus-font;
         }
-
         &:active {
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $card-action-btn-pressed-bg;
           }
           @else {