@progress/kendo-theme-default 5.12.1-dev.1 → 5.12.1-dev.2

package/scss/dropzone/_variables.scss

@@ -1,4 +1,5 @@
 // Dropzone
+
 $dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $dropzone-border-width: 1px !default;
@@ -12,7 +13,7 @@ $dropzone-bg: $base-bg !default;
 $dropzone-text: $base-text !default;
 $dropzone-border: $base-border !default;
 
-$dropzone-icon-size: ( $icon-size * 3 ) !default;
+$dropzone-icon-size: ( $kendo-icon-size * 3 ) !default;
 $dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
 $dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
 $dropzone-icon-hover-text: $kendo-color-primary !default;

package/scss/editor/_layout.scss

@@ -368,7 +368,7 @@
             flex: 1;
         }
         .k-search-wrap {
-            margin: 0 0 0 $spacer-x;
+            margin: 0 0 0 k-map-get( $kendo-spacing, 4 );
             width: 150px;
             display: flex;
             align-items: center;
@@ -385,7 +385,7 @@
 
         // Filebrowser toolbar
         .k-filebrowser-toolbar {
-            margin: $spacer-y 0 0 0;
+            margin: k-map-get( $kendo-spacing, 4 ) 0 0 0;
         }
 
         .k-upload {
@@ -412,7 +412,7 @@
             flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
-            margin: 0 0 $spacer-y 0;
+            margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
             padding: $kendo-padding-md-y $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;

package/scss/expansion-panel/_index.scss

@@ -3,8 +3,8 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_display.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_display.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";
 

package/scss/expansion-panel/_theme.scss

@@ -8,7 +8,7 @@
         );
 
         &.k-focus {
-            box-shadow: $expander-focus-shadow;
+            @include focus-indicator( $expander-focus-shadow, true );
         }
     }
 
@@ -27,7 +27,7 @@
 
         &.k-focus {
             background-color: $expander-header-focus-bg;
-            box-shadow: $expander-header-focus-shadow;
+            @include focus-indicator( $expander-header-focus-shadow, true );
         }
     }
 

package/scss/fab/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../badge/_index.scss";

package/scss/fab/_layout.scss

@@ -133,8 +133,8 @@
 
         .k-fab-icon {
             &:not(:only-child) {
-                margin-right: -$icon-spacing;
-                margin-left: $icon-spacing;
+                margin-right: -$kendo-icon-spacing;
+                margin-left: $kendo-icon-spacing;
             }
         }
     }

package/scss/fab/_theme.scss

@@ -25,9 +25,13 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}.k-focus,
         .k-fab-solid-#{$name}:focus {
-            outline-style: solid;
-            outline-width: 2px;
-            outline-color: rgba( $color, .3 );
+            @if $kendo-enable-focus-contrast {
+                @include box-shadow( inset 0 0 0 2px currentColor );
+            } @else {
+                outline-style: solid;
+                outline-width: 2px;
+                outline-color: rgba( $color, .3 );
+            }
         }
     }
 
@@ -86,9 +90,13 @@
     .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
-        outline-style: solid;
-        outline-width: 2px;
-        outline-color: rgba(0, 0, 0, .08);
+        @if $kendo-enable-focus-contrast {
+            @include box-shadow( inset 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+        } @else {
+            outline-style: solid;
+            outline-width: 2px;
+            outline-color: rgba(0, 0, 0, .08);
+        }
     }
 
     // Active state

package/scss/filemanager/_layout.scss

@@ -127,7 +127,7 @@
 
         // File preview
         .k-file-preview {
-            margin-right: $icon-spacing;
+            margin-right: $kendo-icon-spacing;
             display: inline-flex;
             flex-direction: row;
             vertical-align: middle;
@@ -233,7 +233,7 @@
         align-items: center;
     }
     .k-filemanager-drag-hint .k-icon {
-        margin-right: $icon-spacing;
+        margin-right: $kendo-icon-spacing;
     }
 
 }

package/scss/filemanager/_variables.scss

@@ -41,7 +41,7 @@ $filemanager-listview-item-bg: null !default;
 $filemanager-listview-item-text: null !default;
 $filemanager-listview-item-border: null !default;
 
