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

package/scss/tooltip/_layout.scss

@@ -1,119 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../icons/_variables.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-tooltip--layout-base() {
-
-    .k-tooltip {
-        @include border-radius( $kendo-tooltip-border-radius );
-        margin: 0;
-        padding-block: $kendo-tooltip-padding-y;
-        padding-inline: $kendo-tooltip-padding-x;
-        border-width: $kendo-tooltip-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        background-repeat: repeat-x;
-        outline: 0;
-        font-family: $kendo-tooltip-font-family;
-        font-size: $kendo-tooltip-font-size;
-        line-height: $kendo-tooltip-line-height;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: flex-start;
-        position: absolute;
-        z-index: 12000;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-tooltip-icon {
-        margin-inline-end: $kendo-icon-spacing;
-        flex-shrink: 0;
-    }
-
-    .k-tooltip-title {
-        margin-bottom: .25em;
-        font-size: $kendo-tooltip-title-font-size;
-        line-height: $kendo-tooltip-title-line-height;
-    }
-
-    .k-tooltip-content {
-        align-self: stretch;
-        flex: 1 1 auto;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .k-tooltip-button {
-        margin-inline-start: $kendo-icon-spacing;
-        flex-shrink: 0;
-
-        .k-icon {
-            color: inherit;
-            vertical-align: top;
-        }
-    }
-
-
-    // Callout
-    .k-callout {
-        width: calc( #{$kendo-tooltip-callout-size} * 2);
-        height: calc( #{$kendo-tooltip-callout-size} * 2);
-        border-width: $kendo-tooltip-callout-size;
-        border-style: solid;
-        border-color: transparent;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    // TODO:
-    // Some implementations rely on margin + transform-rotate to position callout
-    // Remove margin tweaking and uncomment when their implementation is fixed.
-
-    .k-callout-n {
-        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
-        border-bottom-color: currentColor;
-        // top: 0;
-        top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
-        left: 50%;
-        // transform: translate(-50%, -100%);
-        pointer-events: none;
-    }
-    .k-callout-e {
-        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
-        border-left-color: currentColor;
-        top: 50%;
-        // right: 0;
-        right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
-        // transform: translate(100%, -50%);
-        pointer-events: none;
-    }
-    .k-callout-s {
-        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
-        border-top-color: currentColor;
-        // bottom: 0;
-        bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
-        left: 50%;
-        // transform: translate(-50%, 100%);
-        pointer-events: none;
-    }
-    .k-callout-w {
-        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
-        border-right-color: currentColor;
-        top: 50%;
-        // left: 0;
-        left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
-        // transform: translate(-100%, -50%);
-        pointer-events: none;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/tooltip/_layout.scss" as *;
 
 
 @mixin kendo-tooltip--layout() {

package/scss/tooltip/_theme.scss

@@ -1,39 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-tooltip--theme-base() {
-    // Default tooltip
-    .k-tooltip {
-        @include fill(
-            $kendo-tooltip-text,
-            $kendo-tooltip-bg,
-            $kendo-tooltip-border
-        );
-
-        @include box-shadow( $kendo-tooltip-shadow );
-
-        .k-callout {
-            color: $kendo-tooltip-bg;
-        }
-    }
-
-    // Tooltip variants
-    @each $name, $props in $kendo-tooltip-theme {
-        .k-tooltip-#{$name} {
-            @include fill(
-                map.get( $props, color ),
-                map.get( $props, background-color ),
-                map.get( $props, border )
-            );
-
-            .k-callout {
-                color: map.get( $props, background-color );
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/tooltip/_theme.scss" as *;
 
 
 @mixin kendo-tooltip--theme() {

package/scss/tooltip/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 
@@ -52,23 +53,28 @@ $kendo-tooltip-border: $kendo-tooltip-bg !default;
 /// @group tooltip
 $kendo-tooltip-shadow: k-elevation(2) !default;
 
-@function tooltip-theme( $colors ) {
-    $_theme: ();
-
-    @each $name, $color in $colors {
-        $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
-            background-color: $color,
-            border: $color,
-        )), $_theme );
-    }
-
-    @return $_theme;
-}
-
 /// The theme colors map for the Tooltip.
 /// @group tooltip
 $kendo-tooltip-theme-colors: $kendo-theme-colors !default;
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip
 $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with (
+    $kendo-tooltip-padding-y: $kendo-tooltip-padding-y,
+    $kendo-tooltip-padding-x: $kendo-tooltip-padding-x,
+    $kendo-tooltip-border-width: $kendo-tooltip-border-width,
+    $kendo-tooltip-border-radius: $kendo-tooltip-border-radius,
+    $kendo-tooltip-font-family: $kendo-tooltip-font-family,
+    $kendo-tooltip-font-size: $kendo-tooltip-font-size,
+    $kendo-tooltip-line-height: $kendo-tooltip-line-height,
+    $kendo-tooltip-title-font-size: $kendo-tooltip-title-font-size,
+    $kendo-tooltip-title-line-height: $kendo-tooltip-title-line-height,
+    $kendo-tooltip-callout-size: $kendo-tooltip-callout-size,
+    $kendo-tooltip-bg: $kendo-tooltip-bg,
+    $kendo-tooltip-text: $kendo-tooltip-text,
+    $kendo-tooltip-border: $kendo-tooltip-border,
+    $kendo-tooltip-shadow: $kendo-tooltip-shadow,
+    $kendo-tooltip-theme-colors: $kendo-tooltip-theme-colors,
+    $kendo-tooltip-theme: $kendo-tooltip-theme
+);

package/scss/treelist/_layout.scss

@@ -1,112 +1,4 @@
-@use "../icons/_variables.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-treelist--layout-base() {
-
-    // Base
-    .k-treelist {
-        &.k-grid-display-block.k-grid-lockedcolumns {
-            display: block;
-        }
-
-        .k-status {
-            padding-block: .4em;
-            padding-inline: .6em;
-            line-height: 1.6em;
-
-            // TODO: see what this does and use a better name
-            .k-loading {
-                vertical-align: baseline;
-                margin-right: 5px;
-
-                // TODO
-                display: none;
-            }
-        }
-
-        tr.k-hidden {
-            display: none;
-        }
-
-        .k-treelist-dragging,
-        .k-treelist-dragging .k-hover {
-            cursor: default;
-        }
-
-        .k-drop-hint {
-            transform: translate(0, -50%);
-        }
-
-        .k-table-row.k-footer td,
-        .k-table-row.k-footer-template td,
-        .k-table-row.k-footer .k-table-td,
-        .k-table-row.k-footer-template .k-table-td {
-            border-width: $kendo-treelist-footer-row-border-width 0;
-            border-style: solid;
-            font-weight: bold;
-        }
-
-        .k-table-row.k-footer + .k-table-row.k-footer td,
-        .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
-            border-top-width: 0;
-        }
-    }
-
-
-    // Sticky headers
-    .k-treelist-scrollable {
-        > .k-table,
-        .k-grid-header .k-table-row,
-        .k-grid-header .k-table-th {
-            background-color: inherit;
-        }
-
-        .k-grid-toolbar {
-            position: sticky;
-            z-index: 3;
-            top: 0;
-            left: 0;
-        }
-
-        .k-grid-header .k-table-th {
-            position: sticky;
-            z-index: 1;
-        }
-
-        .k-grid-header .k-table-th.k-grid-header-sticky {
-            z-index: 3;
-        }
-
-        thead.k-grid-header {
-            padding-right: 0;
-        }
-
-        .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
-            border-top-width: 0;
-        }
-    }
-
-    :is(.k-treelist-scrollable[dir="rtl"], .k-rtl .k-treelist-scrollable) thead.k-grid-header {
-        padding-left: 0;
-    }
-
-    .k-drag-separator {
-        display: inline-block;
-        border-right: 1px solid;
-        height: 1em;
-        vertical-align: top;
-        margin-block: 0;
-        margin-inline: .5em;
-    }
-
-    .k-treelist-toggle {
-        margin-block: calc( #{$kendo-icon-padding} * -1 );
-        padding: $kendo-icon-padding;
-        box-sizing: content-box;
-        cursor: pointer;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *;
 
 
 @mixin kendo-treelist--layout() {

package/scss/treelist/_theme.scss

@@ -1,16 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-treelist--theme-base() {
-
-    // Theme
-    .k-treelist {
-        tr.k-footer,
-        tr.k-footer-template {
-            background-color: $kendo-treelist-footer-row-bg;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/treelist/_theme.scss" as *;
 
 
 @mixin kendo-treelist--theme() {

package/scss/treelist/_variables.scss

@@ -8,3 +8,8 @@ $kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
 /// The border width of the TreeList footer row.
 /// @group treelist
 $kendo-treelist-footer-row-border-width: 1px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/treelist/_variables.scss" with (
+    $kendo-treelist-footer-row-bg: $kendo-treelist-footer-row-bg,
+    $kendo-treelist-footer-row-border-width: $kendo-treelist-footer-row-border-width
+);

package/scss/treeview/_layout.scss

@@ -1,202 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../icons/_variables.scss" as *;
-
-@mixin kendo-treeview--layout-base() {
-
-    // Treeview
-    .k-treeview {
-        padding: 0;
-        border-width: 0;
-        background: none;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-treeview-font-family;
-        font-size: $kendo-treeview-font-size;
-        line-height: $kendo-treeview-line-height;
-        display: block;
-        cursor: default;
-        overflow: auto;
-        white-space: nowrap;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Treeview filter
-    .k-treeview-filter {
-        padding: k-spacing(2);
-        display: block;
-        position: relative;
-        flex: none;
-    }
-
-
-    // Treeview group
-    .k-treeview-group {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        position: relative;
-        outline: 0;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        &.ng-animating {
-            overflow: hidden;
-        }
-    }
-
-
-    // Treeview wrappers
-    .k-treeview-top,
-    .k-treeview-mid,
-    .k-treeview-bot {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        align-content: center;
-    }
-
-
-    // Treeview item
-    .k-treeview-item {
-        outline-style: none;
-        margin: 0;
-        padding: 0 0 0 $kendo-treeview-indent;
-        border-width: 0;
-        display: block;
-    }
-
-
-    // Treeview toggle
-    .k-treeview-toggle {
-        margin-inline-start: -$kendo-treeview-indent;
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        cursor: pointer;
-    }
-    .k-treeview-toggle .k-icon {
-        padding: $kendo-icon-padding;
-        box-sizing: content-box;
-    }
-
-
-    // Loading icon
-    .k-treeview-loading {
-        margin-right: $kendo-icon-spacing;
-    }
-
-
-    // Checkbox
-    .k-treeview .k-checkbox-wrap,
-    .k-treeview .k-checkbox-wrapper {
-        align-self: center;
-    }
-
-
-    // Treeview leaf
-    .k-treeview-leaf {
-        @include border-radius( $kendo-treeview-item-border-radius );
-        padding-block: $kendo-treeview-item-padding-y;
-        padding-inline: $kendo-treeview-item-padding-x;
-        border: $kendo-treeview-item-border-width solid transparent;
-        text-decoration: none;
-        display: inline-flex;
-        align-items: center;
-        align-content: center;
-        vertical-align: middle;
-        position: relative;
-
-        .k-icon,
-        .k-image,
-        .k-sprite {
-            margin-right: $kendo-icon-spacing;
-        }
-
-        &.k-focus {
-            z-index: 1;
-        }
-    }
-
-
-    // Treeview load more button
-    .k-treeview .k-treeview-load-more-button {
-        cursor: pointer;
-
-        &:hover,
-        &.k-hover,
-        &:focus,
-        &.k-focus {
-            text-decoration: underline;
-        }
-    }
-
-
-    // RTL
-    .k-rtl .k-treeview,
-    [dir="rtl"] .k-treeview,
-    .k-treeview.k-rtl,
-    .k-treeview[dir="rtl"] {
-
-        // Treeview item
-        .k-treeview-item {
-            padding-left: 0;
-            padding-right: $kendo-treeview-indent;
-        }
-
-        // Loading
-        .k-treeview-loading {
-            margin-right: 0;
-            margin-left: $kendo-icon-spacing;
-        }
-
-        // Treeview leaf
-        .k-treeview-leaf,
-        .k-in {
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin-right: 0;
-                margin-left: $kendo-icon-spacing;
-            }
-        }
-    }
-
-    @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map.get( $size-props, font-size);
-        $_line-height: map.get( $size-props, line-height);
-        $_item-padding-x: map.get( $size-props, item-padding-x);
-        $_item-padding-y: map.get( $size-props, item-padding-y);
-        $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x );
-        $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y );
-
-        .k-treeview-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-treeview-leaf {
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-            }
-
-            .k-checkbox-wrap {
-                padding-block: $_checkbox-padding-y;
-                padding-inline: $_checkbox-padding-x;
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *;
 
 
 @mixin kendo-treeview--layout() {

package/scss/treeview/_theme.scss

@@ -1,85 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-treeview--theme-base() {
-
-    // Treeview
-    .k-treeview {
-        @include fill(
-            $kendo-treeview-text,
-            $kendo-treeview-bg,
-            $kendo-treeview-border
-        );
-    }
-
-
-    // Treeview item
-    .k-treeview-item {}
-
-
-    // Treeview leaf
-    .k-treeview-leaf {
-
-        // Hover state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-treeview-item-hover-text,
-                $kendo-treeview-item-hover-bg,
-                $kendo-treeview-item-hover-border,
-                $kendo-treeview-item-hover-gradient
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-            @include focus-indicator( $kendo-treeview-item-focus-shadow, true );
-        }
-
-        // Selected state
-        &.k-selected {
-            @include fill(
-                $kendo-treeview-item-selected-text,
-                $kendo-treeview-item-selected-bg,
-                $kendo-treeview-item-selected-border,
-                $kendo-treeview-item-selected-gradient
-            );
-        }
-    }
-
-
-    // Treeview load more button
-    .k-treeview .k-treeview-load-more-button {
-        @include fill(
-            $kendo-treeview-loadmore-text,
-            $kendo-treeview-loadmore-bg,
-            $kendo-treeview-loadmore-border
-        );
-
-        // Hover state
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $kendo-treeview-loadmore-hover-text,
-                $kendo-treeview-loadmore-hover-bg,
-                $kendo-treeview-loadmore-hover-border
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-focus {
-            @include fill(
-                $kendo-treeview-loadmore-focus-text,
-                $kendo-treeview-loadmore-focus-bg,
-                $kendo-treeview-loadmore-focus-border
-            );
-            @include focus-indicator( $kendo-treeview-loadmore-focus-shadow, true );
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/treeview/_theme.scss" as *;
 
 
 @mixin kendo-treeview--theme() {

package/scss/treeview/_variables.scss

@@ -187,3 +187,55 @@ $kendo-treeview-loadmore-focus-border: null !default;
 /// @group treeview
 $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
 
+
+@forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with (
+    $kendo-treeview-font-family: $kendo-treeview-font-family,
+    $kendo-treeview-font-size: $kendo-treeview-font-size,
+    $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size,
+    $kendo-treeview-md-font-size: $kendo-treeview-md-font-size,
+    $kendo-treeview-lg-font-size: $kendo-treeview-lg-font-size,
+    $kendo-treeview-line-height: $kendo-treeview-line-height,
+    $kendo-treeview-sm-line-height: $kendo-treeview-sm-line-height,
+    $kendo-treeview-md-line-height: $kendo-treeview-md-line-height,
+    $kendo-treeview-lg-line-height: $kendo-treeview-lg-line-height,
+    $kendo-treeview-indent: $kendo-treeview-indent,
+    $kendo-treeview-item-padding-x: $kendo-treeview-item-padding-x,
+    $kendo-treeview-sm-item-padding-x: $kendo-treeview-sm-item-padding-x,
+    $kendo-treeview-md-item-padding-x: $kendo-treeview-md-item-padding-x,
+    $kendo-treeview-lg-item-padding-x: $kendo-treeview-lg-item-padding-x,
+    $kendo-treeview-item-padding-y: $kendo-treeview-item-padding-y,
+    $kendo-treeview-sm-item-padding-y: $kendo-treeview-sm-item-padding-y,
+    $kendo-treeview-md-item-padding-y: $kendo-treeview-md-item-padding-y,
+    $kendo-treeview-lg-item-padding-y: $kendo-treeview-lg-item-padding-y,
+    $kendo-treeview-item-border-width: $kendo-treeview-item-border-width,
+    $kendo-treeview-item-border-radius: $kendo-treeview-item-border-radius,
+    $kendo-treeview-sm-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
+    $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
+    $kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
+    $kendo-treeview-sm-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y,
+    $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y,
+    $kendo-treeview-lg-checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y,
+    $kendo-treeview-sizes: $kendo-treeview-sizes,
+    $kendo-treeview-bg: $kendo-treeview-bg,
+    $kendo-treeview-text: $kendo-treeview-text,
+    $kendo-treeview-border: $kendo-treeview-border,
+    $kendo-treeview-item-hover-bg: $kendo-treeview-item-hover-bg,
+    $kendo-treeview-item-hover-text: $kendo-treeview-item-hover-text,
+    $kendo-treeview-item-hover-border: $kendo-treeview-item-hover-border,
+    $kendo-treeview-item-hover-gradient: $kendo-treeview-item-hover-gradient,
+    $kendo-treeview-item-selected-bg: $kendo-treeview-item-selected-bg,
+    $kendo-treeview-item-selected-text: $kendo-treeview-item-selected-text,
+    $kendo-treeview-item-selected-border: $kendo-treeview-item-selected-border,
+    $kendo-treeview-item-selected-gradient: $kendo-treeview-item-selected-gradient,
+    $kendo-treeview-item-focus-shadow: $kendo-treeview-item-focus-shadow,
+    $kendo-treeview-loadmore-bg: $kendo-treeview-loadmore-bg,
+    $kendo-treeview-loadmore-text: $kendo-treeview-loadmore-text,
+    $kendo-treeview-loadmore-border: $kendo-treeview-loadmore-border,
+    $kendo-treeview-loadmore-hover-bg: $kendo-treeview-loadmore-hover-bg,
+    $kendo-treeview-loadmore-hover-text: $kendo-treeview-loadmore-hover-text,
+    $kendo-treeview-loadmore-hover-border: $kendo-treeview-loadmore-hover-border,
+    $kendo-treeview-loadmore-focus-bg: $kendo-treeview-loadmore-focus-bg,
+    $kendo-treeview-loadmore-focus-text: $kendo-treeview-loadmore-focus-text,
+    $kendo-treeview-loadmore-focus-border: $kendo-treeview-loadmore-focus-border,
+    $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-loadmore-focus-shadow
+);