@progress/kendo-theme-bootstrap 4.41.3-dev.2 → 4.42.1-dev.0

package/modules/@progress/kendo-theme-default/scss/map/_layout.scss

@@ -75,6 +75,8 @@
         .k-button {
             margin: 0;
             padding: 0;
+            width: auto;
+            height: auto;
             border-radius: 100%;
             line-height: 1;
             box-shadow: none;

package/modules/@progress/kendo-theme-default/scss/menu/_layout.scss

@@ -86,7 +86,6 @@
             height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            flex-shrink: 0;
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_layout.scss

@@ -455,6 +455,27 @@
 }
 
 
+@include exports( "pivotgrid/layout/export" ) {
+
+    .k-pdf-export-shadow {
+
+        .k-pivotgrid {
+            height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        .k-pivotgrid-values  {
+            height: auto;
+            overflow: visible;
+        }
+
+        .k-pivotgrid-column-headers .k-pivotgrid-table {
+            padding-inline-end: 0;
+        }
+
+    }
+}
+
+
 @include exports("pivotgrid/layout/legacy") {
 
     .k-pivot {

package/modules/@progress/kendo-theme-default/scss/popup/_layout.scss

@@ -17,11 +17,6 @@
             border-width: 0;
         }
 
-        &.k-colorpicker-popup {
-            display: flex;
-            align-items: center;
-        }
-
         .k-item {
             outline: none;
         }
@@ -303,10 +298,6 @@
                 border-width: 1px;
             }
         }
-
-        .k-separator {
-            height: 0;
-        }
     }
 
     .k-virtual-content {

package/modules/@progress/kendo-theme-default/scss/spreadsheet/_layout.scss

@@ -679,10 +679,6 @@
     .k-spreadsheet-popup {
         padding: 0;
 
-        .k-separator {
-            display: block;
-        }
-
         .k-button {
             @include border-radius( 0 );
             border-width: 0;

package/modules/@progress/kendo-theme-default/scss/utils/_border.scss

@@ -43,9 +43,9 @@
     $utils-border-radius: (
         default: map-get( $spacing, 1 ),
         0: 0,
-        sm: map-get( $spacing, 1 ) / 2,
-        md: map-get( $spacing, 1 ),
-        lg: map-get( $spacing, 2 ),
+        sm: ( map-get( $spacing, 1 ) / 4 ),
+        md: ( map-get( $spacing, 1 ) / 2 ),
+        lg: map-get( $spacing, 1 ),
         circle: 50%,
         pill: 9999px
     ) !default;
@@ -93,6 +93,11 @@
                 $_selector-suffix: if( $radius == default, "", "-#{$radius}" );
 
                 .k-#{$_selector-base}#{$_selector-suffix} {
+                    @each $prop in $props {
+                        #{$prop}: $value;
+                    }
+                }
+                .\!k-#{$_selector-base}#{$_selector-suffix} {
                     @each $prop in $props {
                         #{$prop}: $value !important;
                     }

package/modules/@progress/kendo-theme-default/scss/utils/_spacing.scss

@@ -111,4 +111,28 @@
         }
     }
 
+    // @name k-gap-VALUE
+    // @description This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-x-VALUE
+    // @description This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
+    // @group spacing
+
+    // @name k-gap-y-VALUE
+    // @description This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
+    // @group spacing
+
+    // Gap
+    .k-no-gap { gap: 0 !important; }
+
+    @each $size, $val in $spacing {
+        .k-gap-#{$size}     { gap: $val; }
+        .k-gap-x-#{$size}   { column-gap: $val; }
+        .k-gap-y-#{$size}   { row-gap: $val; }
+
+        .\!k-gap-#{$size}   { gap: $val !important; }
+        .\!k-gap-x-#{$size} { column-gap: $val !important; }
+        .\!k-gap-y-#{$size} { row-gap: $val !important; }
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-bootstrap",
   "description": "Bootstrap theme for Kendo UI",
-  "version": "4.41.3-dev.2",
+  "version": "4.42.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
     "postpublish": "rm -rf modules && git checkout scss"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^4.41.3-dev.2",
+    "@progress/kendo-theme-default": "^4.42.1-dev.0",
     "bootstrap": "^5.1.0"
   },