-$filemanager-listview-item-icon-size: ($icon-size * 3) !default;
+$filemanager-listview-item-icon-size: ($kendo-icon-size * 3) !default;
 $filemanager-listview-item-icon-bg: null !default;
 $filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-listview-item-icon-border: null !default;
@@ -63,7 +63,7 @@ $filemanager-preview-bg: null !default;
 $filemanager-preview-text: null !default;
 $filemanager-preview-border: null !default;
 
-$filemanager-preview-icon-size: ($icon-size * 6) !default;
+$filemanager-preview-icon-size: ($kendo-icon-size * 6) !default;
 $filemanager-preview-icon-bg: null !default;
 $filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
 $filemanager-preview-icon-border: null !default;

package/scss/filter/_theme.scss

@@ -22,7 +22,7 @@
         // Focus
         .k-toolbar:focus,
         .k-toolbar.k-focus {
-            @include box-shadow( $filter-toolbar-focus-shadow );
+            @include focus-indicator( $filter-toolbar-focus-shadow );
         }
     }
 

package/scss/forms/_index.scss

@@ -3,12 +3,8 @@
 
 // Dependencies // TODO: extract variables
 @import "../common/_index.scss";
-@import "../tooltip/_variables.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../action-buttons/_index.scss";
-@import "../window/_variables.scss";
 
 
 // Component

package/scss/forms/_layout.scss

@@ -287,6 +287,7 @@
                 width: $kendo-inline-form-element-width;
                 text-align: right;
                 line-height: $line-height;
+                // TODO: do we need the input variable?
                 padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
                 padding-right: $kendo-padding-lg-x;
                 align-self: center;
@@ -334,12 +335,14 @@
     // Action buttons
     .k-popup-edit-form > .k-actions,
     .k-edit-form-container .k-actions {
-        margin: $spacer (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
+        // TODO: refactor
+        margin: k-map-get( $kendo-spacing, 4 ) (-$kendo-window-inner-padding-x) (-$kendo-window-inner-padding-y);
     }
 
 
     .k-edit-label {
-        margin: 0 0 $spacer-y 0;
+        margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
+        // TODO: do we need the input variable?
         padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $kendo-form-line-height;
@@ -348,13 +351,14 @@
         clear: both;
     }
     .k-edit-field {
-        margin: 0 0 $spacer-y 0;
+        margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
         width: 65%;
         float: right;
         clear: right;
         position: relative;
 
         &.k-no-editor {
+            // TODO: do we need the input variable?
             padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         }
     }
@@ -373,11 +377,11 @@
 
         .k-radio-label,
         .k-checkbox-label {
-            margin-right: ($spacer);
+            margin-right: k-map-get( $kendo-spacing, 4 );
         }
 
         > .k-reset > li + li {
-            margin-top: k-math-div( $spacer, 2 );
+            margin-top: k-map-get( $kendo-spacing, 2 );
         }
 
         .k-reset .k-widget {

package/scss/forms/_variables.scss

@@ -1,4 +1,11 @@
+@import "../input/_variables.scss";
+@import "../tooltip/_variables.scss";
+@import "../typography/_variables.scss";
+@import "../window/_variables.scss";
+
+
 // Forms
+
 $kendo-form-spacer: $kendo-padding-md-x * 2 !default;
 
 $kendo-form-font-size: $font-size !default;

package/scss/gantt/_index.scss

@@ -11,7 +11,7 @@
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";
 @import "../treelist/_index.scss";
-@import "../table/_variables.scss";
+
 
 // Component
 @import "./_variables.scss";

package/scss/gantt/_layout.scss

@@ -17,6 +17,10 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
+        .k-table-td {
+            white-space: nowrap;
+        }
+
         // other
         td {
             overflow: hidden;
@@ -606,7 +610,7 @@
             display: block;
         }
         .k-task-pct {
-            font-size: $icon-size-lg;
+            font-size: $kendo-icon-size-xxl;
         }
         ul {
             line-height: normal;

package/scss/gantt/_variables.scss

@@ -1,4 +1,8 @@
+@import "../table/_variables.scss";
+
+
 // Gantt
+
 $gantt-border-width: 1px !default;
 $gantt-font-family: $font-family !default;
 $gantt-font-size: $font-size !default;

package/scss/grid/_index.scss

@@ -22,8 +22,8 @@
 @import "../pager/_index.scss";
 @import "../chip/_index.scss";
 @import "../skeleton/_index.scss";
-@import "../utils/_float.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_float.scss";
+// @import "../utils/_spacer.scss";
 @import "../list/_index.scss";
 @import "../table/_index.scss";
 

package/scss/grid/_layout.scss

@@ -194,7 +194,7 @@
             .k-sort-order {
                 display: inline-block;
                 vertical-align: top;
-                height: $icon-size;
+                height: $kendo-icon-size;
                 font-size: $kendo-grid-sorting-index-font-size;
                 margin-top: $kendo-grid-sorting-index-spacing-y;
                 margin-inline-start: $kendo-grid-sorting-index-spacing-x;
@@ -273,8 +273,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: k-math-div( $icon-size, 2 );
+            margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: k-math-div( $kendo-icon-size, 2 );
             text-decoration: none;
         }
 
@@ -925,7 +925,7 @@
             }
 
             .k-grouping-row .k-icon {
-                margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$_cell-padding-x} );
+                margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
             .k-grouping-dropclue {
@@ -1209,7 +1209,7 @@
         cursor: pointer;
 
         > .k-icon {
-            margin-inline-end: $icon-spacing;
+            margin-inline-end: $kendo-icon-spacing;
         }
     }
 

package/scss/grid/_theme.scss

@@ -95,7 +95,7 @@
         .k-grid-pager {
             &:focus,
             &.k-focus {
-                box-shadow: $kendo-grid-focus-shadow;
+                @include focus-indicator( $kendo-grid-focus-shadow, true );
             }
         }
 
@@ -181,7 +181,7 @@
             }
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .1 );
+                @include focus-indicator( inset 0 0 0 2px rgba( $kendo-color-black, .1 ), true );
             }
             &.k-active {
                 color: $kendo-selected-text;
@@ -365,7 +365,7 @@
     }
     .k-columnmenu-item:focus,
     .k-columnmenu-item.k-focus {
-        @include box-shadow( $kendo-list-item-focus-shadow );
+        @include focus-indicator( $kendo-list-item-focus-shadow, true );
     }
 
     .k-columnmenu-item {
@@ -410,7 +410,7 @@
 
                 &:focus,
                 &.k-focus {
-                    @include box-shadow( $kendo-list-item-focus-shadow );
+                    @include focus-indicator( $kendo-list-item-focus-shadow, true );
                 }
             }
         }

