@syncfusion/ej2-layouts 19.2.60 → 19.3.43

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

@@ -0,0 +1,109 @@
+/*! component's theme wise override tailwind-definitions and variables */
+
+// Generic
+$icon-zero: 0 !default;
+$icon-border-radius: 50% !default;
+$grid-layout-position: relative !default;
+$panel-position: absolute !default;
+$panel-box-sizing: border-box !default;
+
+// Header styles
+
+// Mouse
+$panel-header-height: 38px !default;
+$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-border-bottom: none !default;
+$panel-header-font-family: $font-family !default;
+$panel-header-white-space: nowrap !default;
+$panel-header-overflow: hidden !default;
+$panel-header-text-overflow: ellipsis !default;
+
+// Touch
+$panel-bigger-header-height: 40px !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 styles
+$panel-border: 1px solid $border-light !default;
+$panel-border-radius: 4px !default;
+$panel-full-height: 100% !default;
+$panel-full-width: 100% !default;
+$panel-hover-border: 1px solid $border-dark !default;
+$panel-active-border: 1px solid $primary-border-color !default;
+
+// icons styles
+$panel-resize-one-dimensional-icon-height: 8px !default;
+$panel-resize-one-dimensional-icon-width: 8px !default;
+$panel-resize-one-dimensional-icon-background: none !default;
+$panel-resize-one-dimensional-icon-border: none !default;
+$panel-resize-one-dimensional-icon-shadow: none !default;
+
+$panel-resize-two-dimensional-icon-height: 8px !default;
+$panel-resize-two-dimensional-icon-width: 8px !default;
+$panel-resize-two-dimensional-inner-icon-height: 8px !default;
+$panel-resize-two-dimensional-inner-icon-width: 8px !default;
+$panel-resize-two-dimensional-icon-background: none !default;
+$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
+$panel-resize-two-dimensional-icon-border: none !default;
+$panel-resize-two-dimensional-icon-shadow: none !default;
+
+// south-east-icon-styles
+$panel-south-east-icon-right: 2px !default;
+$panel-south-east-icon-bottom: 2px !default;
+
+// south-west-icon-style
+$panel-south-west-icon-left: 2px !default;
+$panel-south-west-icon-bottom: 2px !default;
+
+// north-east-icon-styles
+$panel-north-east-icon-right: 2px !default;
+$panel-north-east-icon-top: 2px !default;
+
+// north-west-icon-styles
+$panel-north-west-icon-left: 2px !default;
+$panel-north-west-icon-top: 2px !default;
+
+// droppable area border
+$panel-drop-border-radius: 4px !default;
+
+// dragging element style
+$panel-dragging-cursor: move !default;
+$panel-drag-prevent: none !default;
+
+// Blazor ContentTemplate styles
+$panel-content-template-height: inherit !default;
+$panel-content-template-width: inherit !default;
+
+// sass-lint:disable-all
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+
+// sass-lint:disable-all
+$element-width-complete: 100% !important !default;
+
+// colors
+
+// Panel styles
+$panel-active-background: $flyout-bg-color !default;
+$panel-hover-box-shadow: $shadow !default;
+$panel-active-drag-box-shadow: $shadow !default;
+$panel-background: $flyout-bg-color !default;
+$panel-box-shadow: $shadow-sm;
+
+// droppable area border
+$panel-drop-background: $primary-lighter !default;
+$panel-drop-border: 1px $primary-border-color dashed !default;
+
+//gridlines
+$gridline-background: $content-bg-color-alt1 !default;
+$gridline-border: $border-dark !default;
+$gridline-border-radius: 6px !default;

package/styles/dashboard-layout/_layout.scss

@@ -3,7 +3,7 @@
   font-weight: $panel-bigger-header-font-weight;
   height: $panel-bigger-header-height;
   padding: $panel-bigger-header-padding;
-  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+  @if ($skin-name == 'tailwind') {
     line-height: $panel-bigger-header-line-height;
   }
 }
@@ -20,12 +20,16 @@
     }
 
     .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
         border: 1px dashed $gridline-border;
       }
       @else {
         border: 1px dotted $gridline-border;
       }
+
+      @if ($skin-name == 'bootstrap5') {
+        border-radius: $gridline-border-radius;
+      }
       position: absolute;
     }
 
@@ -40,14 +44,14 @@
     & .e-panel {
 
       & .e-resize.e-dl-icon {
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name == 'tailwind') {
           line-height: 9px;
         }
       }
 
       &:hover {
         border: $panel-hover-border;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
           box-shadow: $panel-hover-box-shadow;
         }
 
