@syncfusion/ej2-layouts 31.2.12 → 32.1.24

package/styles/fluent2.scss

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

package/styles/highcontrast-light-lite.css

@@ -47,6 +47,8 @@
   font-size: 1.4em;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /*! component's default definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
@@ -401,6 +403,8 @@
   text-overflow: ellipsis;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -989,7 +993,8 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 /*! component's theme wise override highcontrast-definitions and variables */
 /* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
@@ -1135,6 +1140,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;

package/styles/highcontrast-light-lite.scss

@@ -1,13 +1,13 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'avatar/highcontrast-light-definition.scss';
-@import 'avatar/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'avatar/highcontrast-light-definition' as *;
+@use 'avatar/all.highcontrast-light' as *;
 
-@import 'card/highcontrast-light-definition.scss';
-@import 'card/all.scss';
-@import 'splitter/highcontrast-light-definition.scss';
-@import 'splitter/icons/highcontrast-light.scss';
-@import 'splitter/all.scss';
-@import 'dashboard-layout/highcontrast-light-definition.scss';
-@import 'dashboard-layout/all.scss';
-@import 'timeline/highcontrast-light-definition.scss';
-@import 'timeline/all.scss';
+@use 'card/highcontrast-light-definition' as *;
+@use 'card/all.highcontrast-light' as *;
+@use 'splitter/highcontrast-light-definition' as *;
+@use 'splitter/icons/highcontrast-light' as *;
+@use 'splitter/all.highcontrast-light' as *;
+@use 'dashboard-layout/highcontrast-light-definition' as *;
+@use 'dashboard-layout/all.highcontrast-light' as *;
+@use 'timeline/highcontrast-light-definition' as *;
+@use 'timeline/all.highcontrast-light' as *;

package/styles/highcontrast-light.css

@@ -47,6 +47,8 @@
   font-size: 1.4em;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /*! component's default definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
@@ -401,6 +403,8 @@
   text-overflow: ellipsis;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -469,6 +473,8 @@
   color: #000;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 .e-bigger .e-card,
 .e-bigger.e-card {
   line-height: 36px;
@@ -1124,7 +1130,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 .e-bigger.e-splitter .e-pane {
   font-size: 13px;
 }
@@ -1165,6 +1170,8 @@
   font-size: 16px;
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 /*! component's theme wise override highcontrast-definitions and variables */
 /* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
@@ -1310,6 +1317,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;
@@ -1382,6 +1391,8 @@
   bottom: -5px;
   right: -6px;
 }
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
   font-size: 14px;
   font-weight: 500;

package/styles/highcontrast-light.scss

@@ -1,17 +1,17 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'avatar/highcontrast-light-definition.scss';
-@import 'avatar/all.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'avatar/highcontrast-light-definition' as *;
+@use 'avatar/all.highcontrast-light' as *;
 
-@import 'card/highcontrast-light-definition.scss';
-@import 'card/all.scss';
-@import 'card/bigger.scss';
-@import 'splitter/highcontrast-light-definition.scss';
-@import 'splitter/icons/highcontrast-light.scss';
-@import 'splitter/all.scss';
-@import 'splitter/bigger.scss';
-@import 'dashboard-layout/highcontrast-light-definition.scss';
-@import 'dashboard-layout/all.scss';
-@import 'dashboard-layout/bigger.scss';
-@import 'timeline/highcontrast-light-definition.scss';
-@import 'timeline/all.scss';
-@import 'timeline/bigger.scss';
+@use 'card/highcontrast-light-definition' as *;
+@use 'card/all.highcontrast-light' as *;
+@use 'card/bigger.highcontrast-light' as *;
+@use 'splitter/highcontrast-light-definition' as *;
+@use 'splitter/icons/highcontrast-light' as *;
+@use 'splitter/all.highcontrast-light' as *;
+@use 'splitter/bigger.highcontrast-light' as *;
+@use 'dashboard-layout/highcontrast-light-definition' as *;
+@use 'dashboard-layout/all.highcontrast-light' as *;
+@use 'dashboard-layout/bigger.highcontrast-light' as *;
+@use 'timeline/highcontrast-light-definition' as *;
+@use 'timeline/all.highcontrast-light' as *;
+@use 'timeline/bigger.highcontrast-light' as *;

package/styles/highcontrast-lite.css

@@ -47,6 +47,7 @@
   font-size: 1.4em;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
   border-radius: 4px;
@@ -411,6 +412,7 @@
   text-overflow: ellipsis;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -999,7 +1001,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 /*! component's theme wise override highcontrast-definitions and variables */
 /* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
@@ -1065,6 +1066,8 @@
           transform: rotateY(180deg);
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
   background: #1a1a1a;
   border-collapse: collapse;
@@ -1206,6 +1209,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;

package/styles/highcontrast-lite.scss

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

package/styles/highcontrast.css

@@ -47,6 +47,7 @@
   font-size: 1.4em;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
   border-radius: 4px;
@@ -411,6 +412,7 @@
   text-overflow: ellipsis;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -479,6 +481,7 @@
   color: #fff;
 }
 
+/*! component's theme wise override material-definitions and variables */
 .e-bigger .e-card,
 .e-bigger.e-card {
   line-height: 45px;
@@ -1135,7 +1138,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 .e-bigger.e-splitter .e-pane {
   font-size: 13px;
 }
@@ -1241,6 +1243,8 @@
           transform: rotateY(180deg);
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
   background: #1a1a1a;
   border-collapse: collapse;
@@ -1382,6 +1386,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;
@@ -1454,6 +1460,8 @@
   bottom: -5px;
   right: -6px;
 }
