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

package/scss/switch/_layout.scss

@@ -12,7 +12,7 @@
         cursor: pointer;
         user-select: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -82,13 +82,13 @@
     // Switch sizes
     @each $size, $size-props in $kendo-switch-sizes {
 
-        $_font-size: map-get( $size-props, font-size );
-        $_track-width: map-get( $size-props, track-width );
-        $_track-height: map-get( $size-props, track-height );
-        $_thumb-width: map-get( $size-props, thumb-width );
-        $_thumb-height: map-get( $size-props, thumb-height );
-        $_thumb-offset: map-get( $size-props, thumb-offset );
-        $_label-offset: map-get( $size-props, label-offset );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_track-width: k-map-get( $size-props, track-width );
+        $_track-height: k-map-get( $size-props, track-height );
+        $_thumb-width: k-map-get( $size-props, thumb-width );
+        $_thumb-height: k-map-get( $size-props, thumb-height );
+        $_thumb-offset: k-map-get( $size-props, thumb-offset );
+        $_label-offset: k-map-get( $size-props, label-offset );
 
         .k-switch-#{$size} {
             width: $_track-width;
@@ -109,10 +109,10 @@
             }
 
             &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( 100% - #{$_thumb-width / 2} - #{$_thumb-offset} );
+                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( #{$_thumb-width / 2} + #{$_thumb-offset} );
+                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
             }
         }
 
@@ -130,10 +130,10 @@
             }
 
             &.k-switch-on .k-switch-thumb-wrap {
-                left: calc( #{$_thumb-width / 2} + #{$_thumb-offset} );
+                left: calc( #{k-math-div( $_thumb-width, 2 )} + #{$_thumb-offset} );
             }
             &.k-switch-off .k-switch-thumb-wrap {
-                left: calc( 100% - #{$_thumb-width / 2} - #{$_thumb-offset} );
+                left: calc( 100% - #{k-math-div( $_thumb-width, 2 )} - #{$_thumb-offset} );
             }
         }
     }
@@ -152,4 +152,3 @@
     }
 
 }
-

package/scss/switch/_theme.scss

@@ -57,7 +57,11 @@
                     $kendo-switch-off-track-focus-border,
                     $kendo-switch-off-track-focus-gradient
                 );
-                outline: $kendo-switch-off-track-focus-ring;
+                @if $kendo-enable-focus-contrast {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+                } @else {
+                    outline: $kendo-switch-off-track-focus-ring;
+                }
             }
         }
 
@@ -133,7 +137,11 @@
                     $kendo-switch-on-track-focus-border,
                     $kendo-switch-on-track-focus-gradient
                 );
-                outline: $kendo-switch-on-track-focus-ring;
+                @if $kendo-enable-focus-contrast {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+                } @else {
+                    outline: $kendo-switch-on-track-focus-ring;
+                }
             }
         }
 

package/scss/switch/_variables.scss

@@ -29,13 +29,13 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: $component-bg !default;
+$kendo-switch-off-track-bg: $kendo-component-bg !default;
 /// The text color of the track when the switch is not checked.
 /// @group switch
-$kendo-switch-off-track-text: $component-text !default;
+$kendo-switch-off-track-text: $kendo-component-text !default;
 /// The border color of the track when the switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: try-shade( $kendo-switch-off-track-bg, 8% ) !default;
+$kendo-switch-off-track-border: k-try-shade( $kendo-switch-off-track-bg, 8% ) !default;
 /// The background gradient of the track when the switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -67,7 +67,7 @@ $kendo-switch-off-track-focus-border: null !default;
 $kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-ring: 2px solid rgba( if( $dark-theme, $white, $black ) , .08 ) !default;
+$kendo-switch-off-track-focus-ring: 2px solid rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ) , .08 ) !default;
 
 /// The background of the track when the disabled switch is not checked.
 /// @group switch
@@ -111,10 +111,10 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: $primary !default;
+$kendo-switch-on-track-bg: $kendo-color-primary !default;
 /// The text color of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: contrast-wcag( $kendo-switch-on-track-bg ) !default;
+$kendo-switch-on-track-text: k-contrast-legacy( $kendo-switch-on-track-bg ) !default;
 /// The border color of the track when the switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;

package/scss/table/_index.scss

@@ -3,17 +3,9 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../combobox/_index.scss";
-@import "../popup/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../menu/_variables.scss";
-@import "../grid/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
-
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/table/_layout.scss

