@progress/kendo-theme-fluent 8.0.2-dev.4 → 8.1.0-dev.1

package/scss/grid/_theme.scss

@@ -541,7 +541,7 @@
 
             &.k-disabled .k-link,
             &.k-disabled .k-icon {
-                @include disabled-color(
+                @include disabled(
                     var( --kendo-disabled-text, inherit )
                 );
             }
@@ -561,7 +561,7 @@
 
         .k-listgroup-item {
             &.k-disabled {
-                @include disabled-color(
+                @include disabled(
                     $bg: var( --kendo-disabled-bg, inherit )
                 );
             }

package/scss/index.scss

@@ -56,6 +56,7 @@
 @forward "./loader";
 @forward "./skeleton";
 @forward "./tooltip";
+@forward "./time-marker";
 
 
 // Form helpers
@@ -115,6 +116,7 @@
 // Layout & containers
 @forward "./card";
 @forward "./expansion-panel";
+@forward "./panel";
 @forward "./panelbar";
 @forward "./splitter";
 @forward "./tilelayout";
@@ -193,6 +195,7 @@
 @use "./loader" as *;
 @use "./skeleton" as *;
 @use "./tooltip" as *;
+@use "./time-marker" as *;
 
 
 // Form helpers
@@ -277,6 +280,7 @@
 // Layout & containers
 @use "./card" as *;
 @use "./expansion-panel" as *;
+@use "./panel" as *;
 @use "./panelbar" as *;
 @use "./splitter" as *;
 @use "./tilelayout" as *;
@@ -379,6 +383,7 @@
     @include loader-styles();
     @include skeleton-styles();
     @include tooltip-styles();
+    @include time-marker-styles();
 
 
     // Form helpers
@@ -463,6 +468,7 @@
     // Layout & containers
     @include card-styles();
     @include expansion-panel-styles();
+    @include panel-styles();
     @include panelbar-styles();
     @include splitter-styles();
     @include tilelayout-styles();

package/scss/loader/_layout.scss

@@ -457,3 +457,133 @@
     }
 
 }
+
+@mixin kendo-loading--layout() {
+
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-loading-mask {
+        z-index: var( --kendo-zindex-loading, #{$kendo-zindex-loading} );
+
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+    }
+    .k-loading-color {
+        background-color: var( --kendo-loading-bg, #{$kendo-loading-bg} );
+        opacity: var( --kendo-loading-opacity, #{$kendo-loading-opacity} );
+    }
+
+    // Loading indicator
+    .k-i-loading {
+        width: 1em;
+        height: 1em;
+        line-height: 1;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: var( --kendo-loading-text, #{$kendo-loading-text} );
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
+
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
+
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
+
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px );
+        font-size: 4em;
+    }
+
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+}

package/scss/loader/_variables.scss

@@ -187,3 +187,17 @@ $kendo-loader-theme-colors: () !default;
         k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }
+
+// Loading indicator
+/// The background color of the Loading indicator.
+/// @group loading
+$kendo-loading-bg: var( --kendo-component-bg, initial ) !default;
+/// The text color of the Loading indicator.
+/// @group loading
+$kendo-loading-text: currentColor !default;
+/// The opacity of the Loading indicator.
+/// @group loading
+$kendo-loading-opacity: .3 !default;
+/// The z-index of the Loading indicator.
+/// @group loading
+$kendo-zindex-loading: 100 !default;

package/scss/loader/index.scss

@@ -20,6 +20,7 @@ $_kendo-module-meta: (
 @mixin loader-styles() {
     @include module.render( "loader" ) {
         @include kendo-loader--layout();
+        @include kendo-loading--layout();
         @include kendo-loader--theme();
     }
 }

package/scss/panel/_layout.scss

@@ -0,0 +1,29 @@
+@use "../core/" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-panel--layout() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include border-radius( $kendo-panel-border-radius );
+        padding: 0;
+        border-width: $kendo-panel-border-width;
+        border-style: $kendo-panel-border-style;
+        box-sizing: border-box;
+
+        > .k-header {
+            @include border-top-radius( $kendo-panel-border-radius );
+            @include fill(
+                var( --kendo-component-text, #{$kendo-component-text} ),
+                var( --kendo-component-bg, #{$kendo-component-bg} ),
+                var( --kendo-component-border, #{$kendo-component-border} )
+            );
+            padding-inline: $kendo-panel-header-padding-inline;
+            padding-block: $kendo-panel-header-padding-block;
+        }
+        > .k-content {
+            padding-inline: $kendo-panel-content-padding-inline;
+            padding-block: $kendo-panel-content-padding-block;
+        }
+    }
+}

package/scss/panel/_theme.scss

@@ -0,0 +1,22 @@
+@use "../core/" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-panel--theme() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include fill(
+            var( --kendo-panel-text, #{$kendo-panel-text} ),
+            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
+            var( --kendo-panel-border, #{$kendo-panel-border} )
+        );
+    }
+
+    :where(.k-content) {
+        @include fill(
+            var( --kendo-panel-text, #{$kendo-panel-text} ),
+            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
+            var( --kendo-panel-border, #{$kendo-panel-border} )
+        );
+    }
+}

package/scss/panel/_variables.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "../core/" as *;
+
+/// The border radius of the Panel.
+/// @group panel
+$kendo-panel-border-radius: k-border-radius(md);
+/// The width of the border around the Panel.
+/// @group panel
+$kendo-panel-border-width: 1px;
+/// The style of the border around the Panel.
+/// @group panel
+$kendo-panel-border-style: solid;
+
+/// The inline padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-inline: k-spacing(2);
+/// The block padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-block: k-spacing(1);
+
+/// The inline padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-inline: k-spacing(2);
+/// The block padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-block: k-spacing(1);
+
+/// The text color of the Panel.
+/// @group panel
+$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text});
+/// The background color of the Panel.
+/// @group panel
+$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg});
+/// The color of the border around the Panel.
+/// @group panel
+$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border});

package/scss/panel/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "panel",
+    dependencies: ()
+);
+
+
+// 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 panel-styles() {
+    @include module.render( "panel" ) {
+        @include kendo-panel--layout();
+        @include kendo-panel--theme();
+    }
+}

