@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/components/fab/_variables.scss

@@ -0,0 +1,62 @@
+// Floating Action Button
+
+$kendo-fab-border-width: null !default;
+$kendo-fab-border-radius: null !default;
+
+$kendo-fab-font-family: null !default;
+$kendo-fab-font-size: null !default;
+$kendo-fab-line-height: null !default;
+
+$kendo-fab-padding-x: null !default;
+$kendo-fab-sm-padding-x: null !default;
+$kendo-fab-md-padding-x: null !default;
+$kendo-fab-lg-padding-x: null !default;
+
+$kendo-fab-padding-y: null !default;
+$kendo-fab-sm-padding-y: null !default;
+$kendo-fab-md-padding-y: null !default;
+$kendo-fab-lg-padding-y: null !default;
+
+$kendo-fab-icon-padding-x: null !default;
+$kendo-fab-icon-padding-y: null !default;
+$kendo-fab-icon-spacing: null !default;
+
+$kendo-fab-items-padding-x: null !default;
+$kendo-fab-items-padding-y: null !default;
+
+$kendo-fab-item-text-padding-x: null !default;
+$kendo-fab-item-text-padding-y: null !default;
+$kendo-fab-item-text-border-width: null !default;
+$kendo-fab-item-text-border-radius: null !default;
+$kendo-fab-item-text-font-size: null !default;
+$kendo-fab-item-text-line-height: null !default;
+
+$kendo-fab-item-icon-padding-x: null !default;
+$kendo-fab-item-icon-padding-y: null !default;
+$kendo-fab-item-icon-border-width: null !default;
+$kendo-fab-item-icon-border-radius: null !default;
+
+$kendo-fab-theme-colors: null !default;
+
+$kendo-fab-sizes: null !default;
+
+$kendo-fab-shadow: null !default;
+$kendo-fab-disabled-shadow: null !default;
+$kendo-fab-active-shadow: null !default;
+$kendo-fab-outline-style: null !default;
+$kendo-fab-outline-width: null !default;
+
+$kendo-fab-item-text: null !default;
+$kendo-fab-item-bg: null !default;
+$kendo-fab-item-border: null !default;
+
+$kendo-fab-item-icon-text: null !default;
+$kendo-fab-item-icon-bg: null !default;
+$kendo-fab-item-icon-border: null !default;
+
+$kendo-fab-item-shadow: null !default;
+$kendo-fab-item-disabled-shadow: null !default;
+$kendo-fab-item-active-shadow: null !default;
+$kendo-fab-item-outline-style: null !default;
+$kendo-fab-item-outline-width: null !default;
+$kendo-fab-item-outline-color: null !default;

package/scss/components/filemanager/_index.scss

@@ -0,0 +1,38 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../switch/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../breadcrumb/_index.scss" as *;
+@use "../treeview/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-file-manager--styles() {
+    @include import-once( "file-manager" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-upload--styles();
+        @include kendo-switch--styles();
+        @include kendo-menu--styles();
+        @include kendo-dialog--styles();
+        @include kendo-breadcrumb--styles();
+        @include kendo-treeview--styles();
+        @include kendo-splitter--styles();
+        @include kendo-grid--styles();
+        @include kendo-listview--styles();
+        @include kendo-file-manager--layout();
+        @include kendo-file-manager--theme();
+    }
+}

package/scss/components/filemanager/_layout.scss