package/scss/grid/_variables.scss

@@ -116,7 +116,7 @@ $kendo-grid-sizes: (
 
 $kendo-grid-header-font-size: null !default;
 $kendo-grid-header-first-border: 1px !default;
-$kendo-grid-header-menu-icon-spacing: $icon-spacing !default;
+$kendo-grid-header-menu-icon-spacing: $kendo-icon-spacing !default;
 
 $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-icon-spacing} ) !default;
 
@@ -198,8 +198,8 @@ $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
 $kendo-grid-sorted-bg: rgba( k-contrast-legacy( $kendo-grid-bg ), .02 ) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $font-size-sm !default;
-$kendo-grid-sorting-index-height: $icon-size !default;
-$kendo-grid-sorting-index-spacing-y: k-math-div( $icon-spacing, 2 ) !default;
+$kendo-grid-sorting-index-height: $kendo-icon-size !default;
+$kendo-grid-sorting-index-spacing-y: k-math-div( $kendo-icon-spacing, 2 ) !default;
 $kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
 
 
@@ -259,11 +259,11 @@ $kendo-grid-column-menu-group-header-bg: null !default;
 $kendo-grid-column-menu-group-header-text: $popup-text !default;
 $kendo-grid-column-menu-group-header-border: $popup-border !default;
 
-$kendo-grid-drag-cell-width: ($icon-size * 2.25) !default;
+$kendo-grid-drag-cell-width: ($kendo-icon-size * 2.25) !default;
 
 $kendo-grid-row-inner-height: calc( #{$line-height-em} + #{$kendo-grid-cell-padding-y * 2} ) !default;
 
-$kendo-grid-hierarchy-col-width: ($icon-size * 2) !default;
+$kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
 
 $kendo-grid-grouping-row-border-top: 1px !default;
 $kendo-grid-group-footer-border-y: 1px !default;