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

package/scss/components/menu/_layout.scss

@@ -88,7 +88,7 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
+        margin-inline-end: calc( #{$kendo-menu-expand-arrow-spacing} * -1 );
         padding-block: $kendo-menu-icon-padding-y;
         padding-inline: $kendo-menu-icon-padding-x;
         display: inline-flex;

package/scss/components/menu/_variables.scss

@@ -57,6 +57,8 @@ $kendo-menu-scroll-button-hover-gradient: null !default;
 $kendo-menu-icon-padding-x: null !default;
 $kendo-menu-icon-padding-y: null !default;
 
+$kendo-menu-expand-arrow-spacing: null !default;
+
 // Menu Separator
 
 $kendo-menu-separator-margin-inline: null !default;

package/scss/components/panelbar/_layout.scss

@@ -47,7 +47,7 @@
                 font-weight: 500;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
+                gap: $kendo-panelbar-item-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;
@@ -81,7 +81,7 @@
                 text-decoration: none;
                 display: flex;
                 flex-flow: row nowrap;
-                gap: $kendo-icon-spacing;
+                gap: $kendo-panelbar-item-icon-spacing;
                 align-items: center;
                 align-content: center;
                 position: relative;

package/scss/components/panelbar/_variables.scss

@@ -14,6 +14,8 @@ $kendo-panelbar-header-padding-y: null !default;
 $kendo-panelbar-item-padding-x: null !default;
 $kendo-panelbar-item-padding-y: null !default;
 
+$kendo-panelbar-item-icon-spacing: null !default;
+
 $kendo-panelbar-item-level-count: null !default;
 
 $kendo-panelbar-bg: null !default;

package/scss/components/pivotgrid/_layout.scss

@@ -653,8 +653,8 @@
 
     // PivotGrid toggle icon
     .k-pivotgrid-toggle {
-        margin-block: calc( #{$kendo-icon-padding} * -1 );
-        padding: $kendo-icon-padding;
+        margin-block: calc( #{k-spacing(1)} * -1 );
+        padding: k-spacing(1);
         box-sizing: content-box;
         cursor: pointer;
     }

package/scss/components/scheduler/_layout.scss

@@ -234,7 +234,7 @@
             display: inline-flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-scheduler-nav-item-icon-spacing;
             cursor: pointer;
         }
 

package/scss/components/scheduler/_variables.scss

@@ -102,6 +102,8 @@ $kendo-scheduler-indicators-margin: null !default;
 $kendo-scheduler-marquee-label-inset-x: null !default;
 $kendo-scheduler-marquee-label-inset-y: null !default;
 
+$kendo-scheduler-nav-item-icon-spacing: null !default;
+
 $kendo-scheduler-header-bg: null !default;
 
 

package/scss/components/segmented-control/_layout.scss

@@ -42,12 +42,6 @@
 
                 .k-segmented-control-button-icon {
                     min-height: calc( #{$_font-size} * #{$_line-height} );
-
-                    &.k-svg-icon > svg {
-                        width: $kendo-icon-size-md;
-                        height: $kendo-icon-size-md;
-                    }
-
                 }
             }
         }

package/scss/components/stepper/_layout.scss

@@ -130,14 +130,14 @@
             border-width: 0;
         }
         .k-step-label .k-step-text {
-            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
+            max-width: calc(10em - (#{$ki-icon-size} + #{$kendo-stepper-label-icon-spacing}));
             flex-grow: k-z-index("base", 1);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
         }
         .k-step-label .k-icon  {
-            margin-inline-start: $kendo-icon-spacing;
+            margin-inline-start: $kendo-stepper-label-icon-spacing;
         }
 
         .k-step-current .k-step-label {

package/scss/components/stepper/_variables.scss

@@ -8,6 +8,8 @@ $kendo-stepper-label-margin-x: null !default;
 $kendo-stepper-label-padding-x: null !default;
 $kendo-stepper-label-padding-y: null !default;
 $kendo-stepper-label-border-radius: null !default;
+
+$kendo-stepper-label-icon-spacing: null !default;
 $kendo-stepper-border-width: null !default;
 
 $kendo-stepper-inline-content-padding-x: null !default;

package/scss/components/tabstrip/_layout.scss

@@ -143,7 +143,7 @@
             flex-direction: row;
             align-content: center;
             align-items: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-tabstrip-item-icon-spacing;
         }
 
 

package/scss/components/tabstrip/_variables.scss

@@ -29,6 +29,8 @@ $kendo-tabstrip-border: null !default;
 $kendo-tabstrip-item-border-width: null !default;
 $kendo-tabstrip-item-border-radius: null !default;
 $kendo-tabstrip-item-gap: null !default;
+
+$kendo-tabstrip-item-icon-spacing: null !default;
 $kendo-tabstrip-item-spacing-x: null !default;
 $kendo-tabstrip-sm-item-padding-x: null !default;
 $kendo-tabstrip-sm-item-padding-y: null !default;

package/scss/components/toolbar/_layout.scss

@@ -349,7 +349,7 @@
             flex-flow: row nowrap;
             align-items: center;
             align-content: center;
-            gap: $kendo-icon-spacing;
+            gap: $kendo-toolbar-item-icon-spacing;
             justify-content: flex-start;
             position: relative;
         }

package/scss/components/toolbar/_variables.scss

@@ -15,6 +15,8 @@ $kendo-toolbar-sm-spacing: null !default;
 $kendo-toolbar-md-spacing: null !default;
 $kendo-toolbar-lg-spacing: null !default;
 
+$kendo-toolbar-item-icon-spacing: null !default;
+
 $kendo-toolbar-separator-height: null !default;
 $kendo-toolbar-sm-separator-height: null !default;
 $kendo-toolbar-md-separator-height: null !default;

package/scss/components/tooltip/_layout.scss

@@ -35,7 +35,7 @@
     }
 
     .k-tooltip-icon {
-        margin-inline-end: $kendo-icon-spacing;
+        margin-inline-end: $kendo-tooltip-icon-spacing;
         flex-shrink: 0;
     }
 
