@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/styles/pager/highcontrast.css

@@ -60,7 +60,7 @@
 .e-pager.e-bigger .e-pagerdropdown {
   height: 40px;
   margin: -44px 0 0 15px;
-  margin-top: -20px;
+  margin-top: -40px;
   width: 90px;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
@@ -148,33 +148,11 @@
   border-radius: 0;
   padding: 8px 11px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 9px 3px 8px 2px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 6px 9px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 10px 14px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 8px 12px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 20px;
   margin-top: -10px;
 }
@@ -184,7 +162,7 @@
 }
 .e-bigger .e-pager.e-rtl .e-pagerconstant,
 .e-pager.e-bigger.e-rtl .e-pagerconstant {
-  margin: 5px 10px 8px 0;
+  margin: 5px 10px 5px 0;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager .e-pagercontainer .e-prevpage,
@@ -230,11 +208,14 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
-  padding-bottom: 9px;
+  padding-bottom: 5px;
   padding-right: 10px;
-  padding-top: 8px;
+  padding-top: 12px;
 }
 .e-pager .e-pagesizes {
   display: inline;
@@ -287,9 +268,6 @@
   padding: 9px 3px 8px 2px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 1px 6px 0;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -409,7 +387,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -468,6 +445,7 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 8px;
+  padding-top: 8px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
   margin: -20px 25px 0 0;
@@ -513,7 +491,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -533,9 +511,6 @@
   margin: 0;
   padding: 9px 3px 8px 2px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 1px 6px 0;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: 2px;
   padding: 0 11px 9px;
@@ -605,9 +580,6 @@
   color: #fff;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #fff;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #685708;
   opacity: 1;

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

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

package/styles/pager/icons/_material3.scss

@@ -6,11 +6,11 @@
   .e-grid-menu {
 
     .e-icon-last::before {
-      content: '\e7a9';
+      content: '\e818';
     }
 
     .e-icon-first::before {
-      content: '\e744';
+      content: '\e833';
     }
 
     .e-icon-prev::before {
@@ -25,13 +25,13 @@
       & .e-icon-last.e-lastpage::before,
       & .e-icon-last.e-lastpage:hover,
       & .e-icon-last.e-lastpagedisabled::before {
-        content: '\e744';
+        content: '\e833';
       }
 
       & .e-icon-first.e-firstpage::before,
       & .e-icon-first.e-firstpage:hover,
       & .e-icon-first.e-firstpagedisabled::before {
-        content: '\e7a9';
+        content: '\e818';
       }
 
       & .e-icon-prev.e-prevpage::before,

package/styles/pager/material-dark.css

@@ -55,13 +55,13 @@
 .e-pager.e-bigger div.e-parentmsgbar {
   padding-bottom: 8px;
   padding-right: 24px;
-  padding-top: 15px;
+  padding-top: 22px;
 }
 .e-bigger .e-pager .e-pagerdropdown,
 .e-pager.e-bigger .e-pagerdropdown {
   height: 40px;
   margin: -40px 0 0 16px;
-  margin-top: -22px;
+  margin-top: -36px;
   width: 90px;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
@@ -124,7 +124,7 @@
 .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
 .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
   margin-left: 6px;
-  margin-top: -3px;
+  margin-top: -1px;
 }
 .e-bigger .e-pager .e-numericitem,
 .e-pager.e-bigger .e-numericitem {
@@ -149,43 +149,21 @@
   border-radius: 16px;
   padding: 10px 13px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 11px 4px 0 0;
-  padding: 6px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0 8px;
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 22px;
   margin-top: -10px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
-  margin: -38px 18px 0 0;
+  margin: -35px 18px 0 0;
 }
 .e-bigger .e-pager.e-rtl .e-pagerconstant,
 .e-pager.e-bigger.e-rtl .e-pagerconstant {
-  margin: 8px 16px 14px 0;
+  margin: 8px 16px 16px 0;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager .e-pagercontainer .e-prevpage,
@@ -231,11 +209,14 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
   padding-bottom: 9px;
   padding-right: 18px;
-  padding-top: 14px;
+  padding-top: 18px;
 }
 .e-pager .e-pagesizes {
   display: inline;
@@ -245,7 +226,7 @@
   height: 32px;
   margin-left: 12px;
   margin-right: 0;
-  margin-top: -22px;
+  margin-top: -26px;
   overflow: hidden;
   vertical-align: middle;
   width: 90px;
@@ -288,9 +269,6 @@
   padding: 6px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 6px;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -410,7 +388,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -469,9 +446,10 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 21px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -30px 18px 0 10px;
+  margin: -33px 18px 0 10px;
 }
 .e-pager.e-rtl .e-pagerconstant {
   margin: 14px;
@@ -514,7 +492,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -534,9 +512,6 @@
   margin: 11px 4px 0 0;
   padding: 6px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 6px;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: -2px;
   padding: 3px 11px 9px;
@@ -606,9 +581,6 @@
   color: #fff;
   opacity: 0.87;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #616161;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: rgba(255, 255, 255, 0.1);
   opacity: 1;

package/styles/pager/material.css

@@ -55,13 +55,13 @@
 .e-pager.e-bigger div.e-parentmsgbar {
   padding-bottom: 8px;
   padding-right: 24px;
-  padding-top: 15px;
+  padding-top: 20px;
 }
 .e-bigger .e-pager .e-pagerdropdown,
 .e-pager.e-bigger .e-pagerdropdown {
   height: 40px;
   margin: -40px 0 0 16px;
-  margin-top: -22px;
+  margin-top: -36px;
   width: 90px;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
@@ -124,7 +124,7 @@
 .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
 .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
   margin-left: 6px;
-  margin-top: -3px;
+  margin-top: -6px;
 }
 .e-bigger .e-pager .e-numericitem,
 .e-pager.e-bigger .e-numericitem {
@@ -149,43 +149,21 @@
   border-radius: 16px;
   padding: 10px 13px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 11px 4px 0 0;
-  padding: 6px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0 8px;
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 22px;
   margin-top: -10px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
-  margin: -38px 18px 0 0;
+  margin: -35px 18px 0 0;
 }
 .e-bigger .e-pager.e-rtl .e-pagerconstant,
 .e-pager.e-bigger.e-rtl .e-pagerconstant {
-  margin: 8px 16px 14px 0;
+  margin: 8px 16px 16px 0;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager .e-pagercontainer .e-prevpage,
@@ -231,6 +209,9 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
   padding-bottom: 9px;
@@ -245,7 +226,7 @@
   height: 32px;
   margin-left: 12px;
   margin-right: 0;
-  margin-top: -22px;
+  margin-top: -26px;
   overflow: hidden;
   vertical-align: middle;
   width: 90px;
@@ -288,9 +269,6 @@
   padding: 6px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 6px;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -410,7 +388,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -469,9 +446,10 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 18px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -30px 18px 0 10px;
+  margin: -33px 18px 0 10px;
 }
 .e-pager.e-rtl .e-pagerconstant {
   margin: 14px;
@@ -514,7 +492,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -534,9 +512,6 @@
   margin: 11px 4px 0 0;
   padding: 6px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 6px;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: -2px;
   padding: 3px 11px 9px;
@@ -606,9 +581,6 @@
   color: #000;
   opacity: 0.87;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #e0e0e0;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #eee;
   opacity: 1;