@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/editor/_layout.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 @use "sass:math";
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../input/_variables.scss" as *;
@@ -20,33 +21,11 @@
         display: flex;
         flex-flow: column nowrap;
         position: relative;
+        z-index: 1;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-    }
-    table.k-editor {
-        width: 100%;
-        display: table;
-        vertical-align: top;
-        table-layout: fixed;
-        border-collapse: separate;
-        border-spacing: 0;
-
-        tbody,
-        tr,
-        td {
-            border-color: inherit;
-        }
-    }
-
-    kendo-editor {
-        .k-editor-content {
-            z-index: 1;
-        }
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.k-readonly {
-            opacity: .6;
-            fill: grayscale(.1);
-            > .k-content,
             .k-editor-content {
                 pointer-events: auto;
             }
@@ -58,18 +37,16 @@
         }
     }
 
+
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-y-sm $kendo-padding-x-sm;
+        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
         background: none;
     }
-    .k-window.k-editor-widget {
-        padding: 0;
-    }
 
     // Resizable editor
     .k-editor-resizable {
@@ -82,6 +59,7 @@
         position: absolute;
         visibility: hidden;
     }
+
     .k-editor-resize-handle {
         width: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
         height: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
@@ -148,10 +126,12 @@
             cursor: e-resize;
         }
     }
+
     .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
         outline-width: var( --kendo-editor-selectednode-outline-width, #{$kendo-editor-selectednode-outline-width} );
         outline-style: solid;
     }
+
     .ProseMirror-hideselection { // sass-lint:disable-line class-name-format
         caret-color: transparent;
 
@@ -161,40 +141,11 @@
         }
     }
 
-    // Toolbar
-    .k-editor-toolbar,
-    .k-editor > .k-toolbar {
-        border-width: 0 0 $kendo-toolbar-border-width 0;
-        flex-shrink: 0;
-    }
-
 
-    // jQuery toolbar
+    // Тoolbar
     .k-editor-toolbar {
         border-width: 0 0 $kendo-toolbar-border-width 0;
-
-        // Tool
-        .k-tool {
-            padding: $kendo-button-padding-y-md;
-            width: $kendo-button-calc-size;
-            height: $kendo-button-calc-size;
-        }
-        .k-tool-text {
-            display: none;
-        }
-
-        // Overflow tools
-        .k-overflow-tools {
-            margin: 0;
-            position: absolute;
-            inset-block-start: 0;
-            inset-inline-end: 0;
-            visibility: hidden;
-
-            .k-overflow-anchor {
-                position: relative;
-            }
-        }
+        flex-shrink: 0;
 
         .k-editor-export {
             .k-icon {
@@ -222,7 +173,7 @@
         }
 
         > .ProseMirror { // sass-lint:disable-line class-name-format
-            padding: $kendo-padding-x;
+            padding: $kendo-padding-md-x;
             width: 100%;
             height: 100%;
             position: relative;
@@ -245,16 +196,51 @@
                 user-select: none;
             }
         }
-    }
-    td.k-editor-content {
-        padding-block: $kendo-input-padding-y-md;
-        width: 100%;
-        height: 100%;
-        border-width: 0;
-        outline: 0;
 
-        .k-resizable & {
-            padding: $kendo-input-padding-y-md $kendo-input-padding-y-md map-get( $kendo-spacing, 4 );
+        // Table styles
+        p {
+            margin: 0 0 1rem;
+        }
+
+        td p,
+        th p,
+        li p {
+            margin: 0;
+        }
+
+        table {
+            margin: 0;
+            border-collapse: collapse;
+            table-layout: fixed;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        td,
+        th {
+            min-width: 1em;
+            border: 1px solid;
+            padding: 3px 5px;
+            vertical-align: top;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        th {
+            font-weight: bold;
+            text-align: left;
+        }
+
+        // Give selected cells a blue overlay
+        .selectedCell::after { // sass-lint:disable-line class-name-format
+            z-index: 2;
+            position: absolute;
+            content: "";
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            pointer-events: none;
         }
     }
 
@@ -316,14 +302,6 @@
             position: relative;
         }
 
-        .k-edit-form-container {
-            display: inline-block;
-
-            .k-edit-label {
-                text-align: left;
-            }
-        }
-
         .k-actions {
             padding: 0;
         }
@@ -347,29 +325,6 @@
         }
     }
 