+/*! component's theme wise override highcontrast-definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
   font-size: 14px;
   font-weight: 500;

package/styles/highcontrast.scss

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

package/styles/material-dark-lite.css

@@ -47,6 +47,8 @@
   font-size: 1.4em;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /*! component's default definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
@@ -401,6 +403,8 @@
   text-overflow: ellipsis;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -987,7 +991,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 /*! component's theme wise override material-definitions and variables */
 /* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
@@ -1053,6 +1056,8 @@
           transform: rotateY(180deg);
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
   background: #1E1E1E;
   border-collapse: collapse;
@@ -1196,6 +1201,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;

package/styles/material-dark-lite.scss

@@ -1,14 +1,14 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'avatar/material-dark-definition.scss';
-@import 'avatar/all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'avatar/material-dark-definition' as *;
+@use 'avatar/all.material-dark' as *;
 
-@import 'card/material-dark-definition.scss';
-@import 'card/all.scss';
-@import 'splitter/material-dark-definition.scss';
-@import 'splitter/icons/material-dark.scss';
-@import 'splitter/all.scss';
-@import 'dashboard-layout/material-dark-definition.scss';
-@import 'dashboard-layout/icons/material-dark.scss';
-@import 'dashboard-layout/all.scss';
-@import 'timeline/material-dark-definition.scss';
-@import 'timeline/all.scss';
+@use 'card/material-dark-definition' as *;
+@use 'card/all.material-dark' as *;
+@use 'splitter/material-dark-definition' as *;
+@use 'splitter/icons/material-dark' as *;
+@use 'splitter/all.material-dark' as *;
+@use 'dashboard-layout/material-dark-definition' as *;
+@use 'dashboard-layout/icons/material-dark' as *;
+@use 'dashboard-layout/all.material-dark' as *;
+@use 'timeline/material-dark-definition' as *;
+@use 'timeline/all.material-dark' as *;

package/styles/material-dark.css

@@ -47,6 +47,8 @@
   font-size: 1.4em;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /*! component's default definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
@@ -401,6 +403,8 @@
   text-overflow: ellipsis;
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -469,6 +473,8 @@
   color: rgba(255, 255, 255, 0.7);
 }
 
+/*! component's default definitions and variables */
+/*! component's theme wise override material-definitions and variables */
 .e-bigger .e-card,
 .e-bigger.e-card {
   line-height: 36px;
@@ -1122,7 +1128,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 .e-bigger.e-splitter .e-pane {
   font-size: 14px;
 }
@@ -1228,6 +1233,8 @@
           transform: rotateY(180deg);
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
   background: #1E1E1E;
   border-collapse: collapse;
@@ -1371,6 +1378,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;
@@ -1443,6 +1452,8 @@
   bottom: -5px;
   right: -6px;
 }
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
   font-size: 13px;
   font-weight: 500;

package/styles/material-dark.scss

