@progress/kendo-theme-fluent 5.7.0

package/scss/pager/_layout.scss

@@ -0,0 +1,240 @@
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+@use "../button/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-pager--layout() {
+
+    .k-pager-wrap,
+    .k-pager {
+        padding-inline: var( --kendo-pager-padding-x, #{$kendo-pager-padding-x} );
+        padding-block: var( --kendo-pager-padding-y, #{$kendo-pager-padding-y} );
+        border-width: var( --kendo-pager-border-width, #{$kendo-pager-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-pager-font-family, #{$kendo-pager-font-family} );
+        font-size: var( --kendo-pager-font-size, #{$kendo-pager-font-size} );
+        line-height: var( --kendo-pager-line-height, #{$kendo-pager-line-height} );
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+        flex: 0 0 auto;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-link {
+            text-decoration: none;
+            outline: 0;
+            font: inherit;
+            background-color: inherit;
+
+            // Focused state
+            &:focus,
+            &.k-focus {
+                z-index: 3;
+            }
+        }
+
+        .k-rtl &,
+        &[dir="rtl"],
+        [dir="rtl"] & {
+            .k-i-caret-alt-to-left,
+            .k-i-caret-alt-to-right,
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
+            .k-i-arrow-end-left,
+            .k-i-arrow-60-left,
+            .k-i-arrow-60-right,
+            .k-i-arrow-end-right,
+            .k-i-seek-w,
+            .k-i-arrow-w,
+            .k-i-arrow-e,
+            .k-i-seek-e {
+                transform: scaleX(-1);
+            }
+        }
+
+    }
+
+
+    // Base pager section
+    %base-pager-section {
+        @if ($kendo-pager-section-spacing) {
+            margin-inline-start: var( --kendo-pager-section-spacing, #{$kendo-pager-section-spacing} );
+            margin-inline-end: var( --kendo-pager-section-spacing, #{$kendo-pager-section-spacing} );
+        }
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+
+    // Base pager item
+    %base-pager-item {
+        min-width: var( --kendo-button-calc-size, #{$kendo-button-calc-size} );
+        height: var( --kendo-button-calc-size, #{$kendo-button-calc-size} );
+        color: inherit;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &:hover {
+            z-index: 2;
+        }
+    }
+
+
+    // Pager items
+    .k-pager-nav {
+        @extend %base-pager-item;
+        @include border-radius( var( --kendo-pager-item-border-radius, #{$kendo-pager-item-border-radius} ) );
+        padding-inline: var( --kendo-pager-item-padding-x, #{$kendo-pager-item-padding-x} );
+        padding-block: var( --kendo-pager-item-padding-y, #{$kendo-pager-item-padding-y} );
+        border-width: var( --kendo-pager-item-border-width, #{$kendo-pager-item-border-width} );
+        border-style: solid;
+    }
+
+
+    // Pager numbers
+    .k-pager-numbers-wrap {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+
+        select.k-dropdown-list {
+            cursor: pointer;
+            display: none;
+        }
+    }
+    .k-pager-numbers {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+
+        li {
+            display: inline-flex;
+        }
+
+        // Links
+        .k-link {
+            @extend %base-pager-item;
+            @include border-radius( var( --kendo-pager-number-border-radius, #{$kendo-pager-number-border-radius} ) );
+            padding-inline: var( --kendo-pager-number-padding-x, #{$kendo-pager-number-padding-x} );
+            padding-block: var( --kendo-pager-number-padding-y, #{$kendo-pager-number-padding-y} );
+            border-width: var( --kendo-pager-number-border-width, #{$kendo-pager-number-border-width} );
+            border-style: solid;
+            font-weight: var( --kendo-pager-number-font-weight, #{$kendo-pager-number-font-weight} );
+        }
+
+        // Selected state
+        .k-selected {
+            cursor: inherit;
+            z-index: 2;
+        }
+    }
+
+
+    // Spacing between items
+    .k-pager-nav + .k-pager-nav,
+    .k-pager-nav + .k-pager-numbers-wrap,
+    .k-pager-numbers-wrap + .k-pager-nav,
+    .k-pager-numbers > li + li {
+        @if ($kendo-pager-item-spacing) {
+            margin-inline-start: var( --kendo-pager-item-spacing, #{$kendo-pager-item-spacing} );
+        }
+    }
+
+
+    // Pager input
+    .k-pager-input {
+        @extend %base-pager-section;
+
+        .k-textbox {
+            margin-inline: 1ex;
+            margin-block: 0;
+            width: var( --kendo-pager-input-width, #{$kendo-pager-input-width} );
+        }
+    }
+
+
+    // Pager sizes
+    .k-pager-sizes {
+        @extend %base-pager-section;
+
+        .k-dropdown-list,
+        > select {
+            margin-inline-end: 1ex;
+            width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
+        }
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+    }
+
+
+    // Pager info
+    .k-pager-info {
+        @extend %base-pager-section;
+        text-align: right;
+        justify-content: flex-end;
+        flex: 1 1 0%;
+        order: 9;
+    }
+
+
+    // Pager refresh
+    .k-pager-refresh {
+        @extend %base-pager-item;
+        margin-inline-start: auto;
+        order: 10;
+    }
+
+    // Responsive
+    .k-pager-sm {
+        overflow: visible;
+
+        // Show native select
+        .k-pager-numbers-wrap {
+            select.k-dropdown-list {
+                width: var( --kendo-pager-dropdown-width, #{$kendo-pager-dropdown-width} );
+                display: flex;
+            }
+        }
+
+        .k-pager-numbers-wrap {
+            @if ($kendo-pager-section-spacing) {
+                margin-inline-start: var( --kendo-pager-section-spacing, #{$kendo-pager-section-spacing} );
+                margin-inline-end: var( --kendo-pager-section-spacing, #{$kendo-pager-section-spacing} );
+            }
+
+            height: var( --kendo-button-calc-size, #{$kendo-button-calc-size} );
+            border-color: inherit;
+        }
+
+    }
+
+    // Hide components
+    .k-pager-md .k-pager-info,
+    .k-pager-sm .k-pager-info,
+    .k-pager-sm .k-pager-sizes,
+    .k-pager-sm .k-pager-numbers {
+        display: none;
+    }
+
+}

package/scss/pager/_theme.scss

@@ -0,0 +1,130 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-pager--theme() {
+
+    .k-pager-wrap,
+    .k-pager {
+        --INTERNAL--kendo-pager-text: var( --kendo-pager-text, #{$kendo-pager-text} );
+        --INTERNAL--kendo-pager-bg: var( --kendo-pager-bg, #{$kendo-pager-bg} );
+        --INTERNAL--kendo-pager-border: var( --kendo-pager-border, #{$kendo-pager-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-pager-text, inherit ),
+            var( --INTERNAL--kendo-pager-bg, transparent),
+            var( --INTERNAL--kendo-pager-border, inherit )
+        );
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-pager-text: var( --kendo-pager-focus-text, #{$kendo-pager-focus-text} );
+            --INTERNAL--kendo-pager-bg: var( --kendo-pager-focus-bg, #{$kendo-pager-focus-bg} );
+            --INTERNAL--kendo-pager-border: var( --kendo-pager-focus-border, #{$kendo-pager-focus-border} );
+        }
+    }
+
+
+    %base-pager-item-theme {
+        --INTERNAL--kendo-pager-item-text: var( --kendo-pager-item-text, #{$kendo-pager-item-text} );
+        --INTERNAL--kendo-pager-item-bg: var( --kendo-pager-item-bg, #{$kendo-pager-item-bg} );
+        --INTERNAL--kendo-pager-item-border: var( --kendo-pager-item-border, #{$kendo-pager-item-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-pager-item-text, inherit ),
+            var( --INTERNAL--kendo-pager-item-bg, transparent ),
+            var( --INTERNAL--kendo-pager-item-border, inherit )
+        );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-pager-item-text: var( --kendo-pager-item-hover-text, #{$kendo-pager-item-hover-text} );
+            --INTERNAL--kendo-pager-item-bg: var( --kendo-pager-item-hover-bg, #{$kendo-pager-item-hover-bg} );
+            --INTERNAL--kendo-pager-item-border: var( --kendo-pager-item-hover-border, #{$kendo-pager-item-hover-border} );
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-pager-item-text: var( --kendo-pager-item-selected-text, #{$kendo-pager-item-selected-text} );
+            --INTERNAL--kendo-pager-item-bg: var( --kendo-pager-item-selected-bg, #{$kendo-pager-item-selected-bg} );
+            --INTERNAL--kendo-pager-item-border: var( --kendo-pager-item-selected-border, #{$kendo-pager-item-selected-border} );
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-pager-item-text: var( --kendo-pager-item-focus-text, #{$kendo-pager-item-focus-text} );
+            --INTERNAL--kendo-pager-item-bg: var( --kendo-pager-item-focus-bg, #{$kendo-pager-item-focus-bg} );
+            --INTERNAL--kendo-pager-item-border: var( --kendo-pager-item-focus-border, #{$kendo-pager-item-focus-border} );
+
+            @include box-shadow( $kendo-pager-item-focus-shadow );
+        }
+
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL--kendo-pager-item-text: var( --kendo-pager-item-disabled-text, #{$kendo-pager-item-disabled-text} );
+            --INTERNAL--kendo-pager-item-bg: var( --kendo-pager-item-disabled-bg, #{$kendo-pager-item-disabled-bg} );
+            --INTERNAL--kendo-pager-item-border: var( --kendo-pager-item-disabled-border, #{$kendo-pager-item-disabled-border} );
+        }
+    }
+
+
+    // Pager items
+    .k-pager-nav.k-link {
+        @extend %base-pager-item-theme;
+    }
+
+
+    // Pager numbers
+    .k-pager-numbers {
+        .k-link {
+            --INTERNAL--kendo-pager-number-text: var( --kendo-pager-number-text, #{$kendo-pager-number-text} );
+            --INTERNAL--kendo-pager-number-bg: var( --kendo-pager-number-bg, #{$kendo-pager-number-bg} );
+            --INTERNAL--kendo-pager-number-border: var( --kendo-pager-number-border, #{$kendo-pager-number-border} );
+
+            @include fill(
+                var( --INTERNAL--kendo-pager-number-text, inherit ),
+                var( --INTERNAL--kendo-pager-number-bg, transparent ),
+                var( --INTERNAL--kendo-pager-number-border, inherit )
+            );
+
+            &:hover,
+            &.k-hover {
+                --INTERNAL--kendo-pager-number-text: var( --kendo-pager-number-hover-text, #{$kendo-pager-number-hover-text} );
+                --INTERNAL--kendo-pager-number-bg: var( --kendo-pager-number-hover-bg, #{$kendo-pager-number-hover-bg} );
+                --INTERNAL--kendo-pager-number-border: var( --kendo-pager-number-hover-border, #{$kendo-pager-number-hover-border} );
+            }
+
+            &:focus,
+            &.k-focus {
+                --INTERNAL--kendo-pager-number-text: var( --kendo-pager-number-focus-text, #{$kendo-pager-number-focus-text} );
+                --INTERNAL--kendo-pager-number-bg: var( --kendo-pager-number-focus-bg, #{$kendo-pager-number-focus-bg} );
+                --INTERNAL--kendo-pager-number-border: var( --kendo-pager-number-focus-border, #{$kendo-pager-number-focus-border} );
+
+                @include box-shadow( $kendo-pager-number-focus-shadow );
+            }
+
+            &.k-selected {
+                --INTERNAL--kendo-pager-number-text: var( --kendo-pager-number-selected-text, #{$kendo-pager-number-selected-text} );
+                --INTERNAL--kendo-pager-number-bg: var( --kendo-pager-number-selected-bg, #{$kendo-pager-number-selected-bg} );
+                --INTERNAL--kendo-pager-number-border: var( --kendo-pager-number-selected-border, #{$kendo-pager-number-selected-border} );
+            }
+        }
+    }
+
+
+    // Pager sizes
+    .k-pager-sizes {
+        color: var( --kendo-pager-sizes-label-text, #{$kendo-pager-sizes-label-text} );
+    }
+
+
+    // Pager info
+    .k-pager-info {
+        color: var( --kendo-pager-info-label-text, #{$kendo-pager-info-label-text} );
+    }
+
+
+    // Pager refresh
+    .k-pager-refresh {
+        @extend %base-pager-item-theme;
+    }
+
+}

package/scss/pager/_variables.scss

@@ -0,0 +1,194 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+/// Horizontal padding of the pager.
+/// @group pager
+$kendo-pager-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the pager.
+/// @group pager
+$kendo-pager-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the pager.
+/// @group pager
+$kendo-pager-border-width: 1px !default;
+
+/// Font family of the pager.
+/// @group pager
+$kendo-pager-font-family: var( --kendo-font-family, normal ) !default;
+/// Font size of the pager.
+/// @group pager
+$kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the pager.
+/// @group pager
+$kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the pager.
+/// @group pager
+$kendo-pager-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the pager.
+/// @group pager
+$kendo-pager-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the pager.
+/// @group pager
+$kendo-pager-border: var( --kendo-component-border, inherit ) !default;
+
+/// Background color of the focused pager.
+/// @group pager
+$kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
+/// Text color of the focused pager.
+/// @group pager
+$kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
+/// Border color of the focused pager.
+/// @group pager
+$kendo-pager-focus-border: get-theme-color-var( neutral-130 ) !default;
+
+/// Spacing between the pager sections.
+/// @group pager
+$kendo-pager-section-spacing: 1em !default;
+
+/// Horizontal padding of the pager items.
+/// @group pager
+$kendo-pager-item-padding-x: var( --kendo-button-padding-y-md, #{$kendo-button-padding-y-md}) !default;
+/// Vertical padding of the pager items.
+/// @group pager
+$kendo-pager-item-padding-y: $kendo-pager-item-padding-x !default;
+/// Border width of the pager items.
+/// @group pager
+$kendo-pager-item-border-width: 0 !default;
+/// Border radius of the pager items.
+/// @group pager
+$kendo-pager-item-border-radius: 0 !default;
+/// Spacing around the pager items.
+/// @group pager
+$kendo-pager-item-spacing: null !default;
+
+/// Background color of the pager items.
+/// @group pager
+$kendo-pager-item-bg: transparent !default;
+/// Text color of the pager items.
+/// @group pager
+$kendo-pager-item-text: inherit !default;
+/// Border color of the pager items.
+/// @group pager
+$kendo-pager-item-border: inherit !default;
+
+/// Background color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-bg: var( --kendo-list-item-hover-bg, #{$kendo-list-item-hover-bg}) !default;
+/// Text color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-text: var( --kendo-list-item-hover-text, #{$kendo-list-item-hover-text}) !default;
+/// Border color of the hovered pager items.
+/// @group pager
+$kendo-pager-item-hover-border: inherit !default;
+
+/// Background color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-bg: var( --kendo-list-item-selected-bg, #{$kendo-list-item-selected-bg}) !default;
+/// Text color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-text: var( --kendo-list-item-selected-text, #{$kendo-list-item-selected-text}) !default;
+/// Border color of the selected pager items.
+/// @group pager
+$kendo-pager-item-selected-border: inherit !default;
+
+/// Background color of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-bg: transparent !default;
+/// Text color of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-text: inherit !default;
+/// Border color of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-border: inherit !default;
+/// Box shadow of the focused pager items.
+/// @group pager
+$kendo-pager-item-focus-shadow: inset 0 0 0 2px get-theme-color-var( neutral-40 ) !default;
+
+/// Background color of the disabled pager items.
+/// @group pager
+$kendo-pager-item-disabled-bg: transparent !default;
+/// Text color of the disabled pager items.
+/// @group pager
+$kendo-pager-item-disabled-text: get-theme-color-var( neutral-90 ) !default;
+/// Border color of the disabled pager items.
+/// @group pager
+$kendo-pager-item-disabled-border: inherit !default;
+
+/// Horizontal padding of the pager numbers.
+/// @group pager
+$kendo-pager-number-padding-x: $kendo-pager-item-padding-x !default;
+/// Vertical padding of the pager numbers.
+/// @group pager
+$kendo-pager-number-padding-y: $kendo-pager-item-padding-y !default;
+/// Border width of the pager numbers.
+/// @group pager
+$kendo-pager-number-border-width: $kendo-pager-item-border-width !default;
+/// Border radius of the pager numbers.
+/// @group pager
+$kendo-pager-number-border-radius: 0 !default;
+/// Spacing around the pager numbers.
+/// @group pager
+$kendo-pager-number-spacing: $kendo-pager-item-spacing !default;
+/// Font weight of the pager numbers.
+/// @group pager
+$kendo-pager-number-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
+
+/// Background color of the pager numbers.
+/// @group pager
+$kendo-pager-number-bg: transparent !default;
+/// Text color of the pager numbers.
+/// @group pager
+$kendo-pager-number-text: get-theme-color-var( primary-100 ) !default;
+/// Border color of the pager numbers.
+/// @group pager
+$kendo-pager-number-border: inherit !default;
+
+/// Background color of the hovered pager numbers.
+/// @group pager
+$kendo-pager-number-hover-bg: get-theme-color-var( primary-10 ) !default;
+/// Text color of the hovered pager numbers.
+/// @group pager
+$kendo-pager-number-hover-text: $kendo-pager-number-text !default;
+/// Border color of the hovered pager numbers.
+/// @group pager
+$kendo-pager-number-hover-border: $kendo-pager-item-hover-border !default;
+
+/// Background color of the selected pager numbers.
+/// @group pager
+$kendo-pager-number-selected-bg: get-theme-color-var( primary-20 ) !default;
+/// Text color of the selected pager numbers.
+/// @group pager
+$kendo-pager-number-selected-text: $kendo-pager-number-text !default;
+/// Border color of the selected pager numbers.
+/// @group pager
+$kendo-pager-number-selected-border: $kendo-pager-item-selected-border !default;
+
+/// Background color of the focused pager numbers.
+/// @group pager
+$kendo-pager-number-focus-bg: $kendo-pager-number-bg !default;
+/// Text color of the focused pager numbers.
+/// @group pager
+$kendo-pager-number-focus-text: $kendo-pager-number-text !default;
+/// Border color of the focused pager numbers.
+/// @group pager
+$kendo-pager-number-focus-border: $kendo-pager-item-focus-border !default;
+/// Box shadow of the focused pager numbers.
+/// @group pager
+$kendo-pager-number-focus-shadow: inset 0 0 0 2px get-theme-color-var( primary-20 ) !default;
+
+/// Text color of the pager sizes label.
+/// @group pager
+$kendo-pager-sizes-label-text: get-theme-color-var( neutral-190 );
+
+/// Text color of the pager info label.
+/// @group pager
+$kendo-pager-info-label-text: get-theme-color-var( neutral-130 );
+
+/// Width of the pager inputs.
+/// @group pager
+$kendo-pager-input-width: 5em !default;
+/// Width of the pager dropdowns.
+/// @group pager
+$kendo-pager-dropdown-width: 5em !default;

package/scss/pager/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "pager",
+    dependencies: (
+        "dropdownlist",
+        "icon",
+        "toolbar",
+        "list",
+        "button"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "pager" ) {
+        @include kendo-pager--layout();
+        @include kendo-pager--theme();
+    }
+}