@@ -0,0 +1,243 @@
+@use "./variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-file-manager--layout-base() {
+
+    // File Manager
+    .k-filemanager {
+        border-width: $kendo-file-manager-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        font-family: $kendo-file-manager-font-family;
+        font-size: $kendo-file-manager-font-size;
+        line-height: $kendo-file-manager-line-height;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+
+    // Toolbar
+    .k-filemanager-header {
+        border-color: inherit;
+    }
+    .k-filemanager-toolbar {
+        border-width: 0;
+        border-bottom-width: $kendo-file-manager-toolbar-border-width;
+        border-color: inherit;
+        flex-shrink: 0;
+        z-index: 1;
+    }
+
+
+    // 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;
+    }
+
+    .k-filemanager-splitter {
+        border-width: 0;
+    }
+
+
+    // Navigation
+    .k-filemanager-navigation {
+        padding-block: $kendo-file-manager-navigation-padding-y;
+        padding-inline: $kendo-file-manager-navigation-padding-x;
+        width: $kendo-file-manager-navigation-width;
+        border-width: 0;
+        border-right-width: $kendo-file-manager-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 {
+        border-width: 0;
+        border-bottom-width: $kendo-file-manager-breadcrumb-border-width;
+        padding-block: $kendo-file-manager-breadcrumb-padding-y;
+        padding-inline: $kendo-file-manager-breadcrumb-padding-x;
+        flex-shrink: 0;
+    }
+
+
+    // Filemanager listview
+    .k-filemanager-listview {
+        border-width: 0;
+        flex: 1 1 0%;
+
+        // Listview item
+        .k-listview-item {
+            padding-block: $kendo-file-manager-listview-item-padding-y;
+            padding-inline: $kendo-file-manager-listview-item-padding-x;
+            width: $kendo-file-manager-listview-item-width;
+            height: $kendo-file-manager-listview-item-height;
+            text-align: center;
+        }
+
+        // File preview
+        .k-file-preview {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        // File name
+        .k-file-name {
+            margin-top: calc( #{$kendo-file-manager-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-right: $kendo-icon-spacing;
+            display: inline-flex;
+            flex-direction: row;
+            vertical-align: middle;
+        }
+
+        // File icon
+        .k-file-icon {}
+
+        // File name
+        .k-file-name {
+            display: inline-flex;
+            flex-direction: row;
+            vertical-align: middle;
+        }
+    }
+
+
+    // Filemanager preview
+    .k-filemanager-preview {
+        padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
+        width: $kendo-file-manager-preview-width;
+        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
+        border-width: 0;
+        border-left-width: $kendo-file-manager-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 name
+        .k-file-name {
+            margin-top: $kendo-file-manager-preview-spacing;
+            display: block;
+        }
+        .k-no-file-selected {}
+        .k-single-file-selected { font-weight: bold; }
+        .k-multiple-files-selected { font-weight: bold; }
+
+        // File Meta
+        .k-file-meta {
+            margin: $kendo-file-manager-preview-spacing 0 0;
+            box-sizing: border-box;
+            text-align: start;
+            display: flex;
+            flex-flow: row wrap;
+            grid-column-gap: $kendo-file-manager-preview-column-gap;
+        }
+        .k-file-meta-label {
+            display: inline-block;
+        }
+        .k-file-meta-value {
+            margin: 0;
+        }
+        .k-file-type {
+            text-transform: capitalize;
+        }
+        .k-line-break {
+            margin: $kendo-file-manager-preview-spacing 0 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;
+        gap: $kendo-icon-spacing;
+    }
+
+}
+
+
+@mixin kendo-file-manager--layout() {
+    @include kendo-file-manager--layout-base();
+}

package/scss/components/filemanager/_theme.scss

@@ -0,0 +1,117 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-file-manager--theme-base() {
+
+    // Filemanager
+    .k-filemanager {
+        @include fill(
+            $kendo-file-manager-text,
+            $kendo-file-manager-bg,
+            $kendo-file-manager-border
+        );
+    }
+
+
+    // Filemanager toolbar
+    .k-filemanager-toolbar {
+        @include fill(
+            $kendo-file-manager-toolbar-text,
+            $kendo-file-manager-toolbar-bg,
+            $kendo-file-manager-toolbar-border,
+            $kendo-file-manager-toolbar-gradient
+        );
+    }
+
+
+    // Filemanager navigation
+    .k-filemanager-navigation {
+        @include fill(
+            $kendo-file-manager-navigation-text,
+            $kendo-file-manager-navigation-bg,
+            $kendo-file-manager-navigation-border
+        );
+    }
+
+
+    // Filemanager breadcrumb
+    .k-filemanager-breadcrumb {
+        @include fill(
+            $kendo-file-manager-breadcrumb-text,
+            $kendo-file-manager-breadcrumb-bg,
+            $kendo-file-manager-breadcrumb-border
+        );
+    }
+
+
+    // Filemanager listview
+    .k-filemanager-listview {
+        @include fill(
+            $kendo-file-manager-listview-text,
+            $kendo-file-manager-listview-bg,
+            $kendo-file-manager-listview-border
+        );
+
+        .k-listview-item {
+            @include fill(
+                $kendo-file-manager-listview-item-text,
+                $kendo-file-manager-listview-item-bg,
+                $kendo-file-manager-listview-item-border
+            );
+
+            .k-file-icon {
+                @include fill(
+                    $kendo-file-manager-listview-item-icon-text,
+                    $kendo-file-manager-listview-item-icon-bg,
+                    $kendo-file-manager-listview-item-icon-border
+                );
+            }
+
+            &.k-selected .k-file-icon {
+                @include fill(
+                    inherit,
+                    transparent,
+                    transparent
+                );
+            }
+        }
+
+    }
+
+
+    // Filemanager grid
+    .k-filemanager-grid {
+
+        @include fill(
+            $kendo-file-manager-grid-text,
+            $kendo-file-manager-grid-bg,
+            $kendo-file-manager-grid-border
+        );
+
+    }
+
+
+    // Filemanager preview
+    .k-filemanager-preview {
+        @include fill(
+            $kendo-file-manager-preview-text,
+            $kendo-file-manager-preview-bg,
+            $kendo-file-manager-preview-border
+        );
+
+        .k-file-icon {
+            @include fill(
+                $kendo-file-manager-preview-icon-text,
+                $kendo-file-manager-preview-icon-bg,
+                $kendo-file-manager-preview-icon-border
+            );
+        }
+
+    }
+
+}
+
+
+@mixin kendo-file-manager--theme() {
+    @include kendo-file-manager--theme-base();
+}

package/scss/components/filemanager/_variables.scss

@@ -0,0 +1,68 @@
+// FileManager
+
+$kendo-file-manager-spacer: null !default;
+$kendo-file-manager-border-width: null !default;
+$kendo-file-manager-font-family: null !default;
+$kendo-file-manager-font-size: null !default;
+$kendo-file-manager-line-height: null !default;
+$kendo-file-manager-bg: null !default;
+$kendo-file-manager-text: null !default;
+$kendo-file-manager-border: null !default;
+
+$kendo-file-manager-toolbar-border-width: null !default;
+$kendo-file-manager-toolbar-bg: null !default;
+$kendo-file-manager-toolbar-text: null !default;
+$kendo-file-manager-toolbar-border: null !default;
+$kendo-file-manager-toolbar-gradient: null !default;
+
+$kendo-file-manager-navigation-padding-x: null !default;
+$kendo-file-manager-navigation-padding-y: null !default;
+$kendo-file-manager-navigation-width: null !default;
+$kendo-file-manager-navigation-border-width: null !default;
+$kendo-file-manager-navigation-bg: null !default;
+$kendo-file-manager-navigation-text: null !default;
+$kendo-file-manager-navigation-border: null !default;
+
+$kendo-file-manager-breadcrumb-padding-x: null !default;
+$kendo-file-manager-breadcrumb-padding-y: null !default;
+$kendo-file-manager-breadcrumb-border-width: null !default;
+$kendo-file-manager-breadcrumb-bg: null !default;
+$kendo-file-manager-breadcrumb-text: null !default;
+$kendo-file-manager-breadcrumb-border: null !default;
+
+$kendo-file-manager-listview-bg: null !default;
+$kendo-file-manager-listview-text: null !default;
+$kendo-file-manager-listview-border: null !default;
+
+$kendo-file-manager-listview-item-padding-x: null !default;
+$kendo-file-manager-listview-item-padding-y: null !default;
+$kendo-file-manager-listview-item-width: null !default;
+$kendo-file-manager-listview-item-height: null !default;
+$kendo-file-manager-listview-item-bg: null !default;
+$kendo-file-manager-listview-item-text: null !default;
+$kendo-file-manager-listview-item-border: null !default;
+
+$kendo-file-manager-listview-item-icon-bg: null !default;
+$kendo-file-manager-listview-item-icon-text: null !default;
+$kendo-file-manager-listview-item-icon-border: null !default;
+$kendo-file-manager-listview-item-icon-selected-bg: null !default;
+$kendo-file-manager-listview-item-icon-selected-text: null !default;
+$kendo-file-manager-listview-item-icon-selected-border: null !default;
+
+$kendo-file-manager-grid-bg: null !default;
+$kendo-file-manager-grid-text: null !default;
+$kendo-file-manager-grid-border: null !default;
+
+$kendo-file-manager-preview-padding-x: null !default;
+$kendo-file-manager-preview-padding-y: null !default;
+$kendo-file-manager-preview-width: null !default;
+$kendo-file-manager-preview-border-width: null !default;
+$kendo-file-manager-preview-spacing: null !default;
+$kendo-file-manager-preview-column-gap: null !default;
+$kendo-file-manager-preview-bg: null !default;
+$kendo-file-manager-preview-text: null !default;
+$kendo-file-manager-preview-border: null !default;
+
+$kendo-file-manager-preview-icon-bg: null !default;
+$kendo-file-manager-preview-icon-text: null !default;
+$kendo-file-manager-preview-icon-border: null !default;

package/scss/components/filter/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-filter--styles() {
+    @include import-once( "filter" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-filter--layout();
+        @include kendo-filter--theme();
+    }
+}

package/scss/components/filter/_layout.scss

@@ -0,0 +1,98 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-filter--layout-base() {
+
+    .k-filter {
+        box-sizing: border-box;
+        border-width: 0;
+        display: inline-block;
+        background-color: transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        ul {
+            padding: 0;
+
+            li {
+                list-style-type: none;
+            }
+        }
+
+        .k-filter-container,
+        .k-filter-preview {
+            margin-block-end: $kendo-filter-bottom-margin;
+        }
+
+        .k-filter-lines,
+        .k-filter-item {
+            padding-inline-start: $kendo-filter-padding-x;
+        }
+
+        .k-filter-toolbar {
+            display: inline-flex;
+            position: relative;
+            padding-block: $kendo-filter-padding-y;
+            padding-inline: 0;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: $kendo-filter-padding-x;
+                height: $kendo-filter-line-size;
+                inset-block-start: 50%;
+                inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
+            }
+
+            .k-toolbar {
+                border-style: solid;
+            }
+        }
+        .k-filter-operator .k-dropdown-list {
+            width: $kendo-filter-operator-dropdown-width;
+        }
+
+        .k-filter-item {
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: $kendo-filter-line-size;
+                height: 100%;
+                inset-block-start: calc( #{$kendo-filter-padding-y} * -1 );
+                inset-inline-start: 0;
+            }
+        }
+
+        // The second selector targets the Angular rendering
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
+            content: "";
+            position: absolute;
+            width: $kendo-filter-line-size;
+            inset-block-start: calc( calc( #{$kendo-filter-padding-y} * -1 ) - #{$kendo-filter-line-size} );
+            inset-block-end: 50%;
+            inset-inline-start: calc( #{$kendo-filter-padding-x} * -1 );
+        }
+
+        // The forth and fifth selectors targets the Angular rendering
+        .k-filter-group-main::before,
+        .k-filter-group-main > .k-filter-toolbar::before,
+        .k-filter-group-main > .k-filter-toolbar::after,
+        .k-filter-group-main > * > .k-filter-toolbar::before,
+        .k-filter-group-main > * > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child::before {
+            display: none;
+        }
+    }
+
+}
+
+
+@mixin kendo-filter--layout() {
+    @include kendo-filter--layout-base();
+}

package/scss/components/filter/_theme.scss

@@ -0,0 +1,38 @@
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-filter--theme-base() {
+
+    .k-filter {
+        color: $kendo-component-text;
+
+        .k-filter-preview-field {
+            color: $kendo-filter-preview-field-text;
+        }
+
+        .k-filter-preview-operator {
+            color: $kendo-filter-preview-operator-text;
+        }
+
+        // The last selector targets the Angular rendering
+        .k-filter-item::before,
+        .k-filter-toolbar::before,
+        .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
+        .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
+            background-color: $kendo-component-border;
+        }
+
+        // Focus
+        .k-toolbar:focus,
+        .k-toolbar.k-focus {
+            @include focus-indicator( $kendo-filter-toolbar-focus-shadow );
+        }
+    }
+
+}
+
+
+@mixin kendo-filter--theme() {
+    @include kendo-filter--theme-base();
+}