@progress/kendo-theme-fluent 5.7.0

package/scss/imageeditor/_layout.scss

@@ -0,0 +1,160 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-imageeditor--layout() {
+
+    // Image Editor
+    .k-imageeditor {
+        margin-inline: var( --kendo-imageeditor-margin-x, #{$kendo-imageeditor-margin-x} );
+        margin-block: var( --kendo-imageeditor-margin-y, #{$kendo-imageeditor-margin-y} );
+        padding-inline: var( --kendo-imageeditor-padding-x, #{$kendo-imageeditor-padding-x} );
+        padding-block: var( --kendo-imageeditor-padding-y, #{$kendo-imageeditor-padding-y} );
+        border-width: var( --kendo-imageeditor-border-width, #{$kendo-imageeditor-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-imageeditor-font-family, #{$kendo-imageeditor-font-family} );
+        font-size: var( --kendo-imageeditor-font-size, #{$kendo-imageeditor-font-size} );
+        line-height: var( --kendo-imageeditor-line-height, #{$kendo-imageeditor-line-height} );
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Image editor toolbar
+    .k-imageeditor-toolbar {
+        border-width: 0;
+    }
+
+
+    // Content
+    .k-imageeditor-content {
+        border-width: 0;
+        border-style: solid;
+        border-color: inherit;
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+
+    // Canvas
+    .k-imageeditor-canvas-container {
+        flex: 1 1 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: auto;
+    }
+    .k-imageeditor-canvas {
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+
+    // Action Pane
+    .k-imageeditor-action-pane {
+        padding-inline: var( --kendo-imageeditor-action-pane-padding-x, #{$kendo-imageeditor-action-pane-padding-x} );
+        padding-block: var( --kendo-imageeditor-action-pane-padding-y, #{$kendo-imageeditor-action-pane-padding-y} );
+        width: var( --kendo-imageeditor-action-pane-width, #{$kendo-imageeditor-action-pane-width} );
+        border-width: 0;
+        border-left-width: var( --kendo-imageeditor-content-border-width, #{$kendo-imageeditor-content-border-width} );
+        border-style: solid;
+        border-color: inherit;
+        box-sizing: border-box;
+        flex: none;
+        overflow-y: auto;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+    }
+
+
+    // Crop Tool
+    .k-imageeditor-crop-overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .k-imageeditor-crop {
+        width: 100%;
+        height: 100%;
+        border-width: var( --kendo-imageeditor-crop-border-width, #{$kendo-imageeditor-crop-border-width} );
+        border-style: var( --kendo-imageeditor-crop-border-style, #{$kendo-imageeditor-crop-border-style} );
+        box-sizing: border-box;
+        position: absolute;
+
+        .k-resize-handle {
+            margin-inline: var( --kendo-imageeditor-resize-handle-margin-x, #{$kendo-imageeditor-resize-handle-margin-x} );
+            margin-block: var( --kendo-imageeditor-resize-handle-margin-y, #{$kendo-imageeditor-resize-handle-margin-y} );
+            border-style: solid;
+            border-width: var( --kendo-imageeditor-resize-handle-border-width, #{$kendo-imageeditor-resize-handle-border-width} );
+        }
+
+        .k-resize-sw,
+        .k-resize-se,
+        .k-resize-nw,
+        .k-resize-ne {
+            width: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+            height: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+        }
+
+        .k-resize-n,
+        .k-resize-s {
+            left: calc( 50% - var( --kendo-imageeditor-resize-left-offset, #{$kendo-imageeditor-resize-left-offset} ) );
+            width: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+            height: 0;
+        }
+
+        .k-resize-w,
+        .k-resize-e {
+            top: calc( 50% - var( --kendo-imageeditor-resize-top-offset, #{$kendo-imageeditor-resize-top-offset} ) );
+            width: 0;
+            height: var( --kendo-imageeditor-resize-handle-size, #{$kendo-imageeditor-resize-handle-size} );
+        }
+
+        .k-resize-ne {
+            transform: rotate(-90deg);
+        }
+
+        .k-resize-nw {
+            transform: rotate(-180deg);
+        }
+
+
+        .k-resize-sw {
+            transform: rotate(90deg);
+        }
+
+        .k-resize-n {
+            top: 0;
+        }
+
+        .k-resize-s {
+            bottom: 0;
+        }
+
+        .k-resize-w {
+            left: 0;
+        }
+
+        .k-resize-e {
+            right: 0;
+        }
+    }
+
+}
+
+

package/scss/imageeditor/_theme.scss

@@ -0,0 +1,49 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-imageeditor--theme() {
+
+    // Image Editor
+    .k-imageeditor {
+        @include fill(
+            var( --kendo-imageeditor-text, #{$kendo-imageeditor-text} ),
+            var( --kendo-imageeditor-bg, #{$kendo-imageeditor-bg} ),
+            var( --kendo-imageeditor-border, #{$kendo-imageeditor-border} )
+        );
+    }
+
+    // Content
+    .k-imageeditor-content {
+        @include fill(
+            var( --kendo-imageeditor-content-text, #{$kendo-imageeditor-content-text} ),
+            var( --kendo-imageeditor-content-bg, #{$kendo-imageeditor-content-bg} ),
+            var( --kendo-imageeditor-content-border, #{$kendo-imageeditor-content-border} )
+        );
+    }
+
+    // Action Pane
+    .k-imageeditor-action-pane {
+        @include fill(
+            var( --kendo-imageeditor-action-pane-text, #{$kendo-imageeditor-action-pane-text} ),
+            var( --kendo-imageeditor-action-pane-bg, #{$kendo-imageeditor-action-pane-bg} ),
+            var( --kendo-imageeditor-action-pane-border, #{$kendo-imageeditor-action-pane-border} )
+        );
+    }
+
+    // Crop Tool
+    .k-imageeditor-crop {
+        @include fill(
+            var( --kendo-imageeditor-crop-text, #{$kendo-imageeditor-crop-text} ),
+            var( --kendo-imageeditor-crop-bg, #{$kendo-imageeditor-crop-bg} ),
+            var( --kendo-imageeditor-crop-border, #{$kendo-imageeditor-crop-border} )
+        );
+    }
+
+    // Crop Overlay
+    .k-imageeditor-crop-overlay {
+        @include fill (
+            $bg: var( --kendo-imageeditor-crop-overlay-bg, #{$kendo-imageeditor-crop-overlay-bg} )
+        );
+    }
+
+}

package/scss/imageeditor/_variables.scss

@@ -0,0 +1,108 @@
+@use "../core/_variables.scss" as *;
+@use "../core/color-system" as *;
+
+/// Background color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-border: get-theme-color-var( neutral-90 ) !default;
+
+/// Vertical margin of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-margin-y: 0 !default;
+/// Horizontal margin of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-margin-x: 0 !default;
+/// Vertical padding of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-padding-y: 0 !default;
+/// Horizontal padding of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-padding-x: 0 !default;
+
+/// Border width of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Font size of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-line-height: var( --kendo-line-height, inherit ) !default;
+/// Font family of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-font-family: var( --kendo-font-family, inherit ) !default;
+
+/// Imageeditor content background color.
+/// @group imageeditor
+$kendo-imageeditor-content-bg: get-theme-color-var( neutral-50 ) !default;
+/// Imageeditor content text color.
+/// @group imageeditor
+$kendo-imageeditor-content-text: inherit !default;
+/// Imageeditor content border color.
+/// @group imageeditor
+$kendo-imageeditor-content-border: inherit !default;
+/// Imageeditor content border width.
+/// @group imageeditor
+$kendo-imageeditor-content-border-width: 0 !default;
+
+/// Imageeditor action pane background color.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-bg: var( --kendo-component-bg, inherit ) !default;
+/// Imageeditor action pane text color.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-text: inherit !default;
+/// Imageeditor action pane border.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-border: inherit !default;
+/// Imageeditor action pane vertical padding.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Imageeditor action pane horizontal padding.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Imageeditor action pane width.
+/// @group imageeditor
+$kendo-imageeditor-action-pane-width: if( $kendo-imageeditor-content-border-width == 0, 240px, calc(240px + #{$kendo-imageeditor-content-border-width}) );
+
+/// Crop background color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-bg: inherit !default;
+/// Crop text color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-text: inherit !default;
+/// Crop border color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-border: $white !default;
+/// Crop overlay background color of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-overlay-bg: rgba( $black, .3 ) !default;
+/// Crop border width of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Crop border style of the imageeditor.
+/// @group imageeditor
+$kendo-imageeditor-crop-border-style: dashed !default;
+
+/// Imageeditor resize handle horizontal margin.
+/// @group imageeditor
+$kendo-imageeditor-resize-handle-margin-x: map-get( $kendo-spacing, hair ) !default;
+/// Imageeditor resize handle vertical margin.
+/// @group imageeditor
+$kendo-imageeditor-resize-handle-margin-y: map-get( $kendo-spacing, hair ) !default;
+/// Imageeditor resize handle border width.
+/// @group imageeditor
+$kendo-imageeditor-resize-handle-border-width: 0 2px 2px 0 !default;
+/// Imageeditor resize handle size.
+/// @group imageeditor
+$kendo-imageeditor-resize-handle-size: map-get( $kendo-spacing, 4 ) !default;
+/// Imageeditor resize handle top offset.
+/// @group imageeditor
+$kendo-imageeditor-resize-top-offset: calc( $kendo-imageeditor-resize-handle-size / 2 ) !default;
+/// Imageeditor resize handle left offset.
+/// @group imageeditor
+$kendo-imageeditor-resize-left-offset: calc( $kendo-imageeditor-resize-handle-size / 2 ) !default;

package/scss/imageeditor/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "imageeditor",
+    dependencies: (
+        "toolbar",
+        "forms",
+        "dropdownlist",
+        "numerictextbox",
+        "checkbox"
+    )
+);
+
+// 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( "imageeditor" ) {
+        @include kendo-imageeditor--layout();
+        @include kendo-imageeditor--theme();
+    }
+}

package/scss/index.scss

@@ -0,0 +1,320 @@
+// Core
+@use "core";
+
+
+// Typography and utils
+@use "typography";
+@use "utils";
+@use "draggable";
+
+
+// Generic content
+@use "icon";
+@use "messagebox";
+
+
+// Primitive components
+@use "action-buttons";
+@use "list";
+@use "listgroup";
+@use "overlay";
+@use "popup";
+@use "ripple";
+@use "table";
+@use "virtual-scroller";
+
+
+// Indicators
+@use "avatar";
+@use "badge";
+@use "chip";
+@use "color-preview";
+@use "loader";
+// @use "loading";
+@use "skeleton";
+@use "tooltip";
+
+
+// Form helpers
+@use "forms";
+@use "validator";
+@use "floating-label";
+
+
+// Native forms
+@use "button";
+@use "split-button";
+@use "menu-button";
+@use "input";
+@use "textbox";
+@use "textarea";
+@use "checkbox";
+@use "listbox";
+@use "progressbar";
+@use "radio";
+@use "slider";
+
+
+// Form requirements
+@use "calendar";
+@use "timeselector";
+
+
+// Augmented forms
+@use "autocomplete";
+@use "captcha";
+@use "colorpalette";
+@use "colorgradient";
+@use "coloreditor";
+@use "colorpicker";
+@use "combobox";
+@use "dateinput";
+@use "datepicker";
+@use "timepicker";
+@use "datetimepicker";
+@use "daterangepicker";
+@use "dropdowngrid";
+@use "dropdownlist";
+@use "dropdowntree";
+@use "maskedtextbox";
+@use "multiselect";
+@use "numerictextbox";
+@use "rating";
+@use "searchbox";
+@use "switch";
+@use "upload";
+@use "dropzone";
+
+
+// Command interfaces
+@use "appbar";
+@use "fab";
+@use "menu";
+@use "toolbar";
+
+
+// Popups and modals
+@use "action-sheet";
+@use "dialog";
+@use "drawer";
+@use "notification";
+@use "popover";
+@use "responsivepanel";
+@use "window";
+
+
+// Navigation
+@use "bottom-navigation";
+@use "breadcrumb";
+@use "pager";
+@use "stepper";
+@use "tabstrip";
+@use "treeview";
+@use "wizard";
+
+
+// Layout & containers
+@use "card";
+@use "expansion-panel";
+@use "panelbar";
+@use "splitter";
+@use "tilelayout";
+
+
+// Data management
+@use "grid";
+@use "listview";
+// @use "spreadsheet";
+// @use "pivotgrid";
+@use "treelist";
+@use "filter";
+@use "filemanager";
+@use "taskboard";
+
+
+// Editors
+@use "editor";
+@use "imageeditor";
+
+
+// Scheduling
+// @use "gantt";
+@use "scheduler";
+
+
+// Misc
+// @use "adaptive";
+// @use "chat";
+@use "mediaplayer";
+// @use "timeline";
+// @use "pdf-viewer";
+@use "scroller";
+// @use "scrollview";
+
+
+// Dataviz
+@use "dataviz";
+@use "map";
+@use "orgchart";
+@use "signature";
+
+// Setup
+@mixin config($config: null ) {
+    @include core.configure($config: $config);
+}
+@mixin styles() {
+    // Typography and utils
+    @include typography.styles();
+    @include utils.styles();
+
+
+    // Generic content
+    @include icon.styles();
+    @include messagebox.styles();
+
+
+    // Primitive components
+    @include action-buttons.styles();
+    @include list.styles();
+    @include listgroup.styles();
+    @include overlay.styles();
+    @include popup.styles();
+    @include ripple.styles();
+    @include table.styles();
+    @include virtual-scroller.styles();
+
+
+    // Indicators
+    @include avatar.styles();
+    @include badge.styles();
+    @include chip.styles();
+    @include color-preview.styles();
+    @include loader.styles();
+    // @include loading.styles();
+    @include skeleton.styles();
+    @include tooltip.styles();
+
+
+    // Form helpers
+    @include forms.styles();
+    @include validator.styles();
+    @include floating-label.styles();
+
+
+    // Native forms
+    @include button.styles();
+    @include split-button.styles();
+    @include menu-button.styles();
+    @include input.styles();
+    @include textbox.styles();
+    @include textarea.styles();
+    @include checkbox.styles();
+    @include listbox.styles();
+    @include progressbar.styles();
+    @include radio.styles();
+    @include slider.styles();
+
+
+    // Form requirements
+    @include calendar.styles();
+    @include timeselector.styles();
+
+
+    // Augmented forms
+    @include autocomplete.styles();
+    @include captcha.styles();
+    @include colorpalette.styles();
+    @include colorgradient.styles();
+    @include coloreditor.styles();
+    @include colorpicker.styles();
+    @include combobox.styles();
+    @include dateinput.styles();
+    @include datepicker.styles();
+    @include timepicker.styles();
+    @include datetimepicker.styles();
+    @include daterangepicker.styles();
+    @include dropdowngrid.styles();
+    @include dropdownlist.styles();
+    @include dropdowntree.styles();
+    @include maskedtextbox.styles();
+    @include multiselect.styles();
+    @include numerictextbox.styles();
+    @include rating.styles();
+    @include searchbox.styles();
+    @include switch.styles();
+    @include upload.styles();
+    @include dropzone.styles();
+
+
+    // Command interfaces
+    @include appbar.styles();
+    @include fab.styles();
+    @include menu.styles();
+    @include toolbar.styles();
+
+
+    // Popups and modals
+    @include window.styles();
+    @include action-sheet.styles();
+    @include dialog.styles();
+    @include drawer.styles();
+    @include notification.styles();
+    @include popover.styles();
+    @include responsivepanel.styles();
+
+
+    // Navigation
+    @include bottom-navigation.styles();
+    @include breadcrumb.styles();
+    @include pager.styles();
+    @include stepper.styles();
+    @include tabstrip.styles();
+    @include treeview.styles();
+    @include wizard.styles();
+
+
+    // Layout & containers
+    @include card.styles();
+    @include expansion-panel.styles();
+    @include panelbar.styles();
+    @include splitter.styles();
+    @include tilelayout.styles();
+
+
+    // Data management
+    @include grid.styles();
+    @include listview.styles();
+    // @include spreadsheet.styles();
+    // @include pivotgrid.styles();
+    @include treelist.styles();
+    @include filter.styles();
+    @include filemanager.styles();
+    @include taskboard.styles();
+
+
+    // Editors
+    @include editor.styles();
+    @include imageeditor.styles();
+
+
+    // Scheduling
+    // @include gantt.styles();
+    @include scheduler.styles();
+
+
+    // Misc
+    // @include adaptive.styles();
+    // @include chat.styles();
+    @include mediaplayer.styles();
+    // @include timeline.styles();
+    // @include pdf-viewer.styles();
+    @include scroller.styles();
+    // @include scrollview.styles();
+
+
+    // Dataviz
+    @include dataviz.styles();
+    @include map.styles();
+    @include orgchart.styles();
+    @include signature.styles();
+}