-  "gitHead": "dac8c87fd7d383c2f551aad1075492fe8422b173"
+  "gitHead": "8575a79ff8c17831e06014204962beb77190180b"
 }

package/scss/all.scss

@@ -49,6 +49,10 @@
 
 // Inputs
 @import "autocomplete/_index.scss";
+@import "color-preview/_index.scss";
+@import "colorpalette/_index.scss";
+@import "colorgradient/_index.scss";
+@import "coloreditor/_index.scss";
 @import "colorpicker/_index.scss";
 @import "combobox/_index.scss";
 @import "datetime/_index.scss";

package/scss/button/_index.scss

@@ -2,9 +2,9 @@
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
+@import "../typography/_variables.scss";
 
 
 // Component

package/scss/color-preview/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "../colorgradient/images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/color-preview/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_layout.scss";

package/scss/color-preview/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/color-preview/_theme.scss";

package/scss/color-preview/_variables.scss

@@ -0,0 +1,13 @@
+// Color Preview
+$color-preview-border-radius: $border-radius !default;
+$color-preview-border-width: 1px !default;
+$color-preview-bg: null !default;
+$color-preview-text: null !default;
+$color-preview-border: $component-border !default;
+$color-preview-hover-border: $hovered-border !default;
+
+$color-preview-no-color-bg: $white !default;
+$color-preview-no-color-text: $error !default;
+$color-preview-no-color-border: null !default;
+
+$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_index.scss

@@ -0,0 +1,14 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../color-preview/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/coloreditor/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss";

package/scss/coloreditor/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/coloreditor/_theme.scss";

package/scss/coloreditor/_variables.scss

@@ -0,0 +1,28 @@
+// Coloreditor/FlatColorPicker
+$coloreditor-spacer: map-get( $spacing, 4 ) !default;
+
+$coloreditor-min-width: 328px !default;
+$coloreditor-border-width: 1px !default;
+$coloreditor-border-radius: $border-radius !default;
+$coloreditor-font-family: $font-family !default;
+$coloreditor-font-size: $font-size !default;
+$coloreditor-line-height: $line-height !default;
+$coloreditor-bg: $component-bg !default;
+$coloreditor-text: $component-text !default;
+$coloreditor-border: $component-border !default;
+
+$coloreditor-focus-border: $hovered-border !default;
+$coloreditor-focus-shadow: null !default;
+
+$coloreditor-header-padding-y: $coloreditor-spacer !default;
+$coloreditor-header-padding-x: $coloreditor-header-padding-y !default;
+$coloreditor-header-actions-gap: ( $coloreditor-spacer / 2 ) !default;
+
+$coloreditor-preview-gap: 2px !default;
+$coloreditor-color-preview-width: 34px !default;
+$coloreditor-color-preview-height: 14px !default;
+
+$coloreditor-views-padding-y: $coloreditor-spacer !default;
+$coloreditor-views-padding-x: $coloreditor-views-padding-y !default;
+$coloreditor-views-gap: $coloreditor-spacer !default;
+

package/scss/colorgradient/_index.scss

@@ -0,0 +1,19 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+@import "../utils/_spacer.scss";
+@import "../icons/_index.scss";
+@import "../button/_index.scss";
+@import "../slider/_index.scss";
+@import "../textbox/_index.scss";
+@import "../numerictextbox/_index.scss";
+
+
+// Component
+@import "images/alpha-slider-bgr.scss";
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorgradient/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorgradient/_layout.scss";

package/scss/colorgradient/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorgradient/_theme.scss";

package/scss/colorgradient/_variables.scss

