@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/pager/_layout.scss

@@ -86,6 +86,10 @@
 
       div.e-parentmsgbar {
         padding: $pager-device-messabar-padding;
+        @if $pager-skin == 'material3' {
+          vertical-align: top;
+          margin-top: 5px;
+        }
       }
     }
 
@@ -137,6 +141,9 @@
       @else if $pager-skin == 'bootstrap5' {
         padding: 9px 13px 10px 12px;
       }
+      @else if $pager-skin == 'material3' {
+        padding: 10px 15px;
+      }
     }
 
     &.e-rtl .e-numericitem.e-currentitem:hover {
@@ -146,6 +153,9 @@
       @else if $pager-skin == 'bootstrap5' {
         padding: 9px 13px 10px 12px;
       }
+      @else if $pager-skin == 'material3' {
+        padding: 10px 15px;
+      }
     }
 
     .e-pp.e-spacing,
@@ -176,43 +186,11 @@
       padding: $pager-bigger-current-item-padding;
     }
 
-    &.e-rtl .e-spacing,
-    &.e-rtl .e-numericitem:hover,
-    &.e-rtl .e-currentitem {
-      @if $pager-skin == 'bootstrap5' {
-        margin: $pager-rtl-numeric-margin;
-        padding: 12px 15px 13px;
-      }
-      @else if $pager-skin == 'tailwind' {
-        margin: $pager-rtl-numeric-margin;
-        padding: 7px 14px;
-      }
-      @else {
-        margin: $pager-rtl-numeric-margin;
-        padding: $pager-activeitem-padding;
-      }
-    }
-
-    .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-      padding: $pager-bigger-current-item-hover-padding;
-    }
-
-    &.e-rtl,
-    &.e-rtl .e-numericitem:hover,
-    &.e-rtl .e-currentitem {
-      margin: $pager-bigger-rtl-numeric-margin;
-      padding: $pager-bigger-rtl-activeitem-padding;
-    }
-
-    &.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-      padding: $pager-bigger-rtl-activeitem-hover-padding;
-    }
-
     &.e-rtl {
-      & .e-pp,
-      & .e-np,
-      & .e-pp:hover,
-      & .e-np:hover {
+      & .e-pp.e-spacing.e-numericitem,
+      & .e-np.e-spacing.e-numericitem,
+      & .e-pp.e-spacing.e-numericitem:hover,
+      & .e-np.e-spacing.e-numericitem:hover {
         font-size: $pager-rtl-bigger-tripledot-font-size;
         margin-top: $pager-tripledot-rtl-bigger-margin-top;
         @if $pager-skin == 'tailwind' {
@@ -221,6 +199,20 @@
         @else if $pager-skin == 'bootstrap5' {
           padding: 14px 14px 13px;
         }
+        @else if $pager-skin == 'material3' {
+          &.e-focused {
+            padding: 10px 12px;
+          }
+          padding: 10px 12px;
+        }
+      }
+
+      .e-spacing,
+      .e-numericitem:hover,
+      .e-currentitem {
+        @if $pager-skin == 'material3' {
+          padding: $pager-bigger-current-item-padding;
+        }
       }
 
       & .e-pagerdropdown {
@@ -279,6 +271,15 @@
     }
   }
 
+  .e-bigger .e-responsive  #{&}.e-pager,
+  .e-responsive #{&}.e-pager.e-bigger {
+    div.e-icons {
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
+    }
+  }
+
   #{&}.e-pager {
     border-style: $pager-border-type;
     border-width: 1px;
@@ -292,6 +293,10 @@
       box-sizing: border-box;
     }
 
+    .e-pager-default.e-hide {
+      display: none;
+    }
+
     div.e-parentmsgbar {
       float: right;
       padding-bottom: $pager-messagebar-padding-bottom;
@@ -338,11 +343,14 @@
       border-right-style: $pager-border-type;
       border-right-width: $pager-border-size;
       display: inline-block;
-      line-height: $pager-font-line-height;
+      line-height: $pager-numeric-font-line-height;
       margin-right: $pager-numericitem-margin-right;
       min-width: $pager-numericitem-min-width;
       padding: $pager-numericitem-padding;
       text-align: center;
+      @if $pager-skin == 'material3' {
+        vertical-align: middle;
+      }
     }
 
     .e-numericitem.e-currentitem {
@@ -410,10 +418,6 @@
       text-decoration: none;
     }
 
