@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.2

package/scss/gantt/_layout.scss

@@ -82,7 +82,7 @@
                 }
             }
 
-            tr.k-state-selected > td:last-child ,
+            tr.k-state-selected > td:last-child,
             tr.k-selected > td:last-child {
                 background: transparent;
             }
@@ -352,7 +352,7 @@
         border-color: currentColor;
         position: absolute;
     }
-    .k-gantt-line.k-state-selected ,
+    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         z-index: 3;
     }
@@ -426,7 +426,7 @@
         transform: translate(-50%, -50%);
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before ,
+    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         border-width: 1px;
     }

package/scss/gantt/_theme.scss

@@ -15,7 +15,7 @@
                     $border: $gantt-milestone-border
                 );
             }
-            .k-task-milestone.k-state-selected .k-task-milestone-content ,
+            .k-task-milestone.k-state-selected .k-task-milestone-content,
             .k-task-milestone.k-selected .k-task-milestone-content {
                 @include fill(
                     $bg: $gantt-milestone-selected-bg,
@@ -30,7 +30,7 @@
                 stroke: $gantt-line-fill;
             }
 
-            polyline.k-state-selected ,
+            polyline.k-state-selected,
             polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
@@ -84,7 +84,7 @@
         );
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before ,
+    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         @include fill(
             $bg: $gantt-dot-hover-bg,
@@ -110,7 +110,7 @@
             );
         }
     }
-    .k-task-milestone.k-state-selected ,
+    .k-task-milestone.k-state-selected,
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
@@ -141,7 +141,7 @@
     .k-task-advanced .k-task-summary-complete {
         color: $gantt-advanced-bg;
     }
-    .k-task-summary.k-state-selected ,
+    .k-task-summary.k-state-selected,
     .k-task-summary.k-selected {
         color: $gantt-summary-selected-bg;
 
@@ -185,7 +185,7 @@
             $bg: $gantt-advanced-bg
         );
     }
-    .k-task-single.k-state-selected ,
+    .k-task-single.k-state-selected,
     .k-task-single.k-selected {
         @include fill(
             $gantt-task-selected-text,
@@ -202,7 +202,7 @@
     .k-gantt-line {
         color: $gantt-line-fill;
     }
-    .k-gantt-line.k-state-selected ,
+    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         color: $gantt-line-selected-fill;
     }

package/scss/grid/_layout.scss

@@ -661,7 +661,7 @@
             &.k-i-sort-desc-sm,
             &.k-i-sort-asc-sm {
                 vertical-align: text-top;
-                margin-left: $grid-sorted-icon-spacing;
+                margin-inline-start: $grid-sorted-icon-spacing;
             }
         }
 
@@ -671,7 +671,7 @@
             height: $icon-size;
             font-size: $grid-sorting-index-font-size;
             margin-top: $grid-sorting-index-spacing-y;
-            margin-left: $grid-sorting-index-spacing-x;
+            margin-inline-start: $grid-sorting-index-spacing-x;
         }
     }
 
@@ -1072,15 +1072,15 @@
     }
 
     .k-header > .k-cell-inner {
-        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+        margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
     }
 
     .k-filterable {
         > .k-cell-inner {
-            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+            margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
 
             .k-link {
-                padding-right: 0;
+                padding-inline-end: 0;
             }
         }
     }
@@ -1119,6 +1119,7 @@
         .k-grid-filter,
         .k-header-column-menu {
             position: static;
+            margin-inline-end: $grid-header-menu-icon-spacing;
         }
 
         .k-grid-filter,
@@ -1429,28 +1430,6 @@
             margin-left: $icon-spacing;
             margin-right: 0;
         }
-
-        .k-header > .k-cell-inner {
-            margin-right: (-1 * $grid-cell-padding-x);
-            margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
-
-            .k-sort-order {
-                margin-right: $grid-sorting-index-spacing-x;
-                margin-left: 0;
-            }
-        }
-
-        .k-filterable {
-            > .k-cell-inner {
-                margin-right: (-1 * $grid-cell-padding-x);
-                margin-left: calc(-1 * #{$kendo-button-calc-size});
-
-                .k-link {
-                    padding-right: $grid-header-padding-x;
-                    padding-left: 0;
-                }
-            }
-        }
     }
 }
 

package/scss/grid/_theme.scss

@@ -73,9 +73,9 @@
         }
 
         // Hover state
