@syncfusion/ej2-navigations 27.2.5 → 28.1.35

package/styles/menu/tailwind3.scss

@@ -0,0 +1,9 @@
+@import 'ej2-base/styles/definition/tailwind3.scss';
+@import '../context-menu/tailwind3-definition.scss';
+@import '../h-scroll/tailwind3-definition.scss';
+@import '../v-scroll/tailwind3-definition.scss';
+@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
+@import 'tailwind3-definition.scss';
+@import 'icons/tailwind3.scss';
+@import 'all.scss';
+@import 'bigger.scss';

package/styles/pager/_bigger.scss

@@ -100,7 +100,7 @@
     .e-np.e-spacing.e-focused,
     .e-pp.e-spacing.e-focused {
       @if $pager-skin == 'tailwind' {
-        padding: 11px 12px 10.5px 11.5px;
+        padding: 7px 11.8px 6.5px;
       }
     }
   
@@ -119,10 +119,22 @@
         @if $pager-skin == 'material3' {
           padding: $pager-bigger-current-item-padding;
         }
+        @if $pager-skin == 'tailwind3' {
+          padding: 10.7px 15.48px 11.5px 15.1px;
+        }
         @else {
           padding: $pager-bigger-letter-spacing;
         }
       }
+
+      .e-pp.e-spacing,
+      .e-np.e-spacing,
+      .e-pp.e-spacing:hover,
+      .e-np.e-spacing:hover {
+        @if $pager-skin == 'tailwind3' {
+          padding-top: 12.5px;
+        }
+      }
  
       & .e-pagerdropdown {
         margin: $pager-rtl-pagerdropdown-bigger-margin;
@@ -144,13 +156,13 @@
         .e-firstpage.e-focused,
         .e-lastpage.e-focused {
           @if $pager-skin == 'tailwind' {
-            padding: 10px 10px 9px;
+            padding: 10px 10px 9.5px;
           }
         }
   
         .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
           @if $pager-skin == 'tailwind' {
-            padding: 10px 11px 9px;
+            padding: 10px 11px 9.5px;
           }
         }
       }
@@ -165,6 +177,13 @@
         margin-left: $pager-bigger-rtl-parentmsgbar-margin-left;
         margin-top: $pager-bigger-rtl-parentmsgbar-margin-top;
       }
+
+      @media (max-width: 769px) {
+        div.e-parentmsgbar {
+          margin-left: 0;
+          margin-top: $pager-rtl-pagermsgbar-device-margin-top;
+        }
+      }
   
       @media (max-width: 769px) {
         div.e-parentmsgbar {
@@ -249,17 +268,31 @@
       .e-prevpage.e-focused,
       .e-firstpage.e-focused {
         @if $pager-skin == 'tailwind' {
-          padding: 10px 11px 9px 10px;
+          padding: 10px 11px 9.5px 10px;
         }
       }
   
       .e-lastpage.e-focused {
         @if $pager-skin == 'tailwind' {
-          padding: 10px 10px 9px;
+          padding: 10px 10px 9.5px;
+        }
+      }
+    }
+
+    &.e-rtl .e-pagercontainer {
+      .e-firstpage,
+      .e-prevpage,
+      .e-firstpagedisabled,
+      .e-prevpagedisabled,
+      .e-nextpage,
+      .e-lastpage,
+      .e-nextpagedisabled,
+      .e-lastpagedisabled {
+        @if $pager-skin == 'tailwind3' {
+          padding: 11.7px 11.6px 8.7px;
         }
       }
     }
- 
     .e-pp,
     .e-np,
     .e-pp:hover,
@@ -301,4 +334,30 @@
       }
     }
   }
+
+  .e-bigger  #{&}.sf-pager,
+  #{&}.sf-pager.e-bigger {
+    .e-pagercontainer {
+      .e-firstpage,
+      .e-prevpage,
+      .e-firstpagedisabled,
+      .e-prevpagedisabled,
+      .e-nextpage,
+      .e-lastpage,
+      .e-nextpagedisabled,
+      .e-lastpagedisabled {
+        @if $pager-skin =='tailwind3' {
+          padding: 10.3px 11.6px 12.5px;
+        }
+      }
+    }
+ 
+    .e-spacing,
+    .e-currentitem,
+    .e-numericitem:hover {
+      @if $pager-skin =='tailwind3' {
+        padding: 14.5px 15.48px 11.8px 15.1px;
+      }
+    }
+  }
 }

