@progress/kendo-theme-default 6.4.0-dev.0 → 6.4.0-dev.2

package/scss/pager/_layout.scss

@@ -28,18 +28,7 @@
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
-            .k-i-caret-alt-to-left,
-            .k-i-caret-alt-to-right,
-            .k-i-caret-alt-left,
-            .k-i-caret-alt-right,
-            .k-i-arrow-end-left,
-            .k-i-arrow-60-left,
-            .k-i-arrow-60-right,
-            .k-i-arrow-end-right,
-            .k-i-seek-w,
-            .k-i-arrow-w,
-            .k-i-arrow-e,
-            .k-i-seek-e {
+            .k-pager-nav .k-button-icon {
                 transform: scaleX(-1);
             }
         }

package/scss/pager/_variables.scss

@@ -3,126 +3,150 @@
 
 // Pager
 
-/// Horizontal padding of the pager according to the pager size.
+/// The horizontal padding of the Pager.
 /// @group pager
 $kendo-pager-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the small Pager.
+/// @group pager
 $kendo-pager-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium Pager.
+/// @group pager
 $kendo-pager-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large Pager.
+/// @group pager
 $kendo-pager-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-/// Vertical padding of the pager according to the pager size.
+/// The vertical padding of the Pager.
 /// @group pager
 $kendo-pager-padding-y: $kendo-pager-padding-x !default;
+/// The vertical padding of the small Pager.
+/// @group pager
 $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+/// The vertical padding of the medium Pager.
+/// @group pager
 $kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+/// The vertical padding of the large Pager.
+/// @group pager
 $kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
 
-/// Minimum width of the pager items according to the pager size.
+/// The minimum width of the items in the small Pager.
 /// @group pager
 $kendo-pager-sm-item-min-width: $kendo-button-sm-calc-size !default;
+/// The minimum width of the items in the medium Pagers.
+/// @group pager
 $kendo-pager-md-item-min-width: $kendo-button-md-calc-size !default;
+/// The minimum width of the items in the large Pagers.
+/// @group pager
 $kendo-pager-lg-item-min-width: $kendo-button-lg-calc-size !default;
 
-/// Margin between pager item groups according to the pager size.
+/// The margin between the item groups in the small Pager.
 /// @group pager
 $kendo-pager-sm-item-group-spacing: k-map-get( $kendo-spacing, 3 ) !default;
+/// The margin between the item groups in the medium Pager.
+/// @group pager
 $kendo-pager-md-item-group-spacing: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The margin between the item groups in the large Pager.
+/// @group pager
 $kendo-pager-lg-item-group-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 
-/// Border width of the pager.
+/// The border width of the Pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
-/// Font family of the pager.
+/// The font family of the Pager.
 /// @group pager
 $kendo-pager-font-family: $kendo-font-family !default;
-/// Font size of the pager.
+/// The font size of the Pager.
 /// @group pager
 $kendo-pager-font-size: $kendo-font-size-md !default;
-/// Line height of the pager.
+/// The line height of the Pager.
 /// @group pager
 $kendo-pager-line-height: $kendo-line-height-md !default;
-/// Background color of the pager.
+/// The background color of the Pager.
 /// @group pager
 $kendo-pager-bg: $kendo-component-header-bg !default;
-/// Text color of the pager.
+/// The text color of the Pager.
 /// @group pager
 $kendo-pager-text: $kendo-component-header-text !default;
-/// Border color of the pager.
+/// The border color of the Pager.
 /// @group pager
 $kendo-pager-border: $kendo-component-border !default;
 
-/// Background color of the focused pager.
+/// The background color of the focused Pager.
 /// @group pager
 $kendo-pager-focus-bg: null !default;
-/// Box shadow of the focused pager.
+/// The box shadow of the focused Pager.
 /// @group pager
 $kendo-pager-focus-shadow: $kendo-focus-shadow !default;
 
-/// Spacing between the pager sections.
+/// The spacing between the Pager sections.
 /// @group pager
 $kendo-pager-section-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 
-/// Border width of the pager items.
+/// The border width of the Pager items.
 /// @group pager
 $kendo-pager-item-border-width: 0px !default;
-/// Border radius of the pager items.
+/// The border radius of the Pager items.
 /// @group pager
 $kendo-pager-item-border-radius: null !default;
