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

package/scss/virtual-scroller/_layout.scss

@@ -1,38 +1,4 @@
-@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;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_layout.scss" as *;
 
 
 @mixin kendo-virtual-scroller--layout() {

package/scss/virtual-scroller/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-virtual-scroller--theme-base() {
-
-    // Virtual scroller
-    .k-virtual-scroller {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/virtual-scroller/_theme.scss" as *;
 
 
 @mixin kendo-virtual-scroller--theme() {

package/scss/window/_layout.scss

@@ -1,176 +1,4 @@
-@use "sass:list";
-@use "../core/_index.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; }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/window/_layout.scss" as *;
 
 
 @mixin kendo-window--layout() {

package/scss/window/_theme.scss

@@ -1,44 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.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;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/window/_theme.scss" as *;
 
 
 @mixin kendo-window--theme() {

package/scss/window/_variables.scss

@@ -111,3 +111,36 @@ $kendo-window-theme-colors: (
     "light": map.get($kendo-theme-colors, "light"),
     "dark": map.get($kendo-theme-colors, "dark")
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (
+    $kendo-window-border-width: $kendo-window-border-width,
+    $kendo-window-border-radius: $kendo-window-border-radius,
+    $kendo-window-font-family: $kendo-window-font-family,
+    $kendo-window-font-size: $kendo-window-font-size,
+    $kendo-window-line-height: $kendo-window-line-height,
+    $kendo-window-titlebar-padding-x: $kendo-window-titlebar-padding-x,
+    $kendo-window-titlebar-padding-y: $kendo-window-titlebar-padding-y,
+    $kendo-window-titlebar-border-width: $kendo-window-titlebar-border-width,
+    $kendo-window-titlebar-border-style: $kendo-window-titlebar-border-style,
+    $kendo-window-title-font-size: $kendo-window-title-font-size,
+    $kendo-window-title-line-height: $kendo-window-title-line-height,
+    $kendo-window-actions-gap: $kendo-window-actions-gap,
+    $kendo-window-action-opacity: $kendo-window-action-opacity,
+    $kendo-window-action-hover-opacity: $kendo-window-action-hover-opacity,
+    $kendo-window-inner-padding-x: $kendo-window-inner-padding-x,
+    $kendo-window-inner-padding-y: $kendo-window-inner-padding-y,
+    $kendo-window-buttongroup-padding-x: $kendo-window-buttongroup-padding-x,
+    $kendo-window-buttongroup-padding-y: $kendo-window-buttongroup-padding-y,
+    $kendo-window-buttongroup-border-width: $kendo-window-buttongroup-border-width,
+    $kendo-window-bg: $kendo-window-bg,
+    $kendo-window-text: $kendo-window-text,
+    $kendo-window-border: $kendo-window-border,
+    $kendo-window-shadow: $kendo-window-shadow,
+    $kendo-window-focus-shadow: $kendo-window-focus-shadow,
+    $kendo-window-titlebar-bg: $kendo-window-titlebar-bg,
+    $kendo-window-titlebar-text: $kendo-window-titlebar-text,
+    $kendo-window-titlebar-border: $kendo-window-titlebar-border,
+    $kendo-window-titlebar-gradient: $kendo-window-titlebar-gradient,
+    $kendo-window-sizes: $kendo-window-sizes,
+    $kendo-window-theme-colors: $kendo-window-theme-colors
+);

package/scss/wizard/_layout.scss

@@ -1,127 +1,4 @@
-@use "sass:list";
-@use "./variables.scss" as *;
-
-@mixin kendo-wizard--layout-base() {
-
-    // Wizard
-    .k-wizard {
-        padding-block: $kendo-wizard-padding-y;
-        padding-inline: $kendo-wizard-padding-x;
-        border-width: $kendo-wizard-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: $kendo-wizard-font-size;
-        line-height: $kendo-wizard-line-height;
-        font-family: $kendo-wizard-font-family;
-        position: relative;
-        color: inherit;
-        background: none;
-        display: flex;
-        align-items: stretch;
-        overflow: hidden;
-
-        .k-wizard-steps {
-            box-sizing: border-box;
-            display: flex;
-            overflow: hidden;
-        }
-
-        .k-wizard-step {
-            box-sizing: border-box;
-            padding: calc(#{list.slash( $kendo-wizard-content-padding-x, 4 )} + 2px);
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: space-between;
-
-            &:focus,
-            &.k-focus {
-                outline-width: 1px;
-                outline-style: dotted;
-                outline-offset: -1px;
-            }
-        }
-
-        .k-wizard-content {
-            box-sizing: border-box;
-            overflow-y: auto;
-        }
-
-        .k-wizard-buttons {
-            margin-top: $kendo-wizard-content-padding-y;
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            justify-content: space-between;
-            flex-shrink: 0;
-
-            .k-button {
-                margin-right: $kendo-wizard-buttons-margin-x;
-            }
-
-            .k-wizard-pager {
-                vertical-align: middle;
-            }
-        }
-
-        .k-wizard-buttons-right {
-            .k-button:last-of-type {
-                margin-right: 0;
-            }
-        }
-
-        .k-stepper {
-            .k-step-list-vertical {
-                .k-step {
-                    flex: 1 0 auto;
-                }
-            }
-
-            .k-step-indicator {
-                flex-shrink: 0;
-            }
-        }
-    }
-
-    .k-wizard-horizontal {
-        flex-direction: column;
-
-        .k-wizard-steps {
-            margin-top: $kendo-wizard-content-padding-y;
-        }
-
-        .k-wizard-steps,
-        .k-wizard-content {
-            flex: 1 1 auto;
-        }
-    }
-
-    .k-wizard-vertical {
-
-        .k-wizard-steps {
-            margin-left: $kendo-wizard-content-padding-x;
-            flex: 1 0 0%;
-        }
-
-        .k-wizard-content {
-            flex: 1 1 0%;
-        }
-
-    }
-
-    .k-wizard-left {
-        flex-direction: row-reverse;
-
-        .k-wizard-steps {
-            margin-right: $kendo-wizard-content-padding-x;
-            margin-left: 0;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/wizard/_layout.scss" as *;
 
 
 @mixin kendo-wizard--layout() {

package/scss/wizard/_theme.scss

@@ -1,15 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-wizard--theme-base() {
-
-    .k-wizard-step {
-        &:focus,
-        &.k-focus {
-            outline-color: $kendo-wizard-step-focus-border;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/wizard/_theme.scss" as *;
 
 
 @mixin kendo-wizard--theme() {

package/scss/wizard/_variables.scss

@@ -34,3 +34,16 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 /// The outline of the focused Wizard step.
 /// @group wizard
 $kendo-wizard-step-focus-border: #656565 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with (
+    $kendo-wizard-padding-x: $kendo-wizard-padding-x,
+    $kendo-wizard-padding-y: $kendo-wizard-padding-y,
+    $kendo-wizard-content-padding-x: $kendo-wizard-content-padding-x,
+    $kendo-wizard-content-padding-y: $kendo-wizard-content-padding-y,
+    $kendo-wizard-buttons-margin-x: $kendo-wizard-buttons-margin-x,
+    $kendo-wizard-border-width: $kendo-wizard-border-width,
+    $kendo-wizard-font-size: $kendo-wizard-font-size,
+    $kendo-wizard-line-height: $kendo-wizard-line-height,
+    $kendo-wizard-font-family: $kendo-wizard-font-family,
+    $kendo-wizard-step-focus-border: $kendo-wizard-step-focus-border
+);