-    .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-      padding: $pager-numeric-icon-hover-padding;
-    }
-
     .e-currentitem {
       @if $pager-skin == 'fluent' {
         border-bottom: $pager-active-item-border-bottom;
@@ -421,6 +425,9 @@
       @if $pager-skin == 'bootstrap5' {
         border: 3px solid $primary-light;
       }
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
       font-style: normal;
       font-variant: normal;
       font-weight: $pager-current-item-font-weight;
@@ -461,6 +468,12 @@
           padding: 8.9px 7px 8px;
         }
       }
+      @else if $pager-skin == 'material3' {
+        vertical-align: middle;
+        &.e-focused {
+          border-radius: 4px;
+        }
+      }
     }
 
     .e-pagercontainer .e-nextpage.e-focused {
@@ -574,6 +587,12 @@
       line-height: $pager-focus-tripledot-line-height;
       padding: $pager-focus-tripledot-padding;
     }
+    @if $pager-skin == 'material3' {
+      &.e-rtl .e-np.e-focused,
+      &.e-rtl .e-pp.e-focused {
+        padding: $pager-focus-tripledot-padding;
+      }
+    }
 
     @media (max-width: 769px) {
       padding: 13px 0;
@@ -586,7 +605,6 @@
         padding-right: 0;
         padding-top: 0;
         text-align: center;
-        vertical-align: top;
         width: calc(60% - 48px);
       }
 
@@ -665,6 +683,7 @@
       & .e-parentmsgbar {
         float: left;
         margin-left: $pager-rtl-parentmsgbar-margin-left;
+        padding-top: $pager-rtl-parentmsgbar-padding-top;
       }
 
       & .e-pagerdropdown {
@@ -781,11 +800,11 @@
       }
 
       & .e-firstpage:hover {
-        border-radius: 0 4px 4px 0;
+        border-radius: $pager-rtl-first-last-icon-hover-border-radius;
       }
 
       & .e-lastpage:hover {
-        border-radius: 4px 0 0 4px;
+        border-radius: $pager-rtl-first-last-icon-hover-border-radius;
       }
 
       & .e-numericcontainer {
@@ -826,10 +845,6 @@
         padding: $pager-activeitem-padding;
       }
 
-      & .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-        padding: $pager-activeitem-hover-padding;
-      }
-
       & .e-pp,
       & .e-np,
       & .e-pp:hover,

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

@@ -2,6 +2,7 @@
 
 $pager-font-size: 13px !default;
 $pager-font-line-height: 1 !default;
+$pager-numeric-font-line-height: $pager-font-line-height !default;
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;
@@ -21,6 +22,7 @@ $pager-bigger-new-container-rtl-margin: 5px 0 5px 0 !default;
 $pager-last-page-hover-border-radius:  0 4px 4px 0 !default;
 $pager-first-page-hover-border-radius: 4px 0 0 4px !default;
 $pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 21px !default;
 $pager-bigger-padding: 4px 0 2px !default;
 $pager-bigger-icon-font-size: 13px !default;
 $pager-bigger-font-size: 13px !default;
@@ -52,7 +54,7 @@ $pager-numericitem-padding: 5px 8px !default;
 $pager-numericitem-margin-right: 4px !default;
 $pager-numericitem-border-radius: 12px !default;
 $pager-icon-size: 9px !default;
-$pager-messagebar-padding-top: 14px !default;
+$pager-messagebar-padding-top: 18px !default;
 $pager-messagebar-padding-right: 18px !default;
 $pager-padding: 0 !default;
 $pager-border-color: $grey-700 !default;
@@ -63,6 +65,7 @@ $pager-numeric-icon-padding: 6px !default;
 $pager-container-rtl-margin: 5px 6px 5px 18px !default;
 $pager-rtl-navigation-icon-padding: 9px 8px !default;
 $pager-activeitem-padding: 6px !default;
