@syncfusion/ej2-lists 25.1.41 → 26.1.35

package/styles/list-view/_material3-definition.scss

@@ -1,4 +1,3 @@
-//layout
 $listview-icon-margin-right: 10px !default;
 $listview-icon-back-margin: 0 !default;
 $listview-icon-back-margin-right: 14px !default;
@@ -51,8 +50,6 @@ $listview-checkbox-right-margin: -2px 0 0 8px !default;
 $listview-checkbox-left-margin: 0 8px 0 0 !default;
 $listview-rtl-checkbox-left-margin: -2px 0 0 8px !default;
 $listview-rtl-checkbox-right-margin: -2px 8px 0 0 !default;
-
-//ListView In-built template variables
 $listview-template-padding: 10px 16px !default;
 $listview-template-avatar-padding-right: 16px !default;
 $listview-template-avatar-padding-left: 68px !default;
@@ -91,8 +88,6 @@ $listview-touch-template-badge-height: 20px !default;
 $listview-touch-template-badge-width: 34px !default;
 $listview-touch-template-badge-line-height: 18px !default;
 $listview-touch-template-badge-font-size: $text-xs !default;
-
-//color
 $listview-font-family: $font-family !default;
 $listview-text-color: rgba($content-text-color) !default;
 $listview-text-disabled: $content-text-color-disabled !default;
@@ -127,8 +122,6 @@ $listview-icon-pressed: rgba($icon-color-pressed) !default;
 $checkmark-bgcolor: rgba($primary) !default;
 $checkmark-border-color: rgba($primary) !default;
 $checkmark-color: rgba($primary-text-color) !default;
-
-//ListView In-built template variables
 $listview-template-multiline-header-color: rgba($content-text-color) !default;
 $listview-template-multiline-content-color: rgba($content-text-color-alt1) !default;
 $listview-template-focused-multiline-content-color: rgba($content-text-color-selected) !default;

package/styles/list-view/_theme.scss