package/scss/popup/_layout.scss

@@ -3,6 +3,31 @@
 
 @mixin kendo-popup--layout() {
 
+    // Animation Container
+    .k-animation-container {
+        position: absolute;
+        overflow: hidden;
+        z-index: 100;
+
+        &-fixed {
+            position: fixed;
+        }
+
+        &-relative {
+            position: relative;
+            display: inline-block;
+        }
+    }
+
+    .k-animation-container {
+        @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
+    }
+
+    .k-animation-container-shown {
+        overflow: visible;
+    }
+
+    // Popup
     .k-popup {
         margin: 0;
         padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
@@ -22,14 +47,6 @@
         }
     }
 
-    .k-animation-container {
-      @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
-    }
-
-    .k-animation-container-shown {
-        overflow: visible;
-    }
-
     .k-popup > .k-colorpalette {
         padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
         padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );

package/scss/rating/_theme.scss

@@ -36,7 +36,7 @@
         }
 
         &.k-disabled {
-            @include disabled-color(
+            @include disabled(
                 var( --kendo-disabled-text, inherit ),
                 inherit,
                 var( --kendo-disabled-border, inherit )

package/scss/scheduler/index.scss

@@ -11,7 +11,8 @@ $_kendo-module-meta: (
         "dialog",
         "tooltip",
         "calendar",
-        "toolbar"
+        "toolbar",
+        "time-marker"
     )
 );
 

package/scss/tilelayout/_variables.scss

@@ -4,29 +4,29 @@
 @use "../card/_variables.scss" as *;
 
 /// The width of the border around the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 
 /// The horizontal padding of the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the TileLayout
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
 
 /// The width of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border-width: 1px !default;
 /// The radius of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
 /// The color of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border: var( --kendo-component-border, initial ) !default;
 /// The background color of the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;

package/scss/time-marker/_layout.scss

@@ -0,0 +1,19 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-time-marker--layout() {
+
+    .k-current-time {
+        width: var( --kendo-current-time-width, #{$kendo-current-time-width} );
+        position: absolute;
+
+        &.k-current-time-arrow-left,
+        &.k-current-time-arrow-right,
+        &.k-current-time-arrow-down {
+            width: 0;
+            height: 0;
+            background: transparent;
+            border: 4px solid transparent;
+        }
+    }
+
+}

package/scss/time-marker/_theme.scss

@@ -0,0 +1,21 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-time-marker--theme() {
+
+    .k-current-time {
+        background: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+
+        &.k-current-time-arrow-left {
+            border-right-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+        }
+    }
+
+}

package/scss/time-marker/_variables.scss

@@ -0,0 +1,6 @@
+/// The border width of the current time indicator.
+/// @group time-marker
+$kendo-current-time-width: 1px !default;
+/// The color of the current time indicator.
+/// @group time-marker
+$kendo-current-time-color: #ff0000 !default;

package/scss/time-marker/index.scss

@@ -0,0 +1,22 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "time-marker",
+    dependencies: ()
+);
+
+// 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 time-marker-styles() {
+    @include module.render( "time-marker" ) {
+        @include kendo-time-marker--layout();
+        @include kendo-time-marker--theme();
+    }
+}

package/scss/typography/_layout.scss

@@ -24,6 +24,10 @@
             var( --kendo-font-weight, normal ),
             var( --kendo-letter-spacing, normal ),
         );
+        @include fill(
+            var( --kendo-body-text, initial ),
+            var( --kendo-body-bg, initial )
+        );
         margin: 0;
 
         p {