@progress/kendo-theme-core 10.3.2-dev.1 → 10.4.0

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": "10.3.2-dev.1",
+  "version": "10.4.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "e5d03994478433e3ebee6e8050002d4960479017"
+  "gitHead": "1938734e5ab830898c160ff8b1263c537dd3a676"
 }

package/scss/components/action-buttons/_layout.scss

@@ -42,6 +42,9 @@
     .k-actions-end {
         justify-content: flex-end;
     }
+    .k-actions-justify {
+        justify-content: space-between;
+    }
     .k-actions-stretched > * {
         flex: 1 0 0%;
     }
@@ -54,6 +57,7 @@
     }
     .k-actions-vertical {
         flex-flow: column nowrap;
+        align-items: normal;
     }
 
 

package/scss/components/action-sheet/_index.scss

@@ -19,7 +19,6 @@
         @include kendo-popup--styles();
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--theme();
-        @include kendo-utils--layout--overflow();
         @include kendo-utils--typography--text-align();
     }
 }

package/scss/components/action-sheet/_layout.scss

@@ -62,13 +62,14 @@
         max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
-        border-color: transparent;
         box-sizing: border-box;
         font-size: $kendo-actionsheet-font-size;
         font-family: $kendo-actionsheet-font-family;
         line-height: $kendo-actionsheet-line-height;
         overflow: hidden;
         position: relative;
+        display: flex;
+        flex-flow: column nowrap;
 
         *,
         *::before,
@@ -82,10 +83,8 @@
     .k-actionsheet-titlebar {
         padding-block: $kendo-actionsheet-titlebar-padding-y;
         padding-inline: $kendo-actionsheet-titlebar-padding-x;
-        border-width: 0;
         border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
-        border-style: solid;
-        border-color: transparent;
+        border-bottom-style: solid;
         font-size: $kendo-actionsheet-titlebar-font-size;
         font-family: $kendo-actionsheet-titlebar-font-family;
         line-height: $kendo-actionsheet-titlebar-line-height;
@@ -124,6 +123,8 @@
     // Actionsheet footer
     .k-actionsheet-footer {
         flex: none;
+        border-top-width: $kendo-actionsheet-footer-border-width;
+        border-top-style: solid;
     }
 
 
@@ -235,14 +236,9 @@
         width: 100%;
         font-size: $kendo-adaptive-actionsheet-font-size;
 
-        // TMP: this should be moved to action sheet
-        display: flex;
-        flex-flow: column nowrap;
-
         .k-actionsheet-titlebar {
             padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
             padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
-            border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
         }
 
         .k-actionsheet-content {

package/scss/components/action-sheet/_theme.scss

@@ -24,6 +24,15 @@
         );
         @include box-shadow( $kendo-actionsheet-titlebar-shadow );
     }
+    .k-actionsheet-footer {
+        @include fill(
+            $kendo-actionsheet-footer-text,
+            $kendo-actionsheet-footer-bg,
+            $kendo-actionsheet-footer-border,
+            $kendo-actionsheet-footer-gradient
+        );
+        @include box-shadow( $kendo-actionsheet-footer-shadow );
+    }
     .k-actionsheet-subtitle {
         @include fill( $color: $kendo-actionsheet-subtitle-text );
     }
@@ -92,11 +101,6 @@
     }
 
 
-    // Adaptive Actionsheet
-    .k-adaptive-actionsheet .k-actionsheet-titlebar {
-        @include fill( $border: $kendo-adaptive-actionsheet-titlebar-border );
-    }
-
 }
 
 

package/scss/components/action-sheet/_variables.scss

@@ -39,6 +39,14 @@ $kendo-actionsheet-subtitle-font-size: null !default;
 $kendo-actionsheet-subtitle-line-height: null !default;
 $kendo-actionsheet-subtitle-text: null !default;
 
+$kendo-actionsheet-footer-border-width: null !default;
+
+$kendo-actionsheet-footer-bg: null !default;
+$kendo-actionsheet-footer-text: null !default;
+$kendo-actionsheet-footer-border: null !default;
+$kendo-actionsheet-footer-gradient: null !default;
+$kendo-actionsheet-footer-shadow: null !default;
+
 
 // Actionsheet item
 $kendo-actionsheet-item-min-height: null !default;
@@ -77,10 +85,8 @@ $kendo-actionsheet-item-disabled-opacity: null !default;
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: null !default;
-$kendo-adaptive-actionsheet-titlebar-border-width: null !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: null !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: null !default;
-$kendo-adaptive-actionsheet-titlebar-border: null !default;
 
 $kendo-adaptive-actionsheet-content-padding-y: null !default;
 $kendo-adaptive-actionsheet-content-padding-x: null !default;

package/scss/components/column-menu/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-column-menu--styles() {
+    @include import-once( "column-menu" ) {
+        @include kendo-column-menu--layout();
+        @include kendo-column-menu--theme();
+    }
+}