@@ -39,7 +39,7 @@
     .k-table-th,
     .k-table-td {
         padding: $kendo-table-cell-padding-y $kendo-table-cell-padding-x;
-        border-width: 0 0 $grid-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
+        border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
         box-sizing: border-box;
@@ -213,10 +213,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-table-sizes {
-        $_font-size: map-get( $size-props, font-size);
-        $_line-height: map-get( $size-props, line-height);
-        $_cell-padding-x: map-get( $size-props, cell-padding-x);
-        $_cell-padding-y: map-get( $size-props, cell-padding-y);
+        $_font-size: k-map-get( $size-props, font-size);
+        $_line-height: k-map-get( $size-props, line-height);
+        $_cell-padding-x: k-map-get( $size-props, cell-padding-x);
+        $_cell-padding-y: k-map-get( $size-props, cell-padding-y);
 
         .k-table-#{$size} {
             font-size: $_font-size;
@@ -229,11 +229,13 @@
         }
 
         .k-table-#{$size} .k-table-list .k-table-group-td > span {
-            padding: 0 ( $_cell-padding-x / 2 );
+            padding-block: 0;
+            padding-inline: k-math-div( $_cell-padding-x, 2 );
         }
 
         .k-table-#{$size} .k-table-list .k-table-group-row::before {
-            padding: $_cell-padding-y 0;
+            padding-block: $_cell-padding-y;
+            padding-inline: 0;
         }
     }
 

package/scss/table/_theme.scss

@@ -60,19 +60,22 @@
 
 
     // Focus state
-    .k-table-tbody .k-table-row.k-focus,
-    .k-table-list .k-table-row.k-focus,
-    .k-table-tbody .k-table-td.k-focus,
-    .k-table-list .k-table-td.k-focus {
-        border-color: $kendo-table-focus-border;
-        color: $kendo-table-focus-text;
-        background-color: $kendo-table-focus-bg;
-        box-shadow: $kendo-table-focus-shadow;
+    .k-table-tbody .k-table-row,
+    .k-table-list .k-table-row,
+    .k-table-tbody .k-table-td,
+    .k-table-list .k-table-td {
+        &.k-focus,
+        &:focus {
+            border-color: $kendo-table-focus-border;
+            color: $kendo-table-focus-text;
+            background-color: $kendo-table-focus-bg;
+            @include focus-indicator( $kendo-table-focus-shadow, inset );
+        }
     }
 
 
     // Selected state
-    .k-table-tbody .k-table-row.k-selected,
+    .k-table-tbody .k-table-row.k-selected > .k-table-td,
     .k-table-list .k-table-row.k-selected {
         border-color: $kendo-table-selected-border;
         color: $kendo-table-selected-text;

package/scss/table/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Table
 
 /// The width of the table border.
@@ -5,10 +8,10 @@
 $kendo-table-border-width: 1px !default;
 /// The width of vertical border of table cells.
 /// @group table
-$kendo-table-cell-vertical-border-width: $grid-cell-vertical-border-width !default;
+$kendo-table-cell-vertical-border-width: 1px !default;
 /// The width of horizontal border of table cells.
 /// @group table
-$kendo-table-cell-horizontal-border-width: $grid-cell-horizontal-border-width !default;
+$kendo-table-cell-horizontal-border-width: 0px !default;
 
 /// The font size of the table if no size is specified.
 /// @group table
@@ -26,61 +29,73 @@ $kendo-table-cell-padding-x: null !default;
 /// @group table
 $kendo-table-cell-padding-y: null !default;
 
+$kendo-table-cell-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-table-cell-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
+
+$kendo-table-cell-padding-x-md: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-table-cell-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-table-cell-padding-x-lg: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-table-cell-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+
 /// The sizes of the table.
 /// @group table
 $kendo-table-sizes: (
     sm: (
         font-size: $font-size-md,
         line-height: $line-height-md,
-        cell-padding-x: map-get( $spacing, 2 ),
-        cell-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin )
+        cell-padding-x: $kendo-table-cell-padding-x-sm,
+        cell-padding-y: $kendo-table-cell-padding-y-sm
     ),
     md: (
         font-size: $font-size-md,
         line-height: $line-height-md,
-        cell-padding-x: map-get( $spacing, 2 ),
-        cell-padding-y: map-get( $spacing, 2 )
+        cell-padding-x: $kendo-table-cell-padding-x-md,
+        cell-padding-y: $kendo-table-cell-padding-y-md
     ),
     lg: (
         font-size: $font-size-md,
         line-height: $line-height-md,
-        cell-padding-x: map-get( $spacing, 2 ),
-        cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        cell-padding-x: $kendo-table-cell-padding-x-lg,
+        cell-padding-y: $kendo-table-cell-padding-y-lg
     )
 ) !default;
 
 
 /// Background color of tables.
 /// @group table
-$kendo-table-bg: $grid-bg !default;
+$kendo-table-bg: $kendo-component-bg !default;
 /// Text color of tables.
 /// @group table
-$kendo-table-text: $grid-text !default;
+$kendo-table-text: $kendo-component-text !default;
 /// Border color of tables.
 /// @group table
-$kendo-table-border: $grid-border !default;
+$kendo-table-border: $kendo-component-border !default;
 
 
 /// Background color of table headers.
 /// @group table
-$kendo-table-header-bg: $grid-header-bg !default;
+$kendo-table-header-bg: $kendo-component-header-bg !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: $grid-header-text !default;
+$kendo-table-header-text: $kendo-component-header-text !default;
 /// Border color of table headers.
 /// @group table
-$kendo-table-header-border: $grid-header-border !default;
+$kendo-table-header-border: $kendo-component-header-border !default;
+/// Gradient of table headers.
+/// @group table
+$kendo-table-header-gradient: $kendo-component-header-gradient !default;
 
 
 /// Background color of table footers.
 /// @group table
-$kendo-table-footer-bg: $grid-footer-bg !default;
+$kendo-table-footer-bg: $kendo-table-header-bg !default;
 /// Text color of table footers.
 /// @group table
-$kendo-table-footer-text: $grid-footer-text !default;
+$kendo-table-footer-text: $kendo-table-header-text !default;
 /// Border color of table footers.
 /// @group table
-$kendo-table-footer-border: $grid-footer-border !default;
+$kendo-table-footer-border: $kendo-table-header-border !default;
 
 
 /// Background color of group rows in table.
@@ -96,24 +111,24 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
 
 /// Background color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-bg: $grid-alt-bg !default;
+$kendo-table-alt-row-bg: rgba( k-contrast-legacy( $kendo-table-bg ), .04 ) !default;
 /// Text color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-text: $grid-alt-text !default;
+$kendo-table-alt-row-text: null !default;
 /// Border color of alternating rows in table.
 /// @group table
-$kendo-table-alt-row-border: $grid-alt-border !default;
+$kendo-table-alt-row-border: null !default;
 
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: $grid-hovered-bg !default;
+$kendo-table-hover-bg: k-color-darken($kendo-table-bg, 7%) !default;
 /// Text color of hovered rows in table.
 /// @group table
-$kendo-table-hover-text: $grid-hovered-text !default;
+$kendo-table-hover-text: null !default;
 /// Border color of hovered rows in table.
 /// @group table
-$kendo-table-hover-border: $grid-hovered-border !default;
+$kendo-table-hover-border: null !default;
 
 
 /// Background color of focused rows in table.
@@ -127,15 +142,15 @@ $kendo-table-focus-text: null !default;
 $kendo-table-focus-border: null !default;
 /// Box shadow of focused rows in table.
 /// @group table
-$kendo-table-focus-shadow: $grid-focused-shadow !default;
+$kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: $grid-selected-bg !default;
+$kendo-table-selected-bg: rgba($kendo-selected-bg, .25) !default;
 /// Text color of selected rows in table.
 /// @group table
-$kendo-table-selected-text: $grid-selected-text !default;
+$kendo-table-selected-text: null !default;
 /// Border color of selected rows in table.
 /// @group table
-$kendo-table-selected-border: $grid-selected-border !default;
+$kendo-table-selected-border: null !default;

package/scss/tabstrip/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/tabstrip/_layout.scss

@@ -22,7 +22,7 @@
         display: flex;
         flex-flow: column nowrap;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-tabstrip-wrapper > & {
             flex: 1 1 auto;
@@ -80,9 +80,6 @@
             align-items: center;
         }
     }