+$pager-bigger-activeitem-padding: $pager-activeitem-padding !default;
 $pager-bigger-rtl-activeitem-padding: 10px 13px !default;
 $pager-rtl-numeric-margin: 11px 4px 0 0 !default;
 $pager-next-icon-margin-left: 9px !default;
@@ -73,7 +76,7 @@ $pager-prev-content-icon: 'e904' !default;
 $pager-next-content-icon: 'e913' !default;
 $pager-last-content-icon: 'e897' !default;
 $pager-dropdown-margin-left: 12px !default;
-$pager-dropdown-margin-top: -22px !default;
+$pager-dropdown-margin-top: -26px !default;
 $pager-dropdown-margin-right: 0 !default;
 $pager-dropdown-overflow: hidden !default;
 $pager-bigger-dropdown-constant-margin: 15px !default;
@@ -85,13 +88,13 @@ $pager-constant-margin: 0 0 11px 12px !default;
 $pager-tripledot-rtl-margin-top: -2px !default;
 $pager-tripledot-rtl-padding: 3px 11px 9px !default;
 $pager-rtl-pagerconstant-margin-top: 14px !default;
-$pager-rtl-pagerdropdown-margin: -30px 18px 0 10px !default;
+$pager-rtl-pagerdropdown-margin: -33px 18px 0 10px !default;
 $pager-tripledot-rtl-bigger-margin-top: -10px !default;
 $pager-bigger-rtl-numeric-margin: 0 8px !default;
 $pager-bigger-container-rtl-margin: 5 0 -4px 0 !default;
-$pager-rtl-pagerdropdown-bigger-margin: -38px 18px 0 0 !default;
-$pager-rtl-pagerconstant-bigger-margin-top: 8px 16px 14px 0 !default;
-$pager-bigger-rtl-parentmsgbar-margin-top: -3px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -35px 18px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 8px 16px 16px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: -1px !default;
 $pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
 $pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
 $pager-rtl-pagermsgbar-device-margin-top: 7px !default;
@@ -100,8 +103,9 @@ $pager-rtl-last-content-icon: 'e896' !default;
 $pager-rtl-first-content-icon: 'e897' !default;
 $pager-rtl-prev-content-icon: 'e913' !default;
 $pager-rtl-next-content-icon: 'e904' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
 $pager-bigger-messagebar-padding-right: math.div($pager-messagebar-padding-right, .75) !default;
-$pager-bigger-messagebar-padding-top: 15px !default;
+$pager-bigger-messagebar-padding-top: 22px !default;
 $pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
 $pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
 $pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
@@ -114,7 +118,7 @@ $pager-activeitem-hover-padding: $pager-activeitem-padding !default;
 $pager-icon-color: $grey-dark-font !default;
 $page-content-color: $grey-dark-font !default;
 $pager-hover-color: $grey-dark-font !default;
-$pager-bigger-dropdown-margin-top: $pager-dropdown-margin-top !default;
+$pager-bigger-dropdown-margin-top: -36px !default;
 $pager-item-hover-borders-width: 0 !default;
 $pager-rtl-nxtpage-margin: 6px !default;
 $pager-disabled-icons-opacity: .3 !default;

package/styles/pager/_material-definition.scss

@@ -2,6 +2,7 @@
 
 $pager-font-size: 13px !default;
 $pager-font-line-height: 1 !default;
+$pager-numeric-font-line-height: $pager-font-line-height !default;
 $pager-font-family: sans-serif !default;
 $pager-border-type: $border-type !default;
 $pager-mobile-icon-size: 11px !default;
@@ -25,6 +26,7 @@ $pager-last-page-hover-border-radius:  0 4px 4px 0 !default;
 $pager-first-page-hover-border-radius: 4px 0 0 4px !default;
 $pager-item-hover-borders-width: 0 !default;
 $pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 18px !default;
 $pager-bigger-padding: 4px 0 2px !default;
 $pager-bigger-icon-font-size: 13px !default;
 $pager-bigger-font-size: 13px !default;