@@ -53,7 +53,7 @@
     }
 
     .k-tooltip-button {
-        margin-inline-start: $kendo-icon-spacing;
+        margin-inline-start: $kendo-tooltip-icon-spacing;
         flex-shrink: 0;
 
         .k-icon {

package/scss/components/tooltip/_variables.scss

@@ -2,6 +2,8 @@
 
 $kendo-tooltip-padding-y: null !default;
 $kendo-tooltip-padding-x: null !default;
+
+$kendo-tooltip-icon-spacing: null !default;
 $kendo-tooltip-border-width: null !default;
 $kendo-tooltip-border-radius: null !default;
 

package/scss/components/treelist/_layout.scss

@@ -1,4 +1,5 @@
 @use "../icons/_variables.scss" as *;
+@use "../../spacing/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../../z-index/index.scss" as *;
 
@@ -97,8 +98,8 @@
     }
 
     .k-treelist-toggle {
-        margin-block: calc( #{$kendo-icon-padding} * -1 );
-        padding: $kendo-icon-padding;
+        margin-block: calc( #{k-spacing(1)} * -1 );
+        padding: k-spacing(1);
         box-sizing: content-box;
         cursor: pointer;
     }

package/scss/components/treeview/_layout.scss

@@ -127,14 +127,14 @@
         cursor: pointer;
     }
     .k-treeview-toggle .k-icon {
-        padding: $kendo-icon-padding;
+        padding: k-spacing(1);
         box-sizing: content-box;
     }
 
 
     // Loading icon
     .k-treeview-loading {
-        margin-inline-end: $kendo-icon-spacing;
+        margin-inline-end: $kendo-treeview-item-icon-spacing;
     }
 
 
@@ -161,7 +161,7 @@
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-treeview-item-icon-spacing;
         }
     }
 

package/scss/components/treeview/_variables.scss

@@ -2,6 +2,8 @@
 
 $kendo-treeview-default-size: null !default;
 $kendo-treeview-gap: null !default;
+
+$kendo-treeview-item-icon-spacing: null !default;
 $kendo-treeview-border-radius: null !default;
 
 $kendo-treeview-font-family: null !default;

package/scss/components/upload/_layout.scss

@@ -183,7 +183,7 @@
         }
 
         .k-upload-files .k-file-info {
-            min-height: $kendo-icon-size-xxl;
+            min-height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
             display: block;
             overflow: hidden;
             flex: 1 0 0;
@@ -192,7 +192,7 @@
         .k-multiple-files-wrapper,
         .k-file-single > .k-file-info {
             margin-inline-start: $kendo-upload-file-info-margin;
-            min-height: $kendo-icon-size-xxl;
+            min-height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
             display: block;
             overflow: hidden;
             flex: 1 0 0;

package/scss/mixins/_animation.scss

@@ -0,0 +1,21 @@
+// Shimmer
+
+@keyframes k-shimmer {
+    0% { background-position: 200% center; }
+    100% { background-position: -200% center; }
+}
+
+@mixin text-shimmer() {
+    background: linear-gradient(
+        90deg,
+        currentColor 20%,
+        color-mix(in srgb, currentColor 50%, transparent) 50%,
+        currentColor 80%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: k-shimmer 2s linear infinite;
+    display: inline-block;
+}

package/scss/mixins/index.scss

@@ -1,3 +1,4 @@
+@forward "./_animation.scss";
 @forward "./_border-radius.scss";
 @forward "./_box-shadow.scss";
 @forward "./_disabled.scss";