@@ -1,13 +1,30 @@
-@include export-module('listview-theme') {
+@mixin avatar-padding($left, $right) {
+  padding-left: $left;
+  padding-right: $right;
+}
+
+@mixin list-color($bg-color, $color, $border) {
+  background-color: $bg-color;
+  color: $color;
+  border-color: $border;
+}
+
+@mixin avatar-size($height, $width, $top, $left, $right) {
+  height: $height;
+  width: $width;
+  top: $top;
+  left: $left;
+  right: $right;
+}
+
+@include export-module('listview-theme') {
   .e-listview {
     border-color: $listview-line-color;
     font-family: $listview-font-family;
     font-size: $listview-font-size;
     @at-root {
       & .e-list-header {
-        background-color: $listview-header-bg;
-        border-color: $listview-header-border;
-        color: $listview-header-text-color;
+        @include list-color($listview-header-bg, $listview-header-text-color, $listview-header-border);
         font-size: $listview-header-font-size;
       }
 
@@ -15,73 +32,66 @@
         color: $listview-icon-color;
 
         @if ($skin-name == 'tailwind') {
-          &.e-back-button:hover,
-          &.e-icon-collapsible:hover {
-            color: $icon-color-hover;
+          &.e-back-button,
+          &.e-icon-collapsible {
+            &:hover {
+              color: $icon-color-hover;
+            }
           }
         }
         @if ($skin-name == 'bootstrap5') {
-          &.e-back-button:hover {
-            color: $icon-color-hover;
-          }
-
-          &.e-back-button:active {
-            color: $icon-color-pressed;
+          &.e-back-button{
+            &:hover {
+              color: $icon-color-hover;
+            }
+            &:active {
+              color: $icon-color-pressed;
+            }
           }
         }
       }
 
       & .e-list-item {
-        background-color: $listview-background;
         border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
         border-left: $listview-border-left solid $listview-border-left-color;
         border-right: $listview-border-right solid $listview-border-right-color;
         border-top: $listview-border-top solid $listview-border-top-color;
-        color: $listview-text-color;
-      }
+        @include list-color($listview-background, $listview-text-color, null);
 
-      & .e-list-item.e-hover,
-      & .e-list-item.e-hover.e-active.e-checklist {
-        background-color: $listview-item-hover-bg;
-        border-color: $listview-hover-border-color;
-        color: $listview-text-hover-color;
-      }
-
-      & .e-list-item.e-active {
-        background-color: $listview-item-active-bg;
-        color: $listview-text-active-color;
-      }
+        &.e-hover,
+        &.e-hover.e-active.e-checklist {
+          @include list-color($listview-item-hover-bg, $listview-text-hover-color, $listview-hover-border-color);
+        }
 
-      & .e-list-item.e-active.e-checklist {
-        background-color: $listview-background;
-        color: $listview-text-color;
+        &.e-active {
+          @include list-color($listview-item-active-bg, $listview-text-active-color, null);
 
-        @if $skin-name == 'Material3' {
-          & .e-checkbox-wrapper .e-frame.e-check {
-            color: $checkmark-color;
+          &.e-checklist {
+            @include list-color($listview-background, $listview-text-color, null);
+    
+            @if $skin-name == 'Material3' {
+              & .e-checkbox-wrapper .e-frame.e-check {
+                color: $checkmark-color;
+              }
+            }
           }
         }
-      }
 
-      & .e-list-item.e-focused,
-      & .e-list-item.e-focused.e-active.e-checklist {
-        background-color: $listview-item-active-bg;
-        color: $listview-text-active-color;
-      }
+        &.e-focused,
+        &.e-focused.e-active.e-checklist {
+          @include list-color($listview-item-active-bg, $listview-text-active-color, null);
+        }
 
-      & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
-      & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
-        @if ($skin-name != 'tailwind' and $skin-name != 'Material3') {
-          background-color: $checkmark-bgcolor;
-          border-color: $checkmark-border-color;
-          color: $checkmark-color;
+        &.e-focused .e-checkbox-wrapper .e-frame.e-check,
+        &.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
+          @if ($skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+            @include list-color($checkmark-bgcolor, $checkmark-color, $checkmark-border-color);
+          }
         }
       }
 
       & .e-list-group-item {
-        background-color: $listview-groupheader-bg;
-        border-color: $listview-header-border;
-        color: $listview-groupheader-text-color;
+        @include list-color($listview-groupheader-bg, $listview-groupheader-text-color, $listview-header-border);
         font-size: $listview-groupheader-font-size;
       }
 
@@ -123,6 +133,10 @@
               font-weight: $font-weight-normal;
               line-height: 22px;
             }
+            @else if $skin-name == 'fluent2' {
+              font-weight: $font-weight-normal;
+              line-height: 20px;
+            }
             @else {
               font-weight: 500;
             }
@@ -146,6 +160,9 @@
                 line-height: 22px;
               }
             }
+            @if ($skin-name == 'fluent2') {
+              line-height: 16px;
+            }
             margin: 0;
             padding: $listview-template-multiline-content-padding;
             word-wrap: break-word;
@@ -160,12 +177,9 @@
 
         &.e-list-avatar {
           .e-avatar {
-            height: $listview-template-avatar-size;
-            left: $listview-template-avatar-left;
+            @include avatar-size($listview-template-avatar-size, $listview-template-avatar-size, $listview-template-avatar-top, $listview-template-avatar-left, null);
             position: absolute;
-            top: $listview-template-avatar-top;
-            width: $listview-template-avatar-size;
-            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
               margin: $listview-template-avatar-margin;
             }
             @if $skin-name == 'Material3' {
@@ -175,20 +189,15 @@
         }
 
         &.e-list-avatar:not(.e-list-badge) {
-          padding-left: $listview-template-avatar-padding-left;
-          padding-right: $listview-template-avatar-padding-right;
+          @include avatar-padding($listview-template-avatar-padding-left, $listview-template-avatar-padding-right);
         }
 
         &.e-list-avatar-right:not(.e-list-badge) {
-          padding-left: $listview-template-avatar-rightposition-padding-left;
-          padding-right: $listview-template-avatar-rightposition-padding-right;
+          @include avatar-padding($listview-template-avatar-rightposition-padding-left, $listview-template-avatar-rightposition-padding-right);
 
           .e-avatar {
-            height: $listview-template-avatar-size;
+            @include avatar-size($listview-template-avatar-size, $listview-template-avatar-size, $listview-template-avatar-top, null, $listview-template-avatar-rightposition-right);
             position: absolute;
-            right: $listview-template-avatar-rightposition-right;
-            top: $listview-template-avatar-top;
-            width: $listview-template-avatar-size;
           }
         }
 
@@ -207,28 +216,23 @@
         &.e-list-badge {
           .e-badge {
             font-size: $listview-template-badge-font-size;
-            height: $listview-template-badge-height;
+            @include avatar-size($listview-template-badge-height, $listview-template-badge-width, 50%, null, $listview-template-badge-right);
             line-height: $listview-template-badge-line-height;
             padding: 0;
             position: absolute;
-            right: $listview-template-badge-right;
-            top: 50%;
             transform: translateY(-50%);
-            width: $listview-template-badge-width;
-            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
               border-radius: 10px;
             }
           }
         }
 
         &.e-list-badge.e-list-avatar {
-          padding-left: $listview-template-avatar-badge-padding-left;
-          padding-right: $listview-template-avatar-badge-padding-right;
+          @include avatar-padding($listview-template-avatar-badge-padding-left, $listview-template-avatar-badge-padding-right);
         }
 
         &.e-list-badge:not(.e-list-avatar) {
-          padding-left: $listview-template-badgewithoutavatar-padding-left;
-          padding-right: $listview-template-badgewithoutavatar-padding-right;
+          @include avatar-padding($listview-template-badgewithoutavatar-padding-left, $listview-template-badgewithoutavatar-padding-right);
         }
 
         &:not(.e-list-multi-line) {
@@ -239,7 +243,7 @@
             padding: $listview-template-item-padding;
             text-overflow: ellipsis;
             white-space: nowrap;
-            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
               font-size: $listview-font-size;
               line-height: $listview-item-line-height;
             }
@@ -250,32 +254,21 @@
       .e-list-item {
         &.e-focused {
           .e-list-wrapper.e-list-multi-line {
-            .e-list-item-header {
-              @if ($skin-name == 'bootstrap5') {
-                color: $content-text-color-selected;
-              }
-            }
-
-            .e-list-content {
-              @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5') {
+              .e-list-item-header,
+              .e-list-content {
                 color: $content-text-color-selected;
               }
             }
           }
         }
 
-        &.e-hover .e-list-item-header {
-          color: $listview-text-hover-color;
-        }
-
+        &.e-hover .e-list-item-header,
         &.e-hover .e-list-content {
           color: $listview-text-hover-color;
         }
 
-        &.e-active .e-list-item-header {
-          color: $listview-text-active-color;
-        }
-
+        &.e-active .e-list-item-header,
         &.e-active .e-list-content {
           color: $listview-text-active-color;
         }
@@ -295,13 +288,11 @@
         }
 
         &.e-list-avatar:not(.e-list-badge) {
-          padding-left: $listview-template-avatar-padding-right;
-          padding-right: $listview-template-avatar-padding-left;
+          @include avatar-padding($listview-template-avatar-padding-right, $listview-template-avatar-padding-left);
         }
 
         &.e-list-avatar-right:not(.e-list-badge) {
-          padding-left: $listview-template-avatar-rightposition-padding-right;
-          padding-right: $listview-template-avatar-rightposition-padding-left;
+          @include avatar-padding($listview-template-avatar-rightposition-padding-right, $listview-template-avatar-rightposition-padding-left);
 
           .e-avatar {
             left: $listview-template-avatar-rightposition-right;
@@ -317,13 +308,11 @@
         }
 
         &.e-list-badge.e-list-avatar {
-          padding-left: $listview-template-avatar-badge-padding-right;
-          padding-right: $listview-template-avatar-badge-padding-left;
+          @include avatar-padding($listview-template-avatar-badge-padding-right, $listview-template-avatar-badge-padding-left);
         }
 
         &.e-list-badge:not(.e-list-avatar) {
-          padding-left: $listview-template-badgewithoutavatar-padding-right;
-          padding-right: $listview-template-badgewithoutavatar-padding-left;
+          @include avatar-padding($listview-template-badgewithoutavatar-padding-right, $listview-template-badgewithoutavatar-padding-left);
         }
       }
     }