@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/components/upload/_theme.scss

@@ -0,0 +1,111 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-upload--theme-base() {
+
+    .k-upload {
+        @include fill(
+            $kendo-upload-text,
+            $kendo-upload-bg,
+            $kendo-upload-border
+        );
+
+        .k-dropzone,
+        .k-upload-dropzone {
+            @include fill(
+                $kendo-upload-dropzone-text,
+                $kendo-upload-dropzone-bg,
+                $kendo-upload-dropzone-border
+            );
+
+            &.k-hover {
+                background-color: $kendo-upload-dropzone-hover-bg;
+            }
+
+            .k-dropzone-hint {
+                color: $kendo-upload-status-text;
+                opacity: $kendo-upload-status-text-opacity;
+            }
+
+        }
+
+        .k-upload-files,
+        .k-file {
+            border-color: $kendo-upload-border;
+        }
+
+        .k-file {
+            &.k-focus {
+                @include focus-indicator( $indicator: ( inset $kendo-upload-focus-shadow ), $inset: true );
+            }
+
+            .k-upload-action.k-focus {
+                @include focus-indicator( $kendo-upload-focus-shadow );
+            }
+
+        }
+
+        .k-upload-status {
+            color: $kendo-upload-status-text;
+            opacity: $kendo-upload-status-text-opacity;
+        }
+
+        // Upload status: uploading
+        .k-file-progress {
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-progress-bg;
+            }
+        }
+
+
+        // Upload status: success
+        .k-file-success {
+            .k-file-validation-message {
+                color: $kendo-upload-success-text;
+            }
+
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-success-bg;
+            }
+        }
+
+        // Upload status: error
+        .k-file-error {
+            .k-file-validation-message {
+                color: $kendo-upload-error-text;
+            }
+            .k-progressbar .k-selected {
+                background-color: $kendo-upload-error-bg;
+            }
+        }
+
+        .k-file-icon-wrapper {
+            color: $kendo-upload-icon-color;
+            border-color: $kendo-upload-icon-color;
+        }
+
+        .k-file-size,
+        .k-file-validation-message,
+        .k-file-summary {
+            color: $kendo-subtle-text;
+        }
+
+        .k-multiple-files-wrapper .k-file-summary {
+            color: $kendo-upload-text;
+        }
+
+        // Invalid,
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: $kendo-invalid-border;
+        }
+    }
+
+}
+
+
+@mixin kendo-upload--theme() {
+    @include kendo-upload--theme-base();
+}

package/scss/components/upload/_variables.scss

@@ -0,0 +1,46 @@
+// Upload
+
+$kendo-upload-border-width: null !default;
+$kendo-upload-font-family: null !default;
+$kendo-upload-font-size: null !default;
+$kendo-upload-line-height: null !default;
+$kendo-upload-max-height: null !default;
+
+$kendo-upload-text: null !default;
+$kendo-upload-bg: null !default;
+$kendo-upload-border: null !default;
+
+$kendo-upload-dropzone-padding-x: null !default;
+$kendo-upload-dropzone-padding-y: null !default;
+$kendo-upload-dropzone-text: null !default;
+$kendo-upload-dropzone-bg: null !default;
+$kendo-upload-dropzone-border: null !default;
+$kendo-upload-dropzone-hover-bg: null !default;
+
+$kendo-upload-status-text: null !default;
+$kendo-upload-status-text-opacity: null !default;
+
+$kendo-upload-item-padding-x: null !default;
+$kendo-upload-item-padding-y: null !default;
+
+$kendo-upload-multiple-items-spacing: null !default;
+
+$kendo-upload-validation-font-size: null !default;
+$kendo-upload-validation-line-height: null !default;
+$kendo-upload-icon-spacing: null !default;
+$kendo-upload-icon-color: null !default;
+
+$kendo-upload-progress-thickness: null !default;
+$kendo-upload-progress-bg: null !default;
+
+$kendo-upload-success-text: null !default;
+$kendo-upload-success-bg: null !default;
+
+$kendo-upload-error-text: null !default;
+$kendo-upload-error-bg: null !default;
+
+$kendo-upload-focus-shadow: null !default;
+
+$kendo-upload-files-list-margin: null !default;
+
+$kendo-upload-file-info-margin: null !default;

package/scss/components/utils/_index.scss

@@ -0,0 +1 @@
+@forward "@progress/kendo-theme-utils/scss/index.import.scss";

