@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/pager/_layout.scss

@@ -1,189 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-pager--layout-base() {
-
-    .k-pager {
-        padding: 0;
-        border-width: $kendo-pager-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-pager-font-family;
-        font-size: $kendo-pager-font-size;
-        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: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Base pager section
-    %base-pager-section {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-
-    // Base pager item
-    %base-pager-item {
-        color: inherit;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-
-        &:hover {
-            z-index: 2;
-        }
-        &.k-disabled {
-            color: inherit;
-        }
-    }
-
-
-    // Pager items
-    .k-pager-nav {
-        @extend %base-pager-item !optional;
-    }
-
-
-    // Pager numbers
-    .k-pager-numbers-wrap {
-        display: flex;
-        flex-direction: row;
-        position: relative;
-
-        select.k-dropdown-list {
-            width: $kendo-pager-md-dropdown-width;
-        }
-    }
-    .k-pager-numbers {
-        display: flex;
-        flex-direction: row;
-
-        // 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 {
-        @if ($kendo-pager-item-spacing) {
-            margin-left: $kendo-pager-item-spacing;
-        }
-    }
-
-    .k-rtl,
-    [dir="rtl"] {
-        .k-pager-nav + .k-pager-nav,
-        .k-pager-nav + .k-pager-numbers-wrap,
-        .k-pager-numbers-wrap + .k-pager-nav {
-            @if ($kendo-pager-item-spacing) {
-                margin-left: 0;
-                margin-right: $kendo-pager-item-spacing;
-            }
-        }
-    }
-
-
-    // Pager input
-    .k-pager-input {
-        @extend %base-pager-section !optional;
-        gap: 1ex;
-
-        .k-textbox,
-        .k-numerictextbox {
-            margin-block: 0;
-            width: $kendo-pager-input-width;
-        }
-    }
-
-
-    // Pager sizes
-    .k-pager-sizes {
-        @extend %base-pager-section !optional;
-        gap: 1ex;
-
-        .k-input-inner,
-        .k-input-value-text {
-            text-overflow: clip;
-        }
-    }
-
-
-    // Pager info
-    .k-pager-info {
-        @extend %base-pager-section !optional;
-        text-align: end;
-        justify-content: flex-end;
-        flex: 1 1 0%;
-        order: 9;
-    }
-
-
-    // Pager refresh
-    .k-pager-refresh {
-        margin-inline-start: auto;
-        color: inherit;
-        order: 10;
-    }
-
-    // Pager sizes
-    @each $size, $size-props in $kendo-pager-sizes {
-        $_padding-x: map.get($size-props, padding-x);
-        $_padding-y: map.get($size-props, padding-y);
-        $_item-group-spacing: map.get($size-props, item-group-spacing);
-        $_item-min-width: map.get($size-props, item-min-width);
-        $_pager-dropdown-width: map.get($size-props, pager-dropdown-width);
-
-        .k-pager-#{$size} {
-            padding-inline: $_padding-x;
-            padding-block: $_padding-y;
-            gap: $_item-group-spacing;
-
-            .k-pager-numbers-wrap {
-                .k-button {
-                    min-width: $_item-min-width;
-                }
-
-                .k-pager-input,
-                > select.k-dropdown-list {
-                    margin-inline-start: $_item-group-spacing;
-                    margin-inline-end: $_item-group-spacing;
-                }
-            }
-
-            .k-pager-sizes {
-                .k-dropdown-list,
-                > select {
-                    width: $_pager-dropdown-width;
-                }
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/pager/_layout.scss" as *;
 
 
 @mixin kendo-pager--layout() {

package/scss/pager/_theme.scss

@@ -1,24 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-pager--theme-base() {
-
-    // Pager
-    .k-pager {
-        @include fill(
-            $kendo-pager-text,
-            $kendo-pager-bg,
-            $kendo-pager-border
-        );
-
-        &:focus,
-        &.k-focus {
-            @include fill( $bg: $kendo-pager-focus-bg );
-            @include focus-indicator( $kendo-pager-focus-shadow, true );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/pager/_theme.scss" as *;
 
 
 @mixin kendo-pager--theme() {

package/scss/pager/_variables.scss

@@ -171,3 +171,51 @@ $kendo-pager-sizes: (
         pager-dropdown-width: $kendo-pager-lg-dropdown-width
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with (
+    $kendo-pager-padding-x: $kendo-pager-padding-x,
+    $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x,
+    $kendo-pager-md-padding-x: $kendo-pager-md-padding-x,
+    $kendo-pager-lg-padding-x: $kendo-pager-lg-padding-x,
+    $kendo-pager-padding-y: $kendo-pager-padding-y,
+    $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-y,
+    $kendo-pager-md-padding-y: $kendo-pager-md-padding-y,
+    $kendo-pager-lg-padding-y: $kendo-pager-lg-padding-y,
+    $kendo-pager-sm-item-min-width: $kendo-pager-sm-item-min-width,
+    $kendo-pager-md-item-min-width: $kendo-pager-md-item-min-width,
+    $kendo-pager-lg-item-min-width: $kendo-pager-lg-item-min-width,
+    $kendo-pager-sm-item-group-spacing: $kendo-pager-sm-item-group-spacing,
+    $kendo-pager-md-item-group-spacing: $kendo-pager-md-item-group-spacing,
+    $kendo-pager-lg-item-group-spacing: $kendo-pager-lg-item-group-spacing,
+    $kendo-pager-border-width: $kendo-pager-border-width,
+    $kendo-pager-font-family: $kendo-pager-font-family,
+    $kendo-pager-font-size: $kendo-pager-font-size,
+    $kendo-pager-line-height: $kendo-pager-line-height,
+    $kendo-pager-bg: $kendo-pager-bg,
+    $kendo-pager-text: $kendo-pager-text,
+    $kendo-pager-border: $kendo-pager-border,
+    $kendo-pager-focus-bg: $kendo-pager-focus-bg,
+    $kendo-pager-focus-shadow: $kendo-pager-focus-shadow,
+    $kendo-pager-section-spacing: $kendo-pager-section-spacing,
+    $kendo-pager-item-border-width: $kendo-pager-item-border-width,
+    $kendo-pager-item-border-radius: $kendo-pager-item-border-radius,
+    $kendo-pager-item-spacing: $kendo-pager-item-spacing,
+    $kendo-pager-item-bg: $kendo-pager-item-bg,
+    $kendo-pager-item-text: $kendo-pager-item-text,
+    $kendo-pager-item-border: $kendo-pager-item-border,
+    $kendo-pager-item-hover-bg: $kendo-pager-item-hover-bg,
+    $kendo-pager-item-hover-text: $kendo-pager-item-hover-text,
+    $kendo-pager-item-hover-border: $kendo-pager-item-hover-border,
+    $kendo-pager-item-selected-bg: $kendo-pager-item-selected-bg,
+    $kendo-pager-item-selected-text: $kendo-pager-item-selected-text,
+    $kendo-pager-item-selected-border: $kendo-pager-item-selected-border,
+    $kendo-pager-item-focus-opacity: $kendo-pager-item-focus-opacity,
+    $kendo-pager-item-focus-bg: $kendo-pager-item-focus-bg,
+    $kendo-pager-item-focus-shadow: $kendo-pager-item-focus-shadow,
+    $kendo-pager-number-border-radius: $kendo-pager-number-border-radius,
+    $kendo-pager-input-width: $kendo-pager-input-width,
+    $kendo-pager-sm-dropdown-width: $kendo-pager-sm-dropdown-width,
+    $kendo-pager-md-dropdown-width: $kendo-pager-md-dropdown-width,
+    $kendo-pager-lg-dropdown-width: $kendo-pager-lg-dropdown-width,
+    $kendo-pager-sizes: $kendo-pager-sizes
+);

package/scss/panel/_layout.scss

@@ -1,32 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-panel--layout--base() {
-        // Panels
-        .k-block,
-        .k-panel {
-            @include border-radius( $kendo-panel-border-radius );
-            padding: 0;
-            border-width: $kendo-panel-border-width;
-            border-style: $kendo-panel-border-style;
-            box-sizing: border-box;
-
-            > .k-header {
-                @include border-top-radius( $kendo-panel-border-radius );
-                @include fill(
-                    var( --kendo-component-text, #{$kendo-component-text} ),
-                    var( --kendo-component-bg, #{$kendo-component-bg} ),
-                    var( --kendo-component-border, #{$kendo-component-border} )
-                );
-                padding-inline: $kendo-panel-header-padding-inline;
-                padding-block: $kendo-panel-header-padding-block;
-            }
-            > .k-content {
-                padding-inline: $kendo-panel-content-padding-inline;
-                padding-block: $kendo-panel-content-padding-block;
-            }
-        }
-}
+@use "@progress/kendo-theme-core/scss/components/panel/_layout.scss" as *;
 
 @mixin kendo-panel--layout() {
     @include kendo-panel--layout--base();

package/scss/panel/_theme.scss

@@ -1,25 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-panel--theme--base() {
-    // Panels
-    .k-block,
-    .k-panel {
-        @include fill(
-            $kendo-panel-text,
-            $kendo-panel-bg,
-            $kendo-panel-border
-        );
-    }
-
-    :where(.k-content) {
-        @include fill(
-            $kendo-panel-text,
-            $kendo-panel-bg,
-            $kendo-panel-border
-        );
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/panel/_theme.scss" as *;
 
 @mixin kendo-panel--theme() {
     @include kendo-panel--theme--base();

package/scss/panel/_variables.scss

@@ -33,3 +33,16 @@ $kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default;
 /// The color of the border around the Panel.
 /// @group panel
 $kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (
+    $kendo-panel-border-radius: $kendo-panel-border-radius,
+    $kendo-panel-border-width: $kendo-panel-border-width,
+    $kendo-panel-border-style: $kendo-panel-border-style,
+    $kendo-panel-header-padding-inline: $kendo-panel-header-padding-inline,
+    $kendo-panel-header-padding-block: $kendo-panel-header-padding-block,
+    $kendo-panel-content-padding-inline: $kendo-panel-content-padding-inline,
+    $kendo-panel-content-padding-block: $kendo-panel-content-padding-block,
+    $kendo-panel-text: $kendo-panel-text,
+    $kendo-panel-bg: $kendo-panel-bg,
+    $kendo-panel-border: $kendo-panel-border
+);

package/scss/panelbar/_layout.scss

@@ -1,144 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../icons/_variables.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-panelbar--layout-base() {
-
-    // Base
-    .k-panelbar {
-        margin: 0;
-        padding: 0;
-        border-width: $kendo-panelbar-border-width;
-        border-style: $kendo-panelbar-border-style;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-panelbar-font-family;
-        font-size: $kendo-panelbar-font-size;
-        line-height: $kendo-panelbar-line-height;
-        list-style: none;
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Root
-        > .k-panelbar-header {
-            // TODO
-            border-width: 0;
-            border-style: $kendo-panelbar-item-border-style;
-            border-color: inherit;
-            display: block;
-
-            > .k-link {
-                padding-block: $kendo-panelbar-header-padding-y;
-                padding-inline: $kendo-panelbar-header-padding-x;
-                color: inherit;
-                background: none;
-                text-decoration: none;
-                font-weight: 500;
-                display: flex;
-                flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
-                align-items: center;
-                align-content: center;
-                position: relative;
-                user-select: none;
-                cursor: default;
-                transition: $kendo-transition;
-            }
-        }
-        > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: $kendo-panelbar-item-border-width;
-        }
-
-
-        // Sub
-        .k-panelbar-group {
-            margin: 0;
-            padding: 0;
-            border-width: 0;
-            border-color: inherit;
-            color: inherit;
-            background-color: transparent;
-            list-style: none;
-        }
-        .k-panelbar-group > .k-panelbar-item {
-            display: block;
-
-            > .k-link {
-                padding-block: $kendo-panelbar-item-padding-y;
-                padding-inline: $kendo-panelbar-item-padding-x;
-                color: inherit;
-                text-decoration: none;
-                display: flex;
-                flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
-                align-items: center;
-                align-content: center;
-                position: relative;
-                user-select: none;
-                cursor: default;
-                transition: $kendo-transition;
-            }
-
-            // Hierarchy items
-            @for $i from 1 through $kendo-panelbar-item-level-count {
-                &.k-level-#{$i} {
-                    .k-link {
-                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
-                    }
-                }
-            }
-        }
-
-        // Panelbar item
-        .k-panelbar-item {
-            outline-style: none;
-        }
-
-        // Panelbar content
-        .k-panelbar-content {
-            display: flow-root;
-        }
-
-
-        // Toggle icon
-        .k-panelbar-expand,
-        .k-panelbar-collapse,
-        .k-panelbar-toggle {
-            margin-inline-start: auto;
-        }
-        .k-panelbar-group .k-panelbar-expand,
-        .k-panelbar-group .k-panelbar-collapse,
-        .k-panelbar-group .k-panelbar-toggle {
-            margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
-        }
-    }
-
-    .k-rtl .k-panelbar,
-    .k-panelbar.k-rtl,
-    .k-panelbar [dir = "rtl"] {
-        .k-panelbar-group > .k-panelbar-item {
-            // Hierarchy items
-            @for $i from 1 through $kendo-panelbar-item-level-count {
-                &.k-level-#{$i} {
-                    .k-link {
-                        padding-left: $kendo-panelbar-item-padding-x;
-                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
-                    }
-                }
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *;
 
 
 @mixin kendo-panelbar--layout() {

package/scss/panelbar/_theme.scss

@@ -1,212 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-panelbar--theme-base() {
-
-    // Panelbar
-    .k-panelbar {
-        @include fill(
-            $kendo-panelbar-text,
-            $kendo-panelbar-bg,
-            $kendo-panelbar-border
-        );
-
-
-        // Root
-        > .k-panelbar-header {
-
-            &.k-expanded.k-level-0 > .k-link  {
-                @include fill(
-                    $kendo-panelbar-header-expanded-text,
-                    $kendo-panelbar-header-expanded-bg,
-                    $kendo-panelbar-header-expanded-border,
-                    $kendo-panelbar-header-expanded-gradient
-                );
-            }
-
-            // Normal
-            > .k-link {
-                @include fill(
-                    $kendo-panelbar-header-text,
-                    $kendo-panelbar-header-bg,
-                    $kendo-panelbar-header-border,
-                    $kendo-panelbar-header-gradient
-                );
-
-                .k-icon,
-                .k-panelbar-item-icon {
-                    color: $kendo-panelbar-text;
-                }
-            }
-
-            // Hover
-            > .k-link:hover,
-            > .k-link.k-hover {
-                @include fill(
-                    $kendo-panelbar-header-hover-text,
-                    $kendo-panelbar-header-hover-bg,
-                    $kendo-panelbar-header-hover-border,
-                    $kendo-panelbar-header-hover-gradient
-                );
-            }
-
-            // Focus
-            > .k-link:focus,
-            > .k-link.k-focus {
-                @include fill(
-                    $kendo-panelbar-header-focus-text,
-                    $kendo-panelbar-header-focus-bg,
-                    $kendo-panelbar-header-focus-border,
-                    $kendo-panelbar-header-focus-gradient
-                );
-                @include focus-indicator( $kendo-panelbar-header-focus-shadow, true );
-            }
-
-            // Focus & Hover
-            > .k-link:focus:hover,
-            > .k-link.k-focus.k-hover {
-                @include fill(
-                    $kendo-panelbar-header-hover-focus-text,
-                    $kendo-panelbar-header-hover-focus-bg,
-                    $kendo-panelbar-header-hover-focus-border,
-                    $kendo-panelbar-header-hover-focus-gradient
-                );
-            }
-
-            // Selected
-            > .k-link.k-selected {
-                @include fill(
-                    $kendo-panelbar-header-selected-text,
-                    $kendo-panelbar-header-selected-bg,
-                    $kendo-panelbar-header-selected-border,
-                    $kendo-panelbar-header-selected-gradient
-                );
-
-                .k-icon,
-                .k-panelbar-item-icon {
-                    color: inherit;
-                }
-            }
-
-            // Selected Hover
-            > .k-link.k-selected:hover,
-            > .k-link.k-selected.k-hover {
-                @include fill(
-                    $kendo-panelbar-header-selected-hover-text,
-                    $kendo-panelbar-header-selected-hover-bg,
-                    $kendo-panelbar-header-selected-hover-border,
-                    $kendo-panelbar-header-selected-hover-gradient
-                );
-            }
-
-            // Selected Focus
-            > .k-link.k-selected:focus,
-            > .k-link.k-selected.k-focus {
-                @include fill(
-                    $kendo-panelbar-header-selected-focus-text,
-                    $kendo-panelbar-header-selected-focus-bg,
-                    $kendo-panelbar-header-selected-focus-border,
-                    $kendo-panelbar-header-selected-focus-gradient
-                );
-            }
-
-            // Selected Focus & Hover
-            > .k-link.k-selected:hover:focus,
-            > .k-link.k-selected.k-hover.k-focus {
-                @include fill(
-                    $kendo-panelbar-header-selected-hover-focus-text,
-                    $kendo-panelbar-header-selected-hover-focus-bg,
-                    $kendo-panelbar-header-selected-hover-focus-border,
-                    $kendo-panelbar-header-selected-hover-focus-gradient
-                );
-            }
-        }
-
-
-        // Sub
-        .k-panelbar-group {
-
-            // Hover
-            > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-hover {
-                @include fill(
-                    $kendo-panelbar-item-hover-text,
-                    $kendo-panelbar-item-hover-bg,
-                    $kendo-panelbar-item-hover-border,
-                    $kendo-panelbar-item-hover-gradient
-                );
-            }
-
-            // Focus
-            > .k-panelbar-item > .k-link:focus,
-            > .k-panelbar-item > .k-link.k-focus {
-                @include fill(
-                    $kendo-panelbar-item-focus-text,
-                    $kendo-panelbar-item-focus-bg,
-                    $kendo-panelbar-item-focus-border,
-                    $kendo-panelbar-item-focus-gradient
-                );
-                @include focus-indicator( $kendo-panelbar-item-focus-shadow, true );
-            }
-
-            // Focus & Hover
-            > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-focus.k-hover {
-                @include fill(
-                    $kendo-panelbar-item-hover-focus-text,
-                    $kendo-panelbar-item-hover-focus-bg,
-                    $kendo-panelbar-item-hover-focus-border,
-                    $kendo-panelbar-item-hover-focus-gradient
-                );
-            }
-
-            // Selected
-            > .k-panelbar-item > .k-link.k-selected {
-                @include fill(
-                    $kendo-panelbar-item-selected-text,
-                    $kendo-panelbar-item-selected-bg,
-                    $kendo-panelbar-item-selected-border,
-                    $kendo-panelbar-item-selected-gradient
-                );
-            }
-
-            // Selected Hover
-            > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-selected.k-hover {
-                @include fill(
-                    $kendo-panelbar-item-selected-hover-text,
-                    $kendo-panelbar-item-selected-hover-bg,
-                    $kendo-panelbar-item-selected-hover-border,
-                    $kendo-panelbar-item-selected-hover-gradient
-                );
-            }
-
-            // Selected Focus
-            > .k-panelbar-item > .k-link.k-selected:focus,
-            > .k-panelbar-item > .k-link.k-selected.k-focus {
-                @include fill(
-                    $kendo-panelbar-item-selected-focus-text,
-                    $kendo-panelbar-item-selected-focus-bg,
-                    $kendo-panelbar-item-selected-focus-border,
-                    $kendo-panelbar-item-selected-focus-gradient
-                );
-            }
-
-            // Selected Focus & Hover
-            > .k-panelbar-item > .k-link.k-selected:focus:hover,
-            > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
-                @include fill(
-                    $kendo-panelbar-item-selected-hover-focus-text,
-                    $kendo-panelbar-item-selected-hover-focus-bg,
-                    $kendo-panelbar-item-selected-hover-focus-border,
-                    $kendo-panelbar-item-selected-hover-focus-gradient
-                );
-            }
-        }
-
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *;
 
 
 @mixin kendo-panelbar--theme() {