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

package/scss/components/tooltip/_layout.scss

@@ -0,0 +1,122 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.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;
+    }
+
+}
+
+
+@mixin kendo-tooltip--layout() {
+    @include kendo-tooltip--layout-base();
+}

package/scss/components/tooltip/_theme.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../../mixins/index.import.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 );
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-tooltip--theme() {
+    @include kendo-tooltip--theme-base();
+}

package/scss/components/tooltip/_variables.scss

@@ -0,0 +1,38 @@
+// Tooltip
+
+$kendo-tooltip-padding-y: null !default;
+$kendo-tooltip-padding-x: null !default;
+$kendo-tooltip-border-width: null !default;
+$kendo-tooltip-border-radius: null !default;
+
+$kendo-tooltip-font-family: null !default;
+$kendo-tooltip-font-size: null !default;
+$kendo-tooltip-line-height: null !default;
+
+$kendo-tooltip-title-font-size: null !default;
+$kendo-tooltip-title-line-height: null !default;
+
+$kendo-tooltip-callout-size: null !default;
+
+$kendo-tooltip-bg: null !default;
+$kendo-tooltip-text: null !default;
+$kendo-tooltip-border: null !default;
+
+$kendo-tooltip-shadow: null !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;
+}
+
+$kendo-tooltip-theme-colors: null !default;
+$kendo-tooltip-theme: null !default;

package/scss/components/treelist/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-treelist--styles() {
+    @include import-once( "treelist" ) {
+        @include core-styles();
+        @include kendo-grid--styles();
+        @include kendo-icon--styles();
+        @include kendo-treelist--layout();
+        @include kendo-treelist--theme();
+    }
+}

package/scss/components/treelist/_layout.scss

@@ -0,0 +1,114 @@
+@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;
+    }
+
+}
+
+
+@mixin kendo-treelist--layout() {
+    @include kendo-treelist--layout-base();
+}

package/scss/components/treelist/_theme.scss

@@ -0,0 +1,18 @@
+@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;
+        }
+    }
+
+}
+
+
+@mixin kendo-treelist--theme() {
+    @include kendo-treelist--theme-base();
+}

package/scss/components/treelist/_variables.scss

@@ -0,0 +1,4 @@
+// Treelist
+
+$kendo-treelist-footer-row-bg: null !default;
+$kendo-treelist-footer-row-border-width: null !default;

package/scss/components/treeview/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-treeview--styles() {
+    @include import-once( "treeview" ) {
+        @include core-styles();
+        @include kendo-checkbox--styles();
+        @include kendo-icon--styles();
+        @include kendo-treeview--layout();
+        @include kendo-treeview--theme();
+    }
+}

package/scss/components/treeview/_layout.scss

@@ -0,0 +1,206 @@
+@use "sass:map";
+@use "../../color-system/_constants.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../spacing/index.import.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;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-treeview--layout() {
+    @include kendo-treeview--layout-base();
+}

package/scss/components/treeview/_theme.scss

@@ -0,0 +1,87 @@
+@use "../../mixins/index.import.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 );
+        }
+    }
+
+}
+
+
+@mixin kendo-treeview--theme() {
+    @include kendo-treeview--theme-base();
+}