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

package/scss/editor/_theme.scss

@@ -1,106 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-editor--theme-base() {
-
-    .k-editor {
-        @include fill(
-            $kendo-component-text,
-            $kendo-component-bg,
-            $kendo-component-border
-        );
-
-        &.k-readonly {
-            .k-editor-content.k-focus {
-                outline-color: $kendo-body-text;
-            }
-        }
-    }
-
-    // Inline Editor
-    .k-editor-inline {
-
-        .k-table {
-            &,
-            & td {
-                border-color: #cccccc;
-            }
-        }
-
-        .k-element-resize-handle-wrapper {
-            background-color: #ffffff;
-            border-color: #000000;
-        }
-
-        .k-column-resize-handle-wrapper {
-            .k-column-resize-handle {
-                .k-column-resize-marker {
-                    background-color: #00b0ff;
-                }
-            }
-        }
-
-        .k-row-resize-handle-wrapper {
-            .k-row-resize-marker {
-                background-color: #00b0ff;
-            }
-        }
-
-        // Hover & Active state
-        &:hover,
-        &.k-hover,
-        &.k-active {
-            border-color: $kendo-component-border;
-        }
-    }
-
-    // Resizable images
-    .k-editor-resize-handle {
-        background-color: $kendo-editor-resize-handle-bg;
-        border-color: $kendo-editor-resize-handle-border;
-    }
-    .ProseMirror-selectednode { // stylelint-disable-line
-        outline-color: $kendo-editor-selectednode-outline-color;
-    }
-
-
-    // Insert table
-    .k-ct-popup {
-        .k-selected {
-            @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none );
-        }
-    }
-
-    // Content
-    .k-editor-content {
-
-        // Selection
-        .k-text-selected,
-        &::selection {
-            @include fill (
-                $color: $kendo-editor-selected-text,
-                $bg: $kendo-editor-selected-bg
-            );
-        }
-
-        .k-text-highlighted {
-            @include fill (
-                $bg: $kendo-editor-highlighted-bg
-            );
-        }
-
-        // Table styles
-        td,
-        th {
-            border-color: #dddddd;
-        }
-
-        .selectedCell::after { // stylelint-disable-line
-            background-color: rgba(200, 200, 255, .4);
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/editor/_theme.scss" as *;
 
 
 @mixin kendo-editor--theme() {

package/scss/editor/_variables.scss

@@ -77,3 +77,27 @@ $kendo-editor-filebrowser-tiles-padding-y: k-spacing(1) !default;
 /// The padding of the Editor content.
 /// @group editor
 $kendo-editor-content-padding: k-spacing(2) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with (
+    $kendo-editor-border-width: $kendo-editor-border-width,
+    $kendo-editor-font-family: $kendo-editor-font-family,
+    $kendo-editor-font-size: $kendo-editor-font-size,
+    $kendo-editor-line-height: $kendo-editor-line-height,
+    $kendo-editor-placeholder-text: $kendo-editor-placeholder-text,
+    $kendo-editor-placeholder-opacity: $kendo-editor-placeholder-opacity,
+    $kendo-editor-selected-text: $kendo-editor-selected-text,
+    $kendo-editor-selected-bg: $kendo-editor-selected-bg,
+    $kendo-editor-highlighted-bg: $kendo-editor-highlighted-bg,
+    $kendo-editor-export-tool-icon-margin-x: $kendo-editor-export-tool-icon-margin-x,
+    $kendo-editor-resize-handle-size: $kendo-editor-resize-handle-size,
+    $kendo-editor-resize-handle-border-width: $kendo-editor-resize-handle-border-width,
+    $kendo-editor-resize-handle-border: $kendo-editor-resize-handle-border,
+    $kendo-editor-resize-handle-bg: $kendo-editor-resize-handle-bg,
+    $kendo-editor-selectednode-outline-width: $kendo-editor-selectednode-outline-width,
+    $kendo-editor-selectednode-outline-color: $kendo-editor-selectednode-outline-color,
+    $kendo-editor-inline-padding-x: $kendo-editor-inline-padding-x,
+    $kendo-editor-inline-padding-y: $kendo-editor-inline-padding-y,
+    $kendo-editor-filebrowser-tiles-padding-x: $kendo-editor-filebrowser-tiles-padding-x,
+    $kendo-editor-filebrowser-tiles-padding-y: $kendo-editor-filebrowser-tiles-padding-y,
+    $kendo-editor-content-padding: $kendo-editor-content-padding
+);

package/scss/expansion-panel/_layout.scss

@@ -1,85 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-expander--layout-base() {
-
-    // Base
-    .k-expander {
-        border-width: $kendo-expander-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        overflow: hidden;
-        outline: 0;
-        font-family: $kendo-expander-font-family;
-        font-size: $kendo-expander-font-size;
-        line-height: $kendo-expander-line-height;
-        display: flex;
-        flex-direction: column;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-rtl .k-expander,
-    .k-expander.k-rtl,
-    .k-expander[dir="rtl"] {
-        // Expand / collapse icon
-        .k-expander-indicator {
-            margin-left: 0;
-            margin-right: $kendo-expander-indicator-margin-x;
-        }
-    }
-
-    // Header
-    .k-expander-header {
-        padding-block: $kendo-expander-header-padding-y;
-        padding-inline: $kendo-expander-header-padding-x;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    // Expander spacer
-    .k-expander-spacer {
-        flex: 1 1 auto;
-    }
-
-    // Title
-    .k-expander-title {
-        text-transform: uppercase;
-        font-weight: 500;
-    }
-
-    // Expand / collapse icon
-    .k-expander-indicator {
-        margin-left: $kendo-expander-indicator-margin-x;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    // Expander content
-    .k-expander-content {
-        padding-block: $kendo-expander-content-padding-y;
-        padding-inline: $kendo-expander-content-padding-x;
-    }
-
-    // Multiple expanders
-    .k-expander + .k-expander.k-expanded,
-    .k-expander.k-expanded + .k-expander {
-        margin-top: $kendo-expander-spacing-y;
-    }
-
-    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
-        border-top-width: 0;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *;
 
 
 @mixin kendo-expander--layout() {

package/scss/expansion-panel/_theme.scss

@@ -1,47 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-expander--theme-base() {
-
-    .k-expander {
-        @include fill(
-            $kendo-expander-text,
-            $kendo-expander-bg,
-            $kendo-expander-border
-        );
-
-        &.k-focus {
-            @include focus-indicator( $kendo-expander-focus-shadow, true );
-        }
-    }
-
-    .k-expander-header {
-        @include fill(
-            $kendo-expander-header-text,
-            $kendo-expander-header-bg,
-            $kendo-expander-header-border
-        );
-        outline: none;
-
-        &:hover,
-        &.k-hover {
-            background-color: $kendo-expander-header-hover-bg;
-        }
-
-        &.k-focus {
-            @include focus-indicator( $kendo-expander-header-focus-shadow, true );
-            background-color: $kendo-expander-header-focus-bg;
-        }
-    }
-
-    .k-expander-title {
-        color: $kendo-expander-title-text;
-    }
-
-    .k-expander-sub-title {
-        color: $kendo-expander-header-sub-title-text;
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_theme.scss" as *;
 
 
 @mixin kendo-expander--theme() {

package/scss/expansion-panel/_variables.scss

@@ -78,3 +78,28 @@ $kendo-expander-content-padding-x: k-spacing(4) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
 $kendo-expander-content-padding-y: k-spacing(4) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with (
+    $kendo-expander-spacing-y: $kendo-expander-spacing-y,
+    $kendo-expander-border-width: $kendo-expander-border-width,
+    $kendo-expander-font-family: $kendo-expander-font-family,
+    $kendo-expander-font-size: $kendo-expander-font-size,
+    $kendo-expander-line-height: $kendo-expander-line-height,
+    $kendo-expander-text: $kendo-expander-text,
+    $kendo-expander-bg: $kendo-expander-bg,
+    $kendo-expander-border: $kendo-expander-border,
+    $kendo-expander-focus-shadow: $kendo-expander-focus-shadow,
+    $kendo-expander-header-padding-x: $kendo-expander-header-padding-x,
+    $kendo-expander-header-padding-y: $kendo-expander-header-padding-y,
+    $kendo-expander-header-text: $kendo-expander-header-text,
+    $kendo-expander-header-bg: $kendo-expander-header-bg,
+    $kendo-expander-header-border: $kendo-expander-header-border,
+    $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg,
+    $kendo-expander-header-focus-bg: $kendo-expander-header-focus-bg,
+    $kendo-expander-header-focus-shadow: $kendo-expander-header-focus-shadow,
+    $kendo-expander-title-text: $kendo-expander-title-text,
+    $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text,
+    $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x,
+    $kendo-expander-content-padding-x: $kendo-expander-content-padding-x,
+    $kendo-expander-content-padding-y: $kendo-expander-content-padding-y
+);

package/scss/fab/_layout.scss

@@ -1,148 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-fab--layout-base() {
-
-    // Floating Action Button (FAB)
-    .k-fab {
-        padding: 0;
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        color: inherit;
-        background-color: transparent;
-        font-size: $kendo-fab-font-size;
-        line-height: $kendo-fab-line-height;
-        font-family: $kendo-fab-font-family;
-        text-align: center;
-        white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-        outline: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    // FAB Icon
-    .k-fab-icon {
-        padding-inline: $kendo-fab-icon-padding-x;
-        padding-block: $kendo-fab-icon-padding-y;
-        box-sizing: content-box;
-    }
-
-    .k-icon-wrapper-host:not(:only-child) .k-fab-icon,
-    .k-fab-icon:not(:only-child) {
-        margin-inline-end: $kendo-fab-icon-spacing;
-        margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
-    }
-
-    // Sizes
-    @each $size, $size-props in $kendo-fab-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-
-        .k-fab-#{$size} {
-            padding: $_padding-y $_padding-x;
-        }
-
-    }
-
-    // Items
-    .k-fab-items {
-        margin: 0;
-        padding-block: $kendo-fab-items-padding-y;
-        padding-inline: $kendo-fab-items-padding-x;
-        display: flex;
-    }
-
-    .k-fab-items-bottom {
-        flex-direction: column;
-    }
-    .k-fab-items-bottom .k-fab-item:last-child {
-        margin-block-end: 0;
-    }
-
-    .k-fab-items-top {
-        flex-direction: column-reverse;
-    }
-    .k-fab-items-top .k-fab-item:first-child {
-        margin-block-end: 0;
-    }
-
-    .k-fab-item {
-        list-style-type: none;
-        margin-block-end: k-spacing(2);
-        outline: none;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        cursor: pointer;
-
-        &.k-text-right {
-            flex-direction: row;
-
-            .k-fab-item-text {
-                // Needed for fab item positioning in RTL
-                margin-right: k-spacing(2);
-            }
-        }
-        &.k-text-left {
-            flex-direction: row-reverse;
-
-            .k-fab-item-text {
-                // Needed for fab item positioning in RTL
-                margin-left: k-spacing(2);
-            }
-        }
-    }
-
-    .k-fab-item-text {
-        padding-block: $kendo-fab-item-text-padding-y;
-        padding-inline: $kendo-fab-item-text-padding-x;
-        border-width: $kendo-fab-item-text-border-width;
-        border-radius: $kendo-fab-item-text-border-radius;
-        font-size: $kendo-fab-item-text-font-size;
-        line-height: $kendo-fab-item-text-line-height;
-    }
-
-    .k-fab-item-icon {
-        padding-block: $kendo-fab-item-icon-padding-y;
-        padding-inline: $kendo-fab-item-icon-padding-x;
-        border-width: $kendo-fab-item-icon-border-width;
-        border-radius: $kendo-fab-item-icon-border-radius;
-        box-sizing: content-box;
-        outline: none;
-    }
-
-
-
-    .k-rtl .k-fab-popup,
-    [dir="rtl"] .k-fab-popup {
-        .k-fab-item.k-text-left {
-            flex-direction: row;
-        }
-
-        .k-fab-item.k-text-right {
-            flex-direction: row-reverse;
-        }
-    }
-}
+@use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *;
 
 
 @mixin kendo-fab--layout() {

package/scss/fab/_theme.scss

@@ -1,131 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-fab--theme-base() {
-
-    // Normal state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name} {
-            @include box-shadow($kendo-fab-shadow);
-            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
-            outline-offset: -$kendo-fab-border-width;
-            border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            background-color: $color;
-        }
-    }
-
-    // Hover state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-hover.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:hover {
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
-        }
-    }
-
-    // Focus state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}.k-focus,
-        .k-fab-solid-#{$name}:focus {
-            @if $kendo-enable-focus-contrast {
-                @include box-shadow( inset 0 0 0 2px currentColor );
-            } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
-            }
-        }
-    }
-
-    // Active state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-active.k-fab-solid-#{$name},
-        .k-selected.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:active {
-            @include box-shadow($kendo-fab-active-shadow);
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
-        }
-    }
-
-    // Disabled state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-disabled.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:disabled {
-            @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
-            opacity: 1;
-        }
-    }
-
-    // Items
-    .k-fab-item-text {
-        @include fill(
-            $kendo-fab-item-text,
-            $kendo-fab-item-bg,
-            $kendo-fab-item-border
-        );
-        @include box-shadow($kendo-fab-item-shadow);
-
-    }
-    .k-fab-item-icon {
-        @include fill(
-            $kendo-fab-item-icon-text,
-            $kendo-fab-item-icon-bg,
-            $kendo-fab-item-icon-border
-        );
-        @include box-shadow($kendo-fab-item-shadow);
-        outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
-        outline-offset: -$kendo-fab-border-width;
-    }
-
-    // Hover state
-    .k-fab-item.k-hover .k-fab-item-icon,
-    .k-fab-item:hover .k-fab-item-icon {
-        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
-        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
-    }
-
-    // Focus state
-    .k-fab-item:focus .k-fab-item-text,
-    .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-focus .k-fab-item-text,
-    .k-fab-item.k-focus .k-fab-item-icon {
-        @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
-        } @else {
-            outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
-        }
-    }
-
-    // Active state
-    .k-fab-item.k-active .k-fab-item-icon,
-    .k-fab-item:active .k-fab-item-icon {
-        @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
-        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
-    }
-
-    // Disabled state
-    .k-fab-item.k-disabled,
-    .k-fab-item:disabled {
-        opacity: 1;
-
-        .k-fab-item-text,
-        .k-fab-item-icon {
-            @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
-            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
-        }
-    }
-
-    // Popup
-    .k-fab-popup {
-        @include box-shadow( none );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/fab/_theme.scss" as *;
 
 
 @mixin kendo-fab--theme() {

package/scss/fab/_variables.scss

@@ -170,3 +170,53 @@ $kendo-fab-item-outline-width: k-spacing(0.5) !default;
 /// The outline color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
+    $kendo-fab-border-width: $kendo-fab-border-width,
+    $kendo-fab-border-radius: $kendo-fab-border-radius,
+    $kendo-fab-font-family: $kendo-fab-font-family,
+    $kendo-fab-font-size: $kendo-fab-font-size,
+    $kendo-fab-line-height: $kendo-fab-line-height,
+    $kendo-fab-padding-x: $kendo-fab-padding-x,
+    $kendo-fab-sm-padding-x: $kendo-fab-sm-padding-x,
+    $kendo-fab-md-padding-x: $kendo-fab-md-padding-x,
+    $kendo-fab-lg-padding-x: $kendo-fab-lg-padding-x,
+    $kendo-fab-padding-y: $kendo-fab-padding-y,
+    $kendo-fab-sm-padding-y: $kendo-fab-sm-padding-y,
+    $kendo-fab-md-padding-y: $kendo-fab-md-padding-y,
+    $kendo-fab-lg-padding-y: $kendo-fab-lg-padding-y,
+    $kendo-fab-icon-padding-x: $kendo-fab-icon-padding-x,
+    $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-y,
+    $kendo-fab-icon-spacing: $kendo-fab-icon-spacing,
+    $kendo-fab-items-padding-x: $kendo-fab-items-padding-x,
+    $kendo-fab-items-padding-y: $kendo-fab-items-padding-y,
+    $kendo-fab-item-text-padding-x: $kendo-fab-item-text-padding-x,
+    $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-y,
+    $kendo-fab-item-text-border-width: $kendo-fab-item-text-border-width,
+    $kendo-fab-item-text-border-radius: $kendo-fab-item-text-border-radius,
+    $kendo-fab-item-text-font-size: $kendo-fab-item-text-font-size,
+    $kendo-fab-item-text-line-height: $kendo-fab-item-text-line-height,
+    $kendo-fab-item-icon-padding-x: $kendo-fab-item-icon-padding-x,
+    $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
+    $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
+    $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
+    $kendo-fab-theme-colors: $kendo-fab-theme-colors,
+    $kendo-fab-sizes: $kendo-fab-sizes,
+    $kendo-fab-shadow: $kendo-fab-shadow,
+    $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
+    $kendo-fab-active-shadow: $kendo-fab-active-shadow,
+    $kendo-fab-outline-style: $kendo-fab-outline-style,
+    $kendo-fab-outline-width: $kendo-fab-outline-width,
+    $kendo-fab-item-text: $kendo-fab-item-text,
+    $kendo-fab-item-bg: $kendo-fab-item-bg,
+    $kendo-fab-item-border: $kendo-fab-item-border,
+    $kendo-fab-item-icon-text: $kendo-fab-item-icon-text,
+    $kendo-fab-item-icon-bg: $kendo-fab-item-icon-bg,
+    $kendo-fab-item-icon-border: $kendo-fab-item-icon-border,
+    $kendo-fab-item-shadow: $kendo-fab-item-shadow,
+    $kendo-fab-item-disabled-shadow: $kendo-fab-item-disabled-shadow,
+    $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
+    $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
+    $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color
+);