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

package/scss/calendar/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Calendar
+
 $calendar-border-width: 1px !default;
 $calendar-font-family: $font-family !default;
 $calendar-font-size: $font-size !default;
@@ -6,27 +10,24 @@ $calendar-line-height: $line-height !default;
 
 $calendar-cell-size: 32px !default;
 
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
+$calendar-bg: $kendo-component-bg !default;
+$calendar-text: $kendo-component-text !default;
+$calendar-border: $kendo-component-border !default;
 
-$calendar-header-padding-x: map-get( $spacing, 1 ) !default;
-$calendar-header-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-header-border-width: 1px !default;
 
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
+$calendar-header-bg: $kendo-component-header-bg !default;
+$calendar-header-text: $kendo-component-header-text !default;
+$calendar-header-border: $kendo-component-header-border !default;
+$calendar-header-gradient: $kendo-component-header-gradient !default;
 $calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
 
-$calendar-nav-gap: map-get( $spacing, 1 ) !default;
+$calendar-nav-gap: null !default;
 
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hover-text: $link-hover-text !default;
-
-$calendar-footer-padding-x: map-get( $spacing, 4 ) !default;
-$calendar-footer-padding-y: map-get( $spacing, 2 ) !default;
+$calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
 $calendar-cell-padding-x: .25em !default;
 $calendar-cell-padding-y: $calendar-cell-padding-x !default;
@@ -40,11 +41,11 @@ $calendar-header-cell-height: $calendar-cell-size !default;
 $calendar-header-cell-font-size: $font-size-sm !default;
 $calendar-header-cell-line-height: 2 !default;
 $calendar-header-cell-bg: null !default;
-$calendar-header-cell-text: $subtle-text !default;
+$calendar-header-cell-text: $kendo-subtle-text !default;
 $calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: map-get( $spacing, 2 ) !default;
-$calendar-caption-padding-y: map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-caption-height: $calendar-cell-size !default;
 $calendar-caption-font-size: null !default;
 $calendar-caption-line-height: null !default;
@@ -52,13 +53,13 @@ $calendar-caption-font-weight: bold !default;
 
 $calendar-view-width: ($calendar-cell-size * 8) !default;
 $calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: map-get( $spacing, 4 ) !default;
+$calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $calendar-weekend-bg: null !default;
 $calendar-weekend-text: null !default;
 
 $calendar-today-style: color !default;
-$calendar-today-color: $primary !default;
+$calendar-today-color: $kendo-color-primary !default;
 
 $calendar-week-number-bg: null !default;
 $calendar-week-number-text: $calendar-header-cell-text !default;
@@ -71,23 +72,23 @@ $calendar-cell-text: null !default;
 $calendar-cell-border: null !default;
 $calendar-cell-gradient: null !default;
 
-$calendar-cell-hover-bg: $hovered-bg !default;
-$calendar-cell-hover-text: $hovered-text !default;
-$calendar-cell-hover-border: $hovered-border !default;
+$calendar-cell-hover-bg: $kendo-hover-bg !default;
+$calendar-cell-hover-text: $kendo-hover-text !default;
+$calendar-cell-hover-border: $kendo-hover-border !default;
 $calendar-cell-hover-gradient: null !default;
 
-$calendar-cell-selected-bg: $selected-bg !default;
-$calendar-cell-selected-text: $selected-text !default;
-$calendar-cell-selected-border: $selected-border !default;
+$calendar-cell-selected-bg: $kendo-selected-bg !default;
+$calendar-cell-selected-text: $kendo-selected-text !default;
+$calendar-cell-selected-border: $kendo-selected-border !default;
 $calendar-cell-selected-gradient: null !default;
 
-$calendar-cell-selected-hover-bg: $selected-hover-bg !default;
-$calendar-cell-selected-hover-text: $selected-hover-text !default;
+$calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
+$calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
 $calendar-cell-selected-hover-border: null !default;
 $calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focused-shadow: inset 0 0 0 2px rgba( $black, .08 ) !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
+$calendar-cell-focus-shadow: inset 0 0 0 2px rgba( $kendo-color-black, .08 ) !default;
+$calendar-cell-selected-focus-shadow: $calendar-cell-focus-shadow !default;
 
 
 // Calendar navigation
@@ -98,12 +99,14 @@ $calendar-navigation-bg: $calendar-header-bg !default;
 $calendar-navigation-text: $calendar-header-text !default;
 $calendar-navigation-border: $calendar-header-border !default;
 
