@progress/kendo-theme-fluent 5.7.0

package/scss/mediaplayer/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "mediaplayer",
+    dependencies: (
+        "slider",
+        "toolbar",
+        "icon"
+    )
+);
+
+
+// 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( "mediaplayer" ) {
+        @include kendo-mediaplayer--layout();
+        @include kendo-mediaplayer--theme();
+    }
+}

package/scss/menu/_layout.scss

@@ -0,0 +1,343 @@
+@use "../core/color-system" as *;
+@use '../core/variables' as *;
+@use './variables' as *;
+
+@mixin kendo-menu--layout() {
+
+    // Menu bar
+    .k-menu-bar {
+        border-width: var( --kendo-menu-border-width, #{$kendo-menu-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-menu-font-family, #{$kendo-menu-font-family} );
+        font-size: var( --kendo-menu-font-size, #{$kendo-menu-font-size} );
+        line-height: var( --kendo-menu-line-height, #{$kendo-menu-line-height} );
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        position: relative;
+        cursor: default;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        > .k-separator {
+            border-width: 0;
+        }
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-menu { @extend .k-menu-bar !optional; }
+
+
+    // Menu item
+    .k-menu-item {
+        border-width: 0;
+        outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
+        position: relative;
+        user-select: none;
+
+        &:focus-visible,
+        &.k-focus {
+            outline-offset: var( --kendo-menu-item-focus-outline-offset, #{$kendo-menu-item-focus-outline-offset} );
+            outline-width: var( --kendo-menu-item-focus-outline-width, #{$kendo-menu-item-focus-outline-width} );
+            outline-style: var( --kendo-menu-item-focus-outline-style, #{$kendo-menu-item-focus-outline-style} );
+        }
+    }
+
+
+    // Menu link
+    .k-menu-link {
+        padding-inline: var( --kendo-menu-item-padding-x, #{$kendo-menu-item-padding-x} );
+        padding-block: var( --kendo-menu-item-padding-y, #{$kendo-menu-item-padding-y} );
+        outline: 0;
+        color: inherit;
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        gap: var( --kendo-menu-item-icon-spacing, #{$kendo-menu-item-icon-spacing} );
+        align-items: center;
+        position: relative;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    // Expand arrow
+    .k-menu-expand-arrow {
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
+    }
+
+
+    // Orientation -- horizontal
+    .k-menu-horizontal {
+        flex-direction: row;
+
+        > .k-menu-item + .k-menu-item {
+            margin-inline-start: var( --kendo-menu-item-spacing, #{$kendo-menu-item-spacing} );
+        }
+
+        > .k-separator {
+            margin: 0 var( --kendo-menu-separator-margin, #{$kendo-menu-separator-margin} );
+            width: 0;
+            height: auto;
+            border-bottom-width: var( --kendo-menu-separator-width, $kendo-menu-separator-width);
+            border-style: solid;
+        }
+    }
+
+
+    // Orientation -- vertical
+    .k-menu-vertical {
+        flex-direction: column;
+
+        > .k-menu-item + .k-menu-item {
+            margin-block-start: var( --kendo-menu-item-spacing, #{$kendo-menu-item-spacing} );
+        }
+
+        > .k-separator {
+            margin: var( --kendo-menu-separator-margin, #{$kendo-menu-separator-margin} ) 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            display: block;
+        }
+    }
+
+
+    // Menu popup
+    .k-menu-popup {
+        padding-inline: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
+        padding-block: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
+        box-sizing: border-box;
+        border-width: var( --kendo-menu-popup-border-width, #{$kendo-menu-popup-border-width} );
+        border-style: solid;
+        overflow: auto;
+        max-height: 80vh;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Sub menu
+    .k-menu-group {
+        font-size: var( --INTERNAL--kendo-group-font-size, inherit );
+        line-height: var( --INTERNAL--kendo-group-line-height, normal );
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: var( --kendo-menu-popup-item-spacing, #{$kendo-menu-popup-item-spacing} );
+        position: absolute;
+
+        .k-menu-link {
+            padding-inline-start: var( --INTERNAL--kendo-menu-popup-item-padding-x );
+            padding-inline-end: var( --INTERNAL--kendo-menu-popup-item-padding-end );
+            padding-block: var( --INTERNAL--kendo-menu-popup-item-padding-y );
+        }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: var( --INTERNAL--kendo-menu-popup-item-icon-margin-start );
+            margin-inline-end: var( --INTERNAL--kendo-menu-popup-item-icon-margin-end );
+        }
+
+        .k-separator {
+            margin: var( --kendo-menu-separator-margin, $kendo-menu-separator-margin ) 0;
+            height: 0;
+            border-width: 0;
+            border-top-width: var( --kendo-menu-separator-width, $kendo-menu-separator-width);
+            border-style: solid;
+            display: block;
+        }
+    }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
+    .k-menu-group,
+    .k-menu.k-context-menu {
+
+        .k-item {
+            &:focus-visible,
+            &.k-focus {
+
+                > .k-link {
+                    outline-offset: var( --kendo-menu-item-focus-outline-offset, #{$kendo-menu-item-focus-outline-offset} );
+                    outline-width: var( --kendo-menu-item-focus-outline-width, #{$kendo-menu-item-focus-outline-width} );
+                    outline-style: var( --kendo-menu-item-focus-outline-style, #{$kendo-menu-item-focus-outline-style} );
+                }
+            }
+        }
+    }
+
+
+    // Sizes
+    @each $size, $size-pops in $kendo-menu-sizes {
+
+        // Group sizes
+        $_group-font-size: map-get( $size-pops, group-font-size );
+        $_group-line-height: map-get( $size-pops, group-line-height );
+
+        // Link sizes
+        $_link-padding-x: map-get( $size-pops, link-padding-x );
+        $_link-padding-y: map-get( $size-pops, link-padding-y );
+        $_link-padding-inline-end: map-get( $size-pops, link-padding-inline-end );
+
+        // Arrow sizes
+        $_arrow-margin-inline-start: map-get( $size-pops, arrow-margin-inline-start );
+        $_arrow-margin-inline-end: map-get( $size-pops, arrow-margin-inline-end );
+
+        .k-menu-group-#{$size} {
+            --INTERNAL--kendo-group-font-size: var( --kendo-menu-popup-font-size-#{$size}, #{$_group-font-size} );
+            --INTERNAL--kendo-group-line-height: var( --kendo-menu-popup-line-height-#{$size}, #{$_group-line-height} );
+
+            .k-menu-link {
+                --INTERNAL--kendo-menu-popup-item-padding-x: var( --kendo-menu-popup-item-padding-x-#{$size}, #{$_link-padding-x} );
+                --INTERNAL--kendo-menu-popup-item-padding-y: var( --kendo-menu-popup-item-padding-y-#{$size}, #{$_link-padding-y} );
+                --INTERNAL--kendo-menu-popup-item-padding-end: var( --kendo-menu-popup-item-padding-end-#{$size}, #{$_link-padding-inline-end} );
+            }
+
+            .k-menu-expand-arrow {
+                --INTERNAL--kendo-menu-popup-item-icon-margin-start: var( --kendo-menu-popup-item-icon-margin-start-#{$size}, #{$_arrow-margin-inline-start} );
+                --INTERNAL--kendo-menu-popup-item-icon-margin-end: var( --kendo-menu-popup-item-icon-margin-end-#{$size}, #{$_arrow-margin-inline-end} );
+            }
+
+        }
+    }
+
+    // Context menu
+    .k-popups-wrapper {
+        position: relative;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+    .k-context-menu {
+        margin: 0;
+        padding-inline: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
+        padding-block: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
+        border-width: var( --kendo-menu-popup-border-width, #{$kendo-menu-popup-border-width} );
+        border-style: solid;
+
+        &.k-menu-horizontal {
+            padding-inline: var( --kendo-menu-popup-padding-y, #{$kendo-menu-popup-padding-y} );
+            padding-block: var( --kendo-menu-popup-padding-x, #{$kendo-menu-popup-padding-x} );
+        }
+    }
+    .k-animation-container .k-context-menu.k-menu-horizontal {
+        // kendo-jquery adds `display: block` via js and we need to override it.
+        display: flex !important; // sass-lint:disable-line no-important
+        flex-wrap: nowrap;
+    }
+    .k-context-menu-popup {
+        z-index: 12000;
+
+        .k-context-menu {
+            border-width: 0;
+        }
+    }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-wrapper {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        position: relative;
+
+        .k-menu {
+            overflow: hidden;
+            flex-wrap: nowrap;
+        }
+
+        .k-menu-scroll-button {
+            padding: 0;
+            border-width: 0;
+            border-style: solid;
+            border-color: inherit;
+            color: inherit;
+            background: inherit;
+            position: absolute;
+
+            &.k-scroll-up {
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: var( --kendo-icon-size, 1rem );
+                border-bottom-width: 1px;
+
+                .k-icon:before {
+                    content: "\e013";
+                }
+            }
+
+            &.k-scroll-right {
+                top: 0;
+                right: 0;
+                height: 100%;
+                width: var( --kendo-icon-size, 1rem );
+                border-left-width: 1px;
+
+                .k-icon:before {
+                    content: "\e014";
+                }
+            }
+
+            &.k-scroll-down {
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: var( --kendo-icon-size, 1rem );
+                border-top-width: 1px;
+
+                .k-icon:before {
+                    content: "\e015";
+                }
+            }
+
+            &.k-scroll-left {
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: var( --kendo-icon-size, 1rem );
+                border-right-width: 1px;
+
+                .k-icon:before {
+                    content: "\e016";
+                }
+            }
+        }
+    }
+
+}
+
+@mixin kendo-menu--extended-layout() {}

package/scss/menu/_theme.scss

@@ -0,0 +1,97 @@
+@use "../core/" as *;
+@use "../core/color-system" as *;
+@use '_variables' as *;
+
+@mixin kendo-menu--theme() {
+    .k-menu:not(.k-context-menu) {
+        color: var( --kendo-menu-text, #{$kendo-menu-text} );
+        background-color: var( --kendo-menu-bg, #{$kendo-menu-bg} );
+        border-color: var( --kendo-menu-border, #{$kendo-menu-border} );
+        box-shadow: var( --kendo-menu-shadow, #{$kendo-menu-shadow} );
+
+        > .k-item {
+            color: var( --kendo-menu-item-text, #{$kendo-menu-item-text} );
+            background-color: var( --kendo-menu-item-bg, #{$kendo-menu-item-bg} );
+
+            &:hover,
+            &.k-hover {
+                color: var( --kendo-menu-item-hover-text, #{$kendo-menu-item-hover-text} );
+                background-color: var( --kendo-menu-item-hover-bg, #{$kendo-menu-item-hover-bg} );
+            }
+
+            &:focus,
+            &.k-focus {
+                color: var( --kendo-menu-item-focus-text, #{$kendo-menu-item-focus-text} );
+                background-color: var( --kendo-menu-item-focus-bg, #{$kendo-menu-item-focus-bg} );
+                outline-color: var( --kendo-menu-item-focus-outline, #{$kendo-menu-item-focus-outline} );
+            }
+
+            &:active,
+            &.k-active {
+                color: var( --kendo-menu-item-expanded-text, #{$kendo-menu-item-expanded-text} );
+                background-color: var( --kendo-menu-item-expanded-bg, #{$kendo-menu-item-expanded-bg} );
+            }
+
+            &.k-disabled {
+                color: var( --kendo-menu-item-disabled-text, #{$kendo-menu-item-disabled-text} );
+                background-color: var( --kendo-menu-item-disabled-bg, #{$kendo-menu-item-disabled-bg} );
+            }
+        }
+
+        .k-link > .k-icon {
+            color: var( --kendo-menu-icon-color, $kendo-menu-icon-color );
+        }
+
+    }
+
+    .k-menu-popup {
+        box-shadow: var( --kendo-menu-popup-shadow, #{$kendo-menu-popup-shadow} );
+    }
+
+    .k-menu-group,
+    .k-menu.k-context-menu {
+        background-color: var( --kendo-menu-popup-bg, #{$kendo-menu-popup-bg} );
+        border-color: var( --kendo-menu-popup-border, #{$kendo-menu-popup-border} );
+
+        .k-item {
+
+            & > .k-link {
+                color: var( --kendo-menu-popup-item-text, #{$kendo-menu-popup-item-text} );
+                background-color: var( --kendo-menu-popup-item-bg, #{$kendo-menu-popup-item-bg} );
+
+                &:hover,
+                &.k-hover {
+                    color: var( --kendo-menu-popup-item-hover-text, #{$kendo-menu-popup-item-hover-text} );
+                    background-color: var( --kendo-menu-popup-item-hover-bg, #{$kendo-menu-popup-item-hover-bg} );
+                }
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    color: var( --kendo-menu-popup-item-expanded-text, #{$kendo-menu-popup-item-expanded-text} );
+                    background-color: var( --kendo-menu-popup-item-expanded-bg, #{$kendo-menu-popup-item-expanded-bg} );
+                }
+
+                &.k-disabled {
+                    color: var( --kendo-menu-popup-item-disabled-text, #{$kendo-menu-popup-item-disabled-text} );
+                    background-color: var( --kendo-menu-popup-item-disabled-bg, #{$kendo-menu-popup-item-disabled-bg} );
+                }
+            }
+
+            &:focus-visible,
+            &.k-focus {
+
+                > .k-link {
+                    outline-color: var( --kendo-menu-popup-item-focus-outline, #{$kendo-menu-popup-item-focus-outline} );
+                }
+            }
+        }
+    }
+
+    .k-menu-scroll-wrapper .k-menu-scroll-button {
+        border-color: var( --kendo-menu-scroll-btn-bg, transparent );
+        background-color: var( --kendo-menu-scroll-btn-bg, var( --kendo-body-bg, #{$kendo-body-bg} ) );
+    }
+}
+
+@mixin kendo-menu--extended-theme() {}