@syncfusion/ej2-layouts 27.2.2 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,18 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'avatar/bds-definition.scss';
+@import 'avatar/all.scss';
+
+@import 'card/bds-definition.scss';
+@import 'card/all.scss';
+@import 'card/bigger.scss';
+@import 'splitter/bds-definition.scss';
+@import 'splitter/icons/bds.scss';
+@import 'splitter/all.scss';
+@import 'splitter/bigger.scss';
+@import 'dashboard-layout/bds-definition.scss';
+@import 'dashboard-layout/icons/bds.scss';
+@import 'dashboard-layout/all.scss';
+@import 'dashboard-layout/bigger.scss';
+@import 'timeline/bds-definition.scss';
+@import 'timeline/all.scss';
+@import 'timeline/bigger.scss';

package/styles/bootstrap-dark-lite.css

@@ -1099,8 +1099,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #505050;
@@ -1445,7 +1445,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap-dark.css

@@ -1274,8 +1274,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #505050;
@@ -1637,7 +1637,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap-lite.css

@@ -1099,8 +1099,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #e6e6e6;
@@ -1445,7 +1445,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap.css

@@ -1275,8 +1275,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #e6e6e6;
@@ -1638,7 +1638,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap4-lite.css

@@ -1095,8 +1095,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #e9ecef;
@@ -1441,7 +1441,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap4.css

@@ -1279,8 +1279,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #e9ecef;
@@ -1642,7 +1642,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5-dark-lite.css

@@ -1108,8 +1108,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #444c54;
@@ -1462,7 +1462,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5-dark.css

@@ -1284,8 +1284,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #444c54;
@@ -1655,7 +1655,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5-lite.css

@@ -1108,8 +1108,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #dee2e6;
@@ -1462,7 +1462,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5.3-lite.css

@@ -1108,8 +1108,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid var(--color-sf-border-light);
@@ -1454,7 +1454,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5.3.css

@@ -1284,8 +1284,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid var(--color-sf-border-light);
@@ -1647,7 +1647,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/bootstrap5.css

@@ -1284,8 +1284,8 @@
   display: none;
 }
 .e-dashboardlayout.e-control .e-panel.e-panel-transition {
-  -webkit-transition: top 0.5s, left 0.5s;
-  transition: top 0.5s, left 0.5s;
+  -webkit-transition: top 0.1s, left 0.1s;
+  transition: top 0.1s, left 0.1s;
 }
 .e-dashboardlayout.e-control .e-panel .e-panel-header {
   border-bottom: 1px solid #dee2e6;
@@ -1655,7 +1655,7 @@
   left: auto;
 }
 .e-timeline.e-horizontal .e-dot-item {
-  margin: calc(var(--dot-size) * 2 / 2) 0;
+  margin: var(--dot-size);
 }
 .e-timeline.e-horizontal .e-opposite-content,
 .e-timeline.e-horizontal .e-content {

package/styles/card/_bigger.scss

@@ -148,11 +148,17 @@
       @if $skin-name == 'fluent2' {
         font-size: 16px;
       }
+      @if $skin-name == 'tailwind3' {
+        font-size: 16px;
+        line-height: 24px;
+      }
 
       + :not(.e-card-content),
       + .e-card-actions.e-card-vertical {
-        margin-top: 0;
-        padding-top: 0;
+        @if $skin-name != 'tailwind3' {
+          margin-top: 0;
+          padding-top: 0;
+        }
       }
 
       @if $skin-name == 'FluentUI' {

package/styles/card/_layout.scss

@@ -144,6 +144,9 @@
       @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
         padding-bottom: $card-header-nrml-padding-bottom;
       }
+      @if $skin-name == 'tailwind3' {
+        border-bottom: $card-normal-border-bottom;
+      }
 
       .e-card-content {
         padding-left: 0;
@@ -184,10 +187,12 @@
 
         .e-card-header-title {
           font-size: $card-header-txt-nrml-title-font;
-          font-weight: normal;
-          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
+          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
             font-weight: 600;
           }
+          @else {
+            font-weight: normal;
+          }
           line-height: $card-header-txt-title-lheight;
         }
 
@@ -259,6 +264,10 @@
       display: inline-block;
       justify-content: flex-start;
       padding: $card-action-nrml-padding;
+      @if $skin-name == 'tailwind3' {
+        border-top: $card-normal-border-bottom;
+        line-height: 30px;
+      }
 
       &.e-card-vertical {
         display: flex;
@@ -349,8 +358,10 @@
 
       + :not(.e-card-content),
       + .e-card-actions.e-card-vertical {
-        margin-top: 0;
-        padding-top: 0;
+        @if $skin-name != 'tailwind3' {
+          margin-top: 0;
+          padding-top: 0;
+        }
       }
       @if $skin-name == 'FluentUI' {
         + .e-card-header {

package/styles/card/_tailwind3-definition.scss

@@ -0,0 +1,126 @@
+//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: 20px !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: 16px !default;
+$card-header-nrml-padding-bottom: 0 !default;
+$card-header-txt-nrml-padding: 0 0 0 12px !default;
+$card-header-txt-title-lheight: 20px !default;
+$card-header-txt-title-nrml-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-lheight: 20px !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: 16px !default;
+$card-header-txt-nrml-title-font: 14px !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: 20px 24px !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: 24px !default;
+$card-header-txt-title-bigger-padding: 4px 0 0 !default;
+$card-header-txt-subtitle-bigger-lheight: 20px !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 24px !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: 24px !default;
+$card-header-txt-bigger-title-font: 16px !default;
+$card-header-txt-bigger-subtitle-font: 16px !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 16px !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-alt1 !default;
+$card-hover-bg-color: $content-bg-color-alt1 !default;
+$card-active-bg-color: $content-bg-color-alt2 !default;
+$card-focus-brdr-color: $border-light !default;
+$card-hover-brdr-color: $border-light !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-alt2 !default;
+$card-box-shadow: none !default;
+$card-action-btn-icon-color: $primary !default;
+$card-hover-box-shadow: none !default;
+$card-normal-border-bottom: 1px solid $border-light !default;
+
+//Theme Variables End