package/styles/pager/_layout.scss

@@ -123,7 +123,7 @@
       &.e-currentitem,
       &.e-currentitem:hover {
         @if $pager-skin == 'tailwind' {
-          padding: 3.5px 11px 6px 10px;
+          padding: 3.5px 11px 6.2px 10px;
         }
         @else if $pager-skin == 'bootstrap5' {
           padding: 7.4px 10.5px 8.4px 9.5px;
@@ -210,7 +210,7 @@
           &.e-focused {
             border: 0;
             border-right-style: none;
-            padding: 8.9px 7px 8px;
+            padding: 8.5px 7px 9.5px;
           }
         }
         @else if $pager-skin == 'material3' {
@@ -219,6 +219,9 @@
             border-radius: 4px;
           }
         }
+        @else if $pager-skin == 'tailwind3' {
+          vertical-align: sub;
+        }
       }
 
       .e-nextpage.e-focused,
@@ -727,6 +730,23 @@
         .e-last {
           font-size: $pager-icon-size;
         }
+        .e-firstpage,
+        .e-prevpage,
+        .e-firstpagedisabled,
+        .e-prevpagedisabled,
+        .e-nextpage,
+        .e-lastpage,
+        .e-nextpagedisabled,
+        .e-lastpagedisabled {
+          @if $pager-skin == 'tailwind3' {
+            padding: 7.1px 8.6px 8.5px;
+          }
+        }
+      }
+      .e-spacing {
+        @if $pager-skin == 'tailwind3' {
+          padding: 7.6px 11.85px 7.8px 11.8px;
+        }
       }
       
       .e-numericcontainer a {

package/styles/pager/_tailwind-definition.scss

@@ -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: $transparent !default;
-$pager-focus-tripledot-padding: 4.5px 8.7px 7px !default;
+$pager-focus-tripledot-padding: 4.5px 9.2px 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/_tailwind3-definition.scss

@@ -0,0 +1,166 @@
+@use 'sass:math';
+
+$pager-numericitem-border-radius: 0 !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: 8.85px 8.6px 7px 8.6px !default;
+$pager-rtl-numeric-margin: 0 !default;
+$pager-item-hover-borders-width: 0 !default;
+$pager-tripledot-font-size: 14px !default;
+$pager-last-page-hover-border-radius:  0 3px 3px 0 !default;
+$pager-first-page-hover-border-radius: 3px 0 0 3px !default;
+$pager-rtl-parentmsgbar-margin-left: 6px !default;
+$pager-rtl-parentmsgbar-padding-top: 5px !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;
+$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: 7px 8px 7px 8px !default;
+$pager-numericitem-min-width: 26px !default;
+$pager-font-size: 14px !default;
+$pager-font-line-height: 1 !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-alt1 !default;
+$pager-icon-size: 14px !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: 5px !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: 6.1px 9.92px 9.9px 9.9px !default;
+$pager-numeric-icon-padding: 6.1px 11.85px 9.8px 11.8px !default;
+$pager-pagecontainer-icon-padding: 8.85px 8.6px 7px 8.6px !default;
+$pager-bigger-pagecontainer-icon-padding: 16px 14px 14px 14px !default;
+$pager-hover-color: $content-text-color-hover !default;
+$pager-mhover-color: $primary !default;
+$pager-pagermessage-weight: $font-weight-normal !default;
+$pager-active-bg-color: $primary !default;
+$pager-last-border-size: 1px !default;
+$page-content-color: $content-text-color !default;
+$pager-container-margin: 0 0 -4px .3px !default;
+$pager-bigger-numeric-item-margin: 0 !default;
+$pager-bigger-icon-font-size: 18px !default;
+$pager-bigger-font-size: 16px !default;
+$pager-bigger-padding: 7px 8px 7px 8px !default;
+$pager-bigger-pagercontainer-margin: 0 0 -6px .8px !default;
+$pager-bigger-pagercontainer-icons-padding: 11.7px 11.6px 8.7px 11.6px !default;
+$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
+$pager-bigger-current-item-padding: 10.7px 15.48px 11.5px 15.1px !default;
+$pager-letter-spacing: 0 !default;
+$pager-bigger-icons-align: middle !default;
+$pager-bigger-messagebar-padding-right: 0 !default;
+$pager-bigger-messagebar-padding-top: 8px !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: $content-text-color-alt3 !default;
+$pager-hover-bg-color: $content-bg-color-hover !default;
+$pager-dropdown-margin-top: -17px !default;
+$pager-dropdown-margin-left: 10px !default;
+$pager-dropdown-margin-right: 8px !default;
+$pager-dropdown-overflow: unset !default;
+$pager-bigger-dropdown-constant-margin: 4px !default;
+$pager-bigger-dropdown-margin: 0 10px 0 18px !default;
+$pager-dropdown-height: 32px !default;
+$pager-dropdown-width: 90px !default;
+$pager-bigger-dropdown-width: 90px !default;
+$pager-constant-margin: 0 0 4px 8px !default;
+$pager-bigger-letter-spacing: 12.6px 13.92px 12px 13.9px !default;
+$pager-tripledot-rtl-margin-top: 0 !default;
+$pager-tripledot-rtl-padding: 6.1px 9.92px 9.9px 9.9px !default;
+$pager-rtl-pagerconstant-margin-top: 0 8px 6px 0 !default;
+$pager-rtl-pagerdropdown-margin: -17px 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: 6.1px 11.85px 9.8px 11.8px !default;
+$pager-bigger-activeitem-padding: 12px 15px 13px !default;
+$pager-rtl-pagerdropdown-bigger-margin: -21px 16px 0 0 !default;
+$pager-rtl-pagerconstant-bigger-margin-top: 0 16px 7px 0 !default;
+$pager-bigger-rtl-parentmsgbar-margin-top: 0 !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: 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;
+$pager-numeric-icon-hover-padding: 10.4px 12.5px 11.6px 12.5px !default;
+$pager-bigger-rtl-activeitem-hover-padding:  12px 15px 13px !default;
+$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
+$pager-bigger-dropdown-margin-top: -21px !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: 14px !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: $skin-name !default;
+$pager-container-border-radius: 4px !default;
+$pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
+$pager-active-border: 2px !default;
+$pager-active-size: solid !default;
+$pager-active-color: $primary-text-color !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: $pager-tripledot-padding !default;
+$pager-focus-tripledot-line-height: 1 !default;
+$pager-focus-active-box-shadow: 0 0 0 1px $primary inset !default;
+$pager-focus-shadow: 0 0 0 1px $primary inset !default;
+$pager-bigger-adaptive-pagermsgbar-margin-top: -5px !default;
+$pager-bigger-adaptive-dropdown-margin: -3px 2px 0 4px !default;
+$pager-bigger-adaptive-dropdown-min-width: 77px !default;
+$pager-bigger-adaptive-constant-top: 6px !default;
+$pager-rtl-adaptive-constant-top: 0 10px 0 8px !default;
+$pager-rtl-e-bigger-adaptive-dropdown-margin: 1px 4px 0 2px !default;
+$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: -2px !default;
+$pager-bigger-adaptive-pager-padding: 8px !default;
+$pager-adaptive-pagermsgbar-margin-top: -6px !default;
+$pager-adaptive-dropdown-margin: 2px 2px 0 4px !default;
+$pager-rtl-adaptive-pagermsgbar-margin-top: -4px !default;
+$pager-rtl-adaptive-dropdown-margin: 5px 4px 0 2px !default;
+$pager-adaptive-constant-pagesizeall-top: 11px !default;
+$pager-bigger-adaptive-constant-pagesizeall-top: 10px !default;
+$pager-rtl-adaptive-constant-pagesizeall-top: 14px !default;
+$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 13px !default;