@syncfusion/ej2-navigations 25.2.6 → 26.1.35-750253

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

@@ -18,8 +18,8 @@ $pager-numeric-hover-bg-color: unset !default;
 $pager-numeric-txt-bg-color: unset !default;
 $pager-pagecontainer-icon-padding: 11px 9px 8px !default;
 $pager-bigger-pagecontainer-icon-padding: 11px 9px 8px !default;
-$pager-bigger-new-container-rtl-margin: 5px 0 5px 0 !default;
-$pager-last-page-hover-border-radius:  0 4px 4px 0 !default;
+$pager-bigger-new-container-rtl-margin: 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;
@@ -37,8 +37,6 @@ $pager-device-messabar-padding: 0 !default;
 $pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
 $pager-bigger-letter-spacing: 10px 13px !default;
 $pager-numericitem-min-width: 26px !default;
-
-//default
 $pager-bg-color: $grey-dark !default;
 $pager-active-bg-color: $accent !default;
 $pager-hover-bg-color: rgba($grey-white, .1) !default;
@@ -80,7 +78,7 @@ $pager-dropdown-margin-top: -26px !default;
 $pager-dropdown-margin-right: 0 !default;
 $pager-dropdown-overflow: hidden !default;
 $pager-bigger-dropdown-constant-margin: 15px !default;
-$pager-bigger-dropdown-margin: -40px  0 0 16px !default;
+$pager-bigger-dropdown-margin: -40px 0 0 16px !default;
 $pager-dropdown-height: 32px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
@@ -113,7 +111,7 @@ $pager-item-hover-border-width: 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:  $pager-bigger-rtl-activeitem-padding !default;
+$pager-bigger-rtl-activeitem-hover-padding: $pager-bigger-rtl-activeitem-padding !default;
 $pager-activeitem-hover-padding: $pager-activeitem-padding !default;
 $pager-icon-color: $grey-dark-font !default;
 $page-content-color: $grey-dark-font !default;

package/styles/pager/_material-definition.scss

@@ -19,10 +19,10 @@ $pager-bigger-messagebar-padding-bottom: 8px !default;
 $pager-letter-spacing: -.1em !default;
 $pager-numeric-hover-bg-color: unset !default;
 $pager-numeric-txt-bg-color: unset !default;
-$pager-bigger-new-container-rtl-margin: 5px 0 5px 0 !default;
+$pager-bigger-new-container-rtl-margin: 5px 0 !default;
 $pager-pagecontainer-icon-padding: 11px 9px 8px !default;
 $pager-bigger-pagecontainer-icon-padding: 11px 9px 8px !default;
-$pager-last-page-hover-border-radius:  0 4px 4px 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-item-hover-borders-width: 0 !default;
 $pager-rtl-parentmsgbar-margin-left: 6px !default;
@@ -82,7 +82,7 @@ $pager-dropdown-margin-top: -26px !default;
 $pager-dropdown-margin-right: 0 !default;
 $pager-dropdown-overflow: hidden !default;
 $pager-bigger-dropdown-constant-margin: 15px !default;
-$pager-bigger-dropdown-margin: -40px  0 0 16px !default;
+$pager-bigger-dropdown-margin: -40px 0 0 16px !default;
 $pager-dropdown-height: 32px !default;
 $pager-dropdown-width: 90px !default;
 $pager-bigger-dropdown-width: 90px !default;
@@ -115,7 +115,7 @@ $pager-item-hover-border-width: 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:  $pager-bigger-rtl-activeitem-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: -36px !default;
 $pager-rtl-nxtpage-margin: 6px !default;

package/styles/pager/_material3-definition.scss

@@ -12,14 +12,14 @@ $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-bigger-new-container-rtl-margin: 0 0 -5px !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-navigation-icon-padding: 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-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;
@@ -30,7 +30,7 @@ $pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left,
 $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-bigger-rtl-activeitem-padding: 8px !default;
 $pager-numericitem-min-width: 26px !default;
 $pager-font-size: 14px !default;
 $pager-font-line-height: 1 !default;
@@ -40,20 +40,20 @@ $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-numericitem-padding: 13px 12px 10px !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-padding: 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-tripledot-padding: 6px 9.5px !default;
+$pager-numeric-icon-padding: 6px 12px !default;
+$pager-pagecontainer-icon-padding: 8px !default;
+$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px !default;
 $pager-hover-color: rgba($on-background) !default;
 $pager-mhover-color: rgba($primary) !default;
 $pager-pagermessage-weight: $font-weight-normal !default;
@@ -64,11 +64,11 @@ $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-padding: 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-padding: 10px !default;
 $pager-bigger-pagercontainer-icons-marign-right: 0 !default;
-$pager-bigger-current-item-padding: 10px 15.5px 10px 15.5px !default;
+$pager-bigger-current-item-padding: 10px 15.5px !default;
 $pager-letter-spacing: 0 !default;
 $pager-bigger-icons-align: middle !default;
 $pager-bigger-messagebar-padding-right: 0 !default;