-    .k-ie11 .k-tabstrip-items {
-        white-space: nowrap;
-    }
 
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
@@ -157,13 +154,13 @@
 
             &.k-hstack {
                 > .k-button {
-                    padding: 0 map-get( $spacing, 1 );
+                    padding: 0 k-map-get( $kendo-spacing, 1 );
                 }
             }
 
             &.k-vstack {
                 > .k-button {
-                    padding: map-get( $spacing, 1 ) 0;
+                    padding: k-map-get( $kendo-spacing, 1 ) 0;
                 }
             }
         }

package/scss/tabstrip/_theme.scss

@@ -29,10 +29,10 @@
             &:hover,
             &.k-hover {
                 @include fill(
-                    $tabstrip-item-hovered-text,
-                    $tabstrip-item-hovered-bg,
-                    $tabstrip-item-hovered-border,
-                    $tabstrip-item-hovered-gradient
+                    $tabstrip-item-hover-text,
+                    $tabstrip-item-hover-bg,
+                    $tabstrip-item-hover-border,
+                    $tabstrip-item-hover-gradient
                 );
             }
 
@@ -49,11 +49,11 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $tabstrip-item-focused-shadow );
+                @include focus-indicator( $tabstrip-item-focus-shadow, true );
             }
 
             &.k-tabstrip-dragging {
-                @include box-shadow( $tabstrip-item-dragging-shadow );
+                @include focus-indicator( $tabstrip-item-dragging-shadow );
             }
         }
 