@@ -84,10 +88,15 @@
         font-weight: $panel-header-font-weight;
         height: $panel-header-height;
         padding: $panel-header-padding;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name == 'tailwind') {
           line-height: $panel-header-line-height;
         }
 
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+          border-top-left-radius: $panel-header-border-radius;
+          border-top-right-radius: $panel-header-border-radius;
+        }
+
         & div {
           overflow: $panel-header-overflow;
           text-overflow: $panel-header-text-overflow;

package/styles/dashboard-layout/_tailwind-dark-definition.scss

@@ -1,109 +1 @@
-/*! component's theme wise override tailwind-definitions and variables */
-
-// Generic
-$grid-layout-position: relative !default;
-$panel-position: absolute !default;
-$panel-box-sizing: border-box !default;
-$icon-zero: 0 !default;
-$icon-border-radius: 50% !default;
-
-// Header styles
-
-// Mouse
-
-$panel-header-height: 38px !default;
-$panel-header-padding: 8px 18px !default;
-$panel-header-line-height: 22px !default;
-$panel-header-color: $content-text-color !default;
-$panel-header-font-size: $text-sm !default;
-$panel-header-font-weight: $font-weight-medium !default;
-$panel-header-border-bottom: none !default;
-$panel-header-font-family: $font-family !default;
-$panel-header-white-space: nowrap !default;
-$panel-header-overflow: hidden !default;
-$panel-header-text-overflow: ellipsis !default;
-
-// Touch
-
-$panel-bigger-header-height: 40px !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 styles
-
-$panel-background: $content-bg-color !default;
-$panel-border: 1px $content-bg-color !default;
-$panel-hover-border: none !default;
-$panel-active-border: none !default;
-$panel-active-background: $content-bg-color-alt2 !default;
-$panel-hover-box-shadow: $shadow-lg !default;
-$panel-active-drag-box-shadow: $shadow !default;
-$panel-border-radius: 6px !default;
-$panel-full-height: 100% !default;
-$panel-full-width: 100% !default;
-$panel-box-shadow: $shadow;
-
-// Blazor ContentTemplate styles
-
-$panel-content-template-height: inherit !default;
-$panel-content-template-width: inherit !default;
-
-// icons styles
-
-$panel-resize-one-dimensional-icon-height: 8px !default;
-$panel-resize-one-dimensional-icon-width: 8px !default;
-$panel-resize-one-dimensional-icon-background: none !default;
-$panel-resize-one-dimensional-icon-border: none !default;
-$panel-resize-one-dimensional-icon-shadow: none !default;
-
-$panel-resize-two-dimensional-icon-height: 8px !default;
-$panel-resize-two-dimensional-icon-width: 8px !default;
-$panel-resize-two-dimensional-inner-icon-height: 8px !default;
-$panel-resize-two-dimensional-inner-icon-width: 8px !default;
-$panel-resize-two-dimensional-icon-background: none !default;
-$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
-$panel-resize-two-dimensional-icon-border: none !default;
-$panel-resize-two-dimensional-icon-shadow: none !default;
-
-// south-east-icon-styles
-
-$panel-south-east-icon-right: 2px !default;
-$panel-south-east-icon-bottom: 2px !default;
-
-// south-west-icon-style
-
-$panel-south-west-icon-left: 2px !default;
-$panel-south-west-icon-bottom: 2px !default;
-
-
-// north-east-icon-styles
-
-$panel-north-east-icon-right: 2px !default;
-$panel-north-east-icon-top: 2px !default;
-
-// north-west-icon-styles
-
-$panel-north-west-icon-left: 2px !default;
-$panel-north-west-icon-top: 2px !default;
-
-// droppable area border
-
-$panel-drop-border: 1px $border-dark dashed !default;
-$panel-drop-background: $content-bg-color-alt2 !default;
-$panel-drop-border-radius: 6px !default;
-
-// dragging element style
-
-$panel-dragging-cursor: move !default;
-$panel-drag-prevent: none !default;
-// sass-lint:disable-all
-$panel-dragging-zindex: 1111 !important !default;
-$panel-drag-prevent: none !default;
-// sass-lint:disable-all
-$element-width-complete: 100% !important !default;
-//gridlines
-$gridline-background: $content-bg-color-alt3 !default;
-$gridline-border: $border-dark !default;
+@import './tailwind-definition.scss';

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

@@ -1,30 +1,30 @@
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
+$icon-zero: 0 !default;
+$icon-border-radius: 50% !default;
 $grid-layout-position: relative !default;
 $panel-position: absolute !default;
 $panel-box-sizing: border-box !default;
-$icon-zero: 0 !default;
-$icon-border-radius: 50% !default;
 
 // Header styles
 
 // Mouse
-
 $panel-header-height: 38px !default;
 $panel-header-padding: 8px 18px !default;
 $panel-header-line-height: 22px !default;
+$panel-header-bg-color: $content-bg-color-alt1 !default;
 $panel-header-color: $content-text-color !default;
 $panel-header-font-size: $text-sm !default;
 $panel-header-font-weight: $font-weight-medium !default;
 $panel-header-border-bottom: none !default;
+$panel-header-border-radius: 6px !default;
 $panel-header-font-family: $font-family !default;
 $panel-header-white-space: nowrap !default;
 $panel-header-overflow: hidden !default;
 $panel-header-text-overflow: ellipsis !default;
 
 // Touch
-
 $panel-bigger-header-height: 40px !default;
 $panel-bigger-header-padding: 8px 18px !default;
 $panel-bigger-header-line-height: 24px !default;
@@ -33,26 +33,14 @@ $panel-bigger-header-font-size: $text-base !default;
 $panel-bigger-header-font-weight: $font-weight-medium !default;
 
 // Panel styles
-
-$panel-background: $content-bg-color !default;
-$panel-border: 1px $content-bg-color !default;
-$panel-hover-border: none !default;
-$panel-active-border: none !default;
-$panel-active-background: $content-bg-color-alt2 !default;
-$panel-hover-box-shadow: $shadow-lg !default;
-$panel-active-drag-box-shadow: $shadow !default;
+$panel-border: 1px solid $border-light !default;
 $panel-border-radius: 6px !default;
 $panel-full-height: 100% !default;
 $panel-full-width: 100% !default;
-$panel-box-shadow: $shadow;
-
-// Blazor ContentTemplate styles
-
-$panel-content-template-height: inherit !default;
-$panel-content-template-width: inherit !default;
+$panel-hover-border: 1px solid $border-dark !default;
+$panel-active-border: 1px solid $primary-border-color !default;
 
 // icons styles
-
 $panel-resize-one-dimensional-icon-height: 8px !default;
 $panel-resize-one-dimensional-icon-width: 8px !default;
 $panel-resize-one-dimensional-icon-background: none !default;
@@ -69,41 +57,52 @@ $panel-resize-two-dimensional-icon-border: none !default;
 $panel-resize-two-dimensional-icon-shadow: none !default;
 
 // south-east-icon-styles
-
 $panel-south-east-icon-right: 2px !default;
 $panel-south-east-icon-bottom: 2px !default;
 
 // south-west-icon-style
-
 $panel-south-west-icon-left: 2px !default;
 $panel-south-west-icon-bottom: 2px !default;
 
-
 // north-east-icon-styles
-
 $panel-north-east-icon-right: 2px !default;
 $panel-north-east-icon-top: 2px !default;
 
 // north-west-icon-styles
-
 $panel-north-west-icon-left: 2px !default;
 $panel-north-west-icon-top: 2px !default;
 
 // droppable area border
-
-$panel-drop-border: 1px $border-dark dashed !default;
-$panel-drop-background: $content-bg-color-alt3 !default;
 $panel-drop-border-radius: 6px !default;
 
 // dragging element style
-
 $panel-dragging-cursor: move !default;
 $panel-drag-prevent: none !default;
+
+// Blazor ContentTemplate styles
+$panel-content-template-height: inherit !default;
+$panel-content-template-width: inherit !default;
+
 // sass-lint:disable-all
 $panel-dragging-zindex: 1111 !important !default;
 $panel-drag-prevent: none !default;
+
 // sass-lint:disable-all
 $element-width-complete: 100% !important !default;
+
+// colors
+
+// Panel styles
+$panel-active-background: $content-bg-color-alt2 !default;
+$panel-hover-box-shadow: $shadow-lg !default;
+$panel-active-drag-box-shadow: $shadow !default;
+$panel-background: $flyout-bg-color !default;
+$panel-box-shadow: $shadow;
+
+// droppable area border
+$panel-drop-background: $content-bg-color-alt3 !default;
+$panel-drop-border: 1px $border-dark dashed !default;
+
 //gridlines
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: $border !default;

package/styles/dashboard-layout/_theme.scss

@@ -12,8 +12,8 @@
       & .e-panel-container {
         & .e-panel-header {
           color: $panel-header-color;
-          @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
-            background: $content-bg-color-alt1;
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+            background: $panel-header-bg-color;
             box-sizing: $panel-box-sizing;
           }
         }
@@ -22,7 +22,7 @@
 
     & .e-panel.e-dragging {
       &:active {
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name == 'tailwind') {
           background: $content-bg-color;
           box-shadow: $panel-active-drag-box-shadow;
         }
@@ -36,7 +36,7 @@
       position: $panel-position;
 
       &:active {
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
           background: $panel-active-background;
         }
       }