@syncfusion/blazor-themes 23.2.6 → 24.1.41

package/SCSS-Themes/navigations/pager/bootstrap5.scss

@@ -149,6 +149,22 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-bigger-adaptive-dropdown-margin: -3px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 6px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -6px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;
 
 @include export-module('pager-layout') {
   
@@ -421,6 +437,31 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
     .e-np:hover {
       font-size: $pager-bigger-tripledot-font-size;
     }
+    &.e-adaptive {
+      div.e-parentmsgbar {
+        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
+      }
+      .e-pagerdropdown {
+        margin: $pager-bigger-adaptive-dropdown-margin;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-bigger-adaptive-constant-pagesizeall-top;
+      }
+    }
+
+    &.e-rtl {
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
+        }
+        div.e-pagerdropdown {
+          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
+        }
+      }
+    }
   }
 
   .e-bigger .e-responsive  #{&}.e-pager,
@@ -747,6 +788,64 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
         padding: $pager-focus-tripledot-padding;
       }
     }
+    
+    &.e-adaptive {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $pager-bigger-adaptive-pager-padding;
+
+      div.e-parentmsgbar {
+        margin: 0 5px;
+        margin-top: $pager-adaptive-pagermsgbar-margin-top;
+        flex-grow: 1;
+        min-width: 10px;
+        white-space: nowrap;
+      }
+      .e-pagesizes {
+        display: inline-flex;
+        width: auto;
+      }
+      .e-pagerdropdown {
+        margin: $pager-adaptive-dropdown-margin;
+        width: $pager-bigger-adaptive-dropdown-min-width;
+        min-width: $pager-bigger-adaptive-dropdown-min-width;
+        order: 2;
+        height: 40px;
+        padding-right: 5px;
+      }
+      .e-pagerconstant {
+        font-size: 12px;
+        position: relative;
+        top: $pager-bigger-adaptive-constant-top;
+        order: 1;
+        min-width: 52px;
+        @if $pager-skin == 'tailwind' {
+          max-height: 42px;
+        }
+        @else {
+          max-height: 34px;
+        }
+        margin: 0 8px 0 10px;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-adaptive-constant-pagesizeall-top;
+        text-align: center;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        padding: 1% 2%;
+        width: 5%;
+      }
+
+      .e-mfirst,
+      .e-mlast {
+        width: calc(5% + 11px);
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -1014,6 +1113,37 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
         }
       }
 
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin: 0 5px;
+          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
+          padding-top: 0;
+        }
+        div.e-pagerconstant {
+          margin: $pager-rtl-adaptive-constant-top;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-adaptive-constant-pagesizeall-top;
+        }
+        div.e-pagerdropdown {
+          min-width: 92px;
+          margin: $pager-rtl-adaptive-dropdown-margin;
+          padding: 0 0 0 5px;
+        }
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          padding: 1% 2%;
+          width: 5%;
+        }
+
+        .e-mfirst,
+        .e-mlast {
+          width: calc(5% + 11px);
+        }
+      }
+
       @media (max-width: 769px) {
         .e-mfirst,
         .e-mprev,

package/SCSS-Themes/navigations/pager/fabric-dark.scss

@@ -133,6 +133,22 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $neutral-secondary inset !default;
 $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 7px !default;
+$pager-adaptive-pagermsgbar-margin-top: -6px !default;
+$pager-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;
 
 @include export-module('pager-layout') {
   
@@ -405,6 +421,31 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
     .e-np:hover {
       font-size: $pager-bigger-tripledot-font-size;
     }
+    &.e-adaptive {
+      div.e-parentmsgbar {
+        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
+      }
+      .e-pagerdropdown {
+        margin: $pager-bigger-adaptive-dropdown-margin;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-bigger-adaptive-constant-pagesizeall-top;
+      }
+    }
+
+    &.e-rtl {
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
+        }
+        div.e-pagerdropdown {
+          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
+        }
+      }
+    }
   }
 
   .e-bigger .e-responsive  #{&}.e-pager,
@@ -731,6 +772,64 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
         padding: $pager-focus-tripledot-padding;
       }
     }
