@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/upload/_layout.scss

@@ -1,249 +1,37 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/upload/_layout.scss" as *;
 
 @mixin kendo-upload--layout() {
+    @include kendo-upload--layout-base();
 
     .k-upload {
-        border-width: var( --kendo-upload-border-width, #{$kendo-upload-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-upload-font-family, #{$kendo-upload-font-family} );
-        font-size: var( --kendo-upload-font-size, #{$kendo-upload-font-size} );
-        line-height: var( --kendo-upload-line-height, #{$kendo-upload-line-height} );
-        position: relative;
-        display: block;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-upload-button {
-            min-width: 7em;
-        }
-
-        // Drop zone
-        .k-dropzone,
-        .k-upload-dropzone {
-            padding-inline: var( --kendo-upload-dropzone-padding-x, #{$kendo-upload-dropzone-padding-x} );
-            padding-block: var( --kendo-upload-dropzone-padding-y, #{$kendo-upload-dropzone-padding-y} );
-            border-width: 0;
-            text-align: end;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            position: relative;
-            background-color: transparent;
-
-            .k-dropzone-hint {
-                font-style: normal;
-                font-weight: normal;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                position: relative;
-                flex: 1;
-            }
-
-            .k-upload-status {
-                font-weight: normal;
-                display: flex;
-                align-items: center;
-                position: relative;
-
-                > .k-icon {
-                    margin-inline-end: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
-                }
-            }
-
-            .k-upload-status + .k-dropzone-hint {
-                display: none;
-            }
-        }
-
-        .k-dropzone-active {
-            .k-upload-status {
-                display: none;
-            }
-
-            .k-upload-status + .k-dropzone-hint {
-                display: block;
-            }
-        }
-
-        // Upload files list
-        .k-upload-files {
-            max-height: var( --kendo-upload-max-height, #{$kendo-upload-max-height} );
-            overflow-y: auto;
-            margin: 0;
-            padding: 0;
-            border-width: 1px 0 0;
-            border-style: solid;
-            border-color: inherit;
-            list-style: none;
-
-            .k-file-multiple,
-            .k-file-single {
-                width: 100%;
-                display: flex;
-                justify-content: space-between;
-            }
-
-            .k-file-single {
-                align-items: center;
-            }
-
-            .k-file-multiple {
-                align-items: flex-start;
-            }
-
-            .k-file {
-                padding-inline: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
-                padding-block: var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) + var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} ) );
-                border-width: 0 0 1px;
-                border-style: solid;
-                outline: none;
-                display: flex;
-                align-items: flex-start;
-                position: relative;
-            }
-            .k-file:last-child {
-                border-width: 0;
-            }
-
-            .k-filename {
-                margin-inline-start: k-spacing(2);
-                flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                position: relative;
-            }
-
-            .k-upload-pct {
-                margin-inline: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
-                font-weight: normal;
-                vertical-align: middle;
-            }
-
-            ~ .k-clear-selected,
-            ~ .k-upload-selected {
-                margin-block-start: calc( -1 * #{k-spacing(1)} );
-                border-width: 0;
-            }
-
-            ~ .k-upload-selected {
-                border-inline-start: 1px;
-                border-left-style: solid;
-                margin-inline-start: -1px;
-            }
-
-            .k-file-name,
-            .k-file-size,
-            .k-file-validation-message,
-            .k-file-summary {
-                display: block;
-            }
-
-            .k-file-name {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                position: relative;
-            }
-
-            .k-file-size,
-            .k-file-summary,
-            .k-file-validation-message {
-                font-size: var( --kendo-upload-validation-font-size, #{$kendo-upload-validation-font-size} );
-            }
-
-            .k-file-state {
-                visibility: hidden;
-            }
-
-            .k-file-icon-wrapper {
-
-                .k-file-state {
-                    position: absolute;
-                }
-            }
+        .k-filename {
+            margin-inline-start: k-spacing(2);
         }
 
         .k-upload-files .k-file-info {
             margin-inline-start: 0;
             margin-inline-end: 0;
-            min-height: var( --kendo-icon-size-xxl, 2rem );
-            display: block;
-            overflow: hidden;
-            flex: 1 0 0;
         }
 
         .k-multiple-files-wrapper,
         .k-file-single > .k-file-info {
             margin-inline-start: k-spacing(2);
             margin-inline-end: 0;
-            min-height: var( --kendo-icon-size-xxl, 2rem );
-            display: block;
-            overflow: hidden;
-            flex: 1 0 0;
-        }
-
-        .k-multiple-files-wrapper {
-
-            .k-file-info {
-                margin-block-end: var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} );
-                display: block;
-            }
-
-            .k-file-summary {
-                margin-block-start: calc( -1 * var( --kendo-upload-multiple-items-spacing, #{$kendo-upload-multiple-items-spacing} ) / 3);
-            }
         }
 
         .k-progressbar {
-            --kendo-progressbar-height: var( --kendo-upload-progress-thickness, #{$kendo-upload-progress-thickness} );
-            position: absolute;
-            left: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
-            right: var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} );
-            bottom: calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) / 2 );
-            width: auto;
-        }
-
-        // Action buttons
-        .k-actions {
-            border-top-width: 1px;
+            left: $kendo-upload-item-padding-x;
+            right: $kendo-upload-item-padding-x;
+            bottom: calc( $kendo-upload-item-padding-y / 2 );
         }
-
     }
 
     .k-upload-button-wrap {
-        position: relative;
-        direction: ltr;
-
         input {
-            // font should not depend on outside styles, otherwise upload may break
-            font: 170px monospace !important; // stylelint-disable-line declaration-no-important
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            cursor: pointer;
-            position: absolute;
-            bottom: 0;
-            right: 0;
             z-index: 2;
         }
-
-        input[disabled],
-        input.k-disabled {
-            visibility: hidden;
-        }
     }
 }

package/scss/upload/_theme.scss

@@ -1,103 +1,17 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/upload/_theme.scss" as *;
 
 @mixin kendo-upload--theme() {
-    .k-upload {
-        @include fill(
-            var( --kendo-upload-text, #{$kendo-upload-text} ),
-            var( --kendo-upload-bg, #{$kendo-upload-bg} ),
-            var( --kendo-upload-border, #{$kendo-upload-border} )
-        );
-
-        .k-dropzone {
-            @include fill(
-                var( --kendo-upload-dropzone-text, #{$kendo-upload-dropzone-text} ),
-                var( --kendo-upload-dropzone-bg, #{$kendo-upload-dropzone-bg} ),
-                var( --kendo-upload-dropzone-border, #{$kendo-upload-dropzone-border} )
-            );
-
-            &:hover,
-            &.k-hover,
-            &.k-dropzone-hover,
-            &.k-dropzone-hovered {
-                background-color: var( --kendo-upload-dropzone-hover-bg, #{$kendo-upload-dropzone-hover-bg} );
-            }
-
-            .k-dropzone-hint {
-                color: var( --kendo-upload-status-text, #{$kendo-upload-status-text} );
-                opacity: var( --kendo-upload-status-text-opacity, #{$kendo-upload-status-text-opacity} );
-            }
-
-        }
-
-        .k-upload-files,
-        .k-file {
-            border-color: var( --kendo-upload-border, #{$kendo-upload-border} );
-        }
+    @include kendo-upload--theme-base();
 
+    .k-upload {
         .k-file {
-
             &.k-focus {
-                box-shadow: var( --kendo-upload-focus-shadow, #{$kendo-upload-focus-shadow} );
-            }
-
-            .k-upload-action.k-focus {
-                box-shadow: var( --kendo-upload-focus-shadow, #{$kendo-upload-focus-shadow} );
-            }
-
-        }
-
-        .k-dropzone .k-upload-status {
-            color: var( --kendo-upload-status-text, #{$kendo-upload-status-text} );
-            opacity: var( --kendo-upload-status-text-opacity, #{$kendo-upload-status-text-opacity} );
-        }
-
-        // Upload status: uploading
-        .k-file-progress {
-            .k-progressbar .k-selected {
-                background-color: var( --kendo-upload-progress-bg, #{$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: var( --kendo-upload-success-bg, #{$kendo-upload-success-bg} );
+                box-shadow: $kendo-upload-focus-shadow;
             }
         }
 
-        // Upload satus: error
-        .k-file-error {
-            .k-file-validation-message {
-                color: var( --kendo-upload-error-text, #{$kendo-upload-error-text} );
-            }
-
-            .k-progressbar .k-selected {
-                background-color: var( --kendo-upload-error-bg, #{$kendo-upload-error-bg} );
-            }
-        }
-
-        .k-file-icon-wrapper {
-            color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
-            border-color: var( --kendo-upload-icon-color, #{$kendo-upload-icon-color} );
-        }
-
-        .k-file-size,
-        .k-file-validation-message,
-        .k-file-summary {
-            color: k-color(subtle);
-        }
-
-        .k-multiple-files-wrapper .k-file-summary {
-            color: var( --kendo-upload-text, #{$kendo-upload-text} );
-        }
-
-        // Invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {

package/scss/upload/_variables.scss

@@ -3,98 +3,135 @@
 
 /// The width of the border around the Upload.
 /// @group upload
-$kendo-upload-border-width: 1px !default;
+$kendo-upload-border-width: var( --kendo-upload-border-width, 1px ) !default;
 /// The font family of the Upload.
 /// @group upload
-$kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-upload-font-family: var( --kendo-upload-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Upload.
 /// @group upload
-$kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-upload-font-size: var( --kendo-upload-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Upload.
 /// @group upload
-$kendo-upload-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-upload-line-height: var( --kendo-upload-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The maximum height of the list with uploaded items.
 /// @group upload
-$kendo-upload-max-height: 300px !default;
+$kendo-upload-max-height: var( --kendo-upload-max-height, 300px ) !default;
 
 /// The text color of the Upload.
 /// @group upload
-$kendo-upload-text: k-color(on-app-surface) !default;
+$kendo-upload-text: var( --kendo-upload-text, k-color(on-app-surface) ) !default;
 /// The background color of the Upload.
 /// @group upload
-$kendo-upload-bg: k-color(surface-alt) !default;
+$kendo-upload-bg: var( --kendo-upload-bg, k-color(surface-alt) ) !default;
 /// The border color of the Upload.
 /// @group upload
-$kendo-upload-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-upload-border: var( --kendo-upload-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: k-spacing(2) !default;
+$kendo-upload-dropzone-padding-x: var( --kendo-upload-dropzone-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: k-spacing(2) !default;
+$kendo-upload-dropzone-padding-y: var( --kendo-upload-dropzone-padding-y, k-spacing(2) ) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-text: k-color(subtle) !default;
+$kendo-upload-dropzone-text: var( --kendo-upload-dropzone-text, k-color(subtle) ) !default;
 /// The background color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-bg: k-color(surface) !default;
+$kendo-upload-dropzone-bg: var( --kendo-upload-dropzone-bg, k-color(surface) ) !default;
 /// The border color of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-upload-dropzone-border: var( --kendo-upload-dropzone-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The background color of the hovered Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-hover-bg: k-color(base-hover) !default;
+$kendo-upload-dropzone-hover-bg: var( --kendo-upload-dropzone-hover-bg, k-color(base-hover) ) !default;
 
 /// The text color of the Upload status message.
 /// @group upload
-$kendo-upload-status-text: k-color(subtle) !default;
+$kendo-upload-status-text: var( --kendo-upload-status-text, k-color(subtle) ) !default;
 /// The opacity of the Upload status message.
 /// @group upload
-$kendo-upload-status-text-opacity: null !default;
+$kendo-upload-status-text-opacity: var( --kendo-upload-status-text-opacity, null ) !default;
 
 /// The horizontal padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-x: k-spacing(2) !default;
+$kendo-upload-item-padding-x: var( --kendo-upload-item-padding-x, k-spacing(2) ) !default;
 /// The vertical padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-y: k-spacing(2) !default;
+$kendo-upload-item-padding-y: var( --kendo-upload-item-padding-y, k-spacing(2) ) !default;
 
 /// The vertical spacing between uploaded batch items.
 /// @group upload
-$kendo-upload-multiple-items-spacing: k-spacing(4) !default;
+$kendo-upload-multiple-items-spacing: var( --kendo-upload-multiple-items-spacing, k-spacing(4) ) !default;
 
 /// The font size of the Upload validation message.
 /// @group upload
-$kendo-upload-validation-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-upload-validation-font-size: var( --kendo-upload-validation-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// The horizontal spacing of the Upload status icon.
 /// @group upload
-$kendo-upload-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+$kendo-upload-icon-spacing: var( --kendo-upload-icon-spacing, var( --kendo-icon-spacing, .5rem ) ) !default;
 /// The color of the uploaded items icon.
 /// @group upload
-$kendo-upload-icon-color: k-color(subtle) !default;
+$kendo-upload-icon-color: var( --kendo-upload-icon-color, k-color(subtle) ) !default;
 
 /// The thickness of the Upload progress bar.
 /// @group upload
-$kendo-upload-progress-thickness: 2px !default;
+$kendo-upload-progress-thickness: var( --kendo-upload-progress-thickness, 2px ) !default;
 /// The background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-progress-bg: k-color(primary) !default;
+$kendo-upload-progress-bg: var( --kendo-upload-progress-bg, k-color(primary) ) !default;
 
 /// The success text color of the Upload.
 /// @group upload
-$kendo-upload-success-text: k-color(success-on-surface) !default;
+$kendo-upload-success-text: var( --kendo-upload-success-text, k-color(success-on-surface) ) !default;
 /// The success background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-success-bg: k-color(success-on-surface) !default;
+$kendo-upload-success-bg: var( --kendo-upload-success-bg, k-color(success-on-surface) ) !default;
 
 /// The error text color of the Upload.
 /// @group upload
-$kendo-upload-error-text: k-color(error-on-surface) !default;
+$kendo-upload-error-text: var( --kendo-upload-error-text, k-color(error-on-surface) ) !default;
 /// The error background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-error-bg: k-color(error-on-surface) !default;
+$kendo-upload-error-bg: var( --kendo-upload-error-bg, k-color(error-on-surface) ) !default;
 
 /// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload
-$kendo-upload-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-upload-focus-shadow: var( --kendo-upload-focus-shadow, inset 0 0 0 2px rgba(0, 0, 0, .13) ) !default;
+
+/// The margin of the Upload files list.
+/// @group upload
+$kendo-upload-files-list-margin: calc( -1 * #{k-spacing(1)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/upload/_variables.scss" with (
+    $kendo-upload-border-width: $kendo-upload-border-width,
+    $kendo-upload-font-family: $kendo-upload-font-family,
+    $kendo-upload-font-size: $kendo-upload-font-size,
+    $kendo-upload-line-height: $kendo-upload-line-height,
+    $kendo-upload-max-height: $kendo-upload-max-height,
+    $kendo-upload-text: $kendo-upload-text,
+    $kendo-upload-bg: $kendo-upload-bg,
+    $kendo-upload-border: $kendo-upload-border,
+    $kendo-upload-dropzone-padding-x: $kendo-upload-dropzone-padding-x,
+    $kendo-upload-dropzone-padding-y: $kendo-upload-dropzone-padding-y,
+    $kendo-upload-dropzone-text: $kendo-upload-dropzone-text,
+    $kendo-upload-dropzone-bg: $kendo-upload-dropzone-bg,
+    $kendo-upload-dropzone-border: $kendo-upload-dropzone-border,
+    $kendo-upload-dropzone-hover-bg: $kendo-upload-dropzone-hover-bg,
+    $kendo-upload-status-text: $kendo-upload-status-text,
+    $kendo-upload-status-text-opacity: $kendo-upload-status-text-opacity,
+    $kendo-upload-item-padding-x: $kendo-upload-item-padding-x,
+    $kendo-upload-item-padding-y: $kendo-upload-item-padding-y,
+    $kendo-upload-multiple-items-spacing: $kendo-upload-multiple-items-spacing,
+    $kendo-upload-validation-font-size: $kendo-upload-validation-font-size,
+    $kendo-upload-icon-spacing: $kendo-upload-icon-spacing,
+    $kendo-upload-icon-color: $kendo-upload-icon-color,
+    $kendo-upload-progress-thickness: $kendo-upload-progress-thickness,
+    $kendo-upload-progress-bg: $kendo-upload-progress-bg,
+    $kendo-upload-success-text: $kendo-upload-success-text,
+    $kendo-upload-success-bg: $kendo-upload-success-bg,
+    $kendo-upload-error-text: $kendo-upload-error-text,
+    $kendo-upload-error-bg: $kendo-upload-error-bg,
+    $kendo-upload-focus-shadow: $kendo-upload-focus-shadow,
+    $kendo-upload-files-list-margin: $kendo-upload-files-list-margin,
+);

package/scss/validator/_layout.scss

@@ -1,19 +1,5 @@
-@use "./_variables.scss" as *;
-@use "../tooltip/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/validator/_layout.scss" as *;
 
 @mixin kendo-validator--layout() {
-
-    .k-validator-tooltip {
-        margin-block-start: calc( var( --kendo-validator-tooltip-margin, #{$kendo-tooltip-callout-size} ) + #{$kendo-tooltip-border-width} );
-        width: auto;
-        white-space: normal;
-        display: flex;
-        align-items: center;
-        // NOTE: This works around popup / tooltip stackin issue
-        z-index: 9999;
-    }
-    .k-grid .k-validator-tooltip {
-        max-width: 300px;
-    }
-
+    @include kendo-validator--layout-base();
 }

package/scss/validator/_theme.scss

@@ -1,5 +1,5 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/validator/_theme.scss" as *;
 
 @mixin kendo-validator--theme() {
-    .k-validator { }
+    @include kendo-validator--theme-base();
 }

package/scss/virtual-scroller/_layout.scss

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

package/scss/virtual-scroller/_theme.scss

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