+$calendar-navigation-hover-text: $link-hover-text !default;
+
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: map-get( $spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: map-get( $spacing, 2 ) !default;
+$infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: map-get( $spacing, 4 ) !default;
+$infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $infinite-calendar-view-padding-y: 0px !default;
 $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
@@ -115,20 +118,20 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 $kendo-calendar-sm-font-size: $font-size-md !default;
 $kendo-calendar-sm-line-height: $line-height-md !default;
 $kendo-calendar-sm-cell-size: 28px !default;
-$kendo-calendar-sm-cell-padding-x: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
-$kendo-calendar-sm-cell-padding-y: map-get( $spacing, 1) - map-get( $spacing, thin ) !default;
+$kendo-calendar-sm-cell-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-calendar-sm-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 32px !default;
-$kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
 $kendo-calendar-lg-font-size: $font-size-lg !default;
 $kendo-calendar-lg-line-height: $line-height-lg !default;
 $kendo-calendar-lg-cell-size: 40px !default;
-$kendo-calendar-lg-cell-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
 $kendo-calendar-sizes: (
     sm: (

package/scss/captcha/_index.scss

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

package/scss/captcha/_variables.scss

@@ -1,19 +1,19 @@
 // Captcha
-$captcha-spacer: map-get( $spacing, 2 ) !default;
+$captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
 
 $captcha-width: 280px !default;
 $captcha-font-family: $font-family !default;
 $captcha-font-size: $font-size !default;
 $captcha-line-height: $line-height !default;
 $captcha-gap: $captcha-spacer !default;
-$captcha-bg: $component-bg !default;
-$captcha-text: $component-bg !default;
-$captcha-border: $component-bg !default;
+$captcha-bg: $kendo-component-bg !default;
+$captcha-text: $kendo-component-bg !default;
+$captcha-border: $kendo-component-bg !default;
 
 $captcha-image-wrap-gap: $captcha-spacer !default;
 
 $captcha-image-controls-gap: $captcha-spacer !default;
 
-$captcha-validation-message-margin-top: $captcha-spacer / 2 !default;
+$captcha-validation-message-margin-top: k-math-div( $captcha-spacer, 2 ) !default;
 $captcha-validation-message-font-size: $font-size-sm !default;
 $captcha-validation-message-font-style: italic !default;

package/scss/card/_index.scss

@@ -3,15 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_flex.scss";
-@import "../utils/_grid.scss";
-@import "../styling/_index.scss";
+// @import "../utils/_flex.scss";
+// @import "../utils/_grid.scss";
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../typography/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/card/_layout.scss

@@ -26,7 +26,7 @@
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -377,20 +377,3 @@
     }
 
 }
-
-
-
-
-@include exports("card/layout/ie11") {
-
-    .k-ie11 {
-
-        // IE11 needs units to be added to flex-basis when in shorthand
-        // Thus, `flex: x x 0` will be ignored and we need `flex: x x auto`
-        // See https://github.com/philipwalton/flexbugs#flexbug-4
-        .k-card-body {
-            flex: 1 1 auto;
-        }
-
-    }
-}

package/scss/card/_theme.scss

@@ -21,7 +21,7 @@
                 $card-focus-bg,
                 $card-focus-border
             );
