@syncfusion/ej2-layouts 19.2.60 → 19.3.43

package/styles/avatar/_bootstrap5-definition.scss

@@ -0,0 +1,25 @@
+// Avatar Base
+$avatar-base-border-radius: 2px !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: $icon-color !default;
+$avatar-base-font-weight: $font-weight-medium !default;
+$avatar-base-img-height: 100% !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;

package/styles/avatar/_layout.scss

@@ -17,7 +17,7 @@
     overflow: hidden;
     position: relative;
     width: $avatar-base-width;
-    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
       line-height: $avatar-base-line-height;
     }
 
@@ -32,7 +32,7 @@
 
     &.e-avatar-xsmall {
       font-size: $avatar-xsmall-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 24px;
         line-height: $avatar-base-xsmall-line-height;
         width: 24px;
@@ -41,7 +41,7 @@
 
     &.e-avatar-small {
       font-size: $avatar-small-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 32px;
         line-height: $avatar-base-small-line-height;
         width: 32px;
@@ -50,7 +50,7 @@
 
     &.e-avatar-large {
       font-size: $avatar-large-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
         height: 48px;
         line-height: $avatar-base-large-line-height;
         width: 48px;
@@ -59,7 +59,7 @@
 
     &.e-avatar-xlarge {
       font-size: $avatar-xlarge-font-size;
-      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
+      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5') {
         height: 56px;
         line-height: $avatar-base-xlarge-line-height;
         width: 56px;

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

@@ -1,25 +1 @@
-// 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;
-
-// 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;
+@import './tailwind-definition.scss';

package/styles/avatar/bootstrap5-dark.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: 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: -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;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5-dark.scss

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

package/styles/avatar/bootstrap5.css

@@ -0,0 +1,61 @@
+.e-avatar {
+  -ms-flex-line-pack: center;
+      align-content: 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: -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;
+  overflow: hidden;
+  position: relative;
+  width: 40px;
+  line-height: 22px;
+}
+
+.e-avatar img {
+  height: 100%;
+  width: auto;
+}
+
+.e-avatar.e-avatar-circle {
+  border-radius: 50%;
+}
+
+.e-avatar.e-avatar-xsmall {
+  font-size: 10px;
+  height: 24px;
+  line-height: 16px;
+  width: 24px;
+}
+
+.e-avatar.e-avatar-small {
+  font-size: 12px;
+  height: 32px;
+  line-height: 18px;
+  width: 32px;
+}
+
+.e-avatar.e-avatar-large {
+  font-size: 18px;
+  height: 48px;
+  line-height: 28px;
+  width: 48px;
+}
+
+.e-avatar.e-avatar-xlarge {
+  font-size: 20px;
+  height: 56px;
+  line-height: 28px;
+  width: 56px;
+}

package/styles/avatar/bootstrap5.scss

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

package/styles/bootstrap-dark.css

@@ -649,6 +649,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -656,6 +660,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/bootstrap.css

@@ -650,6 +650,10 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e984';
   font-family: 'e-icons';
@@ -657,6 +661,10 @@
   transform: rotate(90deg);
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }

package/styles/bootstrap4.css

@@ -657,12 +657,20 @@
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler::before {
   content: '\e71b';
   font-family: 'e-icons';
   font-size: 14px;
 }
 
+.e-splitter .e-split-bar.e-split-bar-vertical .e-resize-handler.e-template-resize-handler::before {
+  content: '';
+}
+
 .e-bigger .e-splitter .e-split-bar .e-resize-handler::before {
   font-size: 16px;
 }