@@ -65,6 +67,7 @@ $pager-numeric-icon-padding: 6px !default;
 $pager-container-rtl-margin: 5px 6px 5px 18px !default;
 $pager-rtl-navigation-icon-padding: 9px 8px !default;
 $pager-activeitem-padding: 6px !default;
+$pager-bigger-activeitem-padding: $pager-activeitem-padding !default;
 $pager-bigger-rtl-activeitem-padding: 10px 13px !default;
 $pager-rtl-numeric-margin: 11px 4px 0 0 !default;
 $pager-next-icon-margin-left: 9px !default;
@@ -75,7 +78,7 @@ $pager-prev-content-icon: 'e904' !default;
 $pager-next-content-icon: 'e913' !default;
 $pager-last-content-icon: 'e897' !default;
 $pager-dropdown-margin-left: 12px !default;
-$pager-dropdown-margin-top: -22px !default;
+$pager-dropdown-margin-top: -26px !default;
 $pager-dropdown-margin-right: 0 !default;
 $pager-dropdown-overflow: hidden !default;
 $pager-bigger-dropdown-constant-margin: 15px !default;
@@ -87,13 +90,13 @@ $pager-constant-margin: 0 0 11px 12px !default;
 $pager-tripledot-rtl-margin-top: -2px !default;
 $pager-tripledot-rtl-padding: 3px 11px 9px !default;
 $pager-rtl-pagerconstant-margin-top: 14px !default;
-$pager-rtl-pagerdropdown-margin: -30px 18px 0 10px !default;
+$pager-rtl-pagerdropdown-margin: -33px 18px 0 10px !default;
 $pager-tripledot-rtl-bigger-margin-top: -10px !default;
 $pager-bigger-rtl-numeric-margin: 0 8px !default;
 $pager-bigger-container-rtl-margin: 5 0 -4px 0 !default;
-$pager-rtl-pagerdropdown-bigger-margin: -38px 18px 0 0 !default;
-$pager-rtl-pagerconstant-bigger-margin-top: 8px 16px 14px 0 !default;
-$pager-bigger-rtl-parentmsgbar-margin-top: -3px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -35px 18px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 8px 16px 16px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: -6px !default;
 $pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
 $pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
 $pager-rtl-pagermsgbar-device-margin-top: 7px !default;
@@ -102,8 +105,9 @@ $pager-rtl-last-content-icon: 'e896' !default;
 $pager-rtl-first-content-icon: 'e897' !default;
 $pager-rtl-prev-content-icon: 'e913' !default;
 $pager-rtl-next-content-icon: 'e904' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
 $pager-bigger-messagebar-padding-right: math.div($pager-messagebar-padding-right, .75) !default;
-$pager-bigger-messagebar-padding-top: 15px !default;
+$pager-bigger-messagebar-padding-top: 20px !default;
 $pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
 $pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
 $pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
@@ -113,7 +117,7 @@ $pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !de
 $pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
 $pager-bigger-rtl-activeitem-hover-padding:  $pager-bigger-rtl-activeitem-padding !default;
 $pager-activeitem-hover-padding: $pager-activeitem-padding !default;
-$pager-bigger-dropdown-margin-top: $pager-dropdown-margin-top !default;
+$pager-bigger-dropdown-margin-top: -36px !default;
 $pager-rtl-nxtpage-margin: 6px !default;
 $pager-disabled-icons-opacity: .3 !default;
 $pager-bigger-dropdown-heigh: 40px !default;

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

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/pager/_material3-definition.scss