@@ -89,15 +89,15 @@ $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-bigger-letter-spacing: 10px 12px !default;
 $pager-tripledot-rtl-margin-top: 0 !default;
-$pager-tripledot-rtl-padding: 6px 9.5px 6px 9.5px !default;
+$pager-tripledot-rtl-padding: 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-container-rtl-margin: 0 0 -4px !default;
+$pager-activeitem-padding: 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;
@@ -115,16 +115,16 @@ $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-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-external-msg-padding: 6px 6px 0 !default;
 $pager-rtl-bigger-tripledot-font-size: 20px !default;
-$pager-bigger-tripledot-padding: 13px 14px 11px 14px !default;
+$pager-bigger-tripledot-padding: 13px 14px 11px !default;
 $pager-container-children-height: 31px !default;
 $pager-div-chrome-margin-top: -.5px !default;
 $pager-div-margin-top: -.3px !default;
@@ -142,9 +142,9 @@ $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-numeric-icon-padding-with-margin: 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-padding: 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

@@ -14,12 +14,12 @@ $pager-bigger-messagebar-padding-bottom: 8px !default;
 $pager-content-opacity: 1 !default;
 $pager-bigger-new-container-rtl-margin: 0 5px -6px 0 !default;
 $pager-next-icon-margin-left: 0 !default;
-$pager-container-rtl-margin: 0 0 -4px 0 !default;
-$pager-rtl-navigation-icon-padding: 7.5px 7px 7.5px 7px !default;
+$pager-container-rtl-margin: 0 0 -4px !default;
+$pager-rtl-navigation-icon-padding: 7.5px 7px !default;
 $pager-rtl-numeric-margin: 0 !default;
 $pager-item-hover-borders-width: 0 !default;
 $pager-tripledot-font-size: 12px !default;
-$pager-last-page-hover-border-radius:  0 4px 4px 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: 6px !default;
@@ -30,7 +30,7 @@ $pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left,
 $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: 7px 14px 7px 14px !default;
+$pager-bigger-rtl-activeitem-padding: 7px 14px !default;
 $pager-numericitem-min-width: 26px !default;
 $pager-font-size: 12px !default;
 $pager-font-line-height: 18px !default;
@@ -40,19 +40,19 @@ $pager-border-color: $border-light !default;
 $pager-color: $content-text-color-alt2 !default;
 $pager-icon-size: 12px !default;
 $pager-border-size: 1px !default;
-$pager-numericitem-padding: 13px 12px 10px 12px !default;
+$pager-numericitem-padding: 13px 12px 10px !default;
 $pager-numeric-hover-bg-color: $content-bg-color-hover !default;
 $pager-numeric-txt-bg-color: $icon-color-disabled !default;
-$pager-padding: 8px 8px 8px 8px !default;
+$pager-padding: 8px !default;
 $pager-numeric-font-weight: bold !default;
 $pager-messagebar-padding-top: 6px !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: 4.5px 9.2px 7px 9.2px !default;
-$pager-numeric-icon-padding: 4.5px 11px 7px 11px !default;
-$pager-pagecontainer-icon-padding: 9.5px 7px 9.5px 7px !default;
+$pager-tripledot-padding: 4.5px 9.2px 7px !default;
+$pager-numeric-icon-padding: 4.5px 11px 7px !default;
+$pager-pagecontainer-icon-padding: 9.5px 7px !default;
 $pager-bigger-pagecontainer-icon-padding: 6px 10px 8px 8px !default;
 $pager-hover-color: $content-text-color-hover !default;
 $pager-mhover-color: $primary !default;
@@ -66,7 +66,7 @@ $pager-bigger-numeric-item-margin: 0 !default;
 $pager-bigger-icon-font-size: 16px !default;
 $pager-bigger-font-size: $text-sm !default;
 $pager-bigger-padding: 12px !default;
-$pager-bigger-pagercontainer-margin: 0 0 -6px 0 !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px !default;
 $pager-bigger-pagercontainer-icons-padding: 10px 10px 11px !default;
 $pager-bigger-pagercontainer-icons-marign-right: 0 !default;
 $pager-bigger-current-item-padding: 7px 14px 6.5px !default;
@@ -85,20 +85,20 @@ $pager-dropdown-margin-left: 10px !default;
 $pager-dropdown-margin-right: 8px !default;
 $pager-dropdown-overflow: unset !default;
 $pager-bigger-dropdown-constant-margin: 1px !default;
-$pager-bigger-dropdown-margin: -35px  10px 0 18px !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 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 3px 8px !default;
+$pager-tripledot-rtl-padding: 4.5px 8.7px 5px !default;
+$pager-rtl-pagerconstant-margin-top: 6px 8px 3px !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-container-rtl-margin: 0 0 -4px !default;
+$pager-activeitem-padding: 4.5px 11px 7px !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;
@@ -116,7 +116,7 @@ $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:  $pager-bigger-rtl-activeitem-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: -18.5px !default;
 $pager-rtl-nxtpage-margin: 0 !default;
