@progress/kendo-theme-default 6.4.1-dev.1 → 6.5.0-dev.1

package/scss/treeview/_layout.scss

@@ -73,13 +73,18 @@
 
     // Treeview toggle
     .k-treeview-toggle {
-        margin-left: -$kendo-treeview-indent;
+        margin-inline-start: -$kendo-treeview-indent;
         flex: none;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         cursor: pointer;
     }
+    .k-treeview-toggle .k-icon,
+    .k-treeview-toggle .k-svg-icon {
+        padding: $kendo-icon-padding;
+        box-sizing: content-box;
+    }
 
 
     // Loading icon
@@ -91,8 +96,6 @@
     // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
-        margin-left: $kendo-icon-spacing;
-        margin-right: $kendo-icon-spacing;
         align-self: center;
     }
 
@@ -148,12 +151,6 @@
             padding-right: $kendo-treeview-indent;
         }
 
-        // Treeview toggle
-        .k-treeview-toggle {
-            margin-left: 0;
-            margin-right: -$kendo-treeview-indent;
-        }
-
         // Loading
         .k-treeview-loading {
             margin-right: 0;
@@ -178,6 +175,8 @@
         $_line-height: k-map-get( $size-props, line-height);
         $_item-padding-x: k-map-get( $size-props, item-padding-x);
         $_item-padding-y: k-map-get( $size-props, item-padding-y);
+        $_checkbox-padding-x: k-map-get( $size-props, checkbox-padding-x );
+        $_checkbox-padding-y: k-map-get( $size-props, checkbox-padding-y );
 
         .k-treeview-#{$size} {
             font-size: $_font-size;
@@ -187,6 +186,11 @@
                 padding-block: $_item-padding-y;
                 padding-inline: $_item-padding-x;
             }
+
+            .k-checkbox-wrap {
+                padding-block: $_checkbox-padding-y;
+                padding-inline: $_checkbox-padding-x;
+            }
         }
     }
 

package/scss/treeview/_variables.scss

@@ -29,7 +29,7 @@ $kendo-treeview-md-line-height: $kendo-line-height-md !default;
 $kendo-treeview-lg-line-height: $kendo-line-height-lg !default;
 /// The indentation of child groups in the TreeView.
 /// @group treeview
-$kendo-treeview-indent: 16px !default;
+$kendo-treeview-indent: 24px !default;
 
 /// The horizontal padding of the TreeView items.
 /// @group treeview
@@ -62,6 +62,25 @@ $kendo-treeview-item-border-width: 0px !default;
 /// @group treeview
 $kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 
+/// The horizontal padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
+/// The horizontal padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
+/// The vertical padding of the checkbox in the small TreeView.
+/// @group treeview
+$kendo-treeview-sm-checkbox-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
+/// The vertical padding of the checkbox in the medium TreeView.
+/// @group treeview
+$kendo-treeview-md-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y !default;
+/// The vertical padding of the checkbox in the large TreeView.
+/// @group treeview
+$kendo-treeview-lg-checkbox-padding-y: null !default;
+
 
 /// The sizes map of the TreeView.
 /// @group treeview
@@ -70,19 +89,25 @@ $kendo-treeview-sizes: (
         font-size: $kendo-treeview-sm-font-size,
         line-height: $kendo-treeview-sm-line-height,
         item-padding-x: $kendo-treeview-sm-item-padding-x,
-        item-padding-y: $kendo-treeview-sm-item-padding-y
+        item-padding-y: $kendo-treeview-sm-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y
     ),
     md: (
         font-size: $kendo-treeview-md-font-size,
         line-height: $kendo-treeview-md-line-height,
         item-padding-x: $kendo-treeview-md-item-padding-x,
-        item-padding-y: $kendo-treeview-md-item-padding-y
+        item-padding-y: $kendo-treeview-md-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y
     ),
     lg: (
         font-size: $kendo-treeview-lg-font-size,
         line-height: $kendo-treeview-lg-line-height,
         item-padding-x: $kendo-treeview-lg-item-padding-x,
-        item-padding-y: $kendo-treeview-lg-item-padding-y
+        item-padding-y: $kendo-treeview-lg-item-padding-y,
+        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
+        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y
     )
 ) !default;
 
@@ -159,3 +184,4 @@ $kendo-treeview-loadmore-focus-border: null !default;
 /// The box shadow of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
+

package/scss/upload/_variables.scss

@@ -1,46 +1,99 @@
 // Upload
 
+/// The width of the border around the Upload.
+/// @group upload
 $kendo-upload-border-width: 1px !default;
+/// The font family of the Upload.
+/// @group upload
 $kendo-upload-font-family: $kendo-font-family !default;
+/// The font size of the Upload.
+/// @group upload
 $kendo-upload-font-size: $kendo-font-size-md !default;
+/// The line height of the Upload.
+/// @group upload
 $kendo-upload-line-height: $kendo-line-height-md !default;
+/// The maximum height of the list with uploaded items.
+/// @group upload
 $kendo-upload-max-height: 300px !default;
 
-$kendo-upload-bg: $kendo-component-bg !default;
+/// The text color of the Upload.
+/// @group upload
 $kendo-upload-text: $kendo-component-text !default;