@@ -0,0 +1,150 @@
+@use 'sass:math';
+
+$pager-numericitem-border-radius: 4px !default;
+$pager-border-type: solid !default;
+$pager-mobile-icon-size: 11px !default;
+$pager-icon-width: 'auto' !default;
+$pager-icon-height: 'auto' !default;
+$pager-navigationicon-padding: 11px 9px 8px !default;
+$pager-navigationicon-right: 0 !default;
+$pager-navigationicon-top: 0 !default;
+$pager-numericitem-margin-right: 0 !default;
+$pager-messagebar-padding-bottom: 0 !default;
+$pager-bigger-messagebar-padding-bottom: 8px !default;
+$pager-content-opacity: 1 !default;
+$pager-bigger-new-container-rtl-margin: 0 0 -5px 0 !default;
+$pager-next-icon-margin-left: 0 !default;
+$pager-container-rtl-margin: 0 .3px -4px 0 !default;
+$pager-rtl-navigation-icon-padding: 8px 8px 8px 8px !default;
+$pager-rtl-numeric-margin: 0 !default;
+$pager-item-hover-borders-width: 0 !default;
+$pager-tripledot-font-size: 16px !default;
+$pager-last-page-hover-border-radius:  4px !default;
+$pager-first-page-hover-border-radius: 4px !default;
+$pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 2px !default;
+$pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-bigger-current-item-border-radius: $pager-numericitem-border-radius !default;
+$pager-bigger-rtl-nexticon-marign-left: 0 !default;
+$pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
+$pager-device-padding: 19px 0 !default;
+$pager-device-messabar-padding: 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-bigger-rtl-activeitem-padding: 8px 8px 8px 8px !default;
+$pager-numericitem-min-width: 26px !default;
+$pager-font-size: 14px !default;
+$pager-font-line-height: 1 !default;
+$pager-numeric-font-line-height: 20px !default;
+$pager-bg-color: rgba($content-bg-color) !default;
+$pager-border-color: transparent !default;
+$pager-color: rgba($on-surface-variant) !default;
+$pager-icon-size: 16px !default;
+$pager-border-size: 1px !default;
+$pager-numericitem-padding: 13px 12px 10px 12px !default;
+$pager-numeric-hover-bg-color: $content-bg-color-hover !default;
+$pager-numeric-txt-bg-color: $icon-color-disabled !default;
+$pager-padding: 7px 8px 7px 8px !default;
+$pager-numeric-font-weight: bold !default;
+$pager-messagebar-padding-top: 8px !default;
+$pager-number-hover-bg-color: $content-bg-color-hover !default;
+$pager-font-family: $font-family !default;
+$pager-font-weight: bold !default;
+$pager-messagebar-padding-right: 0 !default;
+$pager-tripledot-padding: 6px 9.5px 6px 9.5px !default;
+$pager-numeric-icon-padding: 6px 12px 6px 12px !default;
+$pager-pagecontainer-icon-padding: 8px 8px 8px 8px !default;
+$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px 14px !default;
+$pager-hover-color: rgba($on-background) !default;
+$pager-mhover-color: rgba($primary) !default;
+$pager-pagermessage-weight: $font-weight-normal !default;
+$pager-active-bg-color: rgba($primary-light) !default;
+$pager-last-border-size: 1px !default;
+$page-content-color: rgba($on-background) !default;
+$pager-container-margin: 0 0 -4px .3px !default;
+$pager-bigger-numeric-item-margin: 0 !default;
+$pager-bigger-icon-font-size: 20px !default;
+$pager-bigger-font-size: 14px !default;
+$pager-bigger-padding: 8px 8px 8px 8px !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
+$pager-bigger-pagercontainer-icons-padding: 10px 10px 10px 10px !default;
+$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
+$pager-bigger-current-item-padding: 10px 15.5px 10px 15.5px !default;
+$pager-letter-spacing: 0 !default;
+$pager-bigger-icons-align: middle !default;
+$pager-bigger-messagebar-padding-right: 0 !default;
+$pager-bigger-messagebar-padding-top: 12px !default;
+$pager-last-content-icon: 'e235' !default;
+$pager-next-content-icon: 'e236' !default;
+$pager-prev-content-icon: 'e237' !default;
+$pager-first-content-icon: 'e238' !default;
+$pager-icon-color: rgba($on-surface-variant) !default;
+$pager-hover-bg-color: $content-bg-color-hover !default;
+$pager-dropdown-margin-top: -18px !default;
+$pager-dropdown-margin-left: 16px !default;
+$pager-dropdown-margin-right: 6px !default;
+$pager-dropdown-overflow: unset !default;
+$pager-bigger-dropdown-constant-margin: 6px !default;
+$pager-bigger-dropdown-margin: 0 10px 0 18px !default;
+$pager-dropdown-height: 32px !default;
+$pager-dropdown-width: 80px !default;
+$pager-bigger-dropdown-width: 120px !default;
+$pager-constant-margin: 0 0 5px 6px !default;
+$pager-bigger-letter-spacing: 10px 12px 10px 12px !default;
+$pager-tripledot-rtl-margin-top: 0 !default;
+$pager-tripledot-rtl-padding: 6px 9.5px 6px 9.5px !default;
+$pager-rtl-pagerconstant-margin-top: 0 12px 6px 0 !default;
+$pager-rtl-pagerdropdown-margin: -18px 16px 0 0 !default;
+$pager-tripledot-rtl-bigger-margin-top: 0 !default;
+$pager-bigger-rtl-numeric-margin: 0 !default;
+$pager-bigger-container-rtl-margin: 0 0 -4px 0 !default;
+$pager-activeitem-padding: 6px 12px 6px 12px !default;
+$pager-bigger-activeitem-padding: 10px 15px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -24px 16px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: -4px !default;
+$pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
+$pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
+$pager-rtl-pagermsgbar-device-margin-top: 10px !default;
+$pager-bigger-constant-margin-left: 16px !default;
+$pager-rtl-last-content-icon: 'e238' !default;
+$pager-rtl-first-content-icon: 'e235' !default;
+$pager-rtl-prev-content-icon: 'e236' !default;
+$pager-rtl-next-content-icon: 'e237' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 4px !default;
+$pager-item-hover-border-width: 0 1px 0 0 !default;
+$pager-item-hover-border-color: $pager-border-color !default;
+$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
+$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
+$pager-bigger-rtl-activeitem-hover-padding:  10px 15px 10px !default;
+$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
+$pager-bigger-dropdown-margin-top: -24px !default;
+$pager-rtl-nxtpage-margin: 0 !default;
+$pager-disabled-icons-opacity: 1 !default;
+$pager-current-item-font-weight: $font-weight-normal !default;
+$pager-bigger-dropdown-heigh: 40px !default;
+$pager-external-msg-padding: 6px 6px 0 6px !default;
+$pager-rtl-bigger-tripledot-font-size: 20px !default;
+$pager-bigger-tripledot-padding: 13px 14px 11px 14px !default;
+$pager-container-children-height: 31px !default;
+$pager-div-chrome-margin-top: -.5px !default;
+$pager-div-margin-top: -.3px !default;
+$pager-container-height: 32px !default;
+$pager-first-disabled-border-radious: 3px 0 0 3px !default;
+$pager-last-disabled-border-radious: 0 3px 3px 0 !default;
+$pager-bigger-container-height: 38px !default;
+$pager-bigger-container-children-height: 37px !default;
+$pager-bigger-container-margin-left: -.9px !default;
+$pager-bigger-container-margin-right: -.9px !default;
+$pager-rtl-padding: $pager-padding !default;
+$pager-skin: 'material3' !default;
+$pager-container-border-radius: 4px !default;
+$pager-bigger-tripledot-font-size: 20px !default;
+$pager-active-border: 2px !default;
+$pager-active-size: solid !default;
+$pager-active-color: rgba($on-background) !default;
+$pager-numeric-icon-padding-with-margin: 7px 10px 7px 10px !default;
+$pager-focus-bg-color: $table-bg-color-hover !default;
+$pager-focus-tripledot-padding: 8px 9.5px 8px 9.5px !default;
+$pager-focus-tripledot-line-height: 1 !default;
+$pager-focus-active-box-shadow: 0 0 0 1px rgba($primary) inset !default;
+$pager-focus-shadow: 0 0 0 1px rgba($primary) inset !default;

