@syncfusion/ej2-layouts 25.2.3 → 26.1.38

package/styles/avatar/_layout.scss

@@ -1,3 +1,9 @@
+@mixin avatar-size($height, $width, $line-height) {
+  height: $height;
+  width: $width;
+  line-height: $line-height;
+}
+
 @include export-module('avatar-layout') {
   .e-avatar {
     align-content: center;
@@ -21,6 +27,12 @@
       line-height: $avatar-base-line-height;
     }
 
+    @if $skin-name == 'fluent2' {
+      &:has(:not(img)) {
+        border: 1px solid $avatar-border;
+      }
+    }
+
     img {
       height: $avatar-base-img-height;
       width: auto;
@@ -36,44 +48,36 @@
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-        height: 24px;
-        line-height: $avatar-base-xsmall-line-height;
-        width: 24px;
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        @include avatar-size(24px, 24px, $avatar-base-xsmall-line-height);
       }
     }
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-        height: 32px;
-        line-height: $avatar-base-small-line-height;
-        width: 32px;
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        @include avatar-size(32px, 32px, $avatar-base-small-line-height);
       }
     }
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        @include avatar-size(48px, 48px, $avatar-base-large-line-height);
+      }
       @if ($skin-name == 'bootstrap5') {
         border-radius: $avatar-large-border-radius;
       }
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-        height: 48px;
-        line-height: $avatar-base-large-line-height;
-        width: 48px;
-      }
     }
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        @include avatar-size(56px, 56px, $avatar-base-xlarge-line-height);
+      }
       @if ($skin-name == 'bootstrap5') {
         border-radius: $avatar-large-border-radius;
       }
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-        height: 56px;
-        line-height: $avatar-base-xlarge-line-height;
-        width: 56px;
-      }
     }
   }
 }

package/styles/avatar/_material3-definition.scss

@@ -1,4 +1,3 @@
-// Avatar Base
 $avatar-base-border-radius: 4px !default;
 $avatar-base-background-color: rgba($primary-light) !default;
 $avatar-base-font-size: $text-xl !default;
@@ -8,18 +7,12 @@ $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;
-
-// Circle Avatar
 $avatar-circle-border-radius: 50% !default;
-
-// Avatar size
 $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 Line Height
 $avatar-base-xsmall-line-height: 14px !default;
 $avatar-base-small-line-height: 18px !default;
 $avatar-base-large-line-height: 26px !default;

package/styles/avatar/bootstrap-dark.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #bcbcbc;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 5px;
   color: #fff;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 1em;
   font-weight: 400;
   height: 3em;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 3em;

package/styles/avatar/bootstrap.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #bcbcbc;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 5px;
   color: #fff;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 1em;
   font-weight: 400;
   height: 3em;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 3em;

package/styles/avatar/bootstrap4.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #e9ecef;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   color: #212529;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 1.05em;
   font-weight: 400;
   height: 2.5em;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 2.5em;

package/styles/avatar/bootstrap5-dark.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #495057;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 2px;
   color: #adb5bd;
+  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-size: 14px;
   font-weight: 500;
   height: 40px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 40px;
@@ -35,26 +38,26 @@
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
-  line-height: 16px;
   width: 24px;
+  line-height: 16px;
 }
 .e-avatar.e-avatar-small {
   font-size: 12px;
   height: 32px;
-  line-height: 18px;
   width: 32px;
+  line-height: 18px;
 }
 .e-avatar.e-avatar-large {
   font-size: 18px;
-  border-radius: 4px;
   height: 48px;
-  line-height: 28px;
   width: 48px;
+  line-height: 28px;
+  border-radius: 4px;
 }
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
-  border-radius: 4px;
   height: 56px;
-  line-height: 28px;
   width: 56px;
+  line-height: 28px;
+  border-radius: 4px;
 }

package/styles/avatar/bootstrap5.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #dee2e6;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 2px;
   color: #6c757d;
+  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-size: 14px;
   font-weight: 500;
   height: 40px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 40px;
@@ -35,26 +38,26 @@
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
-  line-height: 16px;
   width: 24px;
+  line-height: 16px;
 }
 .e-avatar.e-avatar-small {
   font-size: 12px;
   height: 32px;
-  line-height: 18px;
   width: 32px;
+  line-height: 18px;
 }
 .e-avatar.e-avatar-large {
   font-size: 18px;
-  border-radius: 4px;
   height: 48px;
-  line-height: 28px;
   width: 48px;
+  line-height: 28px;
+  border-radius: 4px;
 }
 .e-avatar.e-avatar-xlarge {
   font-size: 20px;
-  border-radius: 4px;
   height: 56px;
-  line-height: 28px;
   width: 56px;
+  line-height: 28px;
+  border-radius: 4px;
 }

package/styles/avatar/fabric-dark.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #bcbcbc;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 5px;
   color: #fff;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 1em;
   font-weight: 400;
   height: 3em;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 3em;

package/styles/avatar/fabric.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #bcbcbc;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 5px;
   color: #fff;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 1em;
   font-weight: 400;
   height: 3em;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 3em;

package/styles/avatar/fluent-dark.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #292827;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   color: #a19f9d;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 40px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 40px;
@@ -35,24 +38,24 @@
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
-  line-height: 16px;
   width: 24px;
+  line-height: 16px;
 }
 .e-avatar.e-avatar-small {
   font-size: 12px;
   height: 32px;
-  line-height: 18px;
   width: 32px;
+  line-height: 18px;
 }
 .e-avatar.e-avatar-large {
   font-size: 20px;
   height: 48px;
-  line-height: 28px;
   width: 48px;
+  line-height: 28px;
 }
 .e-avatar.e-avatar-xlarge {
   font-size: 24px;
   height: 56px;
-  line-height: 28px;
   width: 56px;
+  line-height: 28px;
 }

package/styles/avatar/fluent.css

@@ -1,22 +1,25 @@
 .e-avatar {
   -ms-flex-line-pack: center;
       align-content: center;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   background-color: #edebe9;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 4px;
   color: #605e5c;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 40px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   overflow: hidden;
   position: relative;
   width: 40px;
@@ -35,24 +38,24 @@
 .e-avatar.e-avatar-xsmall {
   font-size: 10px;
   height: 24px;
-  line-height: 16px;
   width: 24px;
+  line-height: 16px;
 }
 .e-avatar.e-avatar-small {
   font-size: 12px;
   height: 32px;
-  line-height: 18px;
   width: 32px;
+  line-height: 18px;
 }
 .e-avatar.e-avatar-large {
   font-size: 20px;
   height: 48px;
-  line-height: 28px;
   width: 48px;
+  line-height: 28px;
 }
 .e-avatar.e-avatar-xlarge {
   font-size: 24px;
   height: 56px;
-  line-height: 28px;
   width: 56px;
+  line-height: 28px;
 }