@syncfusion/ej2-layouts 31.2.12 → 32.1.24

package/styles/avatar/_layout.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material';
+@import './_layout';

package/styles/avatar/_layout.material3-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3-dark';
+@import './_layout';

package/styles/avatar/_layout.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3';
+@import './_layout';

package/styles/avatar/_layout.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @mixin avatar-size($height, $width, $line-height) {
   height: $height;
   width: $width;
@@ -15,7 +16,7 @@
     border-radius: $avatar-base-border-radius;
     color: $avatar-base-text-color;
     display: inline-flex;
-    font-family: $font-family;
+    font-family: $avatar-font-family;
     font-size: $avatar-base-font-size;
     font-weight: $avatar-base-font-weight;
     height: $avatar-base-height;
@@ -29,7 +30,7 @@
 
     @if ($skin-name == 'fluent2') {
       &:has(:not(img)) {
-        border: 1px solid $avatar-border;
+        border: $avatar-border-width solid $avatar-border;
       }
     }
 
@@ -49,21 +50,21 @@
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(24px, 24px, $avatar-base-xsmall-line-height);
+        @include avatar-size($avatar-base-xsmall-height, $avatar-base-xsmall-width, $avatar-base-xsmall-line-height);
       }
     }
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(32px, 32px, $avatar-base-small-line-height);
+        @include avatar-size($avatar-base-small-height, $avatar-base-small-width, $avatar-base-small-line-height);
       }
     }
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(48px, 48px, $avatar-base-large-line-height);
+        @include avatar-size($avatar-base-large-height, $avatar-base-large-width, $avatar-base-large-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;
@@ -73,7 +74,7 @@
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
       @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
-        @include avatar-size(56px, 56px, $avatar-base-xlarge-line-height);
+        @include avatar-size($avatar-base-xlarge-height, $avatar-base-xlarge-width, $avatar-base-xlarge-line-height);
       }
       @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
         border-radius: $avatar-large-border-radius;

package/styles/avatar/_layout.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind-dark';
+@import './_layout';

package/styles/avatar/_layout.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind';
+@import './_layout';

package/styles/avatar/_layout.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind3';
+@import './_layout';

package/styles/avatar/_material-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_material-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
+
 // Avatar Base
 $avatar-base-border-radius: 5px !default;
 $avatar-base-font-size: 1em !default;
@@ -7,6 +10,7 @@ $avatar-base-background-color: #bcbcbc !default;
 $avatar-base-text-color: #fff !default;
 $avatar-base-font-weight: 400 !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;

package/styles/avatar/_material3-dark-definition.scss

@@ -1 +1,34 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$avatar-base-border-radius: $radius-4 !default;
+$avatar-base-background-color: rgba($primary-light) !default;
+$avatar-base-font-size: $text-xl !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 20px !default;
+$avatar-base-text-color: rgba($primary-darker) !default;
+$avatar-base-font-weight: 500 !default;
+$avatar-base-img-height: 100% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
+$avatar-xsmall-font-size: 14px !default;
+$avatar-small-font-size: 18px !default;
+$avatar-large-font-size: 26px !default;
+$avatar-xlarge-font-size: 30px !default;
+$avatar-large-border-radius: $radius-4 !default;
+$avatar-base-xsmall-line-height: 14px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 26px !default;
+$avatar-base-xlarge-line-height: 30px !default;
+$avatar-font-family: $font-family !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_material3-definition.scss

@@ -1,4 +1,6 @@
-$avatar-base-border-radius: 4px !default;
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
+$avatar-base-border-radius: $radius-4 !default;
 $avatar-base-background-color: rgba($primary-light) !default;
 $avatar-base-font-size: $text-xl !default;
 $avatar-base-width: 40px !default;
@@ -7,13 +9,26 @@ $avatar-base-line-height: 20px !default;
 $avatar-base-text-color: rgba($primary-darker) !default;
 $avatar-base-font-weight: 500 !default;
 $avatar-base-img-height: 100% !default;
-$avatar-circle-border-radius: 50% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
 $avatar-xsmall-font-size: 14px !default;
 $avatar-small-font-size: 18px !default;
 $avatar-large-font-size: 26px !default;
 $avatar-xlarge-font-size: 30px !default;
-$avatar-large-border-radius: 4px !default;
+$avatar-large-border-radius: $radius-4 !default;
 $avatar-base-xsmall-line-height: 14px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 26px !default;
 $avatar-base-xlarge-line-height: 30px !default;
+$avatar-font-family: $font-family !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_tailwind-dark-definition.scss

@@ -1 +1,41 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+
+// Avatar Base
+$avatar-base-border-radius: 4px !default;
+$avatar-base-background-color: $content-bg-color-alt3 !default;
+$avatar-base-font-size: $text-sm !default;
+$avatar-base-width: 40px !default;
+$avatar-base-height: 40px !default;
+$avatar-base-line-height: 22px !default;
+$avatar-base-text-color: $content-text-color-alt2 !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
+
+// Circle Avatar
+$avatar-circle-border-radius: 50% !default;
+
+// Avatar size
+$avatar-xsmall-font-size: $text-xxs !default;
+$avatar-small-font-size: $text-xs !default;
+$avatar-large-font-size: $text-lg !default;
+$avatar-xlarge-font-size: $text-xl !default;
+
+// Avatar Line Height
+$avatar-base-xsmall-line-height: 16px !default;
+$avatar-base-small-line-height: 18px !default;
+$avatar-base-large-line-height: 28px !default;
+$avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_tailwind-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
+
 // Avatar Base
 $avatar-base-border-radius: 4px !default;
 $avatar-base-background-color: $content-bg-color-alt3 !default;