+/// The background color of the Upload.
+/// @group upload
+$kendo-upload-bg: $kendo-component-bg !default;
+/// The border color of the Upload.
+/// @group upload
 $kendo-upload-border: $kendo-component-border !default;
 
+/// The horizontal padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The text color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-text: $kendo-component-header-text !default;
+/// The background color of the Upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The border color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
+/// The background color of the hovered Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
+/// The text color of the Upload status message.
+/// @group upload
 $kendo-upload-status-text: $kendo-subtle-text !default;
+/// The opacity of the Upload status message.
+/// @group upload
 $kendo-upload-status-text-opacity: null !default;
 
+/// The horizontal padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The vertical spacing between uploaded batch items.
+/// @group upload
 $kendo-upload-multiple-items-spacing: 12px !default;
 
+/// The font size of the Upload validation message.
+/// @group upload
 $kendo-upload-validation-font-size: 11px !default;
+/// The horizontal spacing of the Upload status icon.
+/// @group upload
 $kendo-upload-icon-spacing: $kendo-icon-spacing !default;
+/// The color of the uploaded items icon.
+/// @group upload
 $kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$kendo-upload-item-image-width: 30px !default;
-$kendo-upload-item-image-height: 30px !default;
-$kendo-upload-item-image-border: 0px !default; // TODO: remove
-
+/// The thickness of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-thickness: 2px !default;
+/// The background color of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-bg: $kendo-color-info !default;
 
-$kendo-upload-success-bg: $kendo-color-success !default;
+/// The success text color of the Upload.
+/// @group upload
 $kendo-upload-success-text: $kendo-color-success !default;
+/// The success background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-success-bg: $kendo-color-success !default;
 
-$kendo-upload-error-bg: $kendo-color-error !default;
+/// The error text color of the Upload.
+/// @group upload
 $kendo-upload-error-text: $kendo-color-error !default;
-$kendo-upload-error-border: $kendo-color-error !default;
+/// The error background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-error-bg: $kendo-color-error !default;
 
+/// The shadow of the focused Upload button, actions and uploaded items.
+/// @group upload
 $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/window/_variables.scss

@@ -1,53 +1,108 @@
 @import "../action-buttons/_variables.scss";
 
-
 // Window
 
+/// The width of the border around the Window.
+/// @group window
 $kendo-window-border-width: 0px !default;
+/// The border radius of the Window.
+/// @group window
 $kendo-window-border-radius: 0px !default;
+/// The font family of the Window.
+/// @group window
 $kendo-window-font-family: $kendo-font-family !default;
+/// The font size of the Window.
+/// @group window
 $kendo-window-font-size: $kendo-font-size-md !default;
+/// The line height of the Window.
+/// @group window
 $kendo-window-line-height: 1.25 !default;
 
+/// The horizontal padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-x: 16px !default;
+/// The vertical padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-y: 12px !default;
+/// The width of the border of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border-width: 0 0 1px !default;
+/// The style of the border of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border-style: solid !default;
 
+/// The font size of the title of the Window.
+/// @group window
 $kendo-window-title-font-size: $kendo-font-size-lg !default;
+/// The line height of the title of the Window.
+/// @group window
 $kendo-window-title-line-height: 1.25 !default;
 
+/// The spacing between the buttons in the Window titlebar.
+/// @group window
 $kendo-window-actions-gap: null !default;
-
+/// The opacity of the buttons in the Window titlebar.
+/// @group window
 $kendo-window-action-opacity: null !default;
+/// The opacity of the hovered buttons in the Window titlebar.
+/// @group window
 $kendo-window-action-hover-opacity: null !default;
 
+/// The horizontal padding of the content of the Window.
+/// @group window
 $kendo-window-inner-padding-x: 16px !default;
+/// The vertical padding of the content of the Window.
+/// @group window
 $kendo-window-inner-padding-y: 16px !default;
 
+/// The horizontal padding of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-padding-x: $kendo-actions-padding-x !default;
+/// The vertical padding of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-padding-y: $kendo-actions-padding-y !default;
+/// The width of the top border of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-border-width: 1px !default;
 
+/// The background color of the Window.
+/// @group window
 $kendo-window-bg: $kendo-component-bg !default;
+/// The text color of the Window.
+/// @group window
 $kendo-window-text: $kendo-component-text !default;
+/// The border color of the Window.
+/// @group window
 $kendo-window-border: $kendo-component-border !default;
+/// The box shadow of the Window.
+/// @group window
+$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+/// The box shadow of the focused Window.
+/// @group window
+$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
+/// The background color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-bg: $kendo-component-header-bg !default;
+/// The text color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-text: $kendo-component-header-text !default;
+/// The border color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border: inherit !default;
+/// The background gradient of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-gradient: null !default;
 
-$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
-$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
-
+/// The map of the width for the different Window sizes.
+/// @group window
 $kendo-window-sizes: (
     sm: 300px,
     md: 800px,
     lg: 1200px
 ) !default;
 
-/// Theme colors map for the window.
+/// The theme colors map for the Window.
 /// @group window
 $kendo-window-theme-colors: (
     "primary": k-map-get($kendo-theme-colors, "primary"),