-/// Spacing around the pager items.
+/// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: null !default;
-/// Background color of the pager items.
+/// The background color of the Pager items.
 /// @group pager
 $kendo-pager-item-bg: null !default;
-/// Text color of the pager items.
+/// The text color of the Pager items.
 /// @group pager
 $kendo-pager-item-text: null !default;
-/// Border color of the pager items.
+/// The border color of the Pager items.
 /// @group pager
 $kendo-pager-item-border: null !default;
 
-/// Background color of the hovered pager items.
+/// The background color of the hovered Pager items.
 /// @group pager
 $kendo-pager-item-hover-bg: $kendo-list-item-hover-bg !default;
-/// Text color of the hovered pager items.
+/// The text color of the hovered Pager items.
 /// @group pager
 $kendo-pager-item-hover-text: $kendo-list-item-hover-text !default;
-/// Border color of the hovered pager items.
+/// The border color of the hovered Pager items.
 /// @group pager
 $kendo-pager-item-hover-border: null !default;
-/// Background color of the selected pager items.
+/// The background color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-bg: $kendo-list-item-selected-bg !default;
-/// Text color of the selected pager items.
+/// The text color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-text: $kendo-list-item-selected-text !default;
-/// Border color of the selected pager items.
+/// The border color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-border: null !default;
-/// Opacity of the focused pager items.
+/// The opacity of the focused Pager items.
 /// @group pager
 $kendo-pager-item-focus-opacity: null !default;
-/// Background color of the focused pager items.
+/// The background color of the focused Pager items.
 /// @group pager
 $kendo-pager-item-focus-bg: transparent !default;
-/// Box shadow of the focused pager items.
+/// The box shadow of the focused Pager items.
 /// @group pager
 $kendo-pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-/// Border radius of the pager numbers.
+/// The border radius of the Pager numbers.
 /// @group pager
 $kendo-pager-number-border-radius: null !default;
 
-/// Width of the pager inputs.
+/// The width of the Inputs in the Pager.
 /// @group pager
 $kendo-pager-input-width: 5em !default;
 
-/// Width of the pager dropdowns according to the pager size.
+/// The width of the DropDowns in the small Pager.
 /// @group pager
 $kendo-pager-sm-dropdown-width: 5em !default;
+/// The width of the DropDowns in the medium Pager.
+/// @group pager
 $kendo-pager-md-dropdown-width: 5em !default;
+/// The width of the DropDowns in the large Pager.
+/// @group pager
 $kendo-pager-lg-dropdown-width: 5em !default;
 
-/// Sizes map of the pager.
+/// The sizes map of the Pager.
 /// @group pager
 $kendo-pager-sizes: (
     sm: (

package/scss/pdf-viewer/_layout.scss

@@ -113,14 +113,6 @@
                 border: 0;
                 background: none;
             }
-
-            > .k-icon {
-                font-size: $kendo-pdf-viewer-icon-size;
-            }
-            > .k-svg-icon {
-                width: $kendo-pdf-viewer-icon-size;
-                height: $kendo-pdf-viewer-icon-size;
-            }
         }
 
     }

package/scss/pdf-viewer/_variables.scss

@@ -43,4 +43,3 @@ $kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default;
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
 
 $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
-$kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;

package/scss/rating/_layout.scss

@@ -47,14 +47,6 @@
                 pointer-events: none;
             }
 
-            .k-icon {
-                font-size: $kendo-rating-icon-size;
-            }
-            .k-svg-icon {
-                width: $kendo-rating-icon-size;
-                height: $kendo-rating-icon-size;
-            }
-
             .k-rating-precision-part,
             .k-rating-precision-complement {
                 display: inherit;

package/scss/scheduler/_layout.scss

@@ -426,12 +426,6 @@
                 }
             }
 
-            .k-icon,
-            .k-svg-icon {
-                line-height: normal;
-                font-size: inherit;
-            }
-
             a { color: inherit; }
         }
 

package/scss/scrollview/_layout.scss

@@ -163,22 +163,16 @@
             margin: 0;
             padding: 0;
             vertical-align: middle;
-            font-size: $kendo-scrollview-arrow-icon-size;
             font-weight: normal;
         }
-        .k-svg-icon {
-            font-size: inherit;
-            width: $kendo-scrollview-arrow-icon-size;
-            height: $kendo-scrollview-arrow-icon-size;
-        }
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -204,6 +198,17 @@
         }
     }
 
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
+
 }
 
 