-            @include box-shadow( $card-focus-shadow );
+            @include focus-indicator( $card-focus-shadow );
         }
 
         &.k-selected {
@@ -64,9 +64,9 @@
     // Card theme colors
     @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
-            background-color: tint($color, 10);
-            color: shade($color, 6);
-            border-color: tint($color, 9);
+            background-color: k-color-tint($color, 10);
+            color: k-color-shade($color, 6);
+            border-color: k-color-tint($color, 9);
 
             .k-card-subtitle {
                 color: inherit;
@@ -80,7 +80,7 @@
         &.k-focus,
         &.k-selected {
             > .k-card {
-                @include box-shadow( $card-focus-shadow );
+                @include focus-indicator( $card-focus-shadow );
             }
         }
     }

package/scss/card/_variables.scss

@@ -1,6 +1,6 @@
 // Card
-$card-padding-x: map-get( $spacing, lg ) !default;
-$card-padding-y: map-get( $spacing, md ) !default;
+$card-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$card-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 $card-border-width: 1px !default;
 $card-border-radius: $kendo-border-radius-lg !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
@@ -8,11 +8,11 @@ $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
 $card-line-height: $line-height !default;
 
-$card-deck-gap: map-get( $spacing, lg ) !default;
+$card-deck-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
-$card-bg: $component-bg !default;
-$card-text: $component-text !default;
-$card-border: $component-border !default;
+$card-bg: $kendo-component-bg !default;
+$card-text: $kendo-component-text !default;
+$card-border: $kendo-component-border !default;
 $card-shadow: null !default;
 
 $card-focus-bg: null !default;
@@ -24,42 +24,42 @@ $card-header-padding-x: $card-padding-x !default;
 $card-header-padding-y: $card-padding-y !default;
 $card-header-border-width: 1px !default;
 $card-header-bg: null !default;
-$card-header-text: $header-text !default;
-$card-header-border: $header-border !default;
+$card-header-text: $kendo-component-header-text !default;
+$card-header-border: $kendo-component-header-border !default;
 
-$card-body-padding-x: map-get( $spacing, lg ) !default;
-$card-body-padding-y: map-get( $spacing, lg ) !default;
+$card-body-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$card-body-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 
 $card-footer-padding-x: $card-padding-x !default;
 $card-footer-padding-y: $card-padding-y !default;
 $card-footer-border-width: 1px !default;
 $card-footer-bg: null !default;
-$card-footer-text: $header-text !default;
-$card-footer-border: $header-border !default;
+$card-footer-text: $kendo-component-header-text !default;
+$card-footer-border: $kendo-component-header-border !default;
 
-$card-title-margin-bottom: map-get( $spacing, sm ) !default;
+$card-title-margin-bottom: k-map-get( $kendo-spacing, 2 ) !default;
 $card-title-font-size: $h5-font-size !default;
 $card-title-font-family: null !default;
 $card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
-$card-subtitle-margin-bottom: map-get( $spacing, sm ) !default;
+$card-subtitle-margin-bottom: k-map-get( $kendo-spacing, 2 ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
 $card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;
-$card-subtitle-text: $subtle-text !default;
+$card-subtitle-text: $kendo-subtle-text !default;
 
 $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
 $card-avatar-spacing: $card-header-padding-x !default;
 
-$card-actions-padding-x: map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: map-get( $spacing, 2 ) !default;
+$card-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$card-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $card-actions-border-width: 1px !default;
-$card-actions-gap: map-get( $spacing, 2 ) !default;
+$card-actions-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
 $card-deck-scroll-button-offset: -$kendo-button-border-width !default;

package/scss/chat/_index.scss

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

package/scss/chat/_layout.scss

@@ -16,7 +16,7 @@
         flex-direction: column;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
 
         // Message list
@@ -224,7 +224,7 @@
     .k-quick-reply {
         @include border-radius( 100px );
         margin-right: $chat-quick-reply-spacing;
-        margin-bottom: ($chat-quick-reply-spacing / 2);
+        margin-bottom: k-math-div( $chat-quick-reply-spacing, 2 );
         padding: $chat-quick-reply-padding-y $chat-quick-reply-padding-x;
         border-width: 1px;
         border-style: solid;
@@ -446,7 +446,7 @@
 
         .k-scroll-button {
             // IMPORTANT: if we don't set padding, the browser will set for us
-            padding: 0 map-get( $spacing, 1 );
+            padding: 0 k-map-get( $kendo-spacing, 1 );
             height: 100%;
             aspect-ratio: auto;
             position: absolute;

package/scss/chat/_theme.scss

@@ -29,7 +29,7 @@
                 $chat-bubble-border
             );
             @include box-shadow( $chat-bubble-shadow );
-            transition: $transition;
+            transition: $kendo-transition;
             order: -1;
 
             a { color: $link-text; }

package/scss/chat/_variables.scss

@@ -18,7 +18,7 @@ $chat-message-list-spacing: $chat-item-spacing-y !default;
 $chat-timestamp-font-size: smaller !default;
 $chat-timestamp-line-height: null !default;
 $chat-timestamp-transform: uppercase !default;
-$chat-timestamp-text: $subtle-text !default;
+$chat-timestamp-text: $kendo-subtle-text !default;
 $chat-timestamp-bg: null !default;
 
 $chat-bubble-padding-x: 12px !default;
@@ -32,11 +32,11 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-toolbar-padding-x: $toolbar-padding-x !default;
-$chat-toolbar-padding-y: $toolbar-padding-y !default;
-$chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: $toolbar-bg !default;
-$chat-toolbar-text: $toolbar-text !default;
+$chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$chat-toolbar-bg: $kendo-toolbar-bg !default;
+$chat-toolbar-text: $kendo-toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
 $chat-quick-reply-padding-x: 12px !default;
@@ -45,28 +45,28 @@ $chat-quick-reply-spacing: 8px !default;
 $chat-quick-reply-line-height: $chat-bubble-line-height !default;
 
 
-$chat-bg: $app-bg !default;
-$chat-text: $app-text !default;
-$chat-border: $app-border !default;
+$chat-bg: $kendo-app-bg !default;
+$chat-text: $kendo-app-text !default;
+$chat-border: $kendo-app-border !default;
 
-$chat-bubble-bg: $component-bg !default;
-$chat-bubble-text: $component-text !default;
+$chat-bubble-bg: $kendo-component-bg !default;
+$chat-bubble-text: $kendo-component-text !default;
 $chat-bubble-border: $chat-bubble-bg !default;
-$chat-bubble-shadow: 0 1px 2px rgba( 0, 0, 0, .08) !default;
-$chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default;
-$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .16) !default;
+$chat-bubble-shadow: 0 1px 2px rgba( $kendo-color-black, .08) !default;
+$chat-bubble-hover-shadow: 0 1px 2px rgba( $kendo-color-black, .16) !default;
+$chat-bubble-selected-shadow: 0 3px 10px rgba( $kendo-color-black, .16) !default;
 
-$chat-alt-bubble-bg: $primary !default;
-$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
+$chat-alt-bubble-bg: $kendo-color-primary !default;
+$chat-alt-bubble-text: k-contrast-legacy( $chat-alt-bubble-bg ) !default;
 $chat-alt-bubble-border: $chat-alt-bubble-bg !default;
 $chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default;
 
 $chat-quick-reply-bg: transparent !default;
-$chat-quick-reply-text: $primary !default;
-$chat-quick-reply-border: $primary !default;
+$chat-quick-reply-text: $kendo-color-primary !default;
+$chat-quick-reply-border: $kendo-color-primary !default;
 
-$chat-quick-reply-hover-bg: $primary !default;
-$chat-quick-reply-hover-text: $primary-contrast !default;
-$chat-quick-reply-hover-border: $primary !default;
+$chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$chat-quick-reply-hover-border: $kendo-color-primary !default;

package/scss/checkbox/_index.scss

@@ -2,11 +2,9 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/checkbox/_layout.scss

@@ -71,7 +71,7 @@
     // Disabled state
     .k-checkbox:disabled,
     .k-checkbox.k-disabled {
-        @include disabled( $disabled-styling );
+        @include disabled( $kendo-disabled-styling );
     }
 
 
@@ -147,7 +147,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: map-get( $spacing, 1 );
+        gap: k-map-get( $kendo-spacing, 1 );
 
         .k-checkbox-label {
             margin: 0;
@@ -190,9 +190,9 @@
 
     // Checkbox size
     @each $size, $size-props in $kendo-checkbox-sizes {
-        $_size: map-get( $size-props, size );
-        $_glyph-size: map-get( $size-props, glyph-size );
-        $_ripple-size: map-get( $size-props, ripple-size );
+        $_size: k-map-get( $size-props, size );
+        $_glyph-size: k-map-get( $size-props, glyph-size );
+        $_ripple-size: k-map-get( $size-props, ripple-size );
 
         .k-checkbox-#{$size} {
             width: $_size;

package/scss/checkbox/_theme.scss

@@ -25,7 +25,7 @@
     .k-checkbox:focus,
     .k-checkbox.k-focus {
         @include fill( $border: $kendo-checkbox-focus-border );
-        @include box-shadow( $kendo-checkbox-focus-shadow );
+        @include focus-indicator( $kendo-checkbox-focus-shadow );
     }
 
 
@@ -52,7 +52,7 @@
     .k-checkbox:checked:focus,
     .k-checkbox.k-checked.k-focus {
         @include fill( $border: $kendo-checkbox-focus-checked-border );
-        @include box-shadow( $kendo-checkbox-focus-checked-shadow );
+        @include focus-indicator( $kendo-checkbox-focus-checked-shadow );
     }