-    .k-editor-dialog {
-        box-sizing: border-box;
-
-        .k-edit-form-container {
-            width: auto;
-        }
-
-        .k-edit-label {
-            width: 30%;
-            padding-block: calc( #{$kendo-padding-y} + #{$kendo-input-border-width} );
-        }
-
-        .k-edit-field {
-            width: 66%;
-        }
-    }
-
-    // View HTML dialog using flex to fit child textarea
-    .k-editor-dialog.k-viewhtml-dialog {
-        display: flex;
-        flex-direction: column;
-    }
-
     // Text area in editor dialog
     .k-textarea.k-editor-textarea {
         width: 100%;
@@ -377,25 +332,6 @@
         resize: none;
     }
 
-    .k-filebrowser-dialog {
-        display: flex;
-
-        .k-edit-form-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-
-        }
-
-        .k-edit-label {
-            width: 18%;
-        }
-
-        .k-edit-field {
-            width: 75%;
-        }
-    }
-
     .k-filebrowser {
         max-width: 100%;
 
@@ -409,7 +345,7 @@
             flex: 1;
         }
         .k-search-wrap {
-            margin-inline-start: map-get( $kendo-spacing, 4 );
+            margin-inline-start: map.get( $kendo-spacing, 4 );
             width: 150px;
             display: flex;
             align-items: center;
@@ -426,7 +362,7 @@
 
         // Filebrowser toolbar
         .k-filebrowser-toolbar {
-            margin-block-start: map-get( $kendo-spacing, 4 );
+            margin-block-start: map.get( $kendo-spacing, 4 );
         }
 
         .k-upload {
@@ -453,8 +389,8 @@
             flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
-            margin-block-end: map-get( $kendo-spacing, 4 );
-            padding: $kendo-padding-y $kendo-padding-x;
+            margin-block-end: map.get( $kendo-spacing, 4 );
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -462,7 +398,7 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-y $kendo-padding-x;
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -506,7 +442,7 @@
 
         .k-thumb {
             float: left;
-            margin-inline-end: $kendo-padding-x-sm;
+            margin-inline-end: $kendo-padding-sm-x;
         }
 
         .k-breadcrumbs-wrap {
@@ -521,15 +457,7 @@
         }
     }
 
-    .k-editor-table-wizard-dialog {
-        display: flex;
-
-        // Edit form
-        .k-edit-form-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-        }
+    .k-editor-table-wizard-window {
 
         // Tabstrip wrapper
         .k-tabstrip-wrapper {
@@ -553,7 +481,7 @@
 
             & + .k-color-picker,
             & + .k-dropdown-list {
-                margin-inline-start: map-get( $kendo-spacing, 2 );
+                margin-inline-start: map.get( $kendo-spacing, 2 );
             }
         }
 
@@ -582,7 +510,7 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-y-sm $kendo-padding-x-sm;
+                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
             }
         }
 

package/scss/editor/_theme.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-editor--theme() {
 
@@ -103,6 +103,16 @@
                 $bg: var( --kendo-editor-highlighted-bg, #{$kendo-editor-highlighted-bg} )
             );
         }
+
+        // Table styles
+        td,
+        th {
+            border-color: #dddddd;
+        }
+
+        .selectedCell::after { // sass-lint:disable-line class-name-format
+            background-color: rgba(200, 200, 255, .4);
+        }
     }
 
 }

package/scss/editor/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/" as *;
 @use "../input/_variables.scss" as *;
 