@@ -0,0 +1,51 @@
+// ColorGradient
+$colorgradient-spacer: map-get( $spacing, 4 ) !default;
+
+$colorgradient-width: 328px !default;
+$colorgradient-border-width: 1px !default;
+$colorgradient-border-radius: $border-radius !default;
+$colorgradient-padding-y: $colorgradient-spacer !default;
+$colorgradient-padding-x: $colorgradient-padding-y !default;
+$colorgradient-gap: $colorgradient-spacer !default;
+$colorgradient-font-family: $font-family !default;
+$colorgradient-font-size: $font-size !default;
+$colorgradient-line-height: $line-height !default;
+$colorgradient-bg: $component-bg !default;
+$colorgradient-text: $component-text !default;
+$colorgradient-border: $component-border !default;
+
+$colorgradient-focus-border: $hovered-border !default;
+$colorgradient-focus-shadow: null !default;
+
+$colorgradient-canvas-border-radius: $border-radius !default;
+$colorgradient-canvas-gap: map-get( $spacing, 3 ) !default;
+$colorgradient-canvas-rectangle-height: 180px !default;
+
+$colorgradient-slider-track-size: 10px !default;
+$colorgradient-slider-border-radius: 10px !default;
+$colorgradient-slider-draghandle-border-width: 3px !default;
+
+$colorgradient-slider-vertical-size: 180px !default;
+$colorgradient-slider-horizontal-size: 100% !default;
+
+$colorgradient-draghandle-width: 14px !default;
+$colorgradient-draghandle-height: 14px !default;
+$colorgradient-draghandle-border-width: 1px !default;
+$colorgradient-draghandle-border-radius: 50% !default;
+$colorgradient-draghandle-bg: transparent !default;
+$colorgradient-draghandle-text: null !default;
+$colorgradient-draghandle-border: rgba( $white, .8) !default;
+$colorgradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+$colorgradient-draghandle-focus-shadow: 0 1px 4px black !default;
+$colorgradient-draghandle-hover-shadow: $colorgradient-draghandle-focus-shadow !default;
+
+$colorgradient-canvas-draghandle-margin-y: -( $colorgradient-draghandle-height / 2 ) !default;
+$colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width / 2 ) !default;
+
+$colorgradient-input-width: 56px !default;
+$colorgradient-input-gap: ( $colorgradient-spacer / 2 ) !default;
+$colorgradient-input-label-gap: map-get( $spacing, 1 ) !default;
+$colorgradient-input-label-text: $disabled-text !default;
+
+$colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
+$colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;

package/scss/colorgradient/images/alpha-slider-bgr.scss