package/scss/scrollview/_variables.scss

@@ -24,7 +24,6 @@ $kendo-scrollview-pager-multidot-threshold: 10 !default;
 $kendo-scrollview-pager-multidot-intermediate: 3 !default;
 $kendo-scrollview-pager-multidot-step: 1px !default;
 
-$kendo-scrollview-arrow-icon-size: 4.5em !default;
 $kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
 $kendo-scrollview-navigation-color: white !default;
 $kendo-scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;

package/scss/splitter/_layout.scss

@@ -58,14 +58,6 @@
             cursor: pointer;
         }
 
-        .k-icon {
-            font-size: $kendo-splitter-resize-icon-size;
-        }
-        .k-svg-icon {
-            width: $kendo-splitter-resize-icon-size;
-            height: $kendo-splitter-resize-icon-size;
-        }
-
     }
 
     .k-splitbar-draggable-horizontal { cursor: col-resize; }

package/scss/splitter/_variables.scss

@@ -8,8 +8,7 @@ $kendo-splitter-bg: $kendo-component-bg !default;
 $kendo-splitter-text: $kendo-component-text !default;
 $kendo-splitter-border: $kendo-component-border !default;
 
-$kendo-splitter-splitbar-size: 8px !default;
-$kendo-splitter-resize-icon-size: 10px !default;
+$kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 $kendo-splitter-drag-icon-margin: 7px !default;

package/scss/spreadsheet/_layout.scss

@@ -121,7 +121,8 @@
         align-items: center;
         flex: 1;
 