package/styles/pager/_tailwind-definition.scss

@@ -22,6 +22,7 @@ $pager-tripledot-font-size: 12px !default;
 $pager-last-page-hover-border-radius:  0 4px 4px 0 !default;
 $pager-first-page-hover-border-radius: 4px 0 0 4px !default;
 $pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 6px !default;
 $pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
 $pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
 $pager-bigger-rtl-nexticon-marign-left: 0 !default;
@@ -33,6 +34,7 @@ $pager-bigger-rtl-activeitem-padding: 7px 14px 7px 14px !default;
 $pager-numericitem-min-width: 26px !default;
 $pager-font-size: 12px !default;
 $pager-font-line-height: 18px !default;
+$pager-numeric-font-line-height: $pager-font-line-height !default;
 $pager-bg-color: $content-bg-color !default;
 $pager-border-color: $border-light !default;
 $pager-color: $content-text-color-alt2 !default;
@@ -78,25 +80,26 @@ $pager-prev-content-icon: 'e237' !default;
 $pager-first-content-icon: 'e238' !default;
 $pager-icon-color: $icon-color !default;
 $pager-hover-bg-color: $content-bg-color-hover !default;
-$pager-dropdown-margin-top: -16px !default;
+$pager-dropdown-margin-top: -18px !default;
 $pager-dropdown-margin-left: 10px !default;
 $pager-dropdown-margin-right: 8px !default;
 $pager-dropdown-overflow: unset !default;