@@ -71,7 +71,7 @@
 
         &:focus,
         &.k-focus {
-            outline-color: $tabstrip-content-border-focused;
+            outline-color: $tabstrip-content-focus-border;
         }
     }
 

package/scss/tabstrip/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Tabstrip
+
 $tabstrip-wrapper-padding-x: 0px !default;
 $tabstrip-wrapper-padding-y: 0px !default;
 $tabstrip-wrapper-border-width: 0px !default;
@@ -17,17 +21,17 @@ $tabstrip-wrapper-border: null !default;
 $tabstrip-bg: null !default;
 /// Text color of tabstrip component
 /// @group tabstrip
-$tabstrip-text: $component-text !default;
+$tabstrip-text: $kendo-component-text !default;
 /// Border color of tabstrip component
 /// @group tabstrip
-$tabstrip-border: $component-border !default;
+$tabstrip-border: $kendo-component-border !default;
 
 /// Horizontal padding of tabs
 /// @group tabstrip
-$tabstrip-item-padding-x: $nav-item-padding-x !default;
+$tabstrip-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of tabs
 /// @group tabstrip
-$tabstrip-item-padding-y: $nav-item-padding-y !default;
+$tabstrip-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 /// Width of border around tabs
 /// @group tabstrip
 $tabstrip-item-border-width: 1px !default;
@@ -36,7 +40,7 @@ $tabstrip-item-border-width: 1px !default;
 $tabstrip-item-border-radius: $kendo-border-radius-md !default;
 /// Spacing between tabs
 /// @group tabstrip
-$tabstrip-item-gap: $nav-item-margin !default;
+$tabstrip-item-gap: 0 !default;
 
 /// Background color of tabs
 /// @group tabstrip
@@ -53,31 +57,31 @@ $tabstrip-item-gradient: null !default;
 
 /// Background color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-bg: null !default;
+$tabstrip-item-hover-bg: null !default;
 /// Text color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-text: $link-hover-text !default;
+$tabstrip-item-hover-text: $link-hover-text !default;
 /// Border color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-border: null !default;
+$tabstrip-item-hover-border: null !default;
 /// Background gradient of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hovered-gradient: null !default;
+$tabstrip-item-hover-gradient: null !default;
 
 /// Background color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-bg: $component-bg !default;
+$tabstrip-item-selected-bg: $kendo-component-bg !default;
 /// Text color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-text: $component-text !default;
+$tabstrip-item-selected-text: $kendo-component-text !default;
 /// Border color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-border: $component-border !default;
+$tabstrip-item-selected-border: $kendo-component-border !default;
 /// Background gradient of selected tabs
 /// @group tabstrip
 $tabstrip-item-selected-gradient: null !default;
 
-$tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
+$tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
 
@@ -86,23 +90,23 @@ $tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: map-get( $spacing, 4 ) !default;
+$tabstrip-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $tabstrip-content-border-width: 1px !default;
 
 /// Background color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-bg: $component-bg !default;
+$tabstrip-content-bg: $kendo-component-bg !default;
 /// Text color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-text: $component-text !default;
+$tabstrip-content-text: $kendo-component-text !default;
 /// Border color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-border: $component-border !default;
+$tabstrip-content-border: $kendo-component-border !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-border-focused: $component-text !default;
+$tabstrip-content-focus-border: $kendo-component-text !default;

package/scss/taskboard/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";
@@ -14,6 +14,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/taskboard/_layout.scss

@@ -216,26 +216,3 @@
     }
 
 }
-
-@include exports( "taskboard/layout/compatibility" ) {
-
-    .k-ie {
-        .k-taskboard-column:not(:last-child) {
-            margin-right: $taskboard-columns-container-gap;
-        }
-
-        .k-rtl .k-taskboard-column:not(:last-child) {
-            margin-right: 0;
-            margin-left: $taskboard-columns-container-gap;
-        }
-
-        .k-taskboard-column-cards-container {
-            margin-bottom: 3 * $taskboard-column-container-spacing-y;
-        }
-
-        .k-taskboard-column-cards > .k-taskboard-card:not(:last-child) {
-            margin-bottom: $taskboard-column-cards-gap;
-        }
-    }
-
-}

package/scss/taskboard/_theme.scss

@@ -79,7 +79,7 @@
         &:focus,
         &.k-focus {
             @include fill( $border: $taskboard-card-focus-border );
-            @include box-shadow( $taskboard-card-focus-shadow );
+            @include focus-indicator( $taskboard-card-focus-shadow );
         }
 
         &:hover,
@@ -93,7 +93,7 @@
         }
 
         &.k-disabled {
-            @include disabled( $disabled-styling );
+            @include disabled( $kendo-disabled-styling );
         }
     }