@progress/kendo-theme-bootstrap 6.8.0-dev.1 → 7.0.0-dev.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "6.8.0-dev.1",
+  "version": "7.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,10 +51,10 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.1",
-    "@progress/kendo-theme-default": "6.8.0-dev.1",
-    "@progress/kendo-theme-utils": "6.8.0-dev.1",
+    "@progress/kendo-theme-core": "7.0.0-dev.0",
+    "@progress/kendo-theme-default": "7.0.0-dev.0",
+    "@progress/kendo-theme-utils": "7.0.0-dev.0",
     "bootstrap": "5.2.1"
   },
-  "gitHead": "8b90f3aef2d8742d9fea94474dabb38bd7553c1d"
+  "gitHead": "228be168555ed9f71c328cefd10924e3fd037023"
 }

package/scss/action-sheet/_variables.scss

@@ -16,7 +16,7 @@ $kendo-actionsheet-line-height: $kendo-line-height-md !default;
 $kendo-actionsheet-bg: $kendo-component-bg !default;
 $kendo-actionsheet-text: $kendo-component-text !default;
 $kendo-actionsheet-border: $kendo-component-border !default;
-$kendo-actionsheet-shadow: 0 8px 10px -5px rgba( black, .2 ), 0 16px 24px 2px rgba( black, .14 ), 0 6px 30px 5px rgba( black, .12 ) !default;
+$kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
 // Actionsheet header

package/scss/appbar/_variables.scss

@@ -48,7 +48,7 @@ $kendo-appbar-dark-text: k-contrast-color( $kendo-color-dark ) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
-$kendo-appbar-box-shadow: 0px 1px 1px rgba( black, .16 ) !default;
+$kendo-appbar-box-shadow: k-elevation(4) !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
-$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .16 ) !default;
+$kendo-appbar-bottom-box-shadow: k-elevation(4) !default;

package/scss/bottom-navigation/_variables.scss

@@ -49,7 +49,7 @@ $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: 0px 0px 5px rgba( black, .12 ) !default;
+$kendo-bottom-nav-shadow: k-elevation(4) !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
@@ -59,4 +59,4 @@ $kendo-bottom-nav-flat-text: $kendo-component-text !default;
 $kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-border: $kendo-component-border !default;
+$kendo-bottom-nav-flat-border: $kendo-component-border !default;

package/scss/card/_variables.scss

@@ -21,7 +21,7 @@ $kendo-card-shadow: null !default;
 $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 $kendo-card-focus-border: null !default;
-$kendo-card-focus-shadow: 0 0 0 3px rgba( $kendo-card-border, .5 ) !default;
+$kendo-card-focus-shadow: k-elevation(3) !default;
 
 $kendo-card-header-padding-x: $kendo-card-padding-x !default;
 $kendo-card-header-padding-y: $kendo-card-padding-y !default;

package/scss/colorgradient/_variables.scss

@@ -86,6 +86,9 @@ $kendo-color-gradient-draghandle-height: 14px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-width: 1px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The border radius of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-radius: 50% !default;
@@ -97,16 +100,19 @@ $kendo-color-gradient-draghandle-text: null !default;
 $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: rgba( white, .8) !default;
-/// The box shadow of the ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
+/// The color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba( black, .5 ) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5) !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
+/// The outline color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
+/// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 
 /// The vertical margin of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -133,4 +139,4 @@ $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 $kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 2 ) !default;
+$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 2 ) !default;

package/scss/common/_index.scss

@@ -1,4 +1,5 @@
 @import "./_base.scss";
 @import "./_animations.scss";
+@import "./_indicators.scss";
 @import "./_resizing.scss";
 @import "./_scrollbar.scss";

package/scss/common/_indicators.scss

@@ -0,0 +1 @@
+@import "@progress/kendo-theme-default/scss/common/_indicators.scss";

package/scss/core/_index.scss

@@ -3,9 +3,15 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Variables
 @import "../_variables.scss";
 
+// Elevation
+@import "./elevation/index.import.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();
+
+    // Elevation System
+    @include kendo-elevation--styles();
 }

package/scss/core/elevation/index.import.scss