-        tbody tr:not(.k-detail-row):hover,
-        tbody tr:not(.k-detail-row).k-state-hover ,
-        tbody tr:not(.k-detail-row).k-hover {
+        tbody>tr:not(.k-detail-row):hover,
+        tbody>tr:not(.k-detail-row).k-state-hover,
+        tbody>tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -83,7 +83,7 @@
         // Selected state
         td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected > td ,
+        tr.k-state-selected > td,
         tr.k-selected > td {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
@@ -99,7 +99,7 @@
         .k-grouping-row > td:focus,
         .k-detail-row > td:focus,
         .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused ,
+        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -142,12 +142,12 @@
             }
 
             // Selected state
-            .k-state-selected td ,
+            .k-state-selected td,
             .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
 
-            .k-state-selected.k-alt td ,
+            .k-state-selected.k-alt td,
             .k-selected.k-alt td {
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
@@ -155,7 +155,7 @@
             // Selected hover
             .k-state-selected:hover td,
             .k-selected:hover td,
-            .k-state-selected.k-state-hover td ,
+            .k-state-selected.k-state-hover td,
             .k-selected.k-hover td {
                 @include fill( $bg: $grid-sticky-selected-hovered-bg );
             }
@@ -201,7 +201,7 @@
             &.k-state-border-down {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active ,
+            &.k-state-active,
             &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
@@ -261,7 +261,7 @@
         &.k-selected .k-grid-content-sticky,
         &.k-state-selected .k-grid-row-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected ,
+        td.k-grid-content-sticky.k-state-selected,
         td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
@@ -270,7 +270,7 @@
         &.k-selected.k-alt .k-grid-content-sticky,
         &.k-state-selected.k-alt .k-grid-row-sticky,
         &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected ,
+        &.k-alt td.k-grid-content-sticky.k-state-selected,
         &.k-alt td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -281,7 +281,7 @@
         &:hover .k-grid-row-sticky,
         &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky ,
+        &.k-state-hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
@@ -298,7 +298,7 @@
         &.k-selected.k-hover .k-grid-row-sticky,
         &:hover td.k-grid-content-sticky.k-state-selected,
         &:hover td.k-grid-content-sticky.k-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected ,
+        &.k-state-hover td.k-grid-content-sticky.k-state-selected,
         &.k-hover td.k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -312,7 +312,7 @@
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -326,7 +326,7 @@
             }
 
             &:hover td,
-            &.k-state-hover td ,
+            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -344,7 +344,7 @@
         .k-selected.k-grid-row-sticky td,
         .k-grid-row-sticky td.k-state-selected,
         .k-grid-row-sticky td.k-selected,
-        .k-state-selected.k-grid-content-sticky ,
+        .k-state-selected.k-grid-content-sticky,
         .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
@@ -353,7 +353,7 @@
         tr.k-selected.k-alt .k-grid-content-sticky,
         .k-state-selected.k-alt.k-grid-row-sticky td,
         .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky ,
+        .k-alt .k-state-selected.k-grid-content-sticky,
         .k-alt .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -369,7 +369,7 @@
         .k-grid-row-sticky.k-alt.k-state-hover td,
         .k-grid-row-sticky.k-alt.k-hover td,
         .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky ,
+        .k-alt.k-state-hover .k-grid-content-sticky,
         .k-alt.k-hover .k-grid-content-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
@@ -397,7 +397,7 @@
         .k-grid-row-sticky.k-hover td.k-selected,
         tr:hover .k-grid-content-sticky.k-state-selected,
         tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected ,
+        tr.k-state-hover .k-grid-content-sticky.k-state-selected,
         tr.k-hover .k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -409,7 +409,7 @@
         }
 
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky ,
+        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-hovered-bg );
         }
@@ -423,13 +423,13 @@
         );
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus ,
+    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -455,7 +455,7 @@
                 );
 
                 &:hover,
-                &.k-state-hover ,
+                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -463,7 +463,7 @@
                     );
                 }
 
-                &.k-state-selected ,
+                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -472,7 +472,7 @@
                 }
 
                 &:focus,
-                &.k-state-focused ,
+                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }

package/scss/index.scss

@@ -157,3 +157,4 @@
 @import "dataviz/_index.scss";
 @import "map/_index.scss";
 @import "orgchart/_index.scss";
+@import "signature/_index.scss";

package/scss/input/_variables.scss

@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -21,10 +38,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (

package/scss/list/_variables.scss

@@ -5,14 +5,14 @@
 $kendo-list-font-size: null !default;
 $kendo-list-font-size-sm: $font-size-md !default;
 $kendo-list-font-size-md: $font-size-md !default;
-$kendo-list-font-size-lg: $font-size-md !default;
+$kendo-list-font-size-lg: $font-size-lg !default;
 
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-line-height-sm: null !default;
-$kendo-list-line-height-md: null !default;
-$kendo-list-line-height-lg: null !default;
+$kendo-list-line-height-sm: $line-height-md !default;
+$kendo-list-line-height-md: $line-height-md !default;
+$kendo-list-line-height-lg: $line-height-lg !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
@@ -58,7 +58,7 @@ $kendo-list-item-padding-x: null !default;
 $kendo-list-item-padding-x-base: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-list-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list
@@ -66,7 +66,7 @@ $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 1 ) !default;
 $kendo-list-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-list-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list

package/scss/listview/_theme.scss

@@ -13,7 +13,7 @@
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused ,
+        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -23,7 +23,7 @@
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected ,
+        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,

package/scss/orgchart/_theme.scss

@@ -35,7 +35,7 @@
     .k-orgchart-node-group-container:focus,
     .k-orgchart-node-group-container.k-focus,
     .k-orgchart-node-group-container.k-state-focus,
-    .k-orgchart-node-group-container.k-state-focused ,
+    .k-orgchart-node-group-container.k-state-focused,
     .k-orgchart-node-group-container.k-focus {
         @include box-shadow( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );

package/scss/pager/_layout.scss

@@ -33,7 +33,7 @@
 
             // Focused state
             &:focus,
-            &.k-state-focus ,
+            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -83,7 +83,7 @@
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -133,7 +133,7 @@
         }
 
         // Selected state
-        .k-state-selected ,
+        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;

package/scss/pager/_theme.scss

@@ -10,7 +10,7 @@
         &:focus,
         &.k-focus,
         &.k-state-focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
@@ -26,7 +26,7 @@
         );
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -35,7 +35,7 @@
             );
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -45,7 +45,7 @@
         }
 
         &:focus,
-        &.k-state-focus ,
+        &.k-state-focus,
         &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
@@ -69,7 +69,7 @@
             );
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -79,13 +79,13 @@
             }
 
             &:focus,
-            &.k-state-focus ,
+            &.k-state-focus,
             &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
 
-            &.k-state-selected ,
+            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
@@ -118,7 +118,7 @@
                 );
 
                 &:hover,
-                &.k-state-hover ,
+                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -139,7 +139,7 @@
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover ,
+                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -147,7 +147,7 @@
                         );
                     }
 
-                    &.k-state-selected ,
+                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,