@progress/kendo-theme-bootstrap 4.41.3-dev.3 → 4.42.1-dev.1

package/modules/@progress/kendo-theme-default/scss/input/_layout.scss

@@ -116,7 +116,9 @@
     }
 
     // Input with icon styles
-    .k-input-icon {
+    .k-input-icon,
+    .k-input-validation-icon,
+    .k-input-loading-icon {
         width: $input-icon-width;
         height: $input-icon-height;
         display: inline-flex;
@@ -124,21 +126,6 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-
-        .k-ie9 & {
-            position: absolute;
-            height: 100%;
-            right: 0;
-            top: 0;
-        }
-
-        .k-rtl &,
-        [dir="rtl"] & {
-            .k-ie9 & {
-                left: 0;
-                right: auto;
-            }
-        }
     }
 
 

package/modules/@progress/kendo-theme-default/scss/map/_layout.scss

@@ -75,6 +75,8 @@
         .k-button {
             margin: 0;
             padding: 0;
+            width: auto;
+            height: auto;
             border-radius: 100%;
             line-height: 1;
             box-shadow: none;

package/modules/@progress/kendo-theme-default/scss/menu/_layout.scss

@@ -86,7 +86,6 @@
             height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            flex-shrink: 0;
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/multiselect/_layout.scss

@@ -107,18 +107,10 @@
 
             // Clear value
             .k-clear-value {
-                visibility: hidden;
                 position: absolute;
                 top: 0;
                 right: 0;
             }
-            &:hover,
-            &.k-state-hover,
-            &.k-state-focused {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
 
             // Select
             > .k-select {
@@ -140,17 +132,6 @@
             right: $multiselect-clear-right;
         }
 
-
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            > .k-multiselect-wrap {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
         &[dir="rtl"],
         .k-rtl & {
             text-align: right;

package/modules/@progress/kendo-theme-default/scss/numerictextbox/_layout.scss

@@ -81,23 +81,12 @@
             top: -$spinner-icon-offset;
         }
 
-        .k-i-warning {
-            align-self: center;
-            margin-right: $spacer-x / 2;
-        }
-
 
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
             text-align: right;
 
-            .k-numeric-wrap .k-i-warning {
-                align-self: center;
-                margin-right: 0;
-                margin-left: $spacer-x / 2;
-            }
-
             .k-select {
                 @include border-left-radius-only( $input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_layout.scss

@@ -455,6 +455,27 @@
 }
 
 
+@include exports( "pivotgrid/layout/export" ) {
+
+    .k-pdf-export-shadow {
+
+        .k-pivotgrid {
+            height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        .k-pivotgrid-values  {
+            height: auto;
+            overflow: visible;
+        }
+
+        .k-pivotgrid-column-headers .k-pivotgrid-table {
+            padding-inline-end: 0;
+        }
+
+    }
+}
+
+
 @include exports("pivotgrid/layout/legacy") {
 
     .k-pivot {

package/modules/@progress/kendo-theme-default/scss/popup/_layout.scss

@@ -17,11 +17,6 @@
             border-width: 0;
         }
 
-        &.k-colorpicker-popup {
-            display: flex;
-            align-items: center;
-        }
-
         .k-item {
             outline: none;
         }
@@ -303,10 +298,6 @@
                 border-width: 1px;
             }
         }
-
-        .k-separator {
-            height: 0;
-        }
     }
 
     .k-virtual-content {

package/modules/@progress/kendo-theme-default/scss/searchbox/_layout.scss

@@ -5,6 +5,7 @@
         @include border-radius( $searchbox-border-radius );
         border-width: 1px;
         border-style: solid;
+        box-sizing: border-box;
         font-family: $searchbox-font-family;
         font-size: $searchbox-font-size;
         line-height: $searchbox-line-height;

package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss

@@ -679,10 +679,6 @@
     .k-spreadsheet-popup {
         padding: 0;
 
-        .k-separator {
-            display: block;
-        }
-
         .k-button {
             @include border-radius( 0 );
             border-width: 0;

package/modules/@progress/kendo-theme-default/scss/utils/_border.scss

@@ -43,9 +43,9 @@
     $utils-border-radius: (
         default: map-get( $spacing, 1 ),
         0: 0,
-        sm: map-get( $spacing, 1 ) / 2,
-        md: map-get( $spacing, 1 ),
-        lg: map-get( $spacing, 2 ),
+        sm: ( map-get( $spacing, 1 ) / 4 ),
+        md: ( map-get( $spacing, 1 ) / 2 ),
+        lg: map-get( $spacing, 1 ),
         circle: 50%,
         pill: 9999px
     ) !default;
@@ -93,6 +93,11 @@
                 $_selector-suffix: if( $radius == default, "", "-#{$radius}" );
 
                 .k-#{$_selector-base}#{$_selector-suffix} {
+                    @each $prop in $props {
+                        #{$prop}: $value;
+                    }
+                }
+                .\!k-#{$_selector-base}#{$_selector-suffix} {
                     @each $prop in $props {
                         #{$prop}: $value !important;
                     }

package/modules/@progress/kendo-theme-default/scss/utils/_spacing.scss

@@ -111,4 +111,28 @@
         }
     }
 
+    // @name k-gap-VALUE
+    // @description This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-x-VALUE
+    // @description This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-y-VALUE
+    // @description This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
+    // @group spacing
+
+    // Gap
+    .k-no-gap { gap: 0 !important; }
+
+    @each $size, $val in $spacing {
+        .k-gap-#{$size}     { gap: $val; }
+        .k-gap-x-#{$size}   { column-gap: $val; }
+        .k-gap-y-#{$size}   { row-gap: $val; }
+
+        .\!k-gap-#{$size}   { gap: $val !important; }
+        .\!k-gap-x-#{$size} { column-gap: $val !important; }
+        .\!k-gap-y-#{$size} { row-gap: $val !important; }
+    }
 }

package/modules/@progress/kendo-theme-default/scss/window/_layout.scss

@@ -129,6 +129,7 @@
     }
 
     // Buttons Layout
+    .k-window-buttons,
     .k-window-buttongroup {
         @include border-bottom-radius( $window-border-radius );
         padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "4.41.3-dev.3",
+  "version": "4.42.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.41.3-dev.3",
+    "@progress/kendo-theme-default": "^4.42.1-dev.1",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "fa5c9603df4ce625274a6478de659303b4d7b871"
+  "gitHead": "0c0e482d04f4474619507a96d33f9e127c116cd1"
 }

package/scss/all.scss

@@ -49,6 +49,10 @@
 
 // Inputs
 @import "autocomplete/_index.scss";
+@import "color-preview/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
 @import "datetime/_index.scss";

package/scss/button/_index.scss

@@ -2,9 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
+@import "../typography/_variables.scss";
 
 
 // Component

package/scss/chat/_variables.scss

@@ -32,12 +32,12 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $chat-padding-x !default;
-$chat-message-box-padding-y: 10px !default;
+$chat-message-box-padding-x: $input-padding-x !default;
+$chat-message-box-padding-y: $input-padding-y !default;
 
-$chat-toolbar-padding-x: $chat-padding-x !default;
-$chat-toolbar-padding-y: 10px !default;
-$chat-toolbar-spacing: 20px !default;
+$chat-toolbar-padding-x: $toolbar-padding-x !default;
+$chat-toolbar-padding-y: $toolbar-padding-y !default;
+$chat-toolbar-spacing: $toolbar-spacing !default;
 $chat-toolbar-bg: $toolbar-bg !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;

package/scss/color-preview/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "../colorgradient/images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/color-preview/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss";

package/scss/color-preview/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_theme.scss";

package/scss/color-preview/_variables.scss

@@ -0,0 +1,13 @@
+// Color Preview
+$color-preview-border-radius: $border-radius !default;
+$color-preview-border-width: 1px !default;
+$color-preview-bg: null !default;
+$color-preview-text: null !default;
+$color-preview-border: $component-border !default;
+$color-preview-hover-border: $hovered-border !default;
+
+$color-preview-no-color-bg: $white !default;
+$color-preview-no-color-text: $error !default;
+$color-preview-no-color-border: null !default;
+
+$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_index.scss

@@ -0,0 +1,14 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../color-preview/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/coloreditor/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss";

package/scss/coloreditor/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_theme.scss";

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,28 @@
+// Coloreditor/FlatColorPicker
+$coloreditor-spacer: map-get( $spacing, 4 ) !default;
+
+$coloreditor-min-width: 328px !default;
+$coloreditor-border-width: 1px !default;
+$coloreditor-border-radius: $border-radius !default;
+$coloreditor-font-family: $font-family !default;
+$coloreditor-font-size: $font-size !default;
+$coloreditor-line-height: $line-height !default;
+$coloreditor-bg: $component-bg !default;
+$coloreditor-text: $component-text !default;
+$coloreditor-border: $component-border !default;
+
+$coloreditor-focus-border: $hovered-border !default;
+$coloreditor-focus-shadow: null !default;
+
+$coloreditor-header-padding-y: $coloreditor-spacer !default;
+$coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
+$coloreditor-header-actions-gap: ( $coloreditor-spacer / 2 ) !default;
+
+$coloreditor-preview-gap: 2px !default;
+$coloreditor-color-preview-width: 34px !default;
+$coloreditor-color-preview-height: 14px !default;
+
+$coloreditor-views-padding-y: $coloreditor-spacer !default;
+$coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
+$coloreditor-views-gap: $coloreditor-spacer !default;
+

package/scss/colorgradient/_index.scss

@@ -0,0 +1,19 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+@import "../utils/_spacer.scss";
+@import "../icons/_index.scss";
+@import "../button/_index.scss";
+@import "../slider/_index.scss";
+@import "../textbox/_index.scss";
+@import "../numerictextbox/_index.scss";
+
+
+// Component
+@import "images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorgradient/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorgradient/_layout.scss";

package/scss/colorgradient/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorgradient/_theme.scss";

package/scss/colorgradient/_variables.scss

@@ -0,0 +1,51 @@
+// ColorGradient
+$colorgradient-spacer: map-get( $spacing, 4 ) !default;
+
+$colorgradient-width: 328px !default;
+$colorgradient-border-width: 1px !default;
+$colorgradient-border-radius: $border-radius !default;
+$colorgradient-padding-y: $colorgradient-spacer !default;
+$colorgradient-padding-x: $colorgradient-padding-y !default;
+$colorgradient-gap: $colorgradient-spacer !default;
+$colorgradient-font-family: $font-family !default;
+$colorgradient-font-size: $font-size !default;
+$colorgradient-line-height: $line-height !default;
+$colorgradient-bg: $component-bg !default;
+$colorgradient-text: $component-text !default;
+$colorgradient-border: $component-border !default;
+
+$colorgradient-focus-border: $hovered-border !default;
+$colorgradient-focus-shadow: null !default;
+
+$colorgradient-canvas-border-radius: $border-radius !default;
+$colorgradient-canvas-gap: map-get( $spacing, 3 ) !default;
+$colorgradient-canvas-rectangle-height: 180px !default;
+
+$colorgradient-slider-track-size: 10px !default;
+$colorgradient-slider-border-radius: 10px !default;
+$colorgradient-slider-draghandle-border-width: 3px !default;
+
+$colorgradient-slider-vertical-size: 180px !default;
+$colorgradient-slider-horizontal-size: 100% !default;
+
+$colorgradient-draghandle-width: 14px !default;
+$colorgradient-draghandle-height: 14px !default;
+$colorgradient-draghandle-border-width: 1px !default;
+$colorgradient-draghandle-border-radius: 50% !default;
+$colorgradient-draghandle-bg: transparent !default;
+$colorgradient-draghandle-text: null !default;
+$colorgradient-draghandle-border: rgba( $white, .8) !default;
+$colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+$colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
+$colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
+
+$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+
+$colorgradient-input-width: 56px !default;
+$colorgradient-input-gap: ( $colorgradient-spacer / 2 ) !default;
+$colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
+$colorgradient-input-label-text: $disabled-text !default;
+
+$colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
+$colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;

package/scss/colorgradient/images/alpha-slider-bgr.scss

@@ -0,0 +1,3 @@
+@include exports("alpha-slider-bgr.png") {
+    @include register-data-uri("alpha-slider-bgr.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
+}

package/scss/colorpalette/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorpalette/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorpalette/_layout.scss";

package/scss/colorpalette/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorpalette/_theme.scss";

package/scss/colorpalette/_variables.scss

@@ -0,0 +1,10 @@
+// Colorpalette
+$colorpalette-font-family: $font-family !default;
+$colorpalette-font-size: $font-size !default;
+$colorpalette-line-height: 0 !default;
+
+$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-height: $colorpalette-tile-width !default;
+$colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/scss/colorpicker/_index.scss

@@ -5,15 +5,13 @@
 @import "../common/_index.scss";
 @import "../utils/_flex.scss";
 @import "../button/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../slider/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
 @import "_variables.scss";
-@import "images/alpha-slider-bgr.scss";
-@import "images/alpha-slider-bgr-reversed.scss";
 @import "_layout.scss";
 @import "_theme.scss";

package/scss/colorpicker/_variables.scss

@@ -1,19 +1,7 @@
 // Colorpicker
-$colorpicker-rect-padding: 15px !default;
-$colorpicker-margin: 8px !default;
-$colorpicker-width: 349px !default;
-$colorpicker-border-width: 1px !default;
 $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
-$colorpicker-draghandle-width: 14px !default;
-$colorpicker-draghandle-height: 14px !default;
-$colorpicker-slider-track-size: 10px !default;
-$colorpicker-slider-border-radius: 10px !default;
-$colorpicker-input-width: 52px !default;
-$colorpicker-hex-input-width: 85px !default;
-$colorpicker-input-padding-x: $input-padding-y !default;
-$colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
@@ -32,9 +20,3 @@ $colorpicker-focused-text: $button-active-text !default;
 $colorpicker-focused-border: $button-active-border !default;
 $colorpicker-focused-gradient: $button-active-gradient !default;
 $colorpicker-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
-$colorpicker-draghandle-focused-shadow: 0 1px 4px black !default;
-
-$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
-$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/scss/editor/_variables.scss

@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
 $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $editor-export-tool-icon-margin-x: .25em !default;
+
+$editor-resize-handle-size: 5px !default;
+$editor-resize-handle-border-width: 1px !default;
+$editor-resize-handle-border: #000000 !default;
+$editor-resize-handle-bg: #ffffff !default;
+
+$editor-selectednode-outline-width: 2px !default;
+$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length