@@ -8,6 +11,7 @@ $avatar-base-line-height: 22px !default;
 $avatar-base-text-color: $content-text-color-alt2 !default;
 $avatar-base-font-weight: $font-weight-medium !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
 $avatar-circle-border-radius: 50% !default;
@@ -23,3 +27,15 @@ $avatar-base-xsmall-line-height: 16px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 28px !default;
 $avatar-base-xlarge-line-height: 28px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_tailwind3-definition.scss

@@ -1,5 +1,8 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 // Avatar Base
-$avatar-base-border-radius: 6px !default;
+$avatar-base-border-radius: $radius-6 !default;
 $avatar-base-background-color: $content-bg-color-alt2 !default;
 $avatar-base-font-size: $text-2xl !default;
 $avatar-base-width: 40px !default;
@@ -8,19 +11,32 @@ $avatar-base-line-height: 24px !default;
 $avatar-base-text-color: $icon-color !default;
 $avatar-base-font-weight: $font-weight-normal !default;
 $avatar-base-img-height: 100% !default;
+$avatar-font-family: $font-family !default;
 
 // Circle Avatar
-$avatar-circle-border-radius: 50% !default;
+$avatar-circle-border-radius: $border-radius-50p !default;
 
 // Avatar size
 $avatar-xsmall-font-size: $text-base !default;
 $avatar-small-font-size: $text-lg !default;
 $avatar-large-font-size: $text-3xl !default;
 $avatar-xlarge-font-size: 34px !default;
-$avatar-large-border-radius: 4px !default;
+$avatar-large-border-radius: $radius-4 !default;
 
 // Avatar Line Height
 $avatar-base-xsmall-line-height: 16px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 30px !default;
 $avatar-base-xlarge-line-height: 34px !default;
+
+//Avatar Height
+$avatar-base-xsmall-height: 24px !default;
+$avatar-base-small-height: 32px !default;
+$avatar-base-large-height: 48px !default;
+$avatar-base-xlarge-height: 56px !default;
+
+//Avatar Width
+$avatar-base-xsmall-width: 24px !default;
+$avatar-base-small-width: 32px !default;
+$avatar-base-large-width: 48px !default;
+$avatar-base-xlarge-width: 56px !default;

package/styles/avatar/_theme-variables.bds.scss

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

package/styles/avatar/_theme-variables.bootstrap-dark.scss

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

package/styles/avatar/_theme-variables.bootstrap.scss

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

package/styles/avatar/_theme-variables.bootstrap4.scss

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

package/styles/avatar/_theme-variables.bootstrap5-dark.scss

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

package/styles/avatar/_theme-variables.bootstrap5.3.scss

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

package/styles/avatar/_theme-variables.bootstrap5.scss

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

package/styles/avatar/_theme-variables.fabric-dark.scss

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

package/styles/avatar/_theme-variables.fabric.scss

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

package/styles/avatar/_theme-variables.fluent-dark.scss

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

package/styles/avatar/_theme-variables.fluent.scss

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

package/styles/avatar/_theme-variables.fluent2.scss

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

package/styles/avatar/_theme-variables.highcontrast-light.scss

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

package/styles/avatar/_theme-variables.highcontrast.scss

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

package/styles/avatar/_theme-variables.material-dark.scss

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

package/styles/avatar/_theme-variables.material.scss

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

package/styles/avatar/_theme-variables.material3-dark.scss

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

package/styles/avatar/_theme-variables.material3.scss

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

package/styles/avatar/_theme-variables.tailwind-dark.scss

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

package/styles/avatar/_theme-variables.tailwind.scss

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

package/styles/avatar/_theme-variables.tailwind3.scss

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

package/styles/avatar/bds.css

@@ -2,6 +2,14 @@
 
 
 
+.e-avatar {
+  border: 1px solid var(--color-sf-utility-avatar-border-color);
+}
+
+
+
+
+
 .e-avatar {
   border: 1px solid var(--color-sf-utility-avatar-border-color);
 }

package/styles/avatar/bds.scss

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

package/styles/avatar/bootstrap-dark.scss

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

package/styles/avatar/bootstrap.scss

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

package/styles/avatar/bootstrap4.scss

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

package/styles/avatar/bootstrap5-dark.scss

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

package/styles/avatar/bootstrap5.3.css

@@ -2,6 +2,170 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
@@ -12,12 +176,12 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
   color: var(--color-sf-icon-color);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   height: 40px;
@@ -55,12 +219,12 @@
   height: 48px;
   width: 48px;
   line-height: 28px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
   height: 56px;
   width: 56px;
   line-height: 28px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }

package/styles/avatar/bootstrap5.3.scss

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

package/styles/avatar/bootstrap5.scss

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