@@ -0,0 +1,34 @@
+$_default-elevation: (
+    1: (
+        0px 1px 2px rgba(0, 0, 0, 0.038),
+    ),
+    2: (
+        0px 2px 7px rgba(0, 0, 0, 0.075),
+    ),
+    3: (
+        0px 4px 10px rgba(0, 0, 0, 0.1),
+    ),
+    4: (
+        0px 6px 13px rgba(0, 0, 0, 0.125),
+    ),
+    5: (
+        0px 8px 16px 0px rgba(0, 0, 0, 0.15),
+    ),
+    6: (
+        0px 11px 24px 0px rgba(0, 0, 0, 0.159),
+    ),
+    7: (
+        0px 14px 36px 0px rgba(0, 0, 0, 0.168),
+    ),
+    8: (
+        0px 16px 48px 0px rgba(0, 0, 0, 0.176),
+    ),
+    9: (
+        0px 18px 60px 0px rgba(0, 0, 0, 0.185),
+    ),
+);
+
+/// Global Elevation.
+/// @group elevation
+$kendo-elevation: $_default-elevation !default;
+

package/scss/dock-manager/_index.scss

@@ -0,0 +1,38 @@
+@import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dock-manager",
+    dependencies: (
+        "splitter",
+        "toolbar",
+        "tabstrip"
+    )
+);
+
+// Dependencies
+@import "../splitter/_index.scss";
+@import "../toolbar/_index.scss";
+@import "../tabstrip/_index.scss";
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+// Expose
+@mixin kendo-dock-manager--styles() {
+    @include module-render("dock-manager") {
+        @include kendo-dock-manager--layout();
+        @include kendo-dock-manager--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-dock-manager--styles();
+}

package/scss/dock-manager/_layout.scss

@@ -0,0 +1,6 @@
+@import "@progress/kendo-theme-default/scss/dock-manager/_layout.scss";
+
+@mixin kendo-dock-manager--layout() {
+    @include kendo-dock-manager--layout-base();
+    @include kendo-dock-navigator--layout();
+}

package/scss/dock-manager/_theme.scss

@@ -0,0 +1,6 @@
+@import "@progress/kendo-theme-default/scss/dock-manager/_theme.scss";
+
+@mixin kendo-dock-manager--theme() {
+    @include kendo-dock-manager--theme-base();
+    @include kendo-dock-navigator--theme();
+}

package/scss/dock-manager/_variables.scss

@@ -0,0 +1,113 @@
+///  The width of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-width: 1px !default;
+/// The style of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-style: solid !default;
+/// The color of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border: $kendo-base-border !default;
+
+/// The vertical padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The width of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
+///  The style of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-style: solid !default;
+/// The background color of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-bg: $kendo-component-bg !default;
+
+/// The vertical padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-y: null !default;
+/// The horizontal padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-x: null !default;
+/// The font family of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-family: $kendo-font-family !default;
+/// The font size of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-size: $kendo-font-size-lg !default;
+/// The line height of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-line-height: $kendo-line-height-sm !default;
+/// The font weight of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-weight: $kendo-font-weight-normal !default;
+
+/// The horizontal padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
+/// The vertical padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-pane-content-padding-y !default;
+
+/// The width of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-width: 300px !default;
+/// The background-color of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-bg: $kendo-component-bg !default;
+/// The box shadow of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
+
+/// The padding of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-padding: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The background color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-bg: $kendo-component-bg !default;
+/// The text color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-text: $kendo-color-primary !default;
+/// The outline width of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-width: 1px !default;
+/// The outline style of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-style: solid !default;
+/// The outline color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
+/// The box shadow of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+
+///  The background color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-bg: $kendo-color-primary !default;
+/// The text color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+
+/// The width of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-width: 1px !default;
+/// The style of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-style: dashed !default;
+/// The border radius of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
+/// The background color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-bg: rgba( $kendo-color-primary, .16 ) !default;
+/// The border color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;

package/scss/fab/_variables.scss

@@ -114,10 +114,10 @@ $kendo-fab-sizes: (
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 ), 0px 3px 5px rgba( black, .2 ) !default;
+$kendo-fab-shadow: k-elevation(5) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 ), 0px 3px 5px k-try-tint( rgba( black, .2 ), .5 ) !default;
+$kendo-fab-disabled-shadow: k-elevation(5) !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;