package/scss/components/column-menu/_layout.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+@use "_variables.scss" as *;
+
+@mixin kendo-column-menu--layout-base() {
+    .k-column-menu {}
+
+    // Sizes
+    @each $size, $value in $kendo-column-menu-sizes {
+        $_padding-x: map.get($value, padding-x);
+        $_padding-y: map.get($value, padding-y);
+        $_font-size: map.get($value, font-size);
+        $_line-height: map.get($value, line-height);
+
+        .k-column-menu-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-columnmenu-item,
+            .k-column-list-item {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                font-size: $_font-size;
+                line-height: $_line-height;
+            }
+        }
+    }
+}
+
+@mixin kendo-column-menu--layout() {
+    @include kendo-column-menu--layout-base();
+}

package/scss/components/column-menu/_theme.scss

@@ -0,0 +1,7 @@
+@mixin kendo-column-menu--theme-base() {
+    .k-column-menu {}
+}
+
+@mixin kendo-column-menu--theme() {
+    @include kendo-column-menu--theme-base();
+}

package/scss/components/column-menu/_variables.scss

@@ -0,0 +1,44 @@
+$kendo-column-menu-item-padding-x: null !default;
+$kendo-column-menu-item-padding-y: null !default;
+
+$kendo-column-menu-item-sm-padding-x: null !default;
+$kendo-column-menu-item-sm-padding-y: null !default;
+
+$kendo-column-menu-item-md-padding-x: null !default;
+$kendo-column-menu-item-md-padding-y: null !default;
+
+$kendo-column-menu-item-lg-padding-x: null !default;
+$kendo-column-menu-item-lg-padding-y: null !default;
+
+$kendo-column-menu-font-size: null !default;
+$kendo-column-menu-sm-font-size: null !default;
+$kendo-column-menu-md-font-size: null !default;
+$kendo-column-menu-lg-font-size: null !default;
+
+$kendo-column-menu-line-height: null !default;
+$kendo-column-menu-sm-line-height: null !default;
+$kendo-column-menu-md-line-height: null !default;
+$kendo-column-menu-lg-line-height: null !default;
+
+$kendo-column-menu-font-family: null !default;
+
+$kendo-column-menu-sizes: (
+    sm: (
+        padding-x: $kendo-column-menu-item-sm-padding-x,
+        padding-y: $kendo-column-menu-item-sm-padding-y,
+        font-size: $kendo-column-menu-item-sm-font-size,
+        line-height: $kendo-column-menu-sm-line-height
+    ),
+    md: (
+        padding-x: $kendo-column-menu-item-md-padding-x,
+        padding-y: $kendo-column-menu-item-md-padding-y,
+        font-size: $kendo-column-menu-item-md-font-size,
+        line-height: $kendo-column-menu-md-line-height
+    ),
+    lg: (
+        padding-x: $kendo-column-menu-item-lg-padding-x,
+        padding-y: $kendo-column-menu-item-lg-padding-y,
+        font-size: $kendo-column-menu-item-lg-font-size,
+        line-height: $kendo-column-menu-lg-line-height
+    )
+) !default;

package/scss/components/grid/_index.scss

@@ -23,6 +23,7 @@
 @use "../list/_index.scss" as *;
 @use "../table/_index.scss" as *;
 @use "../tabstrip/_index.scss" as *;
+@use "../column-menu/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";

package/scss/components/grid/_layout.scss

@@ -1266,6 +1266,27 @@
                 align-items: center;
             }
         }
+
+        .k-columnmenu-indicators {
+            padding-inline: k-spacing(1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        // TODO: Check if k-columnmenu-item should not be flex by default
+        .k-columnmenu-item:has(> .k-columnmenu-item-actions, > .k-columnmenu-indicators) {
+            display: flex;
+            align-items: center;
+        }
+
+        .k-columnmenu-drag-handle {
+            margin-inline-end: k-spacing(1.5);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: move;
+        }
     }
     .k-column-menu-tabbed {
         border-radius: $kendo-tabstrip-item-border-radius $kendo-tabstrip-item-border-radius 0 0;
@@ -1339,7 +1360,8 @@
         }
     }
 
-    .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
+    .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper,
+    .k-column-menu-footer {
         border-top: 1px solid;
         border-top-color: $kendo-popup-border;
     }

package/scss/components/grid/_theme.scss

@@ -90,7 +90,7 @@
             color: $kendo-grid-hover-text;
             background-color: $kendo-grid-hover-bg;
         }
-        
+
         // Selected state
         td.k-selected,
         .k-table-row.k-selected > td,
@@ -450,6 +450,10 @@
 
     }
 
+    .k-columnmenu-indicators {
+        color: $kendo-grid-sorting-indicator-text;
+    }
+
 }
 
 

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

@@ -169,6 +169,13 @@
                     width: 100%;
                     height: 100%;
                 }
+
+                .k-text-widget-annotation .k-annotation-content {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    pointer-events: none;
+                }
             }
 
             .k-annotation-editor-layer {