@@ -33,23 +34,23 @@ $kendo-editor-placeholder-opacity: var( --kendo-input-placeholder-opacity, #{$ke
 $kendo-editor-content-outline-color: var( --kendo-body-text, initial ) !default;
 /// The size of the editor resize handle
 /// @group editor
-$kendo-editor-resize-handle-size: map-get( $kendo-spacing, 2 ) !default;
+$kendo-editor-resize-handle-size: map.get( $kendo-spacing, 2 ) !default;
 /// The border width of the editor resize handle
 /// @group editor
 $kendo-editor-resize-handle-border-width: 1px !default;
 /// The horizontal margin of the editor export tool icon
 /// @group editor
-$kendo-editor-export-tool-icon-margin-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-editor-export-tool-icon-margin-x: map.get( $kendo-spacing, 1 ) !default;
 ///  The outline width of the editor selected node
 /// @group editor
-$kendo-editor-selectednode-outline-width: map-get( $kendo-spacing, thin ) !default;
+$kendo-editor-selectednode-outline-width: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 // Cell size
-$ct-cell-size: 20px;
+$ct-cell-size: 20px !default;
 
 /// The selected text color of the editor
 /// @group editor
-$kendo-editor-selected-text: $white !default;
+$kendo-editor-selected-text: $kendo-color-white !default;
 /// The selected background color of the editor
 /// @group editor
 $kendo-editor-selected-bg: get-theme-color-var( primary-100 ) !default;
@@ -59,10 +60,10 @@ $kendo-editor-highlighted-bg: get-theme-color-var( primary-60 ) !default;
 
 /// The border color of the editor resize handle
 /// @group editor
-$kendo-editor-resize-handle-border: $black !default;
+$kendo-editor-resize-handle-border: $kendo-color-black !default;
 /// The background color of the editor resize handle
 /// @group editor
-$kendo-editor-resize-handle-bg: $white !default;
+$kendo-editor-resize-handle-bg: $kendo-color-white !default;
 
 /// The outline color of the editor selected node
 /// @group editor

package/scss/editor/index.scss

@@ -15,12 +15,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/expansion-panel/_layout.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-expansion-panel--layout() {
 
@@ -17,7 +17,7 @@
         overflow: hidden;
         outline: 0;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/expansion-panel/_theme.scss

@@ -1,6 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-expansion-panel--theme() {
 

package/scss/expansion-panel/_variables.scss

@@ -1,9 +1,9 @@
-@use "../core/_variables" as *;
-@use "../core/color-system" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Vertical margin of the expander.
 /// @group expander
-$kendo-expander-margin-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-expander-margin-y: map.get( $kendo-spacing, 2 ) !default;
 /// Border width of the expander.
 /// @group expander
 $kendo-expander-border-width: 1px !default;
@@ -28,7 +28,7 @@ $kendo-expander-bg: get-theme-color-var( neutral-10 ) !default;
 $kendo-expander-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow of the expander.
 /// @group expander
-$kendo-expander-shadow: inset 0 0 0 2px get-theme-color-var( neutral-30 );
+$kendo-expander-shadow: inset 0 0 0 2px get-theme-color-var( neutral-30 ) !default;
 
 /// Background color of the expanded expander.
 /// @group expander
@@ -42,10 +42,10 @@ $kendo-expander-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
 $kendo-expander-disabled-text: var( --kendo-disabled-text, initial ) !default;
 /// Offset of the focused expander.
 /// @group expander
-$kendo-expander-focus-offset: map-get( $kendo-spacing, hair ) !default;
+$kendo-expander-focus-offset: 1px !default;
 /// Outline width of the focused expander.
 /// @group expander
-$kendo-expander-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+$kendo-expander-focus-outline-width: 1px !default;
 /// Outline style of the focused expander.
 /// @group expander
 $kendo-expander-focus-outline-style: solid !default;
@@ -62,10 +62,10 @@ $kendo-expander-focus-shadow: inset 0px 0px 0px 2px get-theme-color-var( neutral
 
 /// Horizontal padding of the expander header.
 /// @group expander
-$kendo-expander-header-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the expander header.
 /// @group expander
-$kendo-expander-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-expander-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Text color of the expander header.
 /// @group expander
 $kendo-expander-header-text: get-theme-color-var( primary-100 ) !default;
@@ -86,14 +86,14 @@ $kendo-expander-header-sub-title-text: var( --kendo-subtle-text, initial ) !defa
 
 /// Horizontal margin of the expander indicator.
 /// @group expander
-$kendo-expander-indicator-margin-x: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+$kendo-expander-indicator-margin-x: map.get( $kendo-spacing, 2.5 ) !default;
 /// Text color of the expander indicator.
 /// @group expander
-$kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} );
+$kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} ) !default;
 
 /// Horizontal padding of the expander content.
 /// @group expander
-$kendo-expander-content-padding-x: map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
 /// Vertical padding of the expander content.
 /// @group expander
-$kendo-expander-content-padding-y: map-get( $kendo-spacing, 4 ) !default;
+$kendo-expander-content-padding-y: map.get( $kendo-spacing, 4 ) !default;

package/scss/expansion-panel/index.scss

@@ -7,9 +7,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/fab/_layout.scss

@@ -1,4 +1,5 @@
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "./_variables.scss" as *;
 
 @mixin kendo-fab--layout() {
 
@@ -66,8 +67,8 @@
 
     // 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 );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
 
         .k-fab-#{$size} {
             --INTERNAL--kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
@@ -75,11 +76,6 @@
         }
     }
 
-    // Shapes
-    .k-fab-square {
-        aspect-ratio: 1;
-    }
-
 
     // Items
     .k-fab-items {

package/scss/fab/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-fab--theme() {
 
@@ -60,26 +61,26 @@
     // 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 );
+            $_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} );