@@ -1,18 +1,18 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'avatar/material-dark-definition.scss';
-@import 'avatar/all.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'avatar/material-dark-definition' as *;
+@use 'avatar/all.material-dark' as *;
 
-@import 'card/material-dark-definition.scss';
-@import 'card/all.scss';
-@import 'card/bigger.scss';
-@import 'splitter/material-dark-definition.scss';
-@import 'splitter/icons/material-dark.scss';
-@import 'splitter/all.scss';
-@import 'splitter/bigger.scss';
-@import 'dashboard-layout/material-dark-definition.scss';
-@import 'dashboard-layout/icons/material-dark.scss';
-@import 'dashboard-layout/all.scss';
-@import 'dashboard-layout/bigger.scss';
-@import 'timeline/material-dark-definition.scss';
-@import 'timeline/all.scss';
-@import 'timeline/bigger.scss';
+@use 'card/material-dark-definition' as *;
+@use 'card/all.material-dark' as *;
+@use 'card/bigger.material-dark' as *;
+@use 'splitter/material-dark-definition' as *;
+@use 'splitter/icons/material-dark' as *;
+@use 'splitter/all.material-dark' as *;
+@use 'splitter/bigger.material-dark' as *;
+@use 'dashboard-layout/material-dark-definition' as *;
+@use 'dashboard-layout/icons/material-dark' as *;
+@use 'dashboard-layout/all.material-dark' as *;
+@use 'dashboard-layout/bigger.material-dark' as *;
+@use 'timeline/material-dark-definition' as *;
+@use 'timeline/all.material-dark' as *;
+@use 'timeline/bigger.material-dark' as *;

package/styles/material-lite.css

@@ -47,6 +47,7 @@
   font-size: 1.4em;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /*! component's theme wise override material-definitions and variables */
 .e-card {
   border-radius: 2px;
@@ -400,6 +401,7 @@
   text-overflow: ellipsis;
 }
 
+/*! component's theme wise override material-definitions and variables */
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -488,6 +490,7 @@
   content: "";
 }
 
+/*! component's default definitions and variables */
 .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
   border-width: 1px;
   display: -webkit-box;
@@ -835,6 +838,7 @@
           flex-direction: column;
 }
 
+/*! component's default definitions and variables */
 .e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
   border: solid 1px #e0e0e0;
 }
@@ -989,7 +993,6 @@
   pointer-events: none;
 }
 
-/* stylelint-disable-line no-empty-source */
 /*! component's theme wise override material-definitions and variables */
 /* stylelint-disable */
 .e-dashboardlayout.e-control .e-panel .e-resize.e-single.e-east, .e-dashboardlayout.e-control .e-panel .e-resize.e-double.e-east {
@@ -1055,6 +1058,8 @@
           transform: rotateY(180deg);
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control .e-dashboard-gridline-table {
   background: #f5f5f5;
   border-collapse: collapse;
@@ -1198,6 +1203,8 @@
   width: 100%;
 }
 
+/*! component's theme wise override material-definitions and variables */
+/* stylelint-disable */
 .e-dashboardlayout.e-control {
   display: block;
   position: relative;

package/styles/material-lite.scss

@@ -1,14 +1,13 @@
-@import 'ej2-base/styles/definition/material.scss';
-@import 'avatar/material-definition.scss';
-@import 'avatar/all.scss';
+@use 'avatar/material-definition' as *;
+@use 'avatar/all.material' as *;
 
-@import 'card/material-definition.scss';
-@import 'card/all.scss';
-@import 'splitter/material-definition.scss';
-@import 'splitter/icons/material.scss';
-@import 'splitter/all.scss';
-@import 'dashboard-layout/material-definition.scss';
-@import 'dashboard-layout/icons/material.scss';
-@import 'dashboard-layout/all.scss';
-@import 'timeline/material-definition.scss';
-@import 'timeline/all.scss';
+@use 'card/material-definition' as *;
+@use 'card/all.material' as *;
+@use 'splitter/material-definition' as *;
+@use 'splitter/icons/material' as *;
+@use 'splitter/all.material' as *;
+@use 'dashboard-layout/material-definition' as *;
+@use 'dashboard-layout/icons/material' as *;
+@use 'dashboard-layout/all.material' as *;
+@use 'timeline/material-definition' as *;
+@use 'timeline/all.material' as *;