feat(pager): improve adaptivenes

telerik · Jul 24, 2023 · 709653a · 709653a
1 parent 2ea1fcf
commit 709653a
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 101 deletions.
diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -687,14 +687,6 @@
         border-width: 0 0 1px;
     }
 
-    .k-pager-input {
-        .k-numerictextbox {
-            margin-block: 0;
-            margin-inline: k-math-div( $kendo-font-size-md, 2 );
-            width: 3em;
-        }
-    }
-
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
             float: left;

diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss
@@ -66,8 +66,7 @@
         position: relative;
 
         select.k-dropdown-list {
-            cursor: pointer;
-            display: none;
+            width: $kendo-pager-md-dropdown-width;
         }
     }
     .k-pager-numbers {
@@ -103,10 +102,11 @@
     // Pager input
     .k-pager-input {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
-        .k-textbox {
+        .k-textbox,
+        .k-numerictextbox {
             margin-block: 0;
-            margin-inline: 1ex;
             width: $kendo-pager-input-width;
         }
     }
@@ -115,25 +115,12 @@
     // Pager sizes
     .k-pager-sizes {
         @extend %base-pager-section !optional;
-
-        .k-dropdown-list,
-        > select {
-            margin-right: 1ex;
-        }
+        gap: 1ex;
 
         .k-input-inner,
         .k-input-value-text {
             text-overflow: clip;
         }
-
-        .k-rtl &,
-        [dir="rtl"] & {
-            .k-dropdown-list,
-            > select {
-                margin-left: 1ex;
-                margin-right: 0;
-            }
-        }
     }
 
 
@@ -154,33 +141,6 @@
         order: 10;
     }
 
-    // Responsive
-    .k-pager-mobile-sm {
-        overflow: visible;
-
-        // Show native select
-        .k-pager-numbers-wrap {
-            border-color: inherit;
-
-            select.k-dropdown-list {
-                @extend %base-pager-section !optional;
-                @if ($kendo-pager-section-spacing) {
-                    margin-left: $kendo-pager-section-spacing;
-                    margin-right: $kendo-pager-section-spacing;
-                }
-                width: $kendo-pager-sm-dropdown-width;
-            }
-        }
-    }
-
-    // Hide components
-    .k-pager-mobile-md .k-pager-info,
-    .k-pager-mobile-sm .k-pager-info,
-    .k-pager-mobile-sm .k-pager-sizes,
-    .k-pager-mobile-sm .k-pager-numbers {
-        display: none;
-    }
-
     // Pager sizes
     @each $size, $size-props in $kendo-pager-sizes {
         $_padding-x: k-map-get($size-props, padding-x);
@@ -199,7 +159,8 @@
                     min-width: $_item-min-width;
                 }
 
-                .k-pager-input {
+                .k-pager-input,
+                > select.k-dropdown-list {
                     margin-inline-start: $_item-group-spacing;
                     margin-inline-end: $_item-group-spacing;
                 }

diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss
@@ -77,10 +77,6 @@ $kendo-pager-focus-bg: null !default;
 /// @group pager
 $kendo-pager-focus-shadow: $kendo-focus-shadow !default;
 
-/// The spacing between the Pager sections.
-/// @group pager
-$kendo-pager-section-spacing: k-map-get( $kendo-spacing, 4 ) !default;
-
 /// The border width of the Pager items.
 /// @group pager
 $kendo-pager-item-border-width: 0px !default;

diff --git a/packages/fluent/scss/grid/_layout.scss b/packages/fluent/scss/grid/_layout.scss
@@ -709,14 +709,6 @@
         border-width: 0 0 1px;
     }
 
-    .k-pager-input {
-        .k-numerictextbox {
-            margin-block: 0;
-            margin-inline: calc( var( --kendo-font-size, 14px ) / 2 );
-            width: 5em;
-        }
-    }
-
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
             float: left;

diff --git a/packages/fluent/scss/pager/_layout.scss b/packages/fluent/scss/pager/_layout.scss
@@ -72,8 +72,7 @@
         position: relative;
 
         select.k-dropdown-list {
-            cursor: pointer;
-            display: none;
+            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
         }
     }
     .k-pager-numbers {
@@ -109,9 +108,10 @@
     // Pager input
     .k-pager-input {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
-        .k-textbox {
-            margin-inline: 1ex;
+        .k-textbox,
+        .k-numerictextbox {
             margin-block: 0;
             width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
         }
@@ -121,10 +121,10 @@
     // Pager sizes
     .k-pager-sizes {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
         .k-dropdown-list,
         > select {
-            margin-inline-end: 1ex;
             width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
         }
 
@@ -152,31 +152,6 @@
         order: 10;
     }
 
-    // Responsive
-    .k-pager-mobile-sm {
-        overflow: visible;
-
-        // Show native select
-        .k-pager-numbers-wrap {
-            select.k-dropdown-list {
-                @extend %base-pager-section !optional;
-                @if ($kendo-pager-section-spacing) {
-                    margin-left: $kendo-pager-section-spacing;
-                    margin-right: $kendo-pager-section-spacing;
-                }
-                width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
-            }
-        }
-    }
-
-    // Hide components
-    .k-pager-mobile-md .k-pager-info,
-    .k-pager-mobile-sm .k-pager-info,
-    .k-pager-mobile-sm .k-pager-sizes,
-    .k-pager-mobile-sm .k-pager-numbers {
-        display: none;
-    }
-
     // Pager sizes
     @each $size, $size-props in $kendo-pager-sizes {
         $_padding-x: map.get($size-props, padding-x);
@@ -188,7 +163,8 @@
             --INTERNAL--kendo-pager-padding-y: var( --kendo-pager-#{$size}-padding-y, #{$_padding-y} );
             --INTERNAL--kendo-pager-spacing: var( --kendo-pager-#{$size}-spacing, #{$_item-group-spacing} );
 
-            .k-pager-input {
+            .k-pager-input,
+            select.k-dropdown-list {
                 margin-inline-start: var( --kendo-pager-input-margin-start, #{$_item-group-spacing} );
                 margin-inline-end: var( --kendo-pager-input-margin-end, #{$_item-group-spacing} );
             }

diff --git a/packages/fluent/scss/pager/_variables.scss b/packages/fluent/scss/pager/_variables.scss
@@ -61,10 +61,6 @@ $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default
 /// @group pager
 $kendo-pager-focus-border: k-get-theme-color-var( neutral-130 ) !default;
 
-/// The spacing between the Pager sections.
-/// @group pager
-$kendo-pager-section-spacing: 1em !default;
-
 /// The border radius of the Pager items.
 /// @group pager
 $kendo-pager-item-border-radius: 0 !default;