package/scss/index.scss

@@ -120,6 +120,7 @@
 @import "./panelbar/_index.scss";
 @import "./splitter/_index.scss";
 @import "./tilelayout/_index.scss";
+@import "./dock-manager/_index.scss";
 
 
 // Data management
@@ -288,6 +289,7 @@
     @include kendo-panelbar--styles();
     @include kendo-splitter--styles();
     @include kendo-tile-layout--styles();
+    @include kendo-dock-manager--styles();
 
 
     // Data management

package/scss/pdf-viewer/_variables.scss

@@ -23,12 +23,11 @@ $kendo-pdf-viewer-page-spacing: 30px !default;
 $kendo-pdf-viewer-page-bg: white !default;
 $kendo-pdf-viewer-page-text: $kendo-component-text !default;
 $kendo-pdf-viewer-page-border: $kendo-component-border !default;
-$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;
-
-$kendo-pdf-viewer-search-dialog-padding-x: $kendo-toolbar-md-padding-x !default;
-$kendo-pdf-viewer-search-dialog-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
-$kendo-pdf-viewer-search-dialog-spacing: $kendo-toolbar-md-spacing !default;
+$kendo-pdf-viewer-page-shadow: k-elevation(3) !default;
 
+$kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
+$kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
+$kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 $kendo-pdf-viewer-search-panel-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;

package/scss/pivotgrid/_variables.scss

@@ -69,10 +69,11 @@ $kendo-pivotgrid-configurator-header-bg: null !default;
 $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-configurator-header-border: null !default;
 
-$kendo-pivotgrid-configurator-end-shadow: -3px 0px 6px rgba( black, .16 ) !default;
-$kendo-pivotgrid-configurator-start-shadow: 3px 0px 6px rgba( black, .16 ) !default;
-$kendo-pivotgrid-configurator-top-shadow: 0px -3px 6px rgba( black, .16 ) !default;
-$kendo-pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba( black, .16 ) !default;
+$kendo-pivotgrid-configurator-shadow: k-elevation(3) !default;
+$kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default;
+$kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default;
+$kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow  !default;
+$kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default;
 
 $kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;

package/scss/popup/_variables.scss

@@ -36,4 +36,4 @@ $kendo-popup-text: $kendo-component-text !default;
 $kendo-popup-border: $kendo-component-border !default;
 /// Box shadow of the popup.
 /// @group popup
-$kendo-popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 ) !default;
+$kendo-popup-shadow: k-elevation(4) !default;

package/scss/scheduler/_variables.scss

@@ -48,8 +48,6 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-$kendo-scheduler-current-time-color: #ff0000 !default;
-
 $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
 $kendo-scheduler-nonwork-text: null !default;
 
@@ -77,7 +75,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
 $kendo-scheduler-tooltip-border: null !default;
-$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba( black, .2 ) !default;
+$kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
 $kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;

package/scss/tabstrip/_variables.scss

@@ -80,7 +80,7 @@ $kendo-tabstrip-item-selected-gradient: null !default;
 
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$kendo-tabstrip-item-dragging-shadow: 0px 3px 4px rgba( black, .15 ) !default;
+$kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 
 $kendo-tabstrip-item-disabled-bg: null !default;
 $kendo-tabstrip-item-disabled-text: null !default;

package/scss/timeline/_variables.scss

@@ -27,7 +27,7 @@ $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 *
 $kendo-timeline-track-bg: $kendo-button-bg !default;
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;
 
-$kendo-timeline-track-item-focus-shadow: 0 0 0 3px rgba( $kendo-color-primary, .5 ) !default;
+$kendo-timeline-track-item-focus-shadow: k-elevation(2) !default;
 
 $kendo-timeline-track-event-offset: 36px !default;
 

package/scss/tooltip/_variables.scss

@@ -18,6 +18,8 @@ $kendo-tooltip-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-bl
 $kendo-tooltip-text: k-contrast-color( $kendo-tooltip-bg ) !default;
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
 
+$kendo-tooltip-shadow: k-elevation(2) !default;
+
 $kendo-tooltip-primary-bg: $kendo-color-primary !default;
 $kendo-tooltip-primary-text: k-contrast-color( $kendo-tooltip-primary-bg ) !default;
 $kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;