+    
+    &.e-adaptive {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $pager-bigger-adaptive-pager-padding;
+
+      div.e-parentmsgbar {
+        margin: 0 5px;
+        margin-top: $pager-adaptive-pagermsgbar-margin-top;
+        flex-grow: 1;
+        min-width: 10px;
+        white-space: nowrap;
+      }
+      .e-pagesizes {
+        display: inline-flex;
+        width: auto;
+      }
+      .e-pagerdropdown {
+        margin: $pager-adaptive-dropdown-margin;
+        width: $pager-bigger-adaptive-dropdown-min-width;
+        min-width: $pager-bigger-adaptive-dropdown-min-width;
+        order: 2;
+        height: 40px;
+        padding-right: 5px;
+      }
+      .e-pagerconstant {
+        font-size: 12px;
+        position: relative;
+        top: $pager-bigger-adaptive-constant-top;
+        order: 1;
+        min-width: 52px;
+        @if $pager-skin == 'tailwind' {
+          max-height: 42px;
+        }
+        @else {
+          max-height: 34px;
+        }
+        margin: 0 8px 0 10px;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-adaptive-constant-pagesizeall-top;
+        text-align: center;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        padding: 1% 2%;
+        width: 5%;
+      }
+
+      .e-mfirst,
+      .e-mlast {
+        width: calc(5% + 11px);
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -998,6 +1097,37 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
         }
       }
 
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin: 0 5px;
+          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
+          padding-top: 0;
+        }
+        div.e-pagerconstant {
+          margin: $pager-rtl-adaptive-constant-top;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-adaptive-constant-pagesizeall-top;
+        }
+        div.e-pagerdropdown {
+          min-width: 92px;
+          margin: $pager-rtl-adaptive-dropdown-margin;
+          padding: 0 0 0 5px;
+        }
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          padding: 1% 2%;
+          width: 5%;
+        }
+
+        .e-mfirst,
+        .e-mlast {
+          width: calc(5% + 11px);
+        }
+      }
+
       @media (max-width: 769px) {
         .e-mfirst,
         .e-mprev,

package/SCSS-Themes/navigations/pager/fabric.scss

@@ -131,6 +131,22 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $neutral-secondary inset !default;
 $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
+$pager-bigger-adaptive-dropdown-margin: 1px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 8px !default;
+$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 7px !default;
+$pager-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-adaptive-dropdown-margin: 4px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 13px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 12px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;
 
 @include export-module('pager-layout') {
   
@@ -403,6 +419,31 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
     .e-np:hover {
       font-size: $pager-bigger-tripledot-font-size;
     }
+    &.e-adaptive {
+      div.e-parentmsgbar {
+        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
+      }
+      .e-pagerdropdown {
+        margin: $pager-bigger-adaptive-dropdown-margin;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-bigger-adaptive-constant-pagesizeall-top;
+      }
+    }
+
+    &.e-rtl {
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
+        }
+        div.e-pagerdropdown {
+          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
+        }
+      }
+    }
   }
 
   .e-bigger .e-responsive  #{&}.e-pager,
@@ -729,6 +770,64 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
         padding: $pager-focus-tripledot-padding;
       }
     }
