@progress/kendo-theme-fluent 5.7.0

package/scss/loader/_variables.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Border radius of the loader segment.
+/// @group loader
+$kendo-loader-segment-border-radius: 50% !default;
+
+/// Size of the loader segment.
+/// @group loader
+$kendo-loader-segment-size-sm: map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-segment-size-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-segment-size-lg: map-get( $kendo-spacing, 4 ) !default;
+
+/// Horizontal padding of the loader.
+/// @group loader
+$kendo-loader-padding-x-sm: calc( #{$kendo-loader-segment-size-sm} / 2 ) !default;
+$kendo-loader-padding-x-md: calc( #{$kendo-loader-segment-size-md} / 2 ) !default;
+$kendo-loader-padding-x-lg: calc( #{$kendo-loader-segment-size-lg} / 2 ) !default;
+
+/// Vertical padding of the loader.
+/// @group loader
+$kendo-loader-padding-y-sm: calc( #{$kendo-loader-segment-size-sm} / 2 ) !default;
+$kendo-loader-padding-y-md: calc( #{$kendo-loader-segment-size-md} / 2 ) !default;
+$kendo-loader-padding-y-lg: calc( #{$kendo-loader-segment-size-lg} / 2 ) !default;
+
+/// Equilateral height of the loader.
+/// @group loader
+$kendo-loader-equilateral-height: .8660254038 !default;
+
+/// Width of the spinner-3 loader.
+/// @group loader
+$kendo-loader-spinner-3-width-sm: calc( #{$kendo-loader-segment-size-sm} * 4 ) !default;
+$kendo-loader-spinner-3-width-md: calc( #{$kendo-loader-segment-size-md} * 4 ) !default;
+$kendo-loader-spinner-3-width-lg: calc( #{$kendo-loader-segment-size-lg} * 4 ) !default;
+
+/// Height of the spinner-3 loader.
+/// @group loader
+$kendo-loader-spinner-3-height-sm: calc( #{$kendo-loader-spinner-3-width-sm} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-spinner-3-height-md: calc( #{$kendo-loader-spinner-3-width-md} * #{$kendo-loader-equilateral-height} ) !default;
+$kendo-loader-spinner-3-height-lg: calc( #{$kendo-loader-spinner-3-width-lg} * #{$kendo-loader-equilateral-height} ) !default;
+
+/// Width of the spinner-4 loader.
+/// @group loader
+$kendo-loader-spinner-4-width-sm: calc( #{$kendo-loader-segment-size-sm} * 4 ) !default;
+$kendo-loader-spinner-4-width-md: calc( #{$kendo-loader-segment-size-md} * 4 ) !default;
+$kendo-loader-spinner-4-width-lg: calc( #{$kendo-loader-segment-size-lg} * 4 ) !default;
+
+/// Height of the spinner-4 loader.
+/// @group loader
+$kendo-loader-spinner-4-height-sm: $kendo-loader-spinner-4-width-sm !default;
+$kendo-loader-spinner-4-height-md: $kendo-loader-spinner-4-width-md !default;
+$kendo-loader-spinner-4-height-lg: $kendo-loader-spinner-4-width-lg !default;
+
+/// Border width of the container panel.
+/// @group loader
+$kendo-loader-container-panel-border-width: 1px !default;
+/// Border style of the container panel.
+/// @group loader
+$kendo-loader-container-panel-border-style: solid !default;
+/// Border color of the container panel.
+/// @group loader
+$kendo-loader-container-panel-border-color: var( --kendo-component-border, initial ) !default;
+/// Border radius of the container panel.
+/// @group loader
+$kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Background color of the container panel.
+/// @group loader
+$kendo-loader-container-panel-bg: $white !default;
+
+/// Horizontal padding of the loader container.
+/// @group loader
+$kendo-loader-container-padding-x-sm: map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-container-padding-x-md: map-get( $kendo-spacing, 5 ) !default;
+$kendo-loader-container-padding-x-lg: map-get( $kendo-spacing, 6 ) !default;
+
+/// Vertical padding of the loader container.
+/// @group loader
+$kendo-loader-container-padding-y-sm: map-get( $kendo-spacing, 4 ) !default;
+$kendo-loader-container-padding-y-md: map-get( $kendo-spacing, 5 ) !default;
+$kendo-loader-container-padding-y-lg: map-get( $kendo-spacing, 6 ) !default;
+
+/// Gap of the loader container.
+/// @group loader
+$kendo-loader-container-gap-sm: map-get( $kendo-spacing, 1 ) !default;
+$kendo-loader-container-gap-md: map-get( $kendo-spacing, 2 ) !default;
+$kendo-loader-container-gap-lg: map-get( $kendo-spacing, 3 ) !default;
+
+/// Font size of the loader container.
+/// @group loader
+$kendo-loader-container-font-size-sm: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-loader-container-font-size-md: var( --kendo-font-size-md, inherit ) !default;
+$kendo-loader-container-font-size-lg: var( --kendo-font-size-lg, inherit ) !default;
+
+/// Theme variations for the loader.
+$kendo-loader-brand-colors: (
+    primary: primary,
+    secondary: neutral,
+    tertiary: tertiary,
+    error: error,
+    success: success,
+    warning: warning,
+    info: info
+ );
+
+ // Matrix with loader theme colors in the order: bg, color, border
+$_tc-loader-matrix: (
+    (normal: (100, null, null)),
+);
+
+$_tc-loader-dark-matrix: (
+    (normal: (160, null, null)),
+);
+
+$_tc-loader-light-matrix: (
+    (normal: (50, null, null)),
+);
+
+/// Theme colors map for the loader variations.
+$kendo-loader-theme-colors: ();
+
+@each $ui-states in $_tc-loader-matrix {
+    @each $brand-color, $palette in $kendo-loader-brand-colors {
+        $kendo-loader-theme-colors: map.deep-merge(
+            $kendo-loader-theme-colors,
+            generate-theme-variation( $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $ui-states in $_tc-loader-dark-matrix {
+    $kendo-loader-theme-colors: map.deep-merge(
+        $kendo-loader-theme-colors,
+        generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-loader-light-matrix {
+    $kendo-loader-theme-colors: map.deep-merge(
+        $kendo-loader-theme-colors,
+        generate-theme-variation( light, neutral, $ui-states )
+    );
+}

package/scss/loader/index.scss

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

package/scss/map/_index.scss

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

package/scss/map/_layout.scss

@@ -0,0 +1,134 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-map--layout() {
+
+    // Layout
+    .k-map {
+        height: var( --kendo-map-height, #{$kendo-map-height} );
+        box-sizing: border-box;
+        border-width: var( --kendo-map-border-width, #{$kendo-map-border-width} );
+        border-style: solid;
+        font-size: var( --kendo-map-font-size, #{$kendo-map-font-size} );
+        line-height: var( --kendo-map-line-height, #{$kendo-map-line-height} );
+        font-family: var( --kendo-map-font-family, #{$kendo-map-font-family} );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+
+        // Scroll
+        .km-scroll-wrapper {
+            width: 100%;
+            height: 100%;
+            user-select: none;
+            position: absolute;
+        }
+        .km-scroll-container { height: 100%; }
+        .k-touch-scrollbar { display: none; }
+
+        // Layers
+        .k-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        // Marker
+        .k-marker {
+            transform: translate(-50%, -100%);
+            font-size: var( --kendo-map-marker-size, #{$kendo-map-marker-size} );
+            cursor: pointer;
+            position: absolute;
+            overflow: visible;
+        }
+
+
+        // Attribution
+        .k-attribution {
+            padding-inline: var( --kendo-map-attribution-padding-x, #{$kendo-map-attribution-padding-x} );
+            padding-block: var( --kendo-map-attribution-padding-y, #{$kendo-map-attribution-padding-y} );
+            border-width: 0;
+            font-size: var( --kendo-map-attribution-font-size, #{$kendo-map-attribution-font-size} );
+            z-index: 1000;
+        }
+    }
+
+
+    // Controls
+    .k-map-controls {
+        position: absolute;
+        display: flex;
+        align-items: center;
+    }
+
+
+    // Navigator
+    .k-navigator {
+        margin-inline: var( --kendo-map-navigator-margin-x, #{$kendo-map-navigator-margin-x} );
+        margin-block: var( --kendo-map-navigator-margin-y, #{$kendo-map-navigator-margin-y} );
+        width: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
+        height: var( --kendo-map-navigator-width, #{$kendo-map-navigator-width} );
+        border-width: var( --kendo-map-navigator-border-width, #{$kendo-map-navigator-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        border-radius: 50%;
+        position: relative;
+
+        .k-pdf-export & { display: none; }
+
+
+        // Buttons
+        .k-button {
+            padding: 0;
+            width: auto;
+            height: auto;
+            line-height: 1;
+            box-shadow: none;
+            position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
+        }
+        .k-navigator-n,
+        .k-navigator-up {
+            transform: translateX(-50%);
+            top: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
+            left: 50%;
+        }
+        .k-navigator-e,
+        .k-navigator-right {
+            transform: translateY(-50%);
+            right: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
+            top: 50%;
+        }
+        .k-navigator-s,
+        .k-navigator-down {
+            transform: translateX(-50%);
+            bottom: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
+            left: 50%;
+        }
+        .k-navigator-w,
+        .k-navigator-left {
+            transform: translateY(-50%);
+            left: var( --kendo-map-navigator-padding, #{$kendo-map-navigator-padding} );
+            top: 50%;
+        }
+    }
+
+
+    // Zoom control
+    .k-zoom-control {
+        margin-inline-start: var( --kendo-map-zoom-control-margin, #{$kendo-map-zoom-control-margin} );
+        border: 0;
+        background: none;
+        display: flex;
+
+        .k-pdf-export & { display: none; }
+    }
+
+}

package/scss/map/_theme.scss

@@ -0,0 +1,32 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-map--theme() {
+
+    .k-map {
+        @include fill(
+            var( --kendo-map-text, #{$kendo-map-text} ),
+            var( --kendo-map-bg, #{$kendo-map-bg} ),
+            var( --kendo-map-border, #{$kendo-map-border} )
+        );
+
+        .k-navigator,
+        .k-zoom-control {
+            background-color: var( --kendo-map-navigator-bg, #{$kendo-map-navigator-bg} );
+            border-color: var( --kendo-map-navigator-border, #{$kendo-map-navigator-border} );
+
+            .k-button {
+                color: var( --kendo-map-navigator-text, #{$kendo-map-navigator-text} );
+            }
+        }
+
+        .k-marker {
+            color: var( --kendo-map-marker-fill, #{$kendo-map-marker-fill} );
+        }
+
+        .k-attribution {
+            background-color: var( --kendo-map-attribution-bg, #{$kendo-map-attribution-bg} );
+        }
+    }
+
+}

package/scss/map/_variables.scss

@@ -0,0 +1,88 @@
+@use "../core/color-system" as *;
+@use "../core/_variables" as *;
+@use "../button/_variables.scss" as *;
+
+/// Font size of the map.
+/// @group map
+$kendo-map-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the map.
+/// @group map
+$kendo-map-line-height: var( --kendo-line-height, normal ) !default;
+/// Font family of the map.
+/// @group map
+$kendo-map-font-family: var( --kendo-font-family, normal ) !default;
+
+/// Background color of the map.
+/// @group map
+$kendo-map-bg: var( --kendo-component-bg, transparent ) !default;
+/// Text color of the map.
+/// @group map
+$kendo-map-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the map.
+/// @group map
+$kendo-map-border: get-theme-color-var( neutral-110 ) !default;
+
+/// Border width of the map.
+/// @group map
+$kendo-map-border-width: 0px !default;
+/// Height of the map.
+/// @group map
+$kendo-map-height: 600px !default;
+
+/// Map navigator horizontal margin.
+/// @group map
+$kendo-map-navigator-margin-x: map-get( $kendo-spacing, 4 ) !default;
+/// Map navigator vertical margin.
+/// @group map
+$kendo-map-navigator-margin-y: map-get( $kendo-spacing, 4 ) !default;
+/// Map navigator padding.
+/// @group map
+$kendo-map-navigator-padding: map-get( $kendo-spacing, thin ) !default;
+/// Map navigator width.
+/// @group map
+$kendo-map-navigator-width: calc( var(--kendo-icon-size) * 3 + #{$kendo-map-navigator-padding * 2} ) !default;
+/// Map navigator height.
+/// @group map
+$kendo-map-navigator-height: $kendo-map-navigator-width !default;
+/// Map navigator border width.
+/// @group map
+$kendo-map-navigator-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Map navigator background color.
+/// @group map
+$kendo-map-navigator-bg: $white !default;
+/// Map navigator text color.
+/// @group map
+$kendo-map-navigator-text: get-theme-color-var( neutral-190 ) !default;
+/// Map navigator border color.
+/// @group map
+$kendo-map-navigator-border: get-theme-color-var( neutral-110 ) !default;
+
+/// Map zoom control margin.
+/// @group map
+$kendo-map-zoom-control-margin: map-get( $kendo-spacing, 4 ) !default;
+/// Map zoom control horizontal padding.
+/// @group map
+$kendo-map-zoom-control-button-padding-x: $kendo-button-padding-y-md !default;
+/// Map zoom control vertical padding.
+/// @group map
+$kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;
+
+/// Map attribution horizontal padding.
+/// @group map
+$kendo-map-attribution-padding-x: $kendo-padding-x-sm !default;
+/// Map attribution vertical padding.
+/// @group map
+$kendo-map-attribution-padding-y: $kendo-padding-y-sm !default;
+/// Map attribution font size.
+/// @group map
+$kendo-map-attribution-font-size: calc( $kendo-map-font-size * .75 ) !default;
+/// Map attribution background color.
+/// @group map
+$kendo-map-attribution-bg: $white !default;
+
+/// Map marker size.
+/// @group map
+$kendo-map-marker-size: var( --kendo-icon-size-lg, 1rem ) !default;
+/// Map marker fill color.
+/// @group map
+$kendo-map-marker-fill: get-theme-color-var( primary-100 ) !default;

package/scss/maskedtextbox/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-maskedtextbox--layout() {
+
+    // Masked textbox
+    .k-maskedtextbox {}
+
+}

package/scss/maskedtextbox/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-maskedtextbox--theme() {
+
+    // Masked textbox
+    .k-maskedtextbox {}
+
+}

package/scss/maskedtextbox/_variables.scss

@@ -0,0 +1 @@
+// Masked texbox

package/scss/maskedtextbox/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "maskedtextbox",
+    dependencies: (
+        "input",
+        "floating-label",
+        "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( "maskedtextbox" ) {
+        @include kendo-maskedtextbox--layout();
+        @include kendo-maskedtextbox--theme();
+    }
+}

package/scss/mediaplayer/_layout.scss

@@ -0,0 +1,102 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-mediaplayer--layout() {
+
+    // Base
+    .k-mediaplayer {
+        border-width: var( --kendo-mediaplayer-border-width, #{$kendo-mediaplayer-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-mediaplayer-font-family, #{$kendo-mediaplayer-font-family} );
+        font-size: var( --kendo-mediaplayer-font-size, #{$kendo-mediaplayer-font-size} );
+        line-height: var( --kendo-mediaplayer-line-height, #{$kendo-mediaplayer-line-height} );
+        display: block;
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        > iframe {
+            width: 100%;
+            height: 100%;
+            border: 0;
+            vertical-align: top;
+        }
+    }
+
+
+    // Overlay
+    .k-mediaplayer-overlay {
+        height: 100%;
+    }
+
+
+    // Title bar
+    .k-mediaplayer-titlebar {
+        padding-inline: var( --kendo-mediaplayer-titlebar-padding-x, #{$kendo-mediaplayer-titlebar-padding-x} );
+        padding-block: var( --kendo-mediaplayer-titlebar-padding-y, #{$kendo-mediaplayer-titlebar-padding-y} );
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+
+    // Toolbar
+    .k-mediaplayer-toolbar-wrap {
+        position: absolute;
+        z-index: 2;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    .k-mediaplayer-toolbar {
+        border-width: 0;
+        // sass-lint:disable no-important
+        width: 100% !important;
+        // sass-lint:enable no-important
+        box-shadow: none;
+
+        .k-dropdown-list {
+            width: auto;
+        }
+    }
+    .k-mediaplayer-time-wrap {
+        flex: 1;
+    }
+
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
+
+
+    // Seekbar
+    .k-mediaplayer-seekbar {
+        width: 100%;
+        position: absolute;
+        z-index: 3;
+        top: 0;
+        left: 0;
+        transform: translateY( -50% );
+    }
+
+    .k-mediaplayer-fullscreen {
+        z-index: 10000;
+        position: fixed;
+        top: 0;
+        left: 0;
+        // sass-lint:disable no-important
+        width: 100% !important;
+        height: 100% !important;
+        // sass-lint:enable no-important
+    }
+
+}

package/scss/mediaplayer/_theme.scss

@@ -0,0 +1,29 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-mediaplayer--theme() {
+
+    .k-mediaplayer {
+        @include fill(
+            var( --kendo-mediaplayer-text, #{$kendo-mediaplayer-text} ),
+            var( --kendo-mediaplayer-bg, #{$kendo-mediaplayer-bg} ),
+            var( --kendo-mediaplayer-border, #{$kendo-mediaplayer-border} )
+        );
+    }
+
+
+    .k-mediaplayer-overlay {
+        background-color: var( --kendo-mediaplayer-overlay-bg, #{$kendo-mediaplayer-overlay-bg} );
+    }
+
+
+    .k-mediaplayer-titlebar {
+        color: var( --kendo-mediaplayer-titlebar-text, #{$kendo-mediaplayer-titlebar-text} );
+        background-color: var( --kendo-mediaplayer-titlebar-bg, #{$kendo-mediaplayer-titlebar-bg} );
+    }
+
+
+    .k-mediaplayer-quality {
+        border-color: var( --kendo-mediaplayer-quality-border, #{$kendo-mediaplayer-quality-border} );
+    }
+}

package/scss/mediaplayer/_variables.scss

@@ -0,0 +1,46 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Border width of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-border-width: map-get( $kendo-spacing, hair ) !default;
+/// Font family of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the mediaplayer.
+/// @group mediaplayer
+$kendo-mediaplayer-border: var( --kendo-component-border, inherit ) !default;
+
+/// Mediaplayer overlay background color.
+/// @group mediaplayer
+$kendo-mediaplayer-overlay-bg: get-theme-color-var( neutral-130 ) !default;
+
+/// Mediaplayer quality button border color.
+/// @group mediaplayer
+$kendo-mediaplayer-quality-border: get-theme-color-var( neutral-110 ) !default;
+
+/// Mediaplayer titlebar horizontal padding.
+/// @group mediaplayer
+$kendo-mediaplayer-titlebar-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Mediaplayer titlebar vertical padding.
+/// @group mediaplayer
+$kendo-mediaplayer-titlebar-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Mediaplayer titlebar background color.
+/// @group mediaplayer
+$kendo-mediaplayer-titlebar-bg: rgba( $black, .4 ) !default;
+/// Mediaplayer titlebar text color.
+/// @group mediaplayer
+$kendo-mediaplayer-titlebar-text: $kendo-mediaplayer-bg !default;