@syncfusion/ej2-layouts 31.2.2 → 32.1.19

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

@@ -1 +1,115 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+
+/*! 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: 56px !default;
+$panel-header-padding: 16px 0 16px 16px !default;
+$panel-header-line-height: $leading-tight !default;
+$panel-header-border-radius: 2px !default;
+$panel-header-border-bottom: 1px solid $flyout-border !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: 68px !default;
+$panel-bigger-header-padding: 20px 0 20px 20px !default;
+
+// Panel styles
+$panel-border: 1px solid $flyout-bg-color !default;
+$panel-border-radius: $model-radius-small !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 !default;
+
+// icons styles
+$panel-resize-one-dimensional-icon-height: 7px !default;
+$panel-resize-one-dimensional-icon-width: 7px !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: 7px !default;
+$panel-resize-two-dimensional-icon-width: 7px !default;
+$panel-resize-two-dimensional-inner-icon-height: 7px !default;
+$panel-resize-two-dimensional-inner-icon-width: 7px !default;
+$panel-resize-two-dimensional-icon-background: none !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: $model-radius-small !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;
+
+/* stylelint-disable */
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+
+$element-width-complete: 100% !important !default;
+
+// colors
+
+// Panel styles
+$panel-active-background: $content-bg-color-alt1 !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-sm;
+$panel-header-color: $content-text-color !default;
+$panel-header-font-size: $text-base !default;
+$panel-header-bg-color: $content-bg-color-alt1 !default;
+$panel-header-font-weight: $font-weight-medium !default;
+$panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
+
+//Touch
+
+$panel-bigger-header-line-height: $leading-tight !default;
+$panel-bigger-header-color: $content-text-color !default;
+$panel-bigger-header-font-size: $text-lg !default;
+$panel-bigger-header-font-weight: $font-weight-medium !default;
+
+// droppable area border
+$panel-drop-background: $primary-lighter !default;
+$panel-drop-border: 1px $primary dashed !default;
+
+//gridlines
+$gridline-background: $content-bg-color-alt2 !default;
+$gridline-border: $border-dark !default;
+$gridline-border-radius: $model-radius-small !default;
+$gridline-border-width: 1px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fluent' as *;
+@forward 'ej2-base/styles/definition/fluent';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
@@ -109,3 +112,4 @@ $panel-drop-border: 1px $primary dashed !default;
 $gridline-background: $content-bg-color-alt2 !default;
 $gridline-border: $border-dark !default;
 $gridline-border-radius: $model-radius-small !default;
+$gridline-border-width: 1px !default;

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

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/fluent2' as *;
+@forward 'ej2-base/styles/definition/fluent2';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
 $icon-zero: 0 !default;
-$icon-border-radius: 50% !default;
+$icon-border-radius: $border-radius-50p !default;
 $grid-layout-position: relative !default;
 $panel-position: absolute !default;
 $panel-box-sizing: border-box !default;
@@ -18,11 +21,12 @@ $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: 4px !default;
+$panel-header-border-radius: $radius-4 !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;
+$panel-drgging-item-moving-border: none !default;
 
 // Touch
 $panel-bigger-header-height: 44px !default;
@@ -35,7 +39,7 @@ $panel-bigger-content-padding: 16px !default;
 
 // Panel styles
 $panel-border: none !default;
-$panel-border-radius: 4px !default;
+$panel-border-radius: $radius-4 !default;
 $panel-full-height: 100% !default;
 $panel-full-width: 100% !default;
 $panel-hover-border: 1px solid $border-dark !default;
@@ -76,7 +80,7 @@ $panel-north-west-icon-left: 2px !default;
 $panel-north-west-icon-top: 2px !default;
 
 // droppable area border
-$panel-drop-border-radius: 6px !default;
+$panel-drop-border-radius: $radius-6 !default;
 
 // dragging element style
 $panel-dragging-cursor: move !default;
@@ -107,4 +111,5 @@ $panel-drop-border: 1px $primary dashed !default;
 //gridlines
 $gridline-background: $content-bg-color !default;
 $gridline-border: $border-light !default;
-$gridline-border-radius: 8px !default;
+$gridline-border-radius: $radius-8 !default;
+$gridline-border-width: 1px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/fusionnew' as *;
+@forward 'ej2-base/styles/definition/fusionnew';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
@@ -106,3 +109,4 @@ $panel-drop-border: 1px $primary-border-color dashed !default;
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: $border-dark !default;
 $gridline-border-radius: 6px !default;
+$gridline-border-width: 1px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@forward 'ej2-base/styles/definition/highcontrast';
+
 /*! component's theme wise override highcontrast-definitions and variables */
 
 // Generic
