@syncfusion/ej2-navigations 20.1.48 → 20.1.51-10460

package/styles/pager/_theme.scss

@@ -0,0 +1,189 @@
+@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 {
+    @if $pager-skin == 'material3' {
+      border-color: rgba($border-light);
+    }
+    @else if $pager-skin == 'fluent2' {
+      border-color: $border-light;
+    }
+    @else {
+      border-color: $pager-border-color;
+    }
+
+    @include background-color-opacity-styles($pager-bg-color, $pager-color, $pager-content-opacity);
+
+    div.e-icons.e-pager-default {
+      color: $pager-icon-color;
+    }
+
+    div.e-icons.e-pager-default.e-focused {
+      @if $pager-skin == 'fluent2' {
+        color: $pager-hover-color;
+      }
+    }
+
+    div.e-icons.e-pager-default:not(.e-numericitem):hover {
+      @if $pager-skin == 'fluent2' {
+        color: $pager-hover-color;
+        background-color: $pager-hover-bg-color;
+      }
+    }
+
+    div.e-icons.e-disable {
+      color: $pager-numeric-txt-bg-color;
+    }
+
+    .e-pager-default:hover {
+      @include background-color-opacity-styles($pager-hover-bg-color, $pager-hover-color, $pager-content-opacity);
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
+    }
+
+    .e-parentmsgbar {
+      font-weight: $pager-pagermessage-weight;
+    }
+
+    .e-spacing {
+      @include color-opacity-styles($page-content-color, $pager-content-opacity);
+    }
+
+    .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
+      background: $pager-numeric-hover-bg-color;
+    }
+
+    .e-numericitem:hover {
+      @include color-opacity-styles($pager-hover-color, $pager-content-opacity);
+    }
+
+    .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
+      background-color: $pager-number-hover-bg-color;
+      opacity: 1;
+    }
+
+    .e-numericitem {
+      background: $pager-bg-color;
+      color: $page-content-color;
+    }
+
+    .e-prevpagedisabled,
+    .e-prevpage,
+    .e-nextpage,
+    .e-nextpagedisabled,
+    .e-lastpagedisabled,
+    .e-lastpage,
+    .e-firstpage,
+    .e-firstpagedisabled {
+      background-color: $pager-bg-color;
+      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;
+    }
+
+    .e-pagercontainer {
+      background-color: $pager-bg-color;
+      border-color: $pager-border-color;
+    }
+
+    .e-numericitem,
+    .e-firstpage,
+    .e-prevpage,
+    .e-firstpagedisabled,
+    .e-prevpagedisabled,
+    .e-nextpage,
+    .e-lastpage,
+    .e-nextpagedisabled,
+    .e-lastpagedisabled {
+      border-right-color: $pager-border-color;
+    }
+
+    .e-currentitem,
+    .e-currentitem:hover {
+      @if $pager-skin == 'bootstrap5' {
+        border-right-color: $primary-light;
+      }
+      @if $pager-skin == 'material3' {
+        border-radius: 4px;
+      }
+      @include background-color-opacity-styles($pager-active-bg-color, $pager-active-color, 1);
+    }
+
+    .e-numericitem.e-focused,
+    .e-first.e-focused,
+    .e-prev.e-focused,
+    .e-next.e-focused,
+    .e-last.e-focused,
+    .e-mfirst.e-focused,
+    .e-mprev.e-focused,
+    .e-mnext.e-focused,
+    .e-mlast.e-focused {
+      background-color: $pager-focus-bg-color;
+    }
+
+    .e-currentitem.e-numericitem.e-focused {
+      background: $pager-active-bg-color;
+      box-shadow: $pager-focus-active-box-shadow;
+    }
+
+    .e-focused {
+      box-shadow: $pager-focus-shadow;
+    }
+
+    @media (max-width: 590px) {
+      .e-pager-default:hover {
+        @include background-color-opacity-styles($pager-bg-color, $pager-mhover-color, $pager-content-opacity);
+      }
+    }
+
+    &.e-rtl {
+      & .e-numericitem,
+      & .e-firstpage,
+      & .e-prevpage,
+      & .e-firstpagedisabled,
+      & .e-prevpagedisabled,
+      & .e-nextpage,
+      & .e-lastpage,
+      & .e-nextpagedisabled,
+      & .e-lastpagedisabled,
+      & .e-nextpage,
+      & .e-nextpagedisabled {
+        border-left-color: $pager-border-color;
+      }
+    }
+  }
+}

package/styles/pager/icons/_bds.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bds-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@include export-module('pager-bootstrap-dark-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e235';
+    }
+
+    .e-icon-first::before {
+      content: '\e238';
+    }
+
+    .e-icon-prev::before {
+      content: '\e237';
+    }
+
+    .e-icon-next::before {
+      content: '\e236';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e238';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e235';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e236';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e237';
+      }
+    }
+  }
+}

package/styles/pager/icons/_bootstrap.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bootstrap-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e235';
+    }
+
+    .e-icon-first::before {
+      content: '\e238';
+    }
+
+    .e-icon-prev::before {
+      content: '\e237';
+    }
+
+    .e-icon-next::before {
+      content: '\e236';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e238';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e235';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e236';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e237';
+      }
+    }
+  }
+}

package/styles/pager/icons/_bootstrap4.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bootstrap4-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7bb';
+    }
+
+    .e-icon-first::before {
+      content: '\e7ba';
+    }
+
+    .e-icon-prev::before {
+      content: '\e70d';
+    }
+
+    .e-icon-next::before {
+      content: '\e76a';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e7ba';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7bb';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e76a';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e70d';
+      }
+    }
+  }
+}

package/styles/pager/icons/_bootstrap5.3.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bootstrap5-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/pager/icons/_bootstrap5.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-bootstrap5-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@include export-module('pager-fabric-dark-icons') {
+
+  /* !component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e938';
+    }
+
+    .e-icon-first::before {
+      content: '\e999';
+    }
+
+    .e-icon-prev::before {
+      content: '\e829';
+    }
+
+    .e-icon-next::before {
+      content: '\e830';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e999';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e938';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e830';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e829';
+      }
+    }
+  }
+}

package/styles/pager/icons/_fabric.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-fabric-icons') {
+
+  /* !component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e938';
+    }
+
+    .e-icon-first::before {
+      content: '\e999';
+    }
+
+    .e-icon-prev::before {
+      content: '\e829';
+    }
+
+    .e-icon-next::before {
+      content: '\e830';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e999';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e938';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e830';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e829';
+      }
+    }
+  }
+}

package/styles/pager/icons/_fluent.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-fluent-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e818';
+    }
+
+    .e-icon-first::before {
+      content: '\e833';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e833';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e818';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/pager/icons/_fluent2.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-fluent-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e818';
+    }
+
+    .e-icon-first::before {
+      content: '\e833';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e833';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e818';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}