package/scss/components/validator/_index.scss

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

package/scss/components/validator/_layout.scss

@@ -0,0 +1,30 @@
+@use "../tooltip/_variables.scss" as *;
+
+@mixin kendo-validator--layout-base() {
+
+    // Validator
+    .k-validator {}
+
+
+    // Validator tooltip
+    .k-validator-tooltip {
+        margin-top: calc( #{$kendo-tooltip-callout-size} + #{$kendo-tooltip-border-width} );
+        width: auto;
+        white-space: normal;
+        display: flex;
+        align-items: center;
+        // NOTE: This works around popup / tooltip stacking issue
+        z-index: 9999;
+
+        // .k-callout-n { inset-inline-start: 16px; }
+    }
+    .k-grid .k-validator-tooltip {
+        max-width: 300px;
+    }
+
+}
+
+
+@mixin kendo-validator--layout() {
+    @include kendo-validator--layout-base();
+}

package/scss/components/validator/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-validator--theme-base() {
+
+    // Validator
+    .k-validator {}
+
+}
+
+
+@mixin kendo-validator--theme() {
+    @include kendo-validator--theme-base();
+}

package/scss/components/virtual-scroller/_index.scss

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

package/scss/components/virtual-scroller/_layout.scss

@@ -0,0 +1,40 @@
+@mixin kendo-virtual-scroller--layout-base() {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+
+}
+
+
+@mixin kendo-virtual-scroller--layout() {
+    @include kendo-virtual-scroller--layout-base();
+}

package/scss/components/virtual-scroller/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-virtual-scroller--theme-base() {
+
+    // Virtual scroller
+    .k-virtual-scroller {}
+
+}
+
+
+@mixin kendo-virtual-scroller--theme() {
+    @include kendo-virtual-scroller--theme-base();
+}

package/scss/components/virtual-scroller/_variables.scss

@@ -0,0 +1 @@
+// Virtual-scroller

package/scss/components/window/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-window--styles() {
+    @include import-once( "window" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-form--styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
+        @include kendo-window--layout();
+        @include kendo-window--theme();
+    }
+}

package/scss/components/window/_layout.scss

@@ -0,0 +1,179 @@
+@use "sass:list";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-window--layout-base() {
+
+    .k-window {
+        @include border-radius( $kendo-window-border-radius );
+        padding: 0;
+        border-width: $kendo-window-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-window-font-family;
+        font-size: $kendo-window-font-size;
+        line-height: $kendo-window-line-height;
+        display: inline-flex;
+        flex-direction: column;
+        position: absolute;
+        z-index: 10002;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        // overlay during dragging
+        // .k-overlay {
+        //    position: absolute;
+        //    opacity: 0;
+        // }
+    }
+    .k-window.k-window-maximized {
+        max-width: 100vw;
+        max-height: 100vh;
+        box-shadow: none;
+    }
+
+
+    // Window sizes
+    @each $size, $width in $kendo-window-sizes {
+        .k-window-#{$size} { width: $width; }
+    }
+
+
+    // Title bar
+    .k-window-titlebar {
+        @include border-top-radius( $kendo-window-border-radius );
+        padding-block: $kendo-window-titlebar-padding-y;
+        padding-inline: $kendo-window-titlebar-padding-x;
+        border-width: $kendo-window-titlebar-border-width;
+        border-style: $kendo-window-titlebar-border-style;
+        white-space: nowrap;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        align-items: center;
+    }
+
+    .k-window-minimized {
+        .k-window-titlebar {
+            border-width: 0;
+        }
+    }
+
+    // Title bar title text
+    .k-window-title {
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
+        font-size: $kendo-window-title-font-size;
+        line-height: $kendo-window-title-line-height;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: default;
+        flex: 1;
+
+        &:empty::before {
+            content: "\200b";
+        }
+    }
+
+
+    // Actions
+    .k-window-titlebar-actions {
+        margin-block: -5em;
+        margin-inline: 0;
+        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
+        line-height: 1;
+        display: flex;
+        gap: $kendo-window-actions-gap;
+        flex-flow: row nowrap;
+        flex-shrink: 0;
+        align-items: center;
+        vertical-align: top;
+    }
+    .k-window-titlebar-action {
+        flex-shrink: 0;
+        opacity: $kendo-window-action-opacity;
+    }
+    .k-window-titlebar-action:hover {
+        opacity: $kendo-window-action-hover-opacity;
+    }
+
+
+    // Content
+    .k-window-content,
+    .k-prompt-container {
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
+        border-width: 0;
+        border-color: inherit;
+        color: inherit;
+        background: none;
+        outline: 0;
+        overflow: auto;
+        position: relative;
+        flex: 1 1 auto;
+    }
+    .k-window-content + .k-prompt-container {
+        margin-top: - list.slash( $kendo-window-inner-padding-y, 2 );
+    }
+    .k-window-content:first-child {
+        padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
+    }
+    .k-window-content:last-child {
+        padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
+    }
+
+    .k-window-iframecontent {
+        padding: 0;
+        overflow: visible;
+
+        .k-content-frame {
+            vertical-align: top;
+            border: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    // Buttons Layout
+    .k-window-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding-block: $kendo-window-buttongroup-padding-y;
+        padding-inline: $kendo-window-buttongroup-padding-x;
+        border-width: $kendo-window-buttongroup-border-width 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        overflow: hidden;
+    }
+
+
+    // Prompt
+    .k-prompt-container {
+
+        > .k-textarea {
+            width: 100%;
+        }
+
+    }
+
+    // Resize Handles
+    .k-window { // stylelint-disable-line
+        .k-resize-n { top: 0; }
+        .k-resize-e { right: 0; }
+        .k-resize-s { bottom: 0; }
+        .k-resize-w { left: 0; }
+    }
+
+}
+
+
+@mixin kendo-window--layout() {
+    @include kendo-window--layout-base();
+}

package/scss/components/window/_theme.scss

@@ -0,0 +1,48 @@
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-window--theme-base() {
+
+    // Window
+    .k-window {
+        @include fill(
+            $kendo-window-text,
+            $kendo-window-bg,
+            $kendo-window-border
+        );
+        @include box-shadow( $kendo-window-shadow );
+    }
+
+    .k-window:focus,
+    .k-window.k-focus {
+        @include focus-indicator( $kendo-window-focus-shadow );
+    }
+
+
+    // Titlebar
+    .k-window-titlebar {
+        @include fill(
+            $kendo-window-titlebar-text,
+            $kendo-window-titlebar-bg,
+            $kendo-window-titlebar-border,
+            $kendo-window-titlebar-gradient
+        );
+    }
+
+    // Window theme colors
+    @each $name, $color in $kendo-window-theme-colors {
+        .k-window-#{$name} .k-window-titlebar {
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
+            background-color: $color;
+        }
+    }
+
+}
+
+
+@mixin kendo-window--theme() {
+    @include kendo-window--theme-base();
+}

package/scss/components/window/_variables.scss

@@ -0,0 +1,41 @@
+// Window
+
+$kendo-window-border-width: null !default;
+$kendo-window-border-radius: null !default;
+$kendo-window-font-family: null !default;
+$kendo-window-font-size: null !default;
+$kendo-window-line-height: null !default;
+
+$kendo-window-titlebar-padding-x: null !default;
+$kendo-window-titlebar-padding-y: null !default;
+$kendo-window-titlebar-border-width: null !default;
+$kendo-window-titlebar-border-style: null !default;
+
+$kendo-window-title-font-size: null !default;
+$kendo-window-title-line-height: null !default;
+
+$kendo-window-actions-gap: null !default;
+$kendo-window-action-opacity: null !default;
+$kendo-window-action-hover-opacity: null !default;
+
+$kendo-window-inner-padding-x: null !default;
+$kendo-window-inner-padding-y: null !default;
+
+$kendo-window-buttongroup-padding-x: null !default;
+$kendo-window-buttongroup-padding-y: null !default;
+$kendo-window-buttongroup-border-width: null !default;
+
+$kendo-window-bg: null !default;
+$kendo-window-text: null !default;
+$kendo-window-border: null !default;
+$kendo-window-shadow: null !default;
+$kendo-window-focus-shadow: null !default;
+
+$kendo-window-titlebar-bg: null !default;
+$kendo-window-titlebar-text: null !default;
+$kendo-window-titlebar-border: null !default;
+$kendo-window-titlebar-gradient: null !default;
+
+$kendo-window-sizes: null !default;
+
+$kendo-window-theme-colors: null !default;

package/scss/components/wizard/_index.scss

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