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

package/scss/tabstrip/_layout.scss

@@ -1,9 +1,9 @@
 @include exports("tabstrip/layout") {
 
     .k-tabstrip-wrapper {
-        padding: $tabstrip-wrapper-padding-y $tabstrip-wrapper-padding-x;
+        padding: $kendo-tabstrip-wrapper-padding-y $kendo-tabstrip-wrapper-padding-x;
         box-sizing: border-box;
-        border-width: $tabstrip-wrapper-border-width;
+        border-width: $kendo-tabstrip-wrapper-border-width;
         border-style: solid;
         display: flex;
         flex-direction: column;
@@ -14,9 +14,9 @@
         border-color: transparent;
         box-sizing: border-box;
         outline: 0;
-        font-family: $tabstrip-font-family;
-        font-size: $tabstrip-font-size;
-        line-height: $tabstrip-line-height;
+        font-family: $kendo-tabstrip-font-family;
+        font-size: $kendo-tabstrip-font-size;
+        line-height: $kendo-tabstrip-line-height;
         color: inherit;
         background-color: transparent;
         display: flex;
@@ -43,7 +43,7 @@
         display: flex;
         flex-flow: row wrap;
         flex: 1 1 auto;
-        gap: $tabstrip-item-gap;
+        gap: $kendo-tabstrip-item-gap;
 
         *,
         *::before,
@@ -54,7 +54,7 @@
         .k-item {
             margin: 0;
             padding: 0;
-            border: $tabstrip-item-border-width solid transparent;
+            border: $kendo-tabstrip-item-border-width solid transparent;
             position: relative;
             flex-shrink: 0;
             display: flex;
@@ -69,7 +69,7 @@
         }
 
         .k-link {
-            padding: $tabstrip-item-padding-y $tabstrip-item-padding-x;
+            padding: $kendo-tabstrip-item-padding-y $kendo-tabstrip-item-padding-x;
             color: inherit;
             cursor: pointer;
             display: inline-flex;
@@ -84,9 +84,9 @@
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         margin: 0 !important; // sass-lint:disable-line no-important
-        padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
+        padding: $kendo-tabstrip-content-padding-y $kendo-tabstrip-content-padding-x;
         box-sizing: border-box;
-        border-width: $tabstrip-content-border-width;
+        border-width: $kendo-tabstrip-content-border-width;
         border-style: solid;
         border-color: inherit;
         display: none;
@@ -170,11 +170,11 @@
     // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
-            border-bottom-width: $tabstrip-border-width;
+            border-bottom-width: $kendo-tabstrip-border-width;
 
             .k-item {
-                @include border-top-radius( $tabstrip-item-border-radius );
-                margin-bottom: -$tabstrip-border-width;
+                @include border-top-radius( $kendo-tabstrip-item-border-radius );
+                margin-bottom: -$kendo-tabstrip-border-width;
             }
 
             .k-item.k-active {
@@ -184,17 +184,17 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-bottom-radius( $tabstrip-item-border-radius );
+            @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
             border-top-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
-            border-top-width: $tabstrip-border-width;
+            border-top-width: $kendo-tabstrip-border-width;
 
             .k-item {
-                @include border-bottom-radius( $tabstrip-item-border-radius );
-                margin-top: -$tabstrip-border-width;
+                @include border-bottom-radius( $kendo-tabstrip-item-border-radius );
+                margin-top: -$kendo-tabstrip-border-width;
             }
 
             .k-item.k-active {
@@ -204,7 +204,7 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-top-radius( $tabstrip-item-border-radius );
+            @include border-top-radius( $kendo-tabstrip-item-border-radius );
             border-bottom-width: 0 !important; // sass-lint:disable-line no-important
         }
     }
@@ -212,15 +212,15 @@
         flex-direction: row;
 
         > .k-tabstrip-items-wrapper {
-            border-right-width: $tabstrip-border-width;
+            border-right-width: $kendo-tabstrip-border-width;
 
             > .k-tabstrip-items {
                 flex-direction: column;
             }
 
             .k-item {
-                @include border-left-radius( $tabstrip-item-border-radius );
-                margin-right: -$tabstrip-border-width;
+                @include border-left-radius( $kendo-tabstrip-item-border-radius );
+                margin-right: -$kendo-tabstrip-border-width;
             }
 
             .k-item.k-active {
@@ -230,7 +230,7 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-right-radius( $tabstrip-item-border-radius );
+            @include border-right-radius( $kendo-tabstrip-item-border-radius );
             border-left-width: 0 !important; // sass-lint:disable-line no-important
         }
 
@@ -239,15 +239,15 @@
         flex-direction: row-reverse;
 
         > .k-tabstrip-items-wrapper {
-            border-left-width: $tabstrip-border-width;
+            border-left-width: $kendo-tabstrip-border-width;
 
             > .k-tabstrip-items {
                 flex-direction: column;
             }
 
             .k-item {
-                @include border-right-radius( $tabstrip-item-border-radius );
-                margin-left: -$tabstrip-border-width;
+                @include border-right-radius( $kendo-tabstrip-item-border-radius );
+                margin-left: -$kendo-tabstrip-border-width;
             }
 
             .k-item.k-active {
@@ -257,7 +257,7 @@
 
         > .k-content,
         > .k-tabstrip-content {
-            @include border-left-radius( $tabstrip-item-border-radius );
+            @include border-left-radius( $kendo-tabstrip-item-border-radius );
             border-right-width: 0;
         }
     }
@@ -282,7 +282,7 @@
 
 
     // Selected indicator
-    @if ($tabstrip-indicator-size) {
+    @if ($kendo-tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
 
@@ -301,16 +301,16 @@
 
                 // Variants
                 .k-tabstrip-top > & {
-                    border-bottom-width: $tabstrip-indicator-size;
+                    border-bottom-width: $kendo-tabstrip-indicator-size;
                 }
                 .k-tabstrip-bottom > & {
-                    border-top-width: $tabstrip-indicator-size;
+                    border-top-width: $kendo-tabstrip-indicator-size;
                 }
                 .k-tabstrip-left > & {
-                    border-right-width: $tabstrip-indicator-size;
+                    border-right-width: $kendo-tabstrip-indicator-size;
                 }
                 .k-tabstrip-right > & {
-                    border-left-width: $tabstrip-indicator-size;
+                    border-left-width: $kendo-tabstrip-indicator-size;
                 }
             }
             .k-item.k-active::after {

package/scss/tabstrip/_theme.scss

@@ -3,9 +3,9 @@
     // Wrapper
     .k-tabstrip-wrapper {
         @include fill(
-            $tabstrip-wrapper-text,
-            $tabstrip-wrapper-bg,
-            $tabstrip-wrapper-border
+            $kendo-tabstrip-wrapper-text,
+            $kendo-tabstrip-wrapper-bg,
+            $kendo-tabstrip-wrapper-border
         );
     }
 
@@ -13,26 +13,26 @@
     // Items
     .k-tabstrip-items-wrapper {
         @include fill(
-            $tabstrip-text,
-            $tabstrip-bg,
-            $tabstrip-border
+            $kendo-tabstrip-text,
+            $kendo-tabstrip-bg,
+            $kendo-tabstrip-border
         );
 
         .k-item {
             @include fill(
-                $tabstrip-item-text,
-                $tabstrip-item-bg,
-                $tabstrip-item-border,
-                $tabstrip-item-gradient
+                $kendo-tabstrip-item-text,
+                $kendo-tabstrip-item-bg,
+                $kendo-tabstrip-item-border,
+                $kendo-tabstrip-item-gradient
             );
 
             &:hover,
             &.k-hover {
                 @include fill(
-                    $tabstrip-item-hover-text,
-                    $tabstrip-item-hover-bg,
-                    $tabstrip-item-hover-border,
-                    $tabstrip-item-hover-gradient
+                    $kendo-tabstrip-item-hover-text,
+                    $kendo-tabstrip-item-hover-bg,
+                    $kendo-tabstrip-item-hover-border,
+                    $kendo-tabstrip-item-hover-gradient
                 );
             }
 
@@ -40,20 +40,20 @@
             &.k-active,
             &.k-selected {
                 @include fill(
-                    $tabstrip-item-selected-text,
-                    $tabstrip-item-selected-bg,
-                    $tabstrip-item-selected-border,
-                    $tabstrip-item-selected-gradient
+                    $kendo-tabstrip-item-selected-text,
+                    $kendo-tabstrip-item-selected-bg,
+                    $kendo-tabstrip-item-selected-border,
+                    $kendo-tabstrip-item-selected-gradient
                 );
             }
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $tabstrip-item-focus-shadow );
+                @include focus-indicator( $kendo-tabstrip-item-focus-shadow, true );
             }
 
             &.k-tabstrip-dragging {
-                @include box-shadow( $tabstrip-item-dragging-shadow );
+                @include focus-indicator( $kendo-tabstrip-item-dragging-shadow );
             }
         }
 
@@ -64,24 +64,24 @@
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         @include fill(
-            $tabstrip-content-text,
-            $tabstrip-content-bg,
-            $tabstrip-content-border
+            $kendo-tabstrip-content-text,
+            $kendo-tabstrip-content-bg,
+            $kendo-tabstrip-content-border
         );
 
         &:focus,
         &.k-focus {
-            outline-color: $tabstrip-content-focus-border;
+            outline-color: $kendo-tabstrip-content-focus-border;
         }
     }
 
 
     // Selected indicator
-    @if ($tabstrip-indicator-size) {
+    @if ($kendo-tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
             .k-item.k-active::after {
-                border-color: $tabstrip-indicator-color;
+                border-color: $kendo-tabstrip-indicator-color;
             }
         }
     }

package/scss/tabstrip/_variables.scss

@@ -1,108 +1,109 @@
 // Tabstrip
-$tabstrip-wrapper-padding-x: 0px !default;
-$tabstrip-wrapper-padding-y: 0px !default;
-$tabstrip-wrapper-border-width: 0px !default;
 
-$tabstrip-font-family: $font-family !default;
-$tabstrip-font-size: $font-size !default;
-$tabstrip-line-height: $line-height !default;
-$tabstrip-border-width: 1px !default;
+$kendo-tabstrip-wrapper-padding-x: 0px !default;
+$kendo-tabstrip-wrapper-padding-y: 0px !default;
+$kendo-tabstrip-wrapper-border-width: 0px !default;
 
-$tabstrip-wrapper-bg: null !default;
-$tabstrip-wrapper-text: null !default;
-$tabstrip-wrapper-border: null !default;
+$kendo-tabstrip-font-family: $kendo-font-family !default;
+$kendo-tabstrip-font-size: $kendo-font-size-md !default;
+$kendo-tabstrip-line-height: $kendo-line-height-md !default;
+$kendo-tabstrip-border-width: 1px !default;
+
+$kendo-tabstrip-wrapper-bg: null !default;
+$kendo-tabstrip-wrapper-text: null !default;
+$kendo-tabstrip-wrapper-border: null !default;
 
 /// Background color of tabstrip component
 /// @group tabstrip
-$tabstrip-bg: null !default;
+$kendo-tabstrip-bg: null !default;
 /// Text color of tabstrip component
 /// @group tabstrip
-$tabstrip-text: $kendo-component-text !default;
+$kendo-tabstrip-text: $kendo-component-text !default;
 /// Border color of tabstrip component
 /// @group tabstrip
-$tabstrip-border: $kendo-component-border !default;
+$kendo-tabstrip-border: $kendo-component-border !default;
 
 /// Horizontal padding of tabs
 /// @group tabstrip
-$tabstrip-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-tabstrip-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of tabs
 /// @group tabstrip
-$tabstrip-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-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;
+$kendo-tabstrip-item-border-width: 1px !default;
 /// Border radius of tabs
 /// @group tabstrip
-$tabstrip-item-border-radius: $kendo-border-radius-md !default;
+$kendo-tabstrip-item-border-radius: $kendo-border-radius-md !default;
 /// Spacing between tabs
 /// @group tabstrip
-$tabstrip-item-gap: 0 !default;
+$kendo-tabstrip-item-gap: 0 !default;
 
 /// Background color of tabs
 /// @group tabstrip
-$tabstrip-item-bg: null !default;
+$kendo-tabstrip-item-bg: null !default;
 /// Text color of tabs
 /// @group tabstrip
-$tabstrip-item-text: $link-text !default;
+$kendo-tabstrip-item-text: $kendo-link-text !default;
 /// Border color of tabs
 /// @group tabstrip
-$tabstrip-item-border: null !default;
+$kendo-tabstrip-item-border: null !default;
 /// Background gradient of tabs
 /// @group tabstrip
-$tabstrip-item-gradient: null !default;
+$kendo-tabstrip-item-gradient: null !default;
 
 /// Background color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hover-bg: null !default;
+$kendo-tabstrip-item-hover-bg: null !default;
 /// Text color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hover-text: $link-hover-text !default;
+$kendo-tabstrip-item-hover-text: $kendo-link-hover-text !default;
 /// Border color of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hover-border: null !default;
+$kendo-tabstrip-item-hover-border: null !default;
 /// Background gradient of hovered tabs
 /// @group tabstrip
-$tabstrip-item-hover-gradient: null !default;
+$kendo-tabstrip-item-hover-gradient: null !default;
 
 /// Background color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-bg: $kendo-component-bg !default;
+$kendo-tabstrip-item-selected-bg: $kendo-component-bg !default;
 /// Text color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-text: $kendo-component-text !default;
+$kendo-tabstrip-item-selected-text: $kendo-component-text !default;
 /// Border color of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-border: $kendo-component-border !default;
+$kendo-tabstrip-item-selected-border: $kendo-component-border !default;
 /// Background gradient of selected tabs
 /// @group tabstrip
-$tabstrip-item-selected-gradient: null !default;
+$kendo-tabstrip-item-selected-gradient: null !default;
 
-$tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+$kendo-tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
 
-$tabstrip-indicator-size: null !default;
-$tabstrip-indicator-color: null !default;
+$kendo-tabstrip-indicator-size: null !default;
+$kendo-tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$tabstrip-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-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;
+$kendo-tabstrip-content-border-width: 1px !default;
 
 /// Background color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-bg: $kendo-component-bg !default;
+$kendo-tabstrip-content-bg: $kendo-component-bg !default;
 /// Text color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-text: $kendo-component-text !default;
+$kendo-tabstrip-content-text: $kendo-component-text !default;
 /// Border color of tabstrip content
 /// @group tabstrip
-$tabstrip-content-border: $kendo-component-border !default;
+$kendo-tabstrip-content-border: $kendo-component-border !default;
 /// Border color of tabstrip focused content
 /// @group tabstrip
-$tabstrip-content-focus-border: $kendo-component-text !default;
+$kendo-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";

package/scss/taskboard/_layout.scss

@@ -2,11 +2,11 @@
 
     // TaskBoard
     .k-taskboard {
-        padding: $taskboard-padding-y $taskboard-padding-x;
+        padding: $kendo-taskboard-padding-y $kendo-taskboard-padding-x;
         box-sizing: border-box;
-        font-size: $taskboard-font-size;
-        font-family: $taskboard-font-family;
-        line-height: $taskboard-line-height;
+        font-size: $kendo-taskboard-font-size;
+        font-family: $kendo-taskboard-font-family;
+        line-height: $kendo-taskboard-line-height;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -20,7 +20,7 @@
 
     // Toolbar
     .k-taskboard-toolbar {
-        padding: $taskboard-toolbar-padding-y $taskboard-toolbar-padding-x;
+        padding: $kendo-taskboard-toolbar-padding-y $kendo-taskboard-toolbar-padding-x;
         border-width: 0;
         box-shadow: none;
         background: none;
@@ -28,7 +28,7 @@
 
     // Content
     .k-taskboard-content {
-        padding: 0 $taskboard-toolbar-padding-x $taskboard-content-padding-y;
+        padding: 0 $kendo-taskboard-toolbar-padding-x $kendo-taskboard-content-padding-y;
         display: flex;
         position: relative;
         flex: 1 1 auto;
@@ -41,14 +41,14 @@
         display: flex;
         flex-direction: row;
         overflow: hidden;
-        gap: $taskboard-columns-container-gap;
+        gap: $kendo-taskboard-columns-container-gap;
         overflow-x: visible;
     }
 
     .k-taskboard-column {
-        width: $taskboard-column-width;
-        border-width: $taskboard-column-border-width;
-        border-radius: $taskboard-column-border-radius;
+        width: $kendo-taskboard-column-width;
+        border-width: $kendo-taskboard-column-border-width;
+        border-radius: $kendo-taskboard-column-border-radius;
         border-style: solid;
         outline: none;
         display: flex;
@@ -58,41 +58,41 @@
     }
 
     .k-taskboard-column-header {
-        padding: $taskboard-column-header-padding-y $taskboard-column-header-padding-x;
-        font-weight: $taskboard-column-header-font-weight;
+        padding: $kendo-taskboard-column-header-padding-y $kendo-taskboard-column-header-padding-x;
+        font-weight: $kendo-taskboard-column-header-font-weight;
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: $taskboard-column-header-gap;
+        gap: $kendo-taskboard-column-header-gap;
     }
 
     .k-taskboard-column-header-actions {
         display: inline-flex;
         flex-shrink: 0;
         align-self: flex-start;
-        gap: $taskboard-column-header-actions-gap;
+        gap: $kendo-taskboard-column-header-actions-gap;
     }
 
     .k-taskboard-column-cards-container {
-        margin-bottom: $taskboard-column-container-spacing-y;
-        padding: $taskboard-column-container-padding-y $taskboard-column-container-padding-x;
+        margin-bottom: $kendo-taskboard-column-container-spacing-y;
+        padding: $kendo-taskboard-column-container-padding-y $kendo-taskboard-column-container-padding-x;
         outline: none;
         overflow: auto;
         flex: 1 1 auto;
     }
 
     .k-taskboard-column-cards {
-        padding: $taskboard-column-cards-padding-y $taskboard-column-cards-padding-x;
+        padding: $kendo-taskboard-column-cards-padding-y $kendo-taskboard-column-cards-padding-x;
         min-height: 100%;
         display: flex;
         flex-direction: column;
-        gap: $taskboard-column-cards-gap 0;
+        gap: $kendo-taskboard-column-cards-gap 0;
     }
 
     // Edit/New Columns
     .k-taskboard-column-new {
         // TODO: we need better way
-        // max-height: $taskboard-column-new-calc-height;
+        // max-height: $kendo-taskboard-column-new-calc-height;
     }
 
     .k-taskboard-column-new,
@@ -108,9 +108,9 @@
 
     // Preview/Edit Pane
     .k-taskboard-pane {
-        padding: $taskboard-pane-padding-y $taskboard-pane-padding-x;
-        width: $taskboard-pane-width;
-        border-width: $taskboard-pane-border-width;
+        padding: $kendo-taskboard-pane-padding-y $kendo-taskboard-pane-padding-x;
+        width: $kendo-taskboard-pane-width;
+        border-width: $kendo-taskboard-pane-border-width;
         border-style: solid;
         display: flex;
         flex-direction: column;
@@ -123,8 +123,8 @@
     }
 
     .k-taskboard-pane-header {
-        padding: $taskboard-pane-header-padding-y $taskboard-pane-header-padding-x;
-        font-weight: $taskboard-pane-header-font-weight;
+        padding: $kendo-taskboard-pane-header-padding-y $kendo-taskboard-pane-header-padding-x;
+        font-weight: $kendo-taskboard-pane-header-font-weight;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -141,13 +141,13 @@
     }
 
     .k-taskboard-pane-content {
-        padding: $taskboard-pane-content-padding-y $taskboard-pane-content-padding-x;
+        padding: $kendo-taskboard-pane-content-padding-y $kendo-taskboard-pane-content-padding-x;
         overflow: auto;
         flex: 1 1 auto;
     }
 
     .k-taskboard-pane-actions {
-        padding: $taskboard-pane-actions-padding-y $taskboard-pane-actions-padding-x;
+        padding: $kendo-taskboard-pane-actions-padding-y $kendo-taskboard-pane-actions-padding-x;
     }
 
     .k-taskboard-pane-start {
@@ -157,17 +157,17 @@
 
     // Cards
     .k-taskboard-card {
-        @include border-radius( $taskboard-card-border-radius );
-        border-width: $taskboard-card-border-width;
+        @include border-radius( $kendo-taskboard-card-border-radius );
+        border-width: $kendo-taskboard-card-border-width;
 
         &.k-taskboard-card-category {
-            border-left-width: $taskboard-card-category-border-width;
+            border-left-width: $kendo-taskboard-card-category-border-width;
         }
 
         .k-card-header
         .k-card-body,
         .k-card-footer {
-            padding: $taskboard-card-padding-y $taskboard-card-padding-x;
+            padding: $kendo-taskboard-card-padding-y $kendo-taskboard-card-padding-x;
         }
 
         .k-card-header {
@@ -195,8 +195,8 @@
 
     // Card Drag Placeholder
     .k-taskboard-drag-placeholder {
-        @include border-radius( $taskboard-drag-placeholder-border-radius );
-        border-width: $taskboard-drag-placeholder-border-width;
+        @include border-radius( $kendo-taskboard-drag-placeholder-border-radius );
+        border-width: $kendo-taskboard-drag-placeholder-border-width;
         border-style: solid;
         position: relative;
     }
@@ -210,8 +210,8 @@
         &.k-rtl,
         [dir="rtl"] &,
         &[dir="rtl"] {
-            border-left-width: $taskboard-card-border-width;
-            border-right-width: $taskboard-card-category-border-width;
+            border-left-width: $kendo-taskboard-card-border-width;
+            border-right-width: $kendo-taskboard-card-category-border-width;
         }
     }