@syncfusion/ej2-navigations 20.1.61 → 20.2.36

package/styles/pager/_layout.scss

@@ -0,0 +1,899 @@
+@include export-module('pager-layout') {
+  /*! Pager layout */
+  .e-bigger  #{&}.e-pager,
+  #{&}.e-pager.e-bigger {
+    font-size: $pager-bigger-font-size;
+    padding: $pager-bigger-padding;
+
+    div.e-icons {
+      font-size: $pager-bigger-icon-font-size;
+    }
+
+    div.e-parentmsgbar {
+      padding-bottom: $pager-bigger-messagebar-padding-bottom;
+      padding-right: $pager-bigger-messagebar-padding-right;
+      padding-top: $pager-bigger-messagebar-padding-top;
+      @if $pager-skin == 'tailwind' {
+        line-height: 22px;
+      }
+    }
+
+    .e-pagerdropdown {
+      height: $pager-bigger-dropdown-heigh;
+      margin: $pager-bigger-dropdown-margin;
+      margin-top: $pager-bigger-dropdown-margin-top;
+      width: $pager-bigger-dropdown-width;
+    }
+
+    .e-pagercontainer .e-firstpage,
+    .e-pagercontainer .e-prevpage,
+    .e-pagercontainer .e-firstpagedisabled,
+    .e-pagercontainer .e-prevpagedisabled,
+    .e-pagercontainer .e-nextpage,
+    .e-pagercontainer .e-lastpage,
+    .e-pagercontainer .e-nextpagedisabled,
+    .e-pagercontainer .e-lastpagedisabled {
+      padding: $pager-bigger-pagecontainer-icon-padding;
+    }
+
+    &.e-rtl .e-pagercontainer .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 11px 9px;
+      }
+    }
+
+    &.e-rtl .e-pagercontainer .e-prevpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 11px 9px 10px;
+      }
+    }
+
+    &.e-rtl .e-pagercontainer .e-firstpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 10px 9px;
+       }
+     }
+
+    &.e-rtl .e-pagercontainer .e-lastpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 10px 9px;
+       }
+     }
+
+    .e-pagerconstant {
+      margin-bottom: $pager-bigger-dropdown-constant-margin;
+      margin-left: $pager-bigger-constant-margin-left;
+      @if $pager-skin == 'tailwind' {
+        line-height: 22px;
+      }
+    }
+
+    .e-pagercontainer {
+      margin: $pager-bigger-pagercontainer-margin;
+    }
+
+    &.e-rtl .e-pagercontainer {
+      margin: $pager-bigger-new-container-rtl-margin;
+	}
+
+    @media (max-width: 769px) {
+      padding: $pager-device-padding;
+
+      &.e-rtl div.e-parentmsgbar {
+        margin-right: 0;
+      }
+
+      div.e-parentmsgbar {
+        padding: $pager-device-messabar-padding;
+      }
+}
+
+    .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
+    .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+      margin-left: $pager-bigger-nexticon-marign-left;
+    }
+
+    &.e-rtl .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
+    &.e-rtl e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+      margin-left: 0;
+      margin-right: $pager-bigger-rtl-nexticon-marign-right;
+  }
+
+    &.e-rtl div.e-parentmsgbar {
+      margin-left: $pager-bigger-rtl-parentmsgbar-margin-left;
+      margin-top: $pager-bigger-rtl-parentmsgbar-margin-top;
+   }
+
+    .e-numericitem {
+      margin: $pager-bigger-numeric-item-margin;
+      @if $pager-skin == 'tailwind' {
+        line-height: 22px;
+      }
+    }
+
+    .e-numericitem.e-currentitem {
+      @if $pager-skin == 'tailwind' {
+        padding: 6px 14px 5.5px 13px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 9px 13px 10px 12px;
+      }
+    }
+
+    .e-numericitem.e-currentitem:hover {
+      @if $pager-skin == 'tailwind' {
+        padding: 6px 14px 5.5px 13px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 9px 13px 10px 12px;
+      }
+    }
+
+    &.e-rtl .e-numericitem.e-currentitem {
+      @if $pager-skin == 'tailwind' {
+        padding: 6px 14px 6px 13px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 9px 13px 10px 12px;
+      }
+    }
+
+    &.e-rtl .e-numericitem.e-currentitem:hover {
+      @if $pager-skin == 'tailwind' {
+        padding: 6px 14px 6px 13px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 9px 13px 10px 12px;
+      }
+    }
+
+    .e-pp.e-spacing,
+    .e-np.e-spacing,
+    .e-pp.e-spacing:hover,
+    .e-np.e-spacing:hover {
+      padding: $pager-bigger-letter-spacing;
+    }
+
+    .e-np.e-spacing.e-focused,
+    .e-pp.e-spacing.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 11px 12px 10.5px 11.5px;
+      }
+    }
+
+    &.e-rtl .e-np.e-spacing.e-focused,
+    &.e-rtl .e-pp.e-spacing.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 13px 13px 11px 12px;
+      }
+    }
+
+    .e-spacing,
+    .e-numericitem:hover,
+    .e-currentitem {
+      border-radius: $pager-bigger-current-item-border-radius;
+      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 {
+        font-size: $pager-rtl-bigger-tripledot-font-size;
+        margin-top: $pager-tripledot-rtl-bigger-margin-top;
+        @if $pager-skin == 'tailwind' {
+          padding: 7px 12.6px;
+        }
+        @else if $pager-skin == 'bootstrap5' {
+          padding: 14px 14px 13px;
+        }
+      }
+
+      & .e-pagerdropdown {
+        margin: $pager-rtl-pagerdropdown-bigger-margin;
+        }
+
+      & .e-pagerconstant {
+        margin: $pager-rtl-pagerconstant-bigger-margin-top;
+            }
+      }
+
+    .e-pagercontainer .e-firstpage,
+    .e-pagercontainer .e-prevpage,
+    .e-pagercontainer .e-firstpagedisabled,
+    .e-pagercontainer .e-prevpagedisabled,
+    .e-pagercontainer .e-nextpage,
+    .e-pagercontainer .e-lastpage,
+    .e-pagercontainer .e-nextpagedisabled,
+    .e-pagercontainer .e-lastpagedisabled {
+      margin-right: $pager-bigger-pagercontainer-icons-marign-right;
+      @if $pager-skin == 'tailwind' {
+        margin-top: -4px;
+      }
+      padding: $pager-bigger-pagercontainer-icons-padding;
+    }
+
+    .e-pagercontainer .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 11px 9px 10px;
+      }
+    }
+
+    .e-pagercontainer .e-prevpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 11px 9px 10px;
+      }
+    }
+
+    .e-pagercontainer .e-firstpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 11px 9px 10px;
+       }
+     }
+
+    .e-pagercontainer .e-lastpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding: 10px 10px 9px;
+       }
+     }
+
+    .e-pp,
+    .e-np,
+    .e-pp:hover,
+    .e-np:hover {
+      font-size: $pager-bigger-tripledot-font-size;
+    }
+   }
+
+  #{&}.e-pager {
+    border-style: $pager-border-type;
+    border-width: 1px;
+    display: inline-block;
+    font-size: $pager-font-size;
+    padding: $pager-padding;
+    white-space: normal;
+    width: 100%;
+
+    [class^='e-'] {
+      box-sizing: border-box;
+    }
+
+    div.e-parentmsgbar {
+      float: right;
+      padding-bottom: $pager-messagebar-padding-bottom;
+      padding-right: $pager-messagebar-padding-right;
+      padding-top: $pager-messagebar-padding-top;
+      @if $pager-skin == 'tailwind' {
+        line-height: 18px;
+      }
+    }
+
+    .e-pagesizes {
+      display: inline;
+    }
+
+    .e-pagerdropdown {
+      display: inline-block;
+      height: $pager-dropdown-height;
+      margin-left: $pager-dropdown-margin-left;
+      margin-right: $pager-dropdown-margin-right;
+      margin-top: $pager-dropdown-margin-top;
+      overflow: $pager-dropdown-overflow;
+      vertical-align: middle;
+      width: $pager-dropdown-width;
+    }
+
+    .e-pagerconstant {
+      @if $pager-skin == 'fluent' {
+        font-weight: 600;
+      }
+
+      display: inline-block;
+      @if $pager-skin == 'tailwind' {
+        line-height: 18px;
+      }
+      margin: $pager-constant-margin;
+      overflow: hidden;
+      width: auto;
+    }
+
+    .e-icons {
+      font-size: $pager-icon-size;
+    }
+
+    .e-numericitem {
+      border-right-style: $pager-border-type;
+      border-right-width: $pager-border-size;
+      display: inline-block;
+      line-height: $pager-font-line-height;
+      margin-right: $pager-numericitem-margin-right;
+      min-width: $pager-numericitem-min-width;
+      padding: $pager-numericitem-padding;
+      text-align: center;
+    }
+
+    .e-numericitem.e-currentitem {
+      @if $pager-skin == 'tailwind' {
+        border: 1px solid $primary;
+        padding: 3.5px 11px 4px 10px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 7px 10.5px 8px 9.5px;
+      }
+    }
+
+    .e-numericitem.e-currentitem:hover {
+      @if $pager-skin == 'tailwind' {
+        padding: 3.5px 11px 4px 10px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 7px 10.5px 8px 9.5px;
+      }
+    }
+
+    &.e-rtl .e-numericitem.e-currentitem {
+      @if $pager-skin == 'tailwind' {
+        border-left-color: $primary;
+        border-left-style: solid;
+        border-left-width: 1px;
+        padding: 3.5px 11px 4px 10px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        border-left-color: $primary-light;
+        border-left-style: solid;
+        border-left-width: 3px;
+        padding: 7px 10.5px 8px 9.5px;
+      }
+    }
+
+    &.e-rtl .e-numericitem.e-currentitem:hover {
+      @if $pager-skin == 'tailwind' {
+        padding: 3.5px 11px 4px 10px;
+      }
+      @else if $pager-skin == 'bootstrap5' {
+        padding: 7px 10.5px 8px 9.5px;
+      }
+    }
+
+    div.e-pagermsgdiv {
+      padding-right: 6px;
+      padding-top: 4px;
+      text-align: right;
+    }
+
+    .e-firstpagedisabled,
+    .e-prevpagedisabled,
+    .e-nextpagedisabled,
+    .e-lastpagedisabled {
+      opacity: $pager-disabled-icons-opacity;
+    }
+
+    .e-spacing,
+    .e-numericitem:hover,
+    .e-currentitem {
+      border-radius: $pager-numericitem-border-radius;
+      cursor: pointer;
+      padding: $pager-numeric-icon-padding;
+      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;
+      }
+      @if $pager-skin == 'bootstrap5' {
+        border: 3px solid $primary-light;
+      }
+      font-style: normal;
+      font-variant: normal;
+      font-weight: $pager-current-item-font-weight;
+    }
+
+    div,
+    a {
+      display: inline;
+      user-select: none;
+    }
+
+    .e-icons::before {
+      display: inline-block;
+    }
+
+    .e-pagercontainer .e-firstpage,
+    .e-pagercontainer .e-prevpage,
+    .e-pagercontainer .e-firstpagedisabled,
+    .e-pagercontainer .e-prevpagedisabled,
+    .e-pagercontainer .e-nextpage,
+    .e-pagercontainer .e-lastpage,
+    .e-pagercontainer .e-nextpagedisabled,
+    .e-pagercontainer .e-lastpagedisabled {
+      border-right-style: $pager-border-type;
+      border-right-width: $pager-border-size;
+      display: inline-block;
+      margin-right: $pager-navigationicon-right;
+      margin-top: $pager-navigationicon-top;
+      min-width: 26px;
+      padding: $pager-pagecontainer-icon-padding;
+      @if $pager-skin == 'tailwind' {
+        position: relative;
+        top: 3px;
+
+        &.e-focused {
+          border: 0;
+          border-right-style: none;
+          padding: 6.5px 7px;
+        }
+
+      }
+    }
+
+    .e-pagercontainer .e-nextpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding-right: 8px;
+      }
+    }
+
+    .e-pagercontainer .e-prevpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding-left: 7px;
+        padding-right: 8px;
+      }
+    }
+
+    .e-pagercontainer .e-firstpage.e-focused {
+      @if $pager-skin == 'tailwind' {
+        padding-right: 8px;
+       }
+     }
+
+    .e-pagercontainer .e-lastpage,
+    .e-pagercontainer .e-lastpagedisabled {
+      border-right: $pager-last-border-size;
+    }
+
+    .e-firstpage:hover,
+    .e-prevpage:hover,
+    .e-lastpage:hover,
+    .e-nextpage:hover {
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    a.e-nextprevitemdisabled {
+      display: none;
+      margin-left: $pager-border-size;
+      margin-right: $pager-border-size;
+      padding-left: 5px;
+      padding-right: 5px;
+      text-decoration: none;
+    }
+
+    .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
+    .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+      margin-left: $pager-next-icon-margin-left;
+    }
+
+    .e-pagercontainer {
+      border-radius: $pager-container-border-radius;
+      border-style: $pager-border-type;
+      border-width: $pager-border-size;
+      display: inline-block;
+      margin: $pager-container-margin;
+      overflow: hidden;
+    }
+
+    .e-lastpage:Hover {
+      border-radius: $pager-last-page-hover-border-radius;
+    }
+
+    .e-firstpage:Hover {
+      border-radius: $pager-first-page-hover-border-radius;
+    }
+
+    .e-pagermessage,
+    .e-pagerexternalmsg {
+      display: block;
+      margin: $pager-external-msg-padding;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .e-mfirst,
+    .e-mprev,
+    .e-mnext,
+    .e-mlast {
+      display: none;
+    }
+
+    .e-mprev {
+      text-indent: -3px;
+    }
+
+    .e-mnext {
+      text-indent: -2px;
+    }
+
+    // sass-lint:disable-all
+    .e-mfirst,
+    .e-mprev,
+    .e-mnext,
+    .e-mlast {
+      -webkit-tap-highlight-color: $pager-bg-color;
+    }
+
+    // sass-lint:enable-all  
+
+    .e-pp,
+    .e-np,
+    .e-pp:hover,
+    .e-np:hover {
+      font-size: $pager-tripledot-font-size;
+      font-weight: $pager-numeric-font-weight;
+      letter-spacing: $pager-letter-spacing;
+      padding: $pager-tripledot-padding;
+    }
+
+    .e-np.e-focused,
+    .e-pp.e-focused {
+      line-height: $pager-focus-tripledot-line-height;
+      padding: $pager-focus-tripledot-padding;
+    }
+
+    @media (max-width: 769px) {
+
+      padding: 13px 0;
+
+      div.e-parentmsgbar {
+        box-sizing: border-box;
+        display: inline-block;
+        float: initial;
+        padding-bottom: 0;
+        padding-right: 0;
+        padding-top: 0;
+        text-align: center;
+        vertical-align: top;
+        width: calc(60% - 48px);
+      }
+
+      .e-pagesizes {
+        display: none;
+      }
+
+      .e-pagecountmsg {
+        display: none;
+      }
+
+      .e-pagercontainer {
+        display: none;
+      }
+
+      .e-icons {
+        font-size: $pager-mobile-icon-size;
+      }
+
+      .e-mfirst,
+      .e-mprev,
+      .e-mnext,
+      .e-mlast {
+        border: 0;
+        box-sizing: border-box;
+        display: inline-block;
+        padding: 1% 5%;
+      }
+
+      .e-mfirst {
+        margin-right: 4px;
+        text-align: right;
+        width: calc(10% + 11px);
+      }
+
+      .e-mprev {
+        margin: 0 4px;
+        text-align: right;
+        width: 10%;
+      }
+
+      .e-mnext {
+        margin: 0 4px;
+        text-align: left;
+        width: 10%;
+      }
+
+      .e-mlast {
+        margin-left: 4px;
+        text-align: left;
+        width: calc(10% + 11px);
+      }
+
+    }
+
+    &.e-rtl {
+      direction: rtl;
+
+      .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
+      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+        margin-left: 0;
+        margin-right: $pager-rtl-nxtpage-margin;
+        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
+          border-left-style: solid;
+          border-left-width: 1px;
+          border-right-style: solid;
+          border-right-width: 1px;
+        }
+      }
+
+      & .e-pagercontainer,
+      & div,
+      & a {
+        float: initial;
+      }
+
+      & .e-parentmsgbar {
+        float: left;
+        margin-left: $pager-rtl-parentmsgbar-margin-left;
+      }
+
+      & .e-pagerdropdown {
+        margin: $pager-rtl-pagerdropdown-margin;
+      }
+
+      & .e-pagerconstant {
+        margin: $pager-rtl-pagerconstant-margin-top;
+      }
+
+      & .e-pagerexternalmsg {
+        float: none;
+      }
+
+      & .e-pagercontainer {
+        float: none;
+        margin: $pager-container-rtl-margin;
+        padding: 0;
+	    }
+
+      & .e-firstpage,
+      & .e-prevpage,
+      & .e-firstpagedisabled,
+      & .e-prevpagedisabled,
+      & .e-nextpage,
+      & .e-lastpage,
+      & .e-nextpagedisabled,
+      & .e-lastpagedisabled {
+        padding: $pager-rtl-navigation-icon-padding;
+      }
+
+      & .e-next.e-icons.e-icon-next.e-nextpage.e-focused {
+        @if $pager-skin == 'tailwind' {
+          border: 0;
+          padding: 6.5px 8px 6px;
+        }
+      }
+
+      & .e-prevpage.e-focused {
+        @if $pager-skin == 'tailwind' {
+          padding: 6.5px 8px 6px 7px;
+        }
+      }
+
+      & .e-lastpage.e-focused {
+        @if $pager-skin == 'tailwind' {
+          padding: 6.5px 7px 6px;
+        }
+      }
+
+      & .e-firstpage.e-focused {
+        @if $pager-skin == 'tailwind' {
+          padding: 6.5px 7px 6px;
+        }
+      }
+
+      & .e-firstpage::before,
+      & .e-firstpage:hover,
+      & .e-firstpagedisabled::before {
+        content: '\e701';
+      }
+
+      & .e-prevpage::before,
+      & .e-prevpage:hover,
+      & .e-prevpagedisabled::before {
+        content: '\e848';
+      }
+
+      & .e-nextpage::before,
+      & .e-nextpage:hover,
+      & .e-nextpagedisabled::before {
+        content: '\e84b';
+      }
+
+      & .e-lastpage::before,
+      & .e-lastpage:hover,
+      & .e-lastpagedisabled::before {
+        content: '\e716';
+      }
+
+      & .e-nextpage,
+      & .e-nextpagedisabled,
+      & .e-prevpage,
+      & .e-prevpagedisabled,
+      & .e-firstpage,
+      & .e-firstpagedisabled {
+        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
+          border-left-style: none;
+          border-left-width: 0;
+        }
+        @else {
+          border-left-style: $pager-border-type;
+          border-left-width: $pager-border-size;
+        }
+      }
+
+      & .e-nextpage,
+      & .e-nextpagedisabled,
+      & .e-prevpage,
+      & .e-prevpagedisabled {
+        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
+          border-left-style: none;
+          border-left-width: 0;
+        }
+        @else {
+          border-right-style: none;
+          border-right-width: 0;
+        }
+      }
+
+      & .e-firstpage,
+      & .e-firstpagedisabled {
+        border-right: medium none;
+      }
+
+      & .e-firstpage:hover {
+        border-radius: 0 4px 4px 0;
+      }
+
+      & .e-lastpage:hover {
+        border-radius: 4px 0 0 4px;
+      }
+
+      & .e-numericcontainer {
+        float: none;
+      }
+
+      & .e-numericitem {
+        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
+          @if $pager-skin == 'bootstrap5' {
+            border-right-style: solid;
+          }
+          @else {
+            border-left-style: none;
+            border-left-width: 0;
+            border-right-style: solid;
+            border-right-width: 1px;
+          }
+        }
+        @else {
+          border-left-style: $pager-border-type;
+          border-left-width: $pager-border-size;
+          border-right-style: none;
+          border-right-width: 0;
+        }
+        min-width: 26px;
+      }
+
+      & .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
+      &.e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+        margin-left: 0;
+        margin-right: $pager-next-icon-margin-left;
+    }
+
+      & .e-spacing,
+      & .e-numericitem:hover,
+      & .e-currentitem {
+        margin: $pager-rtl-numeric-margin;
+        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,
+      & .e-np:hover {
+        margin-top: $pager-tripledot-rtl-margin-top;
+        padding: $pager-tripledot-rtl-padding;
+      }
+
+      & .e-np.e-focused,
+      & .e-pp.e-focused {
+        @if $pager-skin == 'tailwind' {
+          padding: $pager-focus-tripledot-padding;
+        }
+      }
+
+      @media (max-width: 769px) {
+        .e-mfirst,
+        .e-mprev,
+        .e-mnext,
+        .e-mlast {
+          border: 0;
+        }
+
+        &.e-rtl div.e-parentmsgbar {
+          float: initial;
+          margin-left: 0;
+          margin-top: $pager-rtl-pagermsgbar-device-margin-top;
+           }
+
+        .e-parentmsgbar {
+          float: right;
+        }
+       }
+   }
+
+    &.sf-pager {
+      .e-pagercontainer .e-first,
+      .e-pagercontainer .e-prev,
+      .e-pagercontainer .e-next,
+      .e-pagercontainer .e-last {
+        font-size: $pager-icon-size;
+      }
+    }
+
+    &.sf-pager {
+      .e-numericcontainer a {
+        font-size: $pager-font-size;
+      }
+    }
+
+    &.sf-pager {
+      .e-pagercontainer {
+        font-size: 0;
+      }
+    }
+
+    &.sf-pager {
+      .e-link,
+      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
+        margin-left: 0;
+      }
+    }
+}
+}