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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "14.4.0-dev.0",
+  "version": "14.4.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/scss/components/loader/_layout.scss

@@ -4,6 +4,58 @@
 @use "../../z-index/index.scss" as *;
 @use "../../functions/index.scss" as *;
 
+// Generates 3 transform-only keyframes for spinner-3 at a given size.
+// $w/$h = effective canvas dimensions (spinner size minus segment size).
+@mixin spinner-3-keyframes($suffix, $w, $h) {
+    @keyframes spinner-3-#{$suffix}-1 {
+        0%       { transform: translate( -50%, -50% ); }
+        33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% + #{$h} ) ); }
+        66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% + #{$h} ) ); }
+        100%     { transform: translate( -50%, -50% ); }
+    }
+    @keyframes spinner-3-#{$suffix}-2 {
+        0%       { transform: translate( -50%, -50% ); }
+        33.3333% { transform: translate( calc( -50% + #{$w} ), -50% ); }
+        66.6666% { transform: translate( calc( -50% + #{$w} / 2 ), calc( -50% - #{$h} ) ); }
+        100%     { transform: translate( -50%, -50% ); }
+    }
+    @keyframes spinner-3-#{$suffix}-3 {
+        0%       { transform: translate( -50%, -50% ); }
+        33.3333% { transform: translate( calc( -50% - #{$w} / 2 ), calc( -50% - #{$h} ) ); }
+        66.6666% { transform: translate( calc( -50% - #{$w} ), -50% ); }
+        100%     { transform: translate( -50%, -50% ); }
+    }
+}
+
+// Generates 4 transform-only keyframes for spinner-4 at a given size.
+// $hw/$hh = half canvas width/height (distance from corner to center).
+@mixin spinner-4-keyframes($suffix, $hw, $hh) {
+    @keyframes spinner-4-#{$suffix}-1 {
+        0%    { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
+        33.3% { transform: translate( -50%, -50% ); }
+        66.6% { transform: translate( -50%, -50% ); }
+        100%  { transform: translate( calc( -50% + #{$hw} ), calc( -50% + #{$hh} ) ); }
+    }
+    @keyframes spinner-4-#{$suffix}-2 {
+        0%    { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
+        33.3% { transform: translate( -50%, -50% ); }
+        66.6% { transform: translate( -50%, -50% ); }
+        100%  { transform: translate( calc( -50% - #{$hw} ), calc( -50% + #{$hh} ) ); }
+    }
+    @keyframes spinner-4-#{$suffix}-3 {
+        0%    { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
+        33.3% { transform: translate( -50%, -50% ); }
+        66.6% { transform: translate( -50%, -50% ); }
+        100%  { transform: translate( calc( -50% - #{$hw} ), calc( -50% - #{$hh} ) ); }
+    }
+    @keyframes spinner-4-#{$suffix}-4 {
+        0%    { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
+        33.3% { transform: translate( -50%, -50% ); }
+        66.6% { transform: translate( -50%, -50% ); }
+        100%  { transform: translate( calc( -50% + #{$hw} ), calc( -50% - #{$hh} ) ); }
+    }
+}
+
 @mixin kendo-loader--layout-base() {
 
     .k-loader {
@@ -58,6 +110,7 @@
         position: absolute;
     }
 
+
     // Loader pulsing 2
     @keyframes pulsing-2-segment {
         0% { transform: scale(1); }
@@ -65,8 +118,6 @@
         100% { transform: scale(1); }
     }
 
-
-    // Component
     .k-loader-pulsing-2 {
 
         .k-loader-canvas {
@@ -112,62 +163,44 @@
     }
 
 
-
-
     // Loader spinner 3
-    @keyframes spinner-3-segment {
-        0% {
-            inset-block-start: 0;
-            inset-inline-start: 50%;
-        }
-
-        33.3333% {
-            inset-block-start: 100%;
-            inset-inline-start: 0;
-        }
+    // Transform-only keyframes — one set per size, generated by mixin above.
+    @include spinner-3-keyframes(
+        "sm",
+        calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} ),
+        calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} )
+    );
+    @include spinner-3-keyframes(
+        "md",
+        calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} ),
+        calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} )
+    );
+    @include spinner-3-keyframes(
+        "lg",
+        calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} ),
+        calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} )
+    );
 
-        66.6666% {
-            inset-block-start: 100%;
-            inset-inline-start: 100%;
-        }
-
-        100% {
-            inset-block-start: 0;
-            inset-inline-start: 50%;
-        }
-    }
-
-
-    // Component
     .k-loader-spinner-3 {
 
-        // Note: Until we can provide a css variables solution, or something better:
-        // * the dot center is on the exact point of angle
-        // * offset dots by artifically reduce dimentions by 1 dot size
-        // * compensate by setting margin on all sides half a dot size
-
+        // The dot center sits on the exact corner point.
+        // Canvas is reduced by 1 dot size and offset by half a dot via margin.
         .k-loader-segment {
             transform: translate( -50%, -50% );
         }
         .k-loader-segment:nth-child(1) {
             top: 0;
             left: 50%;
-            animation: spinner-3-segment 2s ease infinite;
         }
         .k-loader-segment:nth-child(2) {
             top: 100%;
             left: 0;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -2s / 3 );
         }
         .k-loader-segment:nth-child(3) {
             top: 100%;
             left: 100%;
-            animation: spinner-3-segment 2s ease infinite;
-            animation-delay: calc( -4s / 3 );
         }
 
-
         #{k-when-default($kendo-loader-default-size, "sm")}
         &.k-loader-sm {
             .k-loader-canvas {
@@ -175,15 +208,21 @@
                 width: calc( #{$kendo-loader-sm-spinner-3-width} - #{$kendo-loader-sm-segment-size} );
                 height: calc( #{$kendo-loader-sm-spinner-3-height} - #{$kendo-loader-sm-segment-size} );
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-3-sm-1 2s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-3-sm-2 2s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-3-sm-3 2s ease infinite; }
         }
 
         #{k-when-default($kendo-loader-default-size, "md")}
         &.k-loader-md {
             .k-loader-canvas {
-                margin: calc( #{ $kendo-loader-md-segment-size} / 2 );
+                margin: calc( #{$kendo-loader-md-segment-size} / 2 );
                 width: calc( #{$kendo-loader-md-spinner-3-width} - #{$kendo-loader-md-segment-size} );
                 height: calc( #{$kendo-loader-md-spinner-3-height} - #{$kendo-loader-md-segment-size} );
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-3-md-1 2s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-3-md-2 2s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-3-md-3 2s ease infinite; }
         }
 
         #{k-when-default($kendo-loader-default-size, "lg")}
@@ -193,156 +232,58 @@
                 width: calc( #{$kendo-loader-lg-spinner-3-width} - #{$kendo-loader-lg-segment-size} );
                 height: calc( #{$kendo-loader-lg-spinner-3-height} - #{$kendo-loader-lg-segment-size} );
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-3-lg-1 2s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-3-lg-2 2s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-3-lg-3 2s ease infinite; }
         }
     }
 
 
-
-
     // Loader spinner 4
-    @keyframes spinner-4-segment-1 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
+    @keyframes spinner-4 {
+        0%    { transform: rotate(0); }
+        33.3% { transform: rotate(0); }
+        66.6% { transform: rotate(180deg); }
+        100%  { transform: rotate(180deg); }
+    }
+
+    @include spinner-4-keyframes(
+        "sm",
+        calc( #{$kendo-loader-sm-spinner-4-width} / 2 ),
+        calc( #{$kendo-loader-sm-spinner-4-height} / 2 )
+    );
+    @include spinner-4-keyframes(
+        "md",
+        calc( #{$kendo-loader-md-spinner-4-width} / 2 ),
+        calc( #{$kendo-loader-md-spinner-4-height} / 2 )
+    );
+    @include spinner-4-keyframes(
+        "lg",
+        calc( #{$kendo-loader-lg-spinner-4-width} / 2 ),
+        calc( #{$kendo-loader-lg-spinner-4-height} / 2 )
+    );
 
-        33.3% {
-            top: 0;
-            left: 0;
-            transform: translateX(0) translateY(0);
+    .k-loader-spinner-4 {
+        .k-loader-canvas {
+            animation: spinner-4 1.833s ease infinite;
         }
 
-        66.6% {
+        .k-loader-segment { transform: translate( -50%, -50% ); }
+        .k-loader-segment:nth-child(1) {
             top: 0;
             left: 0;
-            transform: translateX(0) translateY(0);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-2 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
         }
-
-        33.3% {
-            top: 0;
-            left: 100%;
-            transform: translateX(-100%) translateY(0);
-        }
-
-        66.6% {
+        .k-loader-segment:nth-child(2) {
             top: 0;
             left: 100%;
-            transform: translateX(-100%) translateY(0);
         }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-3 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-
-        33.3% {
-            top: 100%;
-            left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        66.6% {
+        .k-loader-segment:nth-child(3) {
             top: 100%;
             left: 100%;
-            transform: translateX(-100%) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4-segment-4 {
-        0% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
         }
-
-        33.3% {
+        .k-loader-segment:nth-child(4) {
             top: 100%;
             left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        66.6% {
-            top: 100%;
-            left: 0;
-            transform: translateX(0) translateY(-100%);
-        }
-
-        100% {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-    @keyframes spinner-4 {
-        0% {
-            transform: rotate(0);
-        }
-
-        33.3% {
-            transform: rotate(0);
-        }
-
-        66.6% {
-            transform: rotate(180deg);
-        }
-
-        100% {
-            transform: rotate(180deg);
-        }
-    }
-
-    .k-loader-spinner-4 {
-        .k-loader-canvas {
-            animation: spinner-4 1.833s ease infinite;
-        }
-
-        .k-loader-segment {
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%);
-
-            &:nth-child(1) {
-                animation: spinner-4-segment-1 1.833s ease infinite;
-            }
-
-            &:nth-child(2) {
-                animation: spinner-4-segment-2 1.833s ease infinite;
-            }
-
-            &:nth-child(3) {
-                animation: spinner-4-segment-3 1.833s ease infinite;
-            }
-
-            &:nth-child(4) {
-                animation: spinner-4-segment-4 1.833s ease infinite;
-            }
         }
 
         #{k-when-default($kendo-loader-default-size, "sm")}
@@ -351,6 +292,10 @@
                 width: $kendo-loader-sm-spinner-4-width;
                 height: $kendo-loader-sm-spinner-4-height;
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-4-sm-1 1.833s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-4-sm-2 1.833s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-4-sm-3 1.833s ease infinite; }
+            .k-loader-segment:nth-child(4) { animation: spinner-4-sm-4 1.833s ease infinite; }
         }
 
         #{k-when-default($kendo-loader-default-size, "md")}
@@ -359,6 +304,10 @@
                 width: $kendo-loader-md-spinner-4-width;
                 height: $kendo-loader-md-spinner-4-height;
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-4-md-1 1.833s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-4-md-2 1.833s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-4-md-3 1.833s ease infinite; }
+            .k-loader-segment:nth-child(4) { animation: spinner-4-md-4 1.833s ease infinite; }
         }
 
         #{k-when-default($kendo-loader-default-size, "lg")}
@@ -367,12 +316,14 @@
                 width: $kendo-loader-lg-spinner-4-width;
                 height: $kendo-loader-lg-spinner-4-height;
             }
+            .k-loader-segment:nth-child(1) { animation: spinner-4-lg-1 1.833s ease infinite; }
+            .k-loader-segment:nth-child(2) { animation: spinner-4-lg-2 1.833s ease infinite; }
+            .k-loader-segment:nth-child(3) { animation: spinner-4-lg-3 1.833s ease infinite; }
+            .k-loader-segment:nth-child(4) { animation: spinner-4-lg-4 1.833s ease infinite; }
         }
     }
 
 
-
-
     // Loader container
     .k-loader-container {
         display: flex;

package/scss/components/pdf-viewer/_layout.scss

@@ -23,7 +23,7 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Toolbar
-        .k-toolbar {
+        > .k-toolbar {
             border-block-start-width: 0;
             border-inline-end-width: 0;
             border-inline-start-width: 0;
@@ -31,8 +31,8 @@
             flex: 0 0 auto;
             z-index: k-z-index("base", 1);
         }
-        .k-toolbar .k-pager-wrap,
-        .k-toolbar .k-pager {
+        > .k-toolbar .k-pager-wrap,
+        > .k-toolbar .k-pager {
             padding: 0;
             border-width: 0;
             color: inherit;
@@ -308,6 +308,7 @@
     }
 
     // Search
+    // TODO: Remove once product teams adopt the floating toolbar search panel
     .k-pdf-viewer-canvas > .k-search-panel {
         width: max-content;
         margin-block-start: calc( (#{$kendo-button-md-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
@@ -345,6 +346,18 @@
         }
     }
 
+    // Search (floating toolbar)
+    .k-floating-toolbar {
+        .k-search-dialog-draghandle {
+            cursor: move;
+        }
+
+        .k-search-matches {
+            display: inline-flex;
+            gap: $kendo-pdf-viewer-search-panel-matches-spacing;
+        }
+    }
+
     // Annotation Toolbar
     .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
         width: min-content;

package/scss/components/toolbar/_layout.scss

@@ -272,7 +272,16 @@
         }
     }
 
-    .k-floating-toolbar,
+    .k-floating-toolbar {
+        max-width: fit-content;
+        border-radius: $kendo-floating-toolbar-border-radius;
+
+        .k-toolbar {
+            border-width: 0;
+            border-radius: inherit;
+        }
+    }
+
     .k-window-content:where(.editorToolbarWindow) { // stylelint-disable-line
         padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important
         padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important

package/scss/components/toolbar/_theme.scss

@@ -112,8 +112,6 @@
             border-color: $kendo-toolbar-flat-border;
         }
     }
-
-    .k-floating-toolbar,
     .editorToolbarWindow.k-window-content { // stylelint-disable-line
         @include fill(
             $kendo-toolbar-text,

package/scss/components/toolbar/_variables.scss

@@ -79,3 +79,5 @@ $kendo-toolbar-sizes: (
         separator-height: $kendo-toolbar-lg-separator-height
     )
 ) !default;
+
+$kendo-floating-toolbar-border-radius: null !default;