@@ -0,0 +1,3 @@
+@include exports("alpha-slider-bgr.png") {
+    @include register-data-uri("alpha-slider-bgr.png", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
+}

package/scss/colorpalette/_index.scss

@@ -0,0 +1,11 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../utils/_flex.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/colorpalette/_layout.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorpalette/_layout.scss";

package/scss/colorpalette/_theme.scss

@@ -0,0 +1 @@
+@import "../../modules/@progress/kendo-theme-default/scss/colorpalette/_theme.scss";

package/scss/colorpalette/_variables.scss

@@ -0,0 +1,10 @@
+// Colorpalette
+$colorpalette-font-family: $font-family !default;
+$colorpalette-font-size: $font-size !default;
+$colorpalette-line-height: 0 !default;
+
+$colorpalette-tile-width: map-get( $spacing, 6 ) !default;
+$colorpalette-tile-height: $colorpalette-tile-width !default;
+$colorpalette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$colorpalette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/scss/colorpicker/_index.scss

@@ -5,15 +5,13 @@
 @import "../common/_index.scss";
 @import "../utils/_flex.scss";
 @import "../button/_index.scss";
-@import "../numerictextbox/_index.scss";
-@import "../slider/_index.scss";
+@import "../colorpalette/_index.scss";
+@import "../colorgradient/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
 
 
 // Component
 @import "_variables.scss";
-@import "images/alpha-slider-bgr.scss";
-@import "images/alpha-slider-bgr-reversed.scss";
 @import "_layout.scss";
 @import "_theme.scss";

package/scss/colorpicker/_variables.scss

@@ -1,19 +1,7 @@
 // Colorpicker
-$colorpicker-rect-padding: 15px !default;
-$colorpicker-margin: 8px !default;
-$colorpicker-width: 349px !default;
-$colorpicker-border-width: 1px !default;
 $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
-$colorpicker-draghandle-width: 14px !default;
-$colorpicker-draghandle-height: 14px !default;
-$colorpicker-slider-track-size: 10px !default;
-$colorpicker-slider-border-radius: 10px !default;
-$colorpicker-input-width: 52px !default;
-$colorpicker-hex-input-width: 85px !default;
-$colorpicker-input-padding-x: $input-padding-y !default;
-$colorpicker-input-padding-y: $input-padding-y !default;
 
 $colorpicker-select-border-width: 1px !default;
 
@@ -32,9 +20,3 @@ $colorpicker-focused-text: $button-active-text !default;
 $colorpicker-focused-border: $button-active-border !default;
 $colorpicker-focused-gradient: $button-active-gradient !default;
 $colorpicker-focused-shadow: $button-focused-shadow !default;
-
-$colorpicker-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
-$colorpicker-draghandle-focused-shadow: 0 1px 4px black !default;
-
-$colorpalette-hovered-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
-$colorpalette-focused-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;

package/scss/fab/_theme.scss

@@ -1,12 +1,11 @@
 @include exports( "fab/theme/bootstrap" ) {
-    // FAB
-    .k-fab {
-        @include box-shadow($fab-shadow);
-    }
 
     // Normal state
     @each $name, $color in $fab-theme-colors {
         .k-fab-#{$name} {
+            @include box-shadow($fab-shadow);
+            outline: $fab-border-width solid $color;
+            outline-offset: -$fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -25,10 +24,14 @@
     }
 
     // Focus state
-    .k-fab.k-state-focus,
-    .k-fab.k-state-focused,
-    .k-fab:focus {
-        @include box-shadow($fab-focus-shadow);
+    @each $name, $color in $fab-theme-colors {
+        .k-fab-#{$name}.k-state-focus,
+        .k-fab-#{$name}.k-state-focused,
+        .k-fab-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 3px;
+            outline-color: rgba( $color, .5 );
+        }
     }
 
     // Active state
@@ -36,6 +39,7 @@
         .k-state-active.k-fab-#{$name},
         .k-state-selected.k-fab-#{$name},
         .k-fab-#{$name}:active {
+            @include box-shadow($fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
             background-color: try-darken( $color, 10% );
@@ -43,29 +47,13 @@
     }
 
     // Disabled state
-    .k-fab.k-state-disabled,
-    .k-fab:disabled {
-        @include box-shadow($fab-disabled-shadow);
-        opacity: 1;
-    }
-
     @each $name, $color in $fab-theme-colors {
         .k-state-disabled.k-fab-#{$name},
         .k-fab-#{$name}:disabled {
-            background-color: tint( $color, 5 );
-        }
-    }
-
-    // Disabled + Focus state
-    .k-fab-item:focus,
-    .k-fab-item.k-state-focus,
-    .k-fab-item.k-state-focused {
-        &:disabled,
-        &.k-state-disabled {
-            .k-fab-item-text,
-            .k-fab-item-icon {
-                @include box-shadow($fab-item-disabled-focus-shadow);
-            }
+            @include box-shadow($fab-disabled-shadow);
+            background-color: try-tint( $color, 4.5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
@@ -85,12 +73,17 @@
             $fab-item-icon-border
         );
         @include box-shadow($fab-item-shadow);
+        outline: $fab-border-width solid $button-bg;
+        outline-offset: -$fab-border-width;
     }
 
     // Hover state
     .k-fab-item.k-state-hover .k-fab-item-icon,
     .k-fab-item.k-state-hovered .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
+        @include box-shadow($fab-item-shadow);
+        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 10% );
+        outline-offset: -$fab-border-width;
         border-color: try-darken( $fab-item-icon-border, 10% );
         color: contrast-wcag( try-darken( $fab-item-icon-bg, 7.5% ) );
         background-color: try-darken( $fab-item-icon-bg, 7.5% );
@@ -103,12 +96,17 @@
     .k-fab-item.k-state-focus .k-fab-item-icon,
     .k-fab-item.k-state-focused .k-fab-item-text,
     .k-fab-item.k-state-focused .k-fab-item-icon {
-        @include box-shadow($fab-item-focus-shadow);
+        outline-style: solid;
+        outline-width: 3px;
+        outline-color: rgba( $fab-item-icon-border, .5 );
     }
 
     // Active state
     .k-fab-item.k-state-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
+        @include box-shadow($fab-item-active-shadow);
+        outline: $fab-border-width solid try-darken( $fab-item-icon-border, 12.5% );
+        outline-offset: -$fab-border-width;
         border-color: try-darken( $fab-item-icon-border, 12.5% );
         color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
         background-color: try-darken( $fab-item-icon-bg, 10% );
@@ -121,8 +119,9 @@
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            color: tint( $fab-item-text, 8 );
             @include box-shadow($fab-item-disabled-shadow);
+            background-color: try-tint( $fab-item-bg, 8 );
+            color: try-tint( $fab-item-text, 8 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -1,11 +1,11 @@
 // Floating Action Button
 $fab-padding-x: $padding-x !default;
 $fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 0px !default;
-$fab-border-radius: $border-radius !default;
+$fab-border-width: 1px !default;
+$fab-border-radius: $border-radius / 2 !default;
 $fab-font-family: $font-family !default;
 $fab-font-size: $font-size !default;
-$fab-line-height: (20 / 16) !default;
+$fab-line-height: $line-height !default;
 
 $fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
 $fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
@@ -16,9 +16,9 @@ $fab-padding-y-md: $fab-padding-y !default;
 $fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
 $fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
 
-$fab-icon-width: 20px !default;
+$fab-icon-width: 24px !default;
 $fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) !default;
+$fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
 
 $fab-items-padding-x: 0px !default;
 $fab-items-padding-y: map-get( $spacing, 4 ) !default;
@@ -26,14 +26,16 @@ $fab-items-padding-y: map-get( $spacing, 4 ) !default;
 $fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
 $fab-item-text-padding-y: $fab-item-text-padding-x !default;
 $fab-item-text-border-width: 1px !default;
-$fab-item-text-border-radius: 2px !default;
+$fab-item-text-border-radius: 4px !default;
 $fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 1 !default;
+$fab-item-text-line-height: 14px !default;
 
 $fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
 $fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
 $fab-item-icon-border-width: 0 !default;
 $fab-item-icon-border-radius: 50% !default;
+$fab-item-icon-width: 24px !default;
+$fab-item-icon-height: $fab-item-icon-width !default;
 
 $fab-sizes: (
     sm: map-get( $spacing, 4 ),
@@ -43,22 +45,21 @@ $fab-sizes: (
 
 $fab-theme-colors: $theme-colors !default;
 
-$fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
-$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
+$fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
+$fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$fab-active-shadow: null !default;
 
 $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: contrast-wcag( $light ) !default;
-$fab-item-icon-bg: $light !default;
-$fab-item-icon-border: $light !default;
+$fab-item-icon-text: $button-text !default;
+$fab-item-icon-bg: $button-bg !default;
+$fab-item-icon-border: $button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
-$fab-item-focus-shadow: $fab-focus-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
+$fab-item-active-shadow: $fab-active-shadow !default;
 
 $fab-border-width-sm: $fab-border-width !default;
 $fab-line-height-sm: $fab-line-height !default;

package/scss/slider/_theme.scss

@@ -1,14 +1 @@
 @import "../../modules/@progress/kendo-theme-default/scss/slider/_theme.scss";
-
-@include exports("slider/theme/bootstrap") {
-
-    .k-slider {
-
-        .k-button {
-            &:active,
-            &.k-state-active {
-                @include box-shadow( $slider-button-focused-shadow );
-            }
-        }
-    }
-}