-$pager-bigger-dropdown-constant-margin: 2px !default;
+$pager-bigger-dropdown-constant-margin: 1px !default;
 $pager-bigger-dropdown-margin: -35px  10px 0 18px !default;
 $pager-dropdown-height: 30px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
-$pager-constant-margin: 6px 0 2px 8px !default;
+$pager-constant-margin: 6px 0 4px 8px !default;
 $pager-bigger-letter-spacing: 7px 11.8px 6.5px !default;
 $pager-tripledot-rtl-margin-top: 0 !default;
 $pager-tripledot-rtl-padding: 4.5px 8.7px 5px 8.7px !default;
-$pager-rtl-pagerconstant-margin-top: 6px 8px 2px 8px !default;
-$pager-rtl-pagerdropdown-margin: -16px 16px 0 0 !default;
+$pager-rtl-pagerconstant-margin-top: 6px 8px 3px 8px !default;
+$pager-rtl-pagerdropdown-margin: -18px 16px 0 0 !default;
 $pager-tripledot-rtl-bigger-margin-top: 0 !default;
 $pager-bigger-rtl-numeric-margin: 0 !default;
 $pager-bigger-container-rtl-margin: 0 0 -4px 0 !default;
 $pager-activeitem-padding: 4.5px 11px 7px 11px !default;
+$pager-bigger-activeitem-padding: 7px 14px !default;
 $pager-rtl-pagerdropdown-bigger-margin: -18.5px 16px 0 0 !default;
 $pager-rtl-pagerconstant-bigger-margin-top: 6px 16px 2px 0 !default;
 $pager-bigger-rtl-parentmsgbar-margin-top: 0 !default;
@@ -108,6 +111,7 @@ $pager-rtl-last-content-icon: 'e238' !default;
 $pager-rtl-first-content-icon: 'e235' !default;
 $pager-rtl-prev-content-icon: 'e236' !default;
 $pager-rtl-next-content-icon: 'e237' !default;
+$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
 $pager-item-hover-border-width: 0 1px 0 0 !default;
 $pager-item-hover-border-color: $pager-border-color !default;
 $pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;

package/styles/pager/_theme.scss

@@ -3,7 +3,12 @@
   /*! Pager theme */
   #{&}.e-pager {
     background-color: $pager-bg-color;
-    border-color: $pager-border-color;
+    @if $pager-skin == 'material3' {
+      border-color: rgba($border-light);
+    }
+    @else {
+      border-color: $pager-border-color;
+    }
     color: $pager-color;
     opacity: $pager-content-opacity;
 
@@ -19,6 +24,9 @@
       background: $pager-hover-bg-color;
       color: $pager-hover-color;
       opacity: $pager-content-opacity;
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
     }
 
     .e-parentmsgbar {
@@ -39,10 +47,6 @@
       opacity: $pager-content-opacity;
     }
 
-    .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-      border-left: $pager-item-hover-borders-width solid $pager-item-hover-border-color;
-    }
-
     .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
       background-color: $pager-number-hover-bg-color;
       opacity: 1;
@@ -92,6 +96,9 @@
       @if $pager-skin == 'bootstrap5' {
         border-right-color: $primary-light;
       }
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
       background: $pager-active-bg-color;
       color: $pager-active-color;
       opacity: 1;