-        > .k-i-formula-fx {
+        > .k-icon,
+        > .k-svg-icon {
             padding-block: 0;
             padding-inline: $kendo-padding-md-y;
             box-sizing: content-box;

package/scss/toolbar/_variables.scss

@@ -1,72 +1,90 @@
 // Toolbar
 
-/// The horizontal padding of the toolbar.
+/// The horizontal padding of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-padding-x: null !default;
+/// The horizontal padding of the small Toolbar.
+/// @group toolbar
 $kendo-toolbar-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-/// The vertical padding of the toolbar.
+/// The vertical padding of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-padding-y: null !default;
+/// The vertical padding of the small Toolbar.
+/// @group toolbar
 $kendo-toolbar-sm-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-/// The spacing between the toolbar tools.
+/// The spacing between the Toolbar tools.
 /// @group toolbar
 $kendo-toolbar-spacing: null !default;
+/// The spacing between the tools of the small Toolbar.
+/// @group toolbar
 $kendo-toolbar-sm-spacing: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The spacing between the tools of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// The spacing between the tools of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-spacing: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-/// Width of the border around the toolbar.
+/// The width of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
-/// Border radius of the toolbar.
+/// The border radius of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-radius: null !default;
 
-/// Font family of the toolbar.
+/// The font family of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-font-family: $kendo-font-family !default;
-/// Font size of the toolbar.
+/// The font size of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-font-size: $kendo-font-size-md !default;
-/// Line height of the toolbar.
+/// The line height of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-line-height: $kendo-line-height-md !default;
 
-/// Background color of the toolbar.
+/// The background color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-bg: $kendo-base-bg !default;
-/// Text color of the toolbar.
+/// The text color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-text: $kendo-base-text !default;
-/// Color of the border around the toolbar.
+/// The color of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border: $kendo-base-border !default;
-/// Gradient of the toolbar.
+/// The gradient of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-gradient: null !default;
-/// Box shadow of the toolbar.
+/// The box shadow of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-shadow: null !default;
 
-/// Color of the separator border of the toolbar.
+/// The color of the separator border of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-separator-border: inherit !default;
 
-/// The width of the input in the toolbar.
+/// The width of the input in the Toolbar.
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
 
-/// Box shadow of the focused toolbar item.
+/// The box shadow of the focused Toolbar item.
 /// @group toolbar
 $kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 
-/// Sizes map for the toolbar.
+/// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (
     sm: (

package/scss/treeview/_variables.scss

@@ -1,45 +1,69 @@
-// Treeview
+// TreeView
 
-/// Font family of the treeview component.
+/// The font family of the TreeView.
 /// @group treeview
 $kendo-treeview-font-family: $kendo-font-family !default;
-/// Font size of the treeview component.
+/// The font size of the TreeView.
 /// @group treeview
 $kendo-treeview-font-size: $kendo-font-size-md !default;
+/// The font size of the small TreeView.
+/// @group treeview
 $kendo-treeview-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium TreeView.
+/// @group treeview
 $kendo-treeview-md-font-size: $kendo-font-size-md !default;
+/// The font size of the large TreeView.
+/// @group treeview
 $kendo-treeview-lg-font-size: $kendo-font-size-lg !default;
-/// Line height of the treeview component.
+/// The line height of the TreeView.
 /// @group treeview
 $kendo-treeview-line-height: $kendo-line-height-md !default;
+/// The line height of the small TreeView.
+/// @group treeview
 $kendo-treeview-sm-line-height: $kendo-line-height-md !default;
+/// The line height of the medium TreeView.
+/// @group treeview
 $kendo-treeview-md-line-height: $kendo-line-height-md !default;
+/// The line height of the large TreeView.
+/// @group treeview
 $kendo-treeview-lg-line-height: $kendo-line-height-lg !default;
-/// Indentation of child groups in treeview component.
+/// The indentation of child groups in the TreeView.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
 
-/// Horizontal padding of treeview items.
+/// The horizontal padding of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the small TreeView items.
+/// @group treeview
 $kendo-treeview-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the medium TreeView items.
+/// @group treeview
 $kendo-treeview-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large TreeView items.
+/// @group treeview
 $kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of treeview items.
+/// The vertical padding of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the small TreeView items.
+/// @group treeview
 $kendo-treeview-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The vertical padding of the medium TreeView items.
+/// @group treeview
 $kendo-treeview-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the large TreeView items.
+/// @group treeview
 $kendo-treeview-lg-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// Border width of treeview items.
+/// The border width of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
-/// Border radius of treeview items.
+/// The border radius of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 
 
-/// The sizes of the treeview.
+/// The sizes map of the TreeView.
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
@@ -63,75 +87,75 @@ $kendo-treeview-sizes: (
 ) !default;
 
 
-/// Background color of the treeview component.
+/// The background color of the TreeView.
 /// @group treeview
 $kendo-treeview-bg: null !default;
-/// Text color of the treeview component.
+/// The text color of the TreeView.
 /// @group treeview
 $kendo-treeview-text: $kendo-component-text !default;
-/// Border color of the treeview component.
+/// The border color of the TreeView.
 /// @group treeview
 $kendo-treeview-border: null !default;
 
-/// Background color of hovered treeview items.
+/// The background color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-bg: $kendo-hover-bg !default;
-/// Text color of hovered treeview items.
+/// The text color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-text: $kendo-hover-text !default;
-/// Border color of hovered treeview items.
+/// The border color of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-border: null !default;
-/// Background gradient of hovered treeview items.
+/// The background gradient of hovered TreeView items.
 /// @group treeview
 $kendo-treeview-item-hover-gradient: null !default;
 
-/// Background color of selected treeview items.
+/// The background color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-bg: $kendo-selected-bg !default;
-/// Text color of selected treeview items.
+/// The text color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-text: $kendo-selected-text !default;
-/// Border color of selected treeview items.
+/// The border color of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-border: null !default;
-/// Background gradient of selected treeview items.
+/// The background gradient of selected TreeView items.
 /// @group treeview
 $kendo-treeview-item-selected-gradient: null !default;
 
-/// Box shadow of focused treeview items.
+/// The box shadow of focused TreeView items.
 /// @group treeview
 $kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;
 
-/// Background color of load more.
+/// The background color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-bg: transparent !default;
-/// Text color of load more.
+/// The text color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-text: $kendo-link-text !default;
-/// Border color of load more.
+/// The border color of the Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-border: null !default;
 
-/// Background color of a hovered load more.
+/// The background color of the hovered Load More button in the TreeView
 /// @group treeview
 $kendo-treeview-loadmore-hover-bg: transparent !default;
-/// Text color of a hovered load more.
+/// The text color of the hovered Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-hover-text: $kendo-link-hover-text !default;
-/// Border color of a hovered load more.
+/// The border color of the hovered Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: null !default;
 
-/// Background color of a focused load more.
+/// The background color of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-bg: transparent !default;
-/// Text color of a focused load more.
+/// The text color of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-text: $kendo-link-hover-text !default;
-/// Border color of a focused load more.
+/// The border color of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: null !default;
-/// Box shadow of a focused load more.
+/// 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;