+    
+    &.e-adaptive {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $pager-bigger-adaptive-pager-padding;
+
+      div.e-parentmsgbar {
+        margin: 0 5px;
+        margin-top: $pager-adaptive-pagermsgbar-margin-top;
+        flex-grow: 1;
+        min-width: 10px;
+        white-space: nowrap;
+      }
+      .e-pagesizes {
+        display: inline-flex;
+        width: auto;
+      }
+      .e-pagerdropdown {
+        margin: $pager-adaptive-dropdown-margin;
+        width: $pager-bigger-adaptive-dropdown-min-width;
+        min-width: $pager-bigger-adaptive-dropdown-min-width;
+        order: 2;
+        height: 40px;
+        padding-right: 5px;
+      }
+      .e-pagerconstant {
+        font-size: 12px;
+        position: relative;
+        top: $pager-bigger-adaptive-constant-top;
+        order: 1;
+        min-width: 52px;
+        @if $pager-skin == 'tailwind' {
+          max-height: 42px;
+        }
+        @else {
+          max-height: 34px;
+        }
+        margin: 0 8px 0 10px;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-adaptive-constant-pagesizeall-top;
+        text-align: center;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        padding: 1% 2%;
+        width: 5%;
+      }
+
+      .e-mfirst,
+      .e-mlast {
+        width: calc(5% + 11px);
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -996,6 +1095,37 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
         }
       }
 
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin: 0 5px;
+          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
+          padding-top: 0;
+        }
+        div.e-pagerconstant {
+          margin: $pager-rtl-adaptive-constant-top;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-adaptive-constant-pagesizeall-top;
+        }
+        div.e-pagerdropdown {
+          min-width: 92px;
+          margin: $pager-rtl-adaptive-dropdown-margin;
+          padding: 0 0 0 5px;
+        }
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          padding: 1% 2%;
+          width: 5%;
+        }
+
+        .e-mfirst,
+        .e-mlast {
+          width: calc(5% + 11px);
+        }
+      }
+
       @media (max-width: 769px) {
         .e-mfirst,
         .e-mprev,

package/SCSS-Themes/navigations/pager/fluent-dark.scss

@@ -136,6 +136,22 @@ $pager-focus-tripledot-padding: $pager-tripledot-padding !default;
 $pager-focus-tripledot-line-height: 1 !default;
 $pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-bigger-adaptive-dropdown-margin: -4px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 4px !default;
+$pager-rtl-adaptive-constant-top: 4px 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 0 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 0 !default;
+$pager-bigger-adaptive-pager-padding: 9px !default;
+$pager-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 9px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 6px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 10px !default;
 
 @include export-module('pager-layout') {
   
@@ -408,6 +424,31 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
     .e-np:hover {
       font-size: $pager-bigger-tripledot-font-size;
     }
+    &.e-adaptive {
+      div.e-parentmsgbar {
+        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
+      }
+      .e-pagerdropdown {
+        margin: $pager-bigger-adaptive-dropdown-margin;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-bigger-adaptive-constant-pagesizeall-top;
+      }
+    }
+
+    &.e-rtl {
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
+        }
+        div.e-pagerdropdown {
+          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
+        }
+      }
+    }
   }
 
   .e-bigger .e-responsive  #{&}.e-pager,
@@ -734,6 +775,64 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
         padding: $pager-focus-tripledot-padding;
       }
     }
+    
+    &.e-adaptive {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $pager-bigger-adaptive-pager-padding;
+
+      div.e-parentmsgbar {
+        margin: 0 5px;
+        margin-top: $pager-adaptive-pagermsgbar-margin-top;
+        flex-grow: 1;
+        min-width: 10px;
+        white-space: nowrap;
+      }
+      .e-pagesizes {
+        display: inline-flex;
+        width: auto;
+      }
+      .e-pagerdropdown {
+        margin: $pager-adaptive-dropdown-margin;
+        width: $pager-bigger-adaptive-dropdown-min-width;
+        min-width: $pager-bigger-adaptive-dropdown-min-width;
+        order: 2;
+        height: 40px;
+        padding-right: 5px;
+      }
+      .e-pagerconstant {
+        font-size: 12px;
+        position: relative;
+        top: $pager-bigger-adaptive-constant-top;
+        order: 1;
+        min-width: 52px;
+        @if $pager-skin == 'tailwind' {
+          max-height: 42px;
+        }
+        @else {
+          max-height: 34px;
+        }
+        margin: 0 8px 0 10px;
+      }
+      .e-pagerconstant.e-page-all {
+        top: $pager-adaptive-constant-pagesizeall-top;
+        text-align: center;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        padding: 1% 2%;
+        width: 5%;
+      }
+
+      .e-mfirst,
+      .e-mlast {
+        width: calc(5% + 11px);
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -1001,6 +1100,37 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
         }
       }
 
+      &.e-adaptive.e-rtl {
+        div.e-parentmsgbar {
+          margin: 0 5px;
+          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
+          padding-top: 0;
+        }
+        div.e-pagerconstant {
+          margin: $pager-rtl-adaptive-constant-top;
+        }
+        div.e-pagerconstant.e-page-all {
+          top: $pager-rtl-adaptive-constant-pagesizeall-top;
+        }
+        div.e-pagerdropdown {
+          min-width: 92px;
+          margin: $pager-rtl-adaptive-dropdown-margin;
+          padding: 0 0 0 5px;
+        }
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          padding: 1% 2%;
+          width: 5%;
+        }
+
+        .e-mfirst,
+        .e-mlast {
+          width: calc(5% + 11px);
+        }
+      }
+
       @media (max-width: 769px) {
         .e-mfirst,
         .e-mprev,