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

package/scss/components/spreadsheet/_theme.scss

@@ -0,0 +1,217 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+@mixin kendo-spreadsheet--theme-base() {
+
+    // Spreadsheet
+    .k-spreadsheet {
+        @include fill(
+            $kendo-spreadsheet-text,
+            $kendo-spreadsheet-bg,
+            $kendo-spreadsheet-border
+        );
+    }
+
+    // Header
+    .k-spreadsheet-header {
+        @include fill(
+            $kendo-spreadsheet-header-text,
+            $kendo-spreadsheet-header-bg,
+            $kendo-spreadsheet-header-border,
+            $kendo-spreadsheet-header-gradient
+        );
+    }
+
+    // Row / Column Headers
+    .k-spreadsheet-top-corner,
+    .k-spreadsheet-row-header,
+    .k-spreadsheet-column-header {
+        @include fill(
+            $kendo-spreadsheet-table-header-text,
+            $kendo-spreadsheet-table-header-bg,
+            $kendo-spreadsheet-table-header-border,
+            $kendo-spreadsheet-table-header-gradient
+        );
+    }
+
+    // Cell editor
+    .k-spreadsheet-cell-editor {
+        @include fill(
+            $kendo-spreadsheet-cell-editor-text,
+            $kendo-spreadsheet-cell-editor-bg,
+            $kendo-spreadsheet-cell-editor-border
+        )
+    }
+
+    // Cells
+    .k-spreadsheet-merged-cell {
+        @include fill( $bg: $kendo-spreadsheet-bg );
+    }
+    .k-spreadsheet-disabled-mask {
+        @include fill( $bg: $kendo-spreadsheet-bg );
+    }
+
+    // Selection
+    .k-spreadsheet .k-selection-full,
+    .k-spreadsheet .k-selection-partial {
+        @include fill( $bg: $kendo-spreadsheet-partial-selection-bg );
+    }
+    .k-spreadsheet-selection {
+        @include fill(
+            $kendo-spreadsheet-selection-text,
+            $kendo-spreadsheet-selection-bg,
+            $kendo-spreadsheet-selection-border
+        );
+        @include box-shadow( $kendo-spreadsheet-selection-shadow );
+    }
+    .k-spreadsheet-selection-highlight {
+        @include fill( $border: $kendo-spreadsheet-selection-border );
+    }
+    .k-spreadsheet .k-single-selection::after {
+        @include fill(
+            $kendo-spreadsheet-single-selection-text,
+            $kendo-spreadsheet-single-selection-bg,
+            $kendo-spreadsheet-single-selection-border
+        )
+    }
+    .k-spreadsheet-active-cell {
+        @include fill ( $bg: $kendo-spreadsheet-active-cell-bg );
+        @include box-shadow( $kendo-spreadsheet-active-cell-shadow );
+    }
+
+    .k-spreadsheet .k-auto-fill {
+        @include fill(
+            $kendo-spreadsheet-auto-fill-text,
+            $kendo-spreadsheet-auto-fill-bg,
+            $kendo-spreadsheet-auto-fill-border
+        );
+        @include box-shadow( $kendo-spreadsheet-auto-fill-shadow );
+    }
+    .k-spreadsheet .k-auto-fill-punch {
+        @include fill( $bg: $kendo-spreadsheet-auto-fill-punch-bg );
+    }
+
+    // Resize handle
+    .k-spreadsheet .k-resize-handle,
+    .k-spreadsheet .k-resize-hint-handle,
+    .k-spreadsheet .k-resize-hint-marker {
+        @include fill( $bg: $kendo-spreadsheet-resize-handle-bg );
+    }
+
+    // Comments
+    .k-spreadsheet-has-comment::after {
+        border-block-color: $kendo-spreadsheet-cell-comment-border transparent;
+        border-inline-color: transparent $kendo-spreadsheet-cell-comment-border;
+    }
+
+    // Validation
+    .k-spreadsheet-cell .k-dirty {
+        border-block-color: $kendo-spreadsheet-cell-dirty-border transparent;
+        border-inline-color: $kendo-spreadsheet-cell-dirty-border transparent;
+    }
+
+    // Filter button
+    .k-spreadsheet .k-filter-range {
+        border-color: $kendo-color-primary;
+    }
+    .k-spreadsheet-filter {
+        @include fill(
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
+        );
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
+
+        &:hover {
+            @include fill(
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
+            );
+        }
+
+        &.k-active {
+            @include fill(
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
+            );
+        }
+    }
+
+    // Filter menu legacy - delete after new rendering adoption R3 23
+    .k-spreadsheet-filter-menu {
+        > .k-menu,
+        > .k-menu:not(.k-context-menu) {
+
+            .k-item:hover,
+            .k-item.k-hover {
+                @include fill(
+                    $kendo-list-item-hover-text,
+                    $kendo-list-item-hover-bg
+                );
+            }
+        }
+
+        .k-spreadsheet-value-treeview-wrapper {
+            @include fill(
+                $kendo-spreadsheet-text,
+                $kendo-spreadsheet-bg,
+                $kendo-spreadsheet-border
+            );
+        }
+    }
+
+    // Delete after new rendering adoption R3 23
+    .k-spreadsheet-insert-image-dialog {
+        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
+
+        .k-spreadsheet-has-image {
+            &:hover,
+            &.k-hover {
+                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
+            }
+
+            &:hover div,
+            &.k-hover div {
+                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
+            }
+        }
+    }
+
+    // Drawing
+    .k-spreadsheet-drawing {
+        &.k-spreadsheet-active-drawing {
+            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
+        }
+
+        .k-spreadsheet-drawing-handle {
+            border-color: $kendo-spreadsheet-drawing-handle-border-color;
+            background-color: $kendo-spreadsheet-drawing-handle-bg;
+        }
+    }
+
+    .k-spreadsheet-drawing-anchor-cell {
+        background: $kendo-spreadsheet-drawing-anchor-bg;
+    }
+
+    // Formula bar
+    .k-spreadsheet-formula-list {}
+    .k-syntax-ref { color: #ff8822; }
+    .k-syntax-num { color: #0099ff; }
+    .k-syntax-str { color: #38b714; }
+    .k-syntax-error { color: red; }
+    .k-syntax-bool { color: #a9169c; }
+    .k-syntax-paren-match { background-color: #caf200; }
+
+}
+
+@mixin kendo-spreadsheet--theme() {
+    @include kendo-spreadsheet--theme-base();
+}

package/scss/components/spreadsheet/_variables.scss

@@ -0,0 +1,111 @@
+// Spreadsheet
+
+$kendo-spreadsheet-border-width: null !default;
+$kendo-spreadsheet-font-family: null !default;
+$kendo-spreadsheet-font-size: null !default;
+$kendo-spreadsheet-line-height: null !default;
+
+$kendo-spreadsheet-bg: null !default;
+$kendo-spreadsheet-text: null !default;
+$kendo-spreadsheet-border: null !default;
+
+$kendo-spreadsheet-header-bg: null !default;
+$kendo-spreadsheet-header-text: null !default;
+$kendo-spreadsheet-header-border: null !default;
+$kendo-spreadsheet-header-gradient: null !default;
+
+$kendo-spreadsheet-table-header-bg: null !default;
+$kendo-spreadsheet-table-header-text: null !default;
+$kendo-spreadsheet-table-header-border: null !default;
+$kendo-spreadsheet-table-header-gradient: null !default;
+
+$kendo-spreadsheet-action-bar-border-width: null !default;
+$kendo-spreadsheet-action-bar-padding-y: null !default;
+$kendo-spreadsheet-action-bar-padding-x: null !default;
+$kendo-spreadsheet-action-bar-font-size: null !default;
+$kendo-spreadsheet-action-bar-font-family: null !default;
+$kendo-spreadsheet-action-bar-spacing: null !default;
+
+$kendo-spreadsheet-formula-bar-gap: null !default;
+
+$kendo-spreadsheet-formula-input-padding-x: null !default;
+$kendo-spreadsheet-formula-input-padding-y: null !default;
+$kendo-spreadsheet-formula-input-line-height: null !default;
+
+$kendo-spreadsheet-formula-bar-icon-padding: null !default;
+
+$kendo-spreadsheet-view-font-family: null !default;
+$kendo-spreadsheet-view-font-size: null !default;
+
+$kendo-spreadsheet-selection-bg: null !default;
+$kendo-spreadsheet-selection-text: null !default;
+$kendo-spreadsheet-selection-border: null !default;
+$kendo-spreadsheet-selection-shadow: null !default;
+
+$kendo-spreadsheet-single-selection-bg: null !default;
+$kendo-spreadsheet-single-selection-text: null !default;
+$kendo-spreadsheet-single-selection-border: null !default;
+
+$kendo-spreadsheet-partial-selection-bg: null !default;
+
+$kendo-spreadsheet-active-cell-bg: null !default;
+$kendo-spreadsheet-active-cell-shadow: null !default;
+
+$kendo-spreadsheet-auto-fill-bg: null !default;
+$kendo-spreadsheet-auto-fill-text: null !default;
+$kendo-spreadsheet-auto-fill-border: null !default;
+$kendo-spreadsheet-auto-fill-shadow: null !default;
+$kendo-spreadsheet-auto-fill-punch-bg: null !default;
+
+$kendo-spreadsheet-cell-padding-y: null !default;
+$kendo-spreadsheet-cell-padding-x: null !default;
+
+$kendo-spreadsheet-cell-editor-line-height: null !default;
+$kendo-spreadsheet-cell-editor-padding-x: null !default;
+$kendo-spreadsheet-cell-editor-padding-y: null !default;
+$kendo-spreadsheet-cell-editor-bg: null !default;
+$kendo-spreadsheet-cell-editor-text: null !default;
+$kendo-spreadsheet-cell-editor-border: null !default;
+
+$kendo-spreadsheet-resize-handle-bg: null !default;
+
+$kendo-spreadsheet-cell-comment-border: null !default;
+
+$kendo-spreadsheet-cell-dirty-border: null !default;
+
+$kendo-spreadsheet-sheets-bar-padding-x: null !default;
+$kendo-spreadsheet-sheets-bar-padding-y: null !default;
+$kendo-spreadsheet-sheets-bar-border-width: null !default;
+
+$kendo-spreadsheet-insert-image-dialog-border-style: null !default;
+$kendo-spreadsheet-insert-image-dialog-border-width: null !default;
+$kendo-spreadsheet-insert-image-dialog-text-margin-bottom: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-width: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-height: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-img: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-border-radius: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: null !default;
+$kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: null !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: null !default;
+
+$kendo-spreadsheet-drawing-handle-width: null !default;
+$kendo-spreadsheet-drawing-handle-height: null !default;
+$kendo-spreadsheet-drawing-handle-border-style: null !default;
+$kendo-spreadsheet-drawing-handle-border-width: null !default;
+$kendo-spreadsheet-drawing-handle-outline-color: null !default;
+$kendo-spreadsheet-drawing-handle-border-color: null !default;
+$kendo-spreadsheet-drawing-handle-bg: null !default;
+$kendo-spreadsheet-drawing-handle-border-radius: null !default;
+$kendo-spreadsheet-drawing-outline-style: null !default;
+$kendo-spreadsheet-drawing-outline-width: null !default;
+$kendo-spreadsheet-drawing-anchor-bg: null !default;
+
+$kendo-spreadsheet-dropzone-spacing-y: null !default;
+
+$kendo-spreadsheet-filter-padding: null !default;
+
+
+$kendo-spreadsheet-filter-menu-link-padding-x: null !default;
+
+$kendo-spreadsheet-filter-menu-icon-margin: null !default;

package/scss/components/stacklayout/_index.scss

@@ -0,0 +1,19 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-stack-layout--styles() {
+    @include import-once( "stack-layout" ) {
+        @include core-styles();
+        @include kendo-stack-layout--layout();
+        @include kendo-stack-layout--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+    }
+}

package/scss/components/stacklayout/_layout.scss

@@ -0,0 +1,10 @@
+@mixin kendo-stack-layout--layout-base() {
+
+    // StackLayout
+    .k-stack-layout {}
+
+}
+
+@mixin kendo-stack-layout--layout() {
+    @include kendo-stack-layout--layout-base();
+}

package/scss/components/stacklayout/_theme.scss

@@ -0,0 +1,10 @@
+@mixin kendo-stack-layout--theme-base() {
+
+    // StackLayout
+    .k-stack-layout {}
+
+}
+
+@mixin kendo-stack-layout--theme() {
+    @include kendo-stack-layout--theme-base();
+}

package/scss/components/stacklayout/_variables.scss

@@ -0,0 +1 @@
+// StackLayout

package/scss/components/stepper/_index.scss

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

package/scss/components/stepper/_layout.scss

@@ -0,0 +1,298 @@
+@use "../../color-system/_constants.scss" as *;
+@use "../../spacing/index.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-stepper--layout-base() {
+
+    // Base
+    .k-stepper {
+        margin-block: $kendo-stepper-margin-y;
+        margin-inline: $kendo-stepper-margin-x;
+        padding-block: $kendo-stepper-padding-y;
+        padding-inline: $kendo-stepper-padding-x;
+        border-width: $kendo-stepper-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: $kendo-stepper-font-size;
+        line-height: $kendo-stepper-line-height;
+        font-family: $kendo-stepper-font-family;
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+        // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359
+        color: inherit;
+        background: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+
+        // Step list
+        .k-step-list {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            position: relative;
+            z-index: 1;
+        }
+
+
+        // Step
+        .k-step { }
+
+
+        // Step link
+        .k-step-link {
+            outline: none;
+            color: inherit;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        // Step indicator
+        .k-step-indicator {
+            @include border-radius( $kendo-stepper-indicator-border-radius );
+            margin: if($kendo-stepper-indicator-focus-offset > 0, $kendo-stepper-indicator-focus-offset, null);
+            width: $kendo-stepper-indicator-width;
+            height: $kendo-stepper-indicator-height;
+            border-width: $kendo-stepper-indicator-border-width;
+            border-style: solid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: none;
+            position: relative;
+            z-index: 1;
+            overflow: visible;
+            transition-property: color, background-color, border-color;
+            transition-duration: .4s;
+            transition-timing-function: ease-in-out;
+
+            &::before {
+                @include border-radius( $kendo-stepper-indicator-border-radius );
+                content: "";
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: -1;
+            }
+
+            &::after {
+                @include border-radius( 100% );
+                content: "";
+                border-width: $kendo-stepper-indicator-focus-border-width;
+                border-style: solid;
+                border-color: inherit;
+                pointer-events: none;
+                display: none;
+                position: absolute;
+                top: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                right: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                bottom: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                left: calc( -1 * #{$kendo-stepper-indicator-focus-calc-offset} );
+                z-index: 2;
+            }
+        }
+
+        .k-step.k-focus,
+        .k-step-link:focus {
+            .k-step-indicator::after {
+                display: block;
+            }
+        }
+
+
+        // Step label
+        .k-step-label {
+            max-width: clamp(100%, 10em, 100%);
+            display: inline-flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            z-index: 1;
+        }
+        .k-step-label:only-child {
+            @include border-radius( $kendo-stepper-label-border-radius );
+            padding-block: $kendo-stepper-label-padding-y;
+            padding-inline: $kendo-stepper-label-padding-x;
+            border-width: 0;
+        }
+        .k-step-label .k-step-text {
+            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
+            flex-grow: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .k-step-label .k-icon  {
+            margin-left: $kendo-icon-spacing;
+        }
+
+        .k-step-current .k-step-label {
+            font-weight: bold;
+        }
+
+
+        // Optional label
+        .k-step-label-optional {
+            flex-basis: 100%;
+            font-size: $kendo-stepper-optional-label-font-size;
+            font-style: $kendo-stepper-optional-label-font-style;
+            opacity: $kendo-stepper-optional-label-opacity;
+        }
+
+
+        .k-step-disabled,
+        .k-step.k-disabled {
+            opacity: 1;
+            pointer-events: none;
+
+            .k-step-link { cursor: default; }
+
+            .k-step-label-optional {
+                color: inherit;
+            }
+        }
+
+
+        // Progressbar
+        .k-progressbar {
+            pointer-events: none;
+            z-index: 0;
+            overflow: visible;
+        }
+
+        .k-progressbar-horizontal {
+            grid-row: 1 / -1;
+        }
+
+        .k-progressbar-vertical {
+            position: absolute;
+        }
+    }
+
+
+    // Horizontal
+    .k-step-list-horizontal {
+        flex-direction: row;
+        grid-row: 1;
+
+        .k-step {
+            flex: 1 0 auto;
+            text-align: center;
+        }
+
+        .k-step-link {
+            margin: auto;
+            max-width: 10em;
+            flex-direction: column;
+        }
+
+        // Label
+        .k-step-label {
+            text-align: center;
+        }
+        .k-step-indicator + .k-step-label {
+            margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px);
+        }
+
+        // Progressbar
+        & ~ .k-progressbar {
+            width: 100%;
+            height: $kendo-stepper-progressbar-size;
+            top: calc(((#{$kendo-stepper-indicator-height} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2) + #{$kendo-stepper-indicator-focus-size} / 2);
+        }
+    }
+
+    // Vertical
+    .k-step-list-vertical {
+        flex-direction: column;
+
+        .k-step {
+            min-height: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) + 20px);
+        }
+
+        // Label
+        .k-step-label {
+            justify-content: flex-start;
+        }
+        .k-step-indicator + .k-step-label {
+            margin-left: $kendo-stepper-label-margin-x;
+        }
+
+
+        // Progressbar
+        & ~ .k-progressbar {
+            width: $kendo-stepper-progressbar-size;
+            height: 100%;
+            min-height: 20px;
+            left: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
+        }
+
+        // Inline content
+        .k-step-content {
+            height: 0;
+            overflow: hidden;
+            transition: $kendo-stepper-content-transition-property $kendo-stepper-content-transition-duration $kendo-stepper-content-transition-timing-function;
+        }
+
+        .k-step-current .k-step-content {
+            height: auto;
+            overflow: visible;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
+            padding-block: $kendo-stepper-inline-content-padding-x;
+            padding-inline: $kendo-stepper-inline-content-padding-y;
+        }
+    }
+
+
+    // Stepper rtl
+    .k-rtl .k-stepper,
+    .k-stepper[dir="rtl"] {
+        direction: rtl;
+
+        .k-step-label .k-icon {
+            margin-left: 0;
+            margin-right: $kendo-icon-spacing;
+        }
+
+        // Horizontal
+        .k-step-list-horizontal { }
+
+
+        // Vertical
+        .k-step-list-vertical {
+            .k-step-indicator + .k-step-label {
+                margin-left: 0;
+                margin-right: $kendo-stepper-label-margin-x;
+            }
+
+            & ~ .k-progressbar {
+                left: auto;
+                right: calc((#{$kendo-stepper-indicator-width} + 2 * #{$kendo-stepper-indicator-border-width} + 2 * #{$kendo-stepper-indicator-focus-size}) / 2);
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-stepper--layout() {
+    @include kendo-stepper--layout-base();
+}