@@ -130,7 +130,7 @@ $pager-skin: 'tailwind' !default;
 $pager-container-border-radius: 4px !default;
 $pager-bigger-tripledot-font-size: 14px !default;
 $pager-focus-bg-color: $white !default;
-$pager-focus-tripledot-padding: 4.5px 8.7px 7px 8.7px !default;
+$pager-focus-tripledot-padding: 4.5px 8.7px 7px !default;
 $pager-focus-tripledot-line-height: 18px !default;
 $pager-focus-active-box-shadow: none !default;
 $pager-focus-shadow: 0 0 0 1px $primary inset !default;

package/styles/pager/_theme.scss

@@ -1,16 +1,28 @@
+@mixin color-opacity-styles($color, $opacity) {
+  color: $color;
+  opacity: $opacity;
+}
+
+@mixin background-color-opacity-styles($background, $color, $opacity) {
+  background: $background;
+  @include color-opacity-styles($color, $opacity);
+}
+
 @include export-module('pager-theme') {
 
   /*! Pager theme */
   #{&}.e-pager {
-    background-color: $pager-bg-color;
     @if $pager-skin == 'material3' {
       border-color: rgba($border-light);
     }
+    @else if $pager-skin == 'fluent2' {
+      border-color: $border-light;
+    }
     @else {
       border-color: $pager-border-color;
     }
-    color: $pager-color;
-    opacity: $pager-content-opacity;
+
+    @include background-color-opacity-styles($pager-bg-color, $pager-color, $pager-content-opacity);
 
     div.e-icons.e-pager-default {
       color: $pager-icon-color;
@@ -21,9 +33,7 @@
     }
 
     .e-pager-default:hover {
-      background: $pager-hover-bg-color;
-      color: $pager-hover-color;
-      opacity: $pager-content-opacity;
+      @include background-color-opacity-styles($pager-hover-bg-color, $pager-hover-color, $pager-content-opacity);
       @if $pager-skin == 'material3' {
         border-radius: 4px;
       }
@@ -34,8 +44,7 @@
     }
 
     .e-spacing {
-      color: $page-content-color;
-      opacity: $pager-content-opacity;
+      @include color-opacity-styles($page-content-color, $pager-content-opacity);
     }
 
     .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
@@ -43,8 +52,7 @@
     }
 
     .e-numericitem:hover {
-      color: $pager-hover-color;
-      opacity: $pager-content-opacity;
+      @include color-opacity-styles($pager-hover-color, $pager-content-opacity);
     }
 
     .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
@@ -54,7 +62,6 @@
 
     .e-numericitem {
       background: $pager-bg-color;
-      border-right-color: $pager-border-color;
       color: $page-content-color;
     }
 
@@ -70,6 +77,26 @@
       color: $pager-icon-color;
     }
 
+    .e-prevpagedisabled,
+    .e-nextpagedisabled,
+    .e-lastpagedisabled,
+    .e-firstpagedisabled {
+      @if $pager-skin == 'fluent2' {
+        background-color: $content-bg-color-disabled;
+      }
+    }
+
+    @media (max-width: 769px) {
+      .e-prevpagedisabled,
+      .e-nextpagedisabled,
+      .e-lastpagedisabled,
+      .e-firstpagedisabled {
+        @if $pager-skin == 'fluent2' {
+          background-color: $pager-bg-color;
+        }
+      }
+    }
+
     .e-lastpage,
     .e-firstpage {
       background-color: transparent;
@@ -80,6 +107,7 @@
       border-color: $pager-border-color;
     }
 
+    .e-numericitem,
     .e-firstpage,
     .e-prevpage,
     .e-firstpagedisabled,
@@ -99,9 +127,7 @@
       @if $pager-skin == 'material3' {
         border-radius: 4px;
       }
-      background: $pager-active-bg-color;
-      color: $pager-active-color;
-      opacity: 1;
+      @include background-color-opacity-styles($pager-active-bg-color, $pager-active-color, 1);
     }
 
     .e-numericitem.e-focused,
@@ -127,18 +153,12 @@
 
     @media (max-width: 590px) {
       .e-pager-default:hover {
-        background: $pager-bg-color;
-        color: $pager-mhover-color;
-        opacity: $pager-content-opacity;
+        @include background-color-opacity-styles($pager-bg-color, $pager-mhover-color, $pager-content-opacity);
       }
     }
 
     &.e-rtl {
-
-      & .e-numericitem {
-        border-left-color: $pager-border-color;
-      }
-
+      & .e-numericitem,
       & .e-firstpage,
       & .e-prevpage,
       & .e-firstpagedisabled,
@@ -146,10 +166,7 @@
       & .e-nextpage,
       & .e-lastpage,
       & .e-nextpagedisabled,
-      & .e-lastpagedisabled {
-        border-left-color: $pager-border-color;
-      }
-
+      & .e-lastpagedisabled,
       & .e-nextpage,
       & .e-nextpagedisabled {
         border-left-color: $pager-border-color;