@@ -98,3 +101,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: $bg-base-10 !default;
 $gridline-border: $border-default !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_highcontrast-light-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@forward 'ej2-base/styles/definition/highcontrast-light';
+
 /*! component's theme wise override highcontrast-definitions and variables */
 
 // Generic
@@ -98,3 +101,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: $bg-base-10 !default;
 $gridline-border: $border-default !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_layout.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('dashboardlayout-layout') {
   .e-dashboardlayout.e-control {
 
@@ -9,10 +11,10 @@
 
       td.e-dashboard-gridline {
         @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-          border: 1px dashed $gridline-border;
+          border: $gridline-border-width dashed $gridline-border;
         }
         @else {
-          border: 1px dotted $gridline-border;
+          border: $gridline-border-width dotted $gridline-border;
         }
   
         @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
@@ -186,7 +188,7 @@
         cursor: $panel-dragging-cursor;
         z-index: $panel-dragging-zindex;
         @if $skin-name == 'fluent2' {
-          border: none;
+          border: $panel-drgging-item-moving-border;
         }
       }
 

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 /*! component's theme wise override material-definitions and variables */
 
 // Generic
@@ -99,5 +102,6 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: #1E1E1E !default;
 $gridline-border: $grey-800 !default;
+$gridline-border-width: 1px !default;
 
 

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
+
 /*! component's theme wise override material-definitions and variables */
 
 // Generic
@@ -100,3 +103,4 @@ $element-width-complete: 100% !important !default;
 //gridlines
 $gridline-background: $grey-100 !default;
 $gridline-border: $grey-400 !default;
+$gridline-border-width: 1px !default;

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

@@ -1 +1,64 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$icon-zero: 0 !default;
+$icon-border-radius: 50% !default;
+$grid-layout-position: relative !default;
+$panel-position: absolute !default;
+$panel-box-sizing: border-box !default;
+$panel-header-height: 40px !default;
+$panel-header-padding: 11px 16px !default;
+$panel-header-line-height: 22px !default;
+$panel-header-border-radius: 8px !default;
+$panel-header-color: rgba($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: 1px solid rgba($border-light) !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;
+$panel-bigger-header-height: 48px !default;
+$panel-bigger-header-padding: 14px 16px !default;
+$panel-bigger-header-line-height: 24px !default;
+$panel-bigger-header-color: rgba($content-text-color) !default;
+$panel-bigger-header-font-size: $text-base !default;
+$panel-bigger-header-font-weight: $font-weight-medium !default;
+$panel-border: 1px solid rgba($border-light) !default;
+$panel-border-radius: 8px !default;
+$panel-full-height: 100% !default;
+$panel-full-width: 100% !default;
+$panel-hover-border: 1px solid rgba($border-light) !default;
+$panel-active-border: 1px solid rgba($primary-border-color) !default;
+$panel-resize-one-dimensional-icon-border: 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-icon-color: $icon-color-disabled !default;
+$panel-south-east-icon-right: 2px !default;
+$panel-south-east-icon-bottom: 2px !default;
+$panel-south-west-icon-left: 2px !default;
+$panel-south-west-icon-bottom: 2px !default;
+$panel-north-east-icon-right: 2px !default;
+$panel-north-east-icon-top: 2px !default;
+$panel-north-west-icon-left: 2px !default;
+$panel-north-west-icon-top: 2px !default;
+$panel-drop-border-radius: 8px !default;
+$panel-dragging-cursor: move !default;
+$panel-drag-prevent: none !default;
+$panel-content-template-height: inherit !default;
+$panel-content-template-width: inherit !default;
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+$element-width-complete: 100% !important !default;
+$panel-active-background: $content-bg-color-alt1 !default;
+$panel-hover-box-shadow: $shadow-md !default;
+$panel-active-drag-box-shadow: rgba($shadow) !default;
+$panel-background: rgba($content-bg-color) !default;
+$panel-box-shadow: none !default;
+$panel-drop-background: rgba($primary-lighter) !default;
+$panel-drop-border: 1px rgba($primary-border-color) dashed !default;
+$gridline-background: $content-bg-color-alt1 !default;
+$gridline-border: rgba($primary) !default;
+$gridline-border-radius: 8px !default;
+$gridline-border-width: 1px !default;

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

@@ -1,12 +1,14 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $icon-zero: 0 !default;
-$icon-border-radius: 50% !default;
+$icon-border-radius: $border-radius-50p !default;
 $grid-layout-position: relative !default;
 $panel-position: absolute !default;
 $panel-box-sizing: border-box !default;
 $panel-header-height: 40px !default;
 $panel-header-padding: 11px 16px !default;
 $panel-header-line-height: 22px !default;
-$panel-header-border-radius: 8px !default;
+$panel-header-border-radius: $radius-8 !default;
 $panel-header-color: rgba($content-text-color) !default;
 $panel-header-font-size: $text-sm !default;
 $panel-header-bg-color: $content-bg-color-alt1 !default;
@@ -23,7 +25,7 @@ $panel-bigger-header-color: rgba($content-text-color) !default;
 $panel-bigger-header-font-size: $text-base !default;
 $panel-bigger-header-font-weight: $font-weight-medium !default;
 $panel-border: 1px solid rgba($border-light) !default;
-$panel-border-radius: 8px !default;
+$panel-border-radius: $radius-8 !default;
 $panel-full-height: 100% !default;
 $panel-full-width: 100% !default;
 $panel-hover-border: 1px solid rgba($border-light) !default;
@@ -41,7 +43,7 @@ $panel-north-east-icon-right: 2px !default;
 $panel-north-east-icon-top: 2px !default;
 $panel-north-west-icon-left: 2px !default;
 $panel-north-west-icon-top: 2px !default;
-$panel-drop-border-radius: 8px !default;
+$panel-drop-border-radius: $radius-8 !default;
 $panel-dragging-cursor: move !default;
 $panel-drag-prevent: none !default;
 $panel-content-template-height: inherit !default;
@@ -58,4 +60,5 @@ $panel-drop-background: rgba($primary-lighter) !default;
 $panel-drop-border: 1px rgba($primary-border-color) dashed !default;
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: rgba($primary) !default;
-$gridline-border-radius: 8px !default;
+$gridline-border-radius: $radius-8 !default;
+$gridline-border-width: 1px !default;

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

@@ -1 +1,113 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+/*! 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-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;
+$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-content-padding: 16px !default;
+
+// Panel styles
+$panel-border: 1px solid $border-light !default;
+$panel-border-radius: 6px !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;
+$panel-content-padding: 12px !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: 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;
+
+/* stylelint-disable */
+$panel-dragging-zindex: 1111 !important !default;
+$panel-drag-prevent: none !default;
+
+$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: $content-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;
+$gridline-border-width: 1px !default;

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

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
@@ -107,3 +110,4 @@ $panel-drop-border: 1px $border-dark dashed !default;
 //gridlines
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: $border !default;
+$gridline-border-width: 1px !default;

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

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 /*! component's theme wise override tailwind-definitions and variables */
 
 // Generic
 $icon-zero: 0 !default;
-$icon-border-radius: 50% !default;
+$icon-border-radius: $border-radius-50p !default;
 $grid-layout-position: relative !default;
 $panel-position: absolute !default;
 $panel-box-sizing: border-box !default;
@@ -13,9 +16,9 @@ $panel-box-sizing: border-box !default;
 $panel-header-height: 38px !default;
 $panel-header-padding: 10px 9px 5px !default;
 $panel-header-line-height: 24px !default;
-$panel-header-border-radius: 4px !default;
+$panel-header-border-radius: $radius-4 !default;
 $panel-header-color: $content-text-color !default;
-$panel-header-font-size: $text-base !default;
+$panel-header-font-size: 16px !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;
@@ -34,7 +37,7 @@ $panel-bigger-header-font-weight: $font-weight-normal !default;
 
 // Panel styles
 $panel-border: 1px solid $border-light !default;
-$panel-border-radius: 4px !default;
+$panel-border-radius: $radius-4 !default;
 $panel-full-height: 100% !default;
 $panel-full-width: 100% !default;
 $panel-hover-border: 1px solid $border-dark !default;
@@ -73,7 +76,7 @@ $panel-north-west-icon-left: 2px !default;
 $panel-north-west-icon-top: 2px !default;
 
 // droppable area border
-$panel-drop-border-radius: 4px !default;
+$panel-drop-border-radius: $radius-4 !default;
 
 // dragging element style
 $panel-dragging-cursor: move !default;
@@ -105,4 +108,5 @@ $panel-drop-border: 1px $primary-border-color dashed !default;
 //gridlines
 $gridline-background: $content-bg-color-alt1 !default;
 $gridline-border: $border-light !default;
-$gridline-border-radius: 6px !default;
+$gridline-border-radius: $radius-6 !default;
+$gridline-border-width: 1px !default;

package/styles/dashboard-layout/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/dashboard-layout/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('dashboardlayout-theme') {
   .e-dashboardlayout.e-control {
     display: block;

package/styles/dashboard-layout/bds.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/dashboard-layout/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/dashboard-layout/bootstrap.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'icons/bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/dashboard-layout/bootstrap4.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'icons/bootstrap4' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/dashboard-layout/bootstrap5-dark.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'icons/bootstrap5-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;