@progress/kendo-theme-fluent 9.1.0-dev.3 → 9.1.0-dev.5

package/scss/pdf-viewer/_layout.scss

@@ -49,7 +49,8 @@
         }
 
         &.k-enable-panning {
-            cursor: grab;
+            cursor: grab !important; // stylelint-disable-line declaration-no-important
+
 
             span::selection {
                 background-color: transparent;
@@ -66,9 +67,34 @@
             position: relative;
             margin-block: var( --kendo-pdf-viewer-page-spacing, #{$kendo-pdf-viewer-page-spacing} );
             margin-inline: auto;
+            z-index: 1;
+
+            // Canvas
+            .k-canvas-wrapper {
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+
+                canvas {
+                    direction: ltr;
+                }
+
+                svg {
+                    transform: none;
+                }
 
-            canvas {
-                direction: ltr;
+                .k-highlight {
+                    position: absolute;
+                    mix-blend-mode: multiply;
+                    fill-opacity: 1;
+
+                }
+                .k-highlight-outline {
+                    position: absolute;
+                    fill: none;
+                    stroke-width: 2px;
+                    stroke-dasharray: 2;
+                }
             }
 
             .k-text-layer {
@@ -78,16 +104,131 @@
                 opacity: .2;
                 overflow: hidden;
 
-                > span {
+                .k-marked-content > span,
+                > span, br {
                     position: absolute;
                     line-height: var( --kendo-pdf-viewer-selection-line-height, #{$kendo-pdf-viewer-selection-line-height} );
                     transform-origin: 0% 0%;
                     color: transparent;
+                    white-space: pre;
+                    cursor: text;
+                }
+
+                .k-marked-content {
+                    top: 0;
+                    height: 0;
+                }
+
+                .k-end-of-content {
+                    display: block;
+                    position: absolute;
+                    inset: 100% 0 0;
+                    z-index: 0;
+                    cursor: default;
+                    user-select: none;
                 }
 
                 .k-search-highlight-mark {
                     color: transparent;
                 }
+
+                .k-highlighting {
+                    touch-action: none;
+                }
+            }
+
+            .k-annotation-layer {
+                position: absolute;
+                top: 0;
+                left: 0;
+                transform-origin: 0 0;
+                pointer-events: none;
+
+                section {
+                    position: absolute;
+                }
+
+                .k-annotation-text-content {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    opacity: 0;
+                    color: transparent;
+                    user-select: none;
+                    pointer-events: none;
+                }
+            }
+
+            .k-annotation-editor-layer {
+                background: transparent;
+                position: absolute;
+                inset: 0;
+                transform-origin: 0 0;
+                cursor: auto;
+
+                .k-selected {
+                    z-index: 100000 !important; // stylelint-disable-line declaration-no-important
+                }
+
+                .k-highlight-editor {
+                    position: absolute;
+                    background: transparent;
+                    z-index: 1;
+                    cursor: auto;
+                    max-width: 100%;
+                    max-height: 100%;
+                    border: none;
+                    outline: none;
+                    pointer-events: none;
+                    transform-origin: 0 0;
+
+                    .k-internal {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        pointer-events: auto;
+                    }
+                }
+
+                .k-free-text-editor {
+                    position: absolute;
+                    background: transparent;
+                    z-index: 1;
+                    transform-origin: 0 0;
+                    cursor: text;
+                    caret-color: var( --kendo-pdf-viewer-free-text-annotation-text, #{$kendo-pdf-viewer-free-text-annotation-text} );
+                    max-width: 100%;
+                    max-height: 100%;
+                    border: solid 2px transparent;
+
+                    &.k-selected.k-draggable {
+                        cursor: move;;
+                    }
+
+                    &.k-selected .k-internal {
+                        border-radius: 0px;
+                        outline: 2px dashed var( --kendo-pdf-viewer-free-text-annotation-border, #{$kendo-pdf-viewer-free-text-annotation-border} );
+                    }
+
+                    .k-internal {
+                        background: transparent;
+                        border: none;
+                        inset: 0;
+                        overflow: visible;
+                        white-space: nowrap;
+                        user-select: none;
+                    }
+
+                    .k-internal:empty::before {
+                        content: attr(default-content);
+                    }
+                }
+            }
+
+            .k-annotation-editor-layer-disabled {
+                pointer-events: none;
             }
         }
 
@@ -149,4 +290,24 @@
         }
     }
 
+    // Annotation Toolbar
+    .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
+        width: min-content;
+        border-bottom-width: 0;
+    }
+
+
+    // Annotation Editor
+    .k-pdf-viewer-annotation-editor {
+        padding-block: var(--kendo-pdf-viewer-popup-padding-y, #{$kendo-pdf-viewer-popup-padding-y} );
+        padding-inline: var(--kendo-pdf-viewer-popup-padding-x, #{$kendo-pdf-viewer-popup-padding-x} );
+
+        .k-column-menu-group-header {
+            padding-inline: 0;
+        }
+
+        .k-form-field {
+            margin-top: 0;
+        }
+    }
 }

package/scss/pdf-viewer/_theme.scss

@@ -12,7 +12,7 @@
 
 
         // Canvas
-        .k-canvas {
+        .k-pdf-viewer-canvas {
             @include fill(
                 var( --kendo-pdf-viewer-canvas-text, #{$kendo-pdf-viewer-canvas-text} ),
                 var( --kendo-pdf-viewer-canvas-bg, #{$kendo-pdf-viewer-canvas-bg} ),
@@ -39,6 +39,16 @@
             );
         }
 
+        .k-canvas-wrapper .k-highlight-outline {
+            &.k-hover,
+            &:hover {
+                stroke: var( --kendo-pdf-viewer-highlight-annotation-hover-border, #{$kendo-pdf-viewer-highlight-annotation-hover-border} );
+            }
+
+            &.k-selected {
+                stroke: var( --kendo-pdf-viewer-highlight-annotation-border, #{$kendo-pdf-viewer-highlight-annotation-border} );
+            }
+        }
 
         // Search
         .k-search-highlight {
@@ -52,7 +62,13 @@
                 $bg: var( --kendo-pdf-viewer-search-highlight-mark-bg, #{$kendo-pdf-viewer-search-highlight-mark-bg} )
             );
         }
+        .k-annotation-editor-layer .k-free-text-editor .k-internal {
+            color: var( --kendo-pdf-viewer-free-text-annotation-text, #{$kendo-pdf-viewer-free-text-annotation-text} );
 
+            &:empty::before {
+                color: var( --kendo-pdf-viewer-free-text-annotation-placeholder-text, #{$kendo-pdf-viewer-free-text-annotation-placeholder-text} );
+            }
+        }
     }
 
     .k-pdf-viewer-canvas > .k-search-panel {

package/scss/pdf-viewer/_variables.scss

@@ -99,3 +99,26 @@ $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
 /// The text color of the PDFViewer icon.
 /// @group pdf-viewer
 $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
+
+/// The vertical padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the PDFViewer popup.
+/// @group pdf-viewer
+$kendo-pdf-viewer-popup-padding-y: $kendo-pdf-viewer-popup-padding-x !default;
+
+/// The border color of the PDFViewer selected highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+/// The background color of the PDFViewer hover highlight annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-highlight-annotation-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+/// The border color of the PDFViewer selected free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+/// The placeholder text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+/// The text color of the PDFViewer free text annotation.
+/// @group pdf-viewer
+$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;

package/scss/prompt/_layout.scss

@@ -9,6 +9,12 @@
         flex-direction: column;
         position: relative;
         overflow: hidden;
+
+        // Toolbar
+        .k-toolbar {
+            border-top-width: 0;
+            border-inline-width: 0;
+        }
     }
 
     // Content

package/scss/scheduler/index.scss

@@ -21,7 +21,8 @@ $_kendo-module-meta: (
         "toolbar",
         "tooltip",
         "time-marker",
-        "window"
+        "window",
+        "no-data"
     )
 );
 

package/scss/spreadsheet/_layout.scss

@@ -54,10 +54,10 @@
 
     // Toolbar
     .k-spreadsheet-toolbar {
-        border-width: 0;
+        border-top-width: 0;
+        border-inline-width: 0;
     }
 
-
     // Action bar
     .k-spreadsheet-action-bar {
         border-width: 0 0 var( --kendo-spreadsheet-action-bar-border-width, #{$kendo-spreadsheet-action-bar-border-width} );

package/scss/stepper/_layout.scss

@@ -128,7 +128,7 @@
             z-index: 1;
         }
         .k-step-label:only-child {
-            @include border-radius( calc( (var( --kendo-stepper-indicator-height, #{$kendo-stepper-indicator-height} ) + 2 * var( --kendo-stepper-indicator-border-width, #{$kendo-stepper-indicator-border-width} )) / 2) );
+            @include border-radius( var( --kendo-stepper-label-border-radius, #{$kendo-stepper-label-border-radius} ) );
             padding-inline: var( --kendo-stepper-label-padding-x, #{$kendo-stepper-label-padding-x} );
             padding-block: var( --kendo-stepper-label-padding-y, #{$kendo-stepper-label-padding-y} );
             border-width: 0;
@@ -211,7 +211,7 @@
             text-align: center;
         }
         .k-step-indicator + .k-step-label {
-            margin-top: if($kendo-stepper-indicator-focus-offset > 0, calc( 8px - #{$kendo-stepper-indicator-focus-offset}), 8px);
+            margin-top: if($kendo-stepper-indicator-focus-offset > 0, k-spacing(1), 8px);
         }
 
         // Progressbar

package/scss/stepper/_variables.scss

@@ -33,6 +33,9 @@ $kendo-stepper-label-padding-x: k-spacing(3) !default;
 /// The vertical padding the Stepper label.
 /// @group stepper
 $kendo-stepper-label-padding-y: k-spacing(1.5) !default;
+/// The border radius of the Stepper label.
+/// @group stepper
+$kendo-stepper-label-border-radius: k-border-radius(xxl) !default;
 
 /// The horizontal padding of the Stepper content.
 /// @group stepper

package/scss/toolbar/_layout.scss

@@ -87,7 +87,19 @@
             outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
             outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
         }
+    }
+
+    // Outline Toolbar
+    .k-toolbar-outline {
+        border-width: var( --kendo-toolbar-outline-border-width, #{$kendo-toolbar-outline-border-width} );
+        background: none;
+    }
 
+    // Flat Toolbar
+    .k-toolbar-flat {
+        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
+        background: none !important;  // stylelint-disable-line declaration-no-important
     }
 
     // Toolbar group
@@ -223,14 +235,4 @@
         }
     }
 
-    // Flat Toolbar
-    .k-toolbar.k-toolbar-flat {
-        border-width: $kendo-toolbar-flat-border-width 0;
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
-        border-bottom-color: inherit;
-        color: inherit;
-        background: none !important;  // stylelint-disable-line declaration-no-important
-        box-shadow: none;
-    }
-
 }

package/scss/toolbar/_theme.scss

@@ -1,13 +1,10 @@
+@use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-toolbar--theme() {
 
     // Theme
     .k-toolbar {
-        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
-        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
-        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
-
         // Separator
         .k-separator,
         .k-toolbar-separator {
@@ -22,6 +19,35 @@
 
     }
 
+    // Solid Toolbar
+    .k-toolbar-solid {
+        @include fill (
+            var( --kendo-toolbar-text, #{$kendo-toolbar-text} ),
+            var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} ),
+            var( --kendo-toolbar-border, #{$kendo-toolbar-border} )
+        );
+    }
+
+    // Outline Toolbar
+    .k-toolbar-outline {
+        @include fill (
+            $color: var( --kendo-toolbar-outline-text, #{$kendo-toolbar-outline-text} ),
+            $border: var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} )
+        );
+    }
+
+    // Flat Toolbar
+    .k-toolbar-flat {
+        @include fill (
+            $color: var( --kendo-toolbar-flat-text, #{$kendo-toolbar-flat-text} ),
+            $border: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} )
+        );
+
+        > .k-separator {
+            border-inline-color: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
+        }
+    }
+
     // stylelint-disable selector-class-pattern
     .k-floating-toolbar,
     .editorToolbarWindow.k-window-content {

package/scss/toolbar/_variables.scss

@@ -55,9 +55,29 @@ $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
 /// @group toolbar
 $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
 
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: null !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: k-color(border) !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
 /// The color of the separator border of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-separator-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-toolbar-separator-border: inherit !default;
 
 /// The width of the input in the Toolbar.
 /// @group toolbar
@@ -73,10 +93,6 @@ $kendo-toolbar-item-focus-outline-style: solid !default;
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-color: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
-/// Border width of the flat Toolbar.
-/// @group toolbar
-$kendo-toolbar-flat-border-width: 1px !default;
-
 /// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (