@progress/kendo-theme-fluent 5.7.0

package/scss/fab/_theme.scss

@@ -0,0 +1,201 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-fab--theme() {
+
+    .k-fab {
+        --INTERNAL--kendo-fab-text: var( --kendo-fab-text );
+        --INTERNAL--kendo-fab-bg: var( --kendo-fab-bg );
+        --INTERNAL--kendo-fab-border: var( --kendo-fab-border );
+        --INTERNAL--kendo-fab-gradient: var( --kendo-fab-gradient );
+        --INTERNAL--kendo-fab-shadow: var( --kendo-fab-shadow );
+
+        border-color: var( --INTERNAL--kendo-fab-border, initial );
+        color: var( --INTERNAL--kendo-fab-text, inherit );
+        background-color: var( --INTERNAL--kendo-fab-bg, initial );
+        background-image: linear-gradient(
+            var( --INTERNAL--kendo-fab-gradient, transparent, transparent )
+        );
+        box-shadow: var( --INTERNAL--kendo-fab-shadow, none );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-hover-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-hover-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-hover-border );
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-focus-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-focus-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-focus-border );
+        }
+        &:focus::after,
+        &.k-focus::after {
+            outline-color: var( --kendo-fab-focus-outline, initial );
+        }
+
+        &:active,
+        &.k-active {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-active-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-active-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-active-border );
+        }
+
+        &.k-selected {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-selected-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-selected-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-selected-border );
+        }
+
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL--kendo-fab-text: var( --kendo-fab-disabled-text );
+            --INTERNAL--kendo-fab-bg: var( --kendo-fab-disabled-bg );
+            --INTERNAL--kendo-fab-border: var( --kendo-fab-disabled-border );
+        }
+    }
+
+    // Theme colors
+    @each $fill-mode, $theme-colors in $kendo-fab-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+            $_text-color: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            $_focus-text: map-get( $color-props, focus-text );
+            $_focus-bg: map-get( $color-props, focus-bg );
+            $_focus-border: map-get( $color-props, focus-border );
+            $_focus-outline: map-get( $color-props, focus-outline );
+
+            $_hover-text: map-get( $color-props, hover-text );
+            $_hover-bg: map-get( $color-props, hover-bg );
+            $_hover-border: map-get( $color-props, hover-border );
+
+            $_active-text: map-get( $color-props, active-text );
+            $_active-bg: map-get( $color-props, active-bg );
+            $_active-border: map-get( $color-props, active-border );
+
+            $_disabled-text: map-get( $color-props, disabled-text );
+            $_disabled-bg: map-get( $color-props, disabled-bg );
+            $_disabled-border: map-get( $color-props, disabled-border );
+
+            .k-fab-#{$fill-mode}-#{$theme-color} {
+                --kendo-fab-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
+                --kendo-fab-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                --kendo-fab-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+
+                --kendo-fab-hover-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-text, #{$_hover-text} );
+                --kendo-fab-hover-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-bg, #{$_hover-bg} );
+                --kendo-fab-hover-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-hover-border, #{$_hover-border} );
+
+                --kendo-fab-focus-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-text, #{$_focus-text} );
+                --kendo-fab-focus-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-bg, #{$_focus-bg} );
+                --kendo-fab-focus-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-border, #{$_focus-border} );
+                --kendo-fab-focus-outline: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-focus-outline, #{$_focus-outline} );
+
+                --kendo-fab-active-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-text, #{$_active-text} );
+                --kendo-fab-active-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-bg, #{$_active-bg} );
+                --kendo-fab-active-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-active-border, #{$_active-border} );
+
+                --kendo-fab-selected-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-text, #{$_active-text} );
+                --kendo-fab-selected-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-bg, #{$_active-bg} );
+                --kendo-fab-selected-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-selected-border, #{$_active-border} );
+
+                --kendo-fab-disabled-text: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-text, #{$_disabled-text} );
+                --kendo-fab-disabled-bg: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-bg, #{$_disabled-bg} );
+                --kendo-fab-disabled-border: var( --kendo-fab-#{$fill-mode}-#{$theme-color}-disabled-border, #{$_disabled-border} );
+            }
+        }
+    }
+
+    // Items
+    .k-fab-item-text,
+    .k-fab-item-icon {
+        --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-text, #{$kendo-fab-item-text} );
+        --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-bg, #{$kendo-fab-item-bg} );
+        --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-border, #{$kendo-fab-item-border} );
+
+        @include fill(
+            var( --INTERNAL--kendo-fab-item-text, inherit ),
+            var( --INTERNAL--kendo-fab-item-bg, transparent ),
+            var( --INTERNAL--kendo-fab-item-border, inherit )
+        );
+    }
+
+    .k-fab-item {
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-hover-text, #{$kendo-fab-item-hover-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-hover-bg, #{$kendo-fab-item-hover-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-hover-border, #{$kendo-fab-item-hover-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-hover-text, #{$kendo-fab-item-hover-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-hover-bg, #{$kendo-fab-item-hover-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-hover-border, #{$kendo-fab-item-hover-border} );
+            }
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-focus-text, #{$kendo-fab-item-focus-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-focus-bg, #{$kendo-fab-item-focus-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-focus-border, #{$kendo-fab-item-focus-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-focus-text, #{$kendo-fab-item-focus-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-focus-bg, #{$kendo-fab-item-focus-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-focus-border, #{$kendo-fab-item-focus-border} );
+            }
+        }
+
+        // Active
+        &:active,
+        &.k-active {
+            .k-fab-item-icon {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-icon-active-text, #{$kendo-fab-item-active-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-icon-active-bg, #{$kendo-fab-item-active-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-icon-active-border, #{$kendo-fab-item-active-border} );
+            }
+
+            .k-fab-item-text {
+                --INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-active-text, #{$kendo-fab-item-active-text} );
+                --INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-active-bg, #{$kendo-fab-item-active-bg} );
+                --INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-active-border, #{$kendo-fab-item-active-border} );
+            }
+        }
+
+        // Disabled
+        &:disabled,
+        &.k-disabled {
+            background-color: transparent;
+        }
+
+        &:disabled .k-fab-item-icon,
+        &.k-disabled .k-fab-item-icon,
+        &:disabled .k-fab-item-text,
+        &.k-disabled .k-fab-item-text {
+            @include disabled(
+                var( --kendo-disabled-text, inherit ),
+                var( --kendo-disabled-bg, inherit ),
+                var( --kendo-disabled-border, inherit )
+            );
+        }
+
+    }
+
+    // Popup
+    .k-fab-popup {
+        @include box-shadow( none );
+    }
+
+}

package/scss/fab/_variables.scss

@@ -0,0 +1,180 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x-sm: calc( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: calc( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: calc( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: calc( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// Offset of the focused FAB.
+/// @group floating-action-button
+$kendo-fab-focus-offset: $kendo-button-focus-offset !default;
+/// Outline width of the focused FAB.
+/// @group floating-action-button
+$kendo-fab-focus-outline-width: $kendo-button-focus-outline-width !default;
+/// Outline style of the focused FAB.
+/// @group floating-action-button
+$kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 20px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: calc( map-get( $kendo-spacing, 1 ) / 2 ) !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $kendo-spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $kendo-spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: map-get( $kendo-spacing, 1 ) !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border style of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-style: solid !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
+/// The bottom margin of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text-offset-x: map-get( $kendo-spacing, 2 );
+
+/// Offset of the focused FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-offset: $kendo-button-focus-offset !default;
+/// Outline width of the focused FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-outline-width: $kendo-button-focus-outline-width !default;
+/// Outline style of the focused FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 1px !default;
+/// Border style of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-style: solid !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 20px !default;
+/// Height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: (
+    solid: map-get( $kendo-button-theme-colors, "solid")
+) !default;
+
+/// Sizes map for the FAB.
+/// @group floating-action-button
+$kendo-fab-sizes: (
+    sm: (
+        padding-x: $kendo-fab-padding-x-sm,
+        padding-y: $kendo-fab-padding-y-sm
+    ),
+    md: (
+        padding-x: $kendo-fab-padding-x-md,
+        padding-y: $kendo-fab-padding-y-md
+    ),
+    lg: (
+        padding-x: $kendo-fab-padding-x-lg,
+        padding-y: $kendo-fab-padding-y-lg
+    )
+);
+
+/// The bottom margin of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-offset-y: map-get( $kendo-spacing, 2 );
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: get-theme-color-var( neutral-160 ) !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: var( --kendo-component-bg, inherit ) !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: get-theme-color-var( neutral-110 ) !default;
+/// The hover text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-hover-text: var(--kendo-hover-text, inherit ) !default;
+/// The hover background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-hover-bg: var(--kendo-hover-bg, inherit ) !default;
+/// The hover border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-hover-border: get-theme-color-var( neutral-110 ) !default;
+/// The focus text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-text: get-theme-color-var( neutral-160 ) !default;
+/// The focus background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-bg: var( --kendo-component-bg, inherit ) !default;
+/// The focus border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-focus-border: get-theme-color-var( neutral-110 ) !default;
+/// The active text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-text: var(--kendo-selected-text, inherit ) !default;
+/// The active background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-bg: var(--kendo-selected-bg, inherit )  !default;
+/// The active border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-border: get-theme-color-var( neutral-110 ) !default;

package/scss/fab/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "fab",
+    dependencies: (
+        "icon",
+        "button",
+        "badge",
+        "popup"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "fab" ) {
+        @include kendo-fab--layout();
+        @include kendo-fab--theme();
+    }
+}

package/scss/filemanager/_layout.scss

@@ -0,0 +1,248 @@
+@use "../icon/_variables.scss"as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-filemanager--layout() {
+
+    // File Manager
+    .k-filemanager {
+        border-width: var( --kendo-filemanager-border-width, #{$kendo-filemanager-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        font-family: var( --kendo-filemanager-font-family, #{$kendo-filemanager-font-family} );
+        font-size: var( --kendo-filemanager-font-size, #{$kendo-filemanager-font-size} );
+        line-height: var( --kendo-filemanager-line-height, #{$kendo-filemanager-line-height} );
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+
+    // Toolbar
+    .k-filemanager-header {
+        border-color: inherit;
+    }
+    .k-filemanager-toolbar {
+        border-width: 0;
+        border-bottom-width: var( --kendo-filemanager-toolbar-border-width, #{$kendo-filemanager-toolbar-border-width} );
+        border-color: inherit;
+        flex-shrink: 0;
+    }
+
+
+    // Content Wrapper
+    .k-filemanager-content-container {
+        border-color: inherit;
+        box-sizing: border-box;
+        flex: 1 1 0%;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        overflow: hidden;
+    }
+
+
+    // Navigation
+    .k-filemanager-navigation {
+        padding-inline: var( --kendo-filemanager-navigation-padding-x, #{$kendo-filemanager-navigation-padding-x} );
+        padding-block: var( --kendo-filemanager-navigation-padding-y, #{$kendo-filemanager-navigation-padding-y} );
+        width: var( --kendo-filemanager-navigation-width, #{$kendo-filemanager-navigation-width} );
+        border-width: 0;
+        border-right-width: var( --kendo-filemanager-navigation-border-width, #{$kendo-filemanager-navigation-border-width} );
+        border-style: solid;
+        border-color: inherit;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        overflow: auto;
+    }
+    .k-filemanager-treeview {
+        overflow: visible;
+    }
+
+
+    // Content
+    .k-filemanager-content {
+        border-color: inherit;
+        flex: 1 1 0%;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        overflow: hidden;
+    }
+
+    // Filemanager view
+    .k-filemanager-view {
+        overflow: auto;
+    }
+
+    // Breadcrumb
+    .k-filemanager-breadcrumb {
+        padding-inline: var( --kendo-filemanager-breadcrumb-padding-x, #{$kendo-filemanager-breadcrumb-padding-x} );
+        padding-block: var( --kendo-filemanager-breadcrumb-padding-y, #{$kendo-filemanager-breadcrumb-padding-y} );
+        border-width: 0;
+        border-bottom-width: var( --kendo-filemanager-breadcrumb-border-width, #{$kendo-filemanager-breadcrumb-border-width} );
+        flex-shrink: 0;
+    }
+
+
+    // Filemanager listview
+    .k-filemanager-listview {
+        border-width: 0;
+        flex: 1 1 0%;
+
+        // Listview item
+        .k-listview-item {
+            padding-inline: var( --kendo-filemanager-listview-item-padding-x, #{$kendo-filemanager-listview-item-padding-x} );
+            padding-block: var( --kendo-filemanager-listview-item-padding-y, #{$kendo-filemanager-listview-item-padding-y} );
+            width: var( --kendo-filemanager-listview-item-width, #{$kendo-filemanager-listview-item-width} );
+            height: var( --kendo-filemanager-listview-item-height, #{$kendo-filemanager-listview-item-height} );
+            text-align: center;
+        }
+
+        // File preview
+        .k-file-preview {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        // File icon
+        .k-file-icon {
+            font-size: var( --kendo-filemanager-listview-item-icon-size, #{$kendo-filemanager-listview-item-icon-size} );
+        }
+
+        // File name
+        .k-file-name {
+            margin-block-start: calc( var( --kendo-filemanager-spacer, #{$kendo-filemanager-spacer} ) / 2 );
+            display: block;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        // Edit mode
+        .k-file-edit-input input {
+            width: 100%;
+        }
+    }
+
+
+    // Filemanager grid
+    .k-filemanager-grid {
+        border-width: 0;
+        flex: 1 1 0%;
+
+        // File preview
+        .k-file-preview {
+            margin-inline-end: var( --kendo-icon-spacing, .5rem );
+            display: inline-flex;
+            flex-direction: row;
+            vertical-align: middle;
+        }
+
+        // File name
+        .k-file-name {
+            display: inline-flex;
+            flex-direction: row;
+            vertical-align: middle;
+        }
+    }
+
+
+    // Filemanager preview
+    .k-filemanager-preview {
+        padding-inline-start: var( --kendo-filemanager-preview-padding-x, #{$kendo-filemanager-preview-padding-x} );
+        padding-inline-end: var( --kendo-filemanager-preview-padding-x, #{$kendo-filemanager-preview-padding-x} );
+        padding-block-start:  calc( var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} ) * 3 );
+        padding-block-end: var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} );
+        width: var( --kendo-filemanager-preview-width, #{$kendo-filemanager-preview-width} );
+        min-height: calc( calc( var( --kendo-filemanager-preview-padding-y, #{$kendo-filemanager-preview-padding-y} ) * 4 ) + calc( var( --kendo-filemanager-preview-icon-size, #{$kendo-filemanager-preview-icon-size} ) * 2 ) + calc( var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} ) * 3 ) );
+        border-width: 0;
+        border-left-width: var( --kendo-filemanager-preview-border-width, #{$kendo-filemanager-preview-border-width} );
+        border-style: solid;
+        border-color: inherit;
+        box-sizing: border-box;
+        text-align: center;
+        overflow-y: auto;
+        flex-shrink: 0;
+
+        // File preview
+        .k-file-preview {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        // File icon
+        .k-file-icon {
+            font-size: var( --kendo-filemanager-preview-icon-size, #{$kendo-filemanager-preview-icon-size} );
+        }
+
+        // File name
+        .k-file-name {
+            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            display: block;
+        }
+        .k-single-file-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
+        .k-multiple-files-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
+
+        // File Meta
+        .k-file-meta {
+            margin-inline: 0;
+            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            margin-block-end: 0;
+            box-sizing: border-box;
+            text-align: start;
+            display: flex;
+            flex-flow: row wrap;
+        }
+        .k-file-meta-label {
+            display: inline-block;
+        }
+        .k-file-meta-value {
+            margin: 0;
+        }
+        .k-file-type {
+            text-transform: capitalize;
+        }
+        .k-line-break {
+            margin-inline: 0;
+            margin-block-start: var( --kendo-filemanager-preview-spacing, #{$kendo-filemanager-preview-spacing} );
+            margin-block-end: 0;
+            width: 100%;
+            flex: 1 1 100%;
+            flex-flow: row nowrap;
+        }
+    }
+
+
+    // Resizing Handle
+    .k-filemanager .k-splitbar {
+        flex-shrink: 0;
+        display: inline-flex;
+        position: relative;
+        border-width: 0 1px;
+        border-style: solid;
+        border-color: inherit;
+    }
+
+
+    // Upload Dialog
+    .k-filemanager-upload-dialog .k-upload-files {
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+
+    // Drag Hint
+    // TODO: use drag-hint styles
+    .k-filemanager-drag-hint {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+    .k-filemanager-drag-hint .k-icon {
+        margin-inline-end: var( --kendo-icon-spacing, .5rem );
+
+    }
+
+}