@progress/kendo-theme-fluent 5.7.0

package/scss/radio/_variables.scss

@@ -0,0 +1,203 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../core/functions/" as *;
+@use "../checkbox/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+// Radio button
+
+/// Border radius of radio button.
+/// @group radio
+$kendo-radio-border-radius: 50% !default;
+/// Border width of radio button.
+/// @group radio
+$kendo-radio-border-width: 1px !default;
+
+// Radio button sizes
+$kendo-radio-sizes: (
+    sm: (
+        size: map-get( $kendo-spacing, 4 ),
+        glyph-size: ( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) ),
+        ripple-size: map-get( $kendo-spacing, 4 ) * 3,
+        checked-border-width: map-get( $kendo-spacing, 1 ),
+        checked-position: ( map-get( $kendo-spacing, 1 ) - map-get( $kendo-spacing, hair ))
+    ),
+    md: (
+        size: map-get( $kendo-spacing, 5 ),
+        glyph-size: ( map-get( $kendo-spacing, 5 ) - map-get( $kendo-spacing, thin ) ),
+        ripple-size: map-get( $kendo-spacing, 5 ) * 3,
+        checked-border-width: ( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, hair )),
+        checked-position: map-get( $kendo-spacing, 1 )
+    ),
+    lg: (
+        size: map-get( $kendo-spacing, 6 ),
+        glyph-size: ( map-get( $kendo-spacing, 6 ) - map-get( $kendo-spacing, thin ) ),
+        ripple-size: map-get( $kendo-spacing, 6 ) * 3,
+        checked-border-width: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, thin )),
+        checked-position: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, hair ))
+    )
+) !default;
+
+/// Default width of radio button.
+/// @group radio
+$kendo-radio-width: map-get( $kendo-spacing, 5 ) !default;
+/// Default height of radio button.
+/// @group radio
+$kendo-radio-height: map-get( $kendo-spacing, 5 ) !default;
+/// Default font size of radio button.
+/// @group radio
+$kendo-radio-font-size: ( map-get( $kendo-spacing, 5 ) - map-get( $kendo-spacing, thin ) ) !default;
+/// Default ripple width of radio button.
+/// @group radio
+$kendo-radio-ripple-width: calc( map-get( $kendo-spacing, 5 ) * 3 ) !default;
+/// Default ripple height of radio button.
+/// @group radio
+$kendo-radio-ripple-height: calc( map-get( $kendo-spacing, 5 ) * 3 ) !default;
+
+/// Background color of radio button.
+/// @group radio
+$kendo-radio-bg: $kendo-checkbox-bg !default;
+/// Color of radio button.
+/// @group radio
+$kendo-radio-text: $kendo-checkbox-text !default;
+/// Border color of radio button.
+/// @group radio
+$kendo-radio-border: $kendo-checkbox-border !default;
+
+/// Background color of hovered radio button.
+/// @group radio
+$kendo-radio-hover-bg: $kendo-checkbox-hover-bg !default;
+/// Color of hovered radio button.
+/// @group radio
+$kendo-radio-hover-text: $kendo-checkbox-hover-text !default;
+/// Border color of hovered radio button.
+/// @group radio
+$kendo-radio-hover-border: $kendo-radio-border !default;
+/// Border color of hovered radio button.
+/// @group radio
+$kendo-radio-hover-color: get-theme-color-var( neutral-130 )!default;
+
+/// Border of hovered and checked radio.
+/// @group checkbox
+$kendo-radio-checked-hover-border: get-theme-color-var( primary-110 ) !default;
+
+/// Top position of checked radio button.
+/// @group checked
+$kendo-radio-checked-top: map-get( $kendo-spacing, 1 ) !default;
+/// Left position of checked radio button.
+/// @group checked
+$kendo-radio-checked-left: map-get( $kendo-spacing, 1 ) !default;
+/// Border width of checked radio button.
+/// @group radio
+$kendo-radio-checked-border-width: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, hair) ) !default;
+/// Width of checked radio button.
+/// @group radio
+$kendo-radio-checked-width: calc( $kendo-radio-width / 2 ) !default;
+/// Height of checked radio button.
+/// @group radio
+$kendo-radio-checked-height: calc( $kendo-radio-height / 2 ) !default;
+/// Background color of checked radio button.
+/// @group radio
+$kendo-radio-checked-bg: var( --kendo-component-bg, initial ) !default;
+/// Color of checked radio button.
+/// @group radio
+$kendo-radio-checked-text: get-theme-color-var( primary-100 ) !default;
+/// Border color of checked radio button.
+/// @group radio
+$kendo-radio-checked-border: $kendo-checkbox-checked-border !default;
+
+/// Border color of focused radio button.
+/// @group radio
+$kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
+/// Box shadow of focused radio button.
+/// @group radio
+$kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
+/// Border color of focused and checked radio button.
+/// @group radio
+$kendo-radio-focus-checked-border: get-theme-color-var( neutral-130 ) !default;
+/// Box shadow of focused and checked radio button.
+/// @group radio
+$kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
+
+/// Background color of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
+/// Color of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-text: $kendo-checkbox-disabled-text !default;
+/// Border color of disabled radio button.
+/// @group radio
+$kendo-radio-disabled-border: get-theme-color-var( neutral-60 ) !default;
+
+/// Background color of disabled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-bg: $kendo-radio-checked-bg !default;
+/// Color of disabled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
+/// Border color of disabled and checked radio button.
+/// @group radio
+$kendo-radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
+
+/// Background color of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
+/// Color of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
+/// Border color of invalid radio button.
+/// @group radio
+$kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;
+
+
+// Radio indicator
+
+/// Type of radio button indicator.
+/// @group radio
+$kendo-radio-indicator-type: image !default;
+
+/// Glyph font family of radio button indicator.
+/// @group radio
+$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// Glyph of radio button indicator.
+/// @group radio
+$kendo-radio-checked-glyph: "\e308" !default;
+
+/// Image of checked radio button indicator.
+/// @group radio
+$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+/// Image of disabled and checked radio button indicator.
+/// @group radio
+$kendo-radio-disabled-checked-image: null !default;
+
+
+// Radio label
+
+/// The horizontal margin of the radio button inside of a label.
+/// @group radio
+$kendo-radio-label-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+
+// Radio list
+
+/// The horizontal list item margin of radio button.
+/// @group radio
+$kendo-radio-list-spacing: map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal list item padding of radio button.
+/// @group radio
+$kendo-radio-list-item-padding-x: 0px !default;
+/// The vertical list item padding of radio button.
+/// @group radio
+$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+///
+/// @group radio
+$kendo-radio-list-item-gap: map-get( $kendo-spacing, 2 ) !default;
+
+// Radio ripple
+
+/// Background color of radio button ripple.
+/// @group radio
+$kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
+/// Opacity of radio button ripple.
+/// @group radio
+$kendo-radio-ripple-opacity: .25 !default;

package/scss/radio/index.scss

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

package/scss/rating/_layout.scss

@@ -0,0 +1,98 @@
+@use "../core" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-rating--layout() {
+
+    // Rating
+    .k-rating {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        box-sizing: border-box;
+        outline: 0;
+        font-size: var( --kendo-rating-font-size, #{$kendo-rating-font-size} );
+        font-family: var( --kendo-rating-font-family, #{$kendo-rating-font-family} );
+        line-height: var( --kendo-rating-line-height, #{$kendo-rating-line-height} );
+        display: inline-flex;
+        gap: var( --kendo-rating-spacing, #{$kendo-rating-spacing} );
+        background: none;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &.k-readonly {
+            pointer-events: none;
+        }
+    }
+
+    // Items wrapper
+    .k-rating-container {
+        position: relative;
+        flex: 0 1 auto;
+    }
+
+    // Item
+    .k-rating-item {
+        margin: 0;
+        padding-inline: var( --kendo-rating-item-padding-x, #{$kendo-rating-item-padding-x} );
+        padding-block: var( --kendo-rating-item-padding-y, #{$kendo-rating-item-padding-y} );
+        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+        outline: 0;
+        transition: color 200ms ease-out 0s;
+
+        * {
+            pointer-events: none;
+        }
+
+        .k-icon {
+            font-size: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
+        }
+
+        svg {
+            fill: currentColor;
+        }
+
+        &:focus,
+        &.k-focus {
+            outline-width: var( --kendo-rating-item-focus-outline-width, #{$kendo-rating-item-focus-outline-width} );
+            outline-style: var( --kendo-rating-item-focus-outline-style, #{$kendo-rating-item-focus-outline-style} );
+            outline-offset: -#{$kendo-rating-item-focus-outline-width};
+        }
+    }
+
+    // Label
+    .k-rating-label {
+        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    // Precision
+    .k-rating-precision-part,
+    .k-rating-precision-complement {
+        display: inherit;
+        position: absolute;
+        top: var( --kendo-rating-item-padding-y, #{$kendo-rating-item-padding-y} );
+        inset-inline-start: var( --kendo-rating-item-padding-x, #{$kendo-rating-item-padding-x} );
+        overflow: hidden;
+    }
+
+    .k-rating-precision-complement {
+        direction: rtl;
+
+        .k-rtl &,
+        [dir="rtl"] & {
+            direction: ltr;
+        }
+    }
+
+}

package/scss/rating/_theme.scss

@@ -0,0 +1,46 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-rating--theme() {
+
+    .k-rating-item {
+        @include fill(
+            $color: var( --kendo-rating-item-text, #{$kendo-rating-item-text} )
+        );
+
+        &.k-selected {
+            @include fill(
+                $color: var( --kendo-rating-item-selected-text, #{$kendo-rating-item-selected-text} )
+            );
+
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $color: var( --kendo-rating-item-selected-hover-text, #{$kendo-rating-item-selected-hover-text} )
+                );
+            }
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $color: var( --kendo-rating-item-hover-text, #{$kendo-rating-item-hover-text} )
+            );
+            cursor: pointer;
+        }
+
+        &:focus,
+        &.k-focus {
+            outline-color: var( --kendo-rating-item-focus-outline, #{$kendo-rating-item-focus-outline} );
+        }
+
+        &.k-disabled {
+            @include disabled(
+                var( --kendo-disabled-text, inherit ),
+                inherit,
+                var( --kendo-disabled-border, inherit )
+            );
+        }
+    }
+}

package/scss/rating/_variables.scss

@@ -0,0 +1,50 @@
+@use "../core/index.scss" as *;
+
+/// Font family of the rating.
+/// @group rating
+$kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the rating.
+/// @group rating
+$kendo-rating-font-size: var(--kendo-font-size-sm, inherit ) !default;
+/// Line height of the rating.
+/// @group rating
+$kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Content spacing of the rating.
+/// @group rating
+$kendo-rating-spacing: map-get( $kendo-spacing, 1 ) !default;
+
+/// Horizontal padding of the rating item.
+/// @group rating
+$kendo-rating-item-padding-x: map-get( $kendo-spacing, thin ) !default;
+/// Vertical padding of the rating item.
+/// @group rating
+$kendo-rating-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Normal color of the rating item.
+/// @group rating
+$kendo-rating-item-text: get-theme-color-var( neutral-130 ) !default;
+/// Hover color of the rating item.
+/// @group rating
+$kendo-rating-item-hover-text: get-theme-color-var( primary-100 ) !default;
+/// Focus color of the rating item.
+/// @group rating
+$kendo-rating-item-focus-text: $kendo-rating-item-text !default;
+/// Outline width of the focused rating item.
+/// @group rating
+$kendo-rating-item-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+/// Outline style of the focused rating item.
+/// @group rating
+$kendo-rating-item-focus-outline-style: solid !default;
+/// Outline color of the focused rating item.
+/// @group rating
+$kendo-rating-item-focus-outline: currentColor !default;
+/// Selected color of the rating item.
+/// @group rating
+$kendo-rating-item-selected-text: get-theme-color-var( neutral-160 ) !default;
+/// Selected hover color of the rating item.
+/// @group rating
+$kendo-rating-item-selected-hover-text: get-theme-color-var( primary-120 ) !default;
+
+/// Icon size of the rating.
+/// @group rating
+$kendo-rating-icon-size: calc( var( --kendo-icon-size, 1rem ) * #{$kendo-line-height} ) !default;

package/scss/rating/index.scss

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

package/scss/responsivepanel/_layout.scss

@@ -0,0 +1,51 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-responsivepanel--layout() {
+
+    .k-rpanel {}
+
+    // Variants
+    .k-rpanel-left,
+    .k-rpanel-right {
+        position: fixed;
+        display: block;
+        overflow: auto;
+        min-width: 320px;
+        height: 100%;
+        top: 0;
+
+        & + * {
+            overflow: auto;
+        }
+
+        &.k-rpanel-expanded {
+            transform: translateX(0) translateZ(0);
+        }
+    }
+    .k-rpanel-left {
+        transform: translateX(-100%) translateZ(0);
+        left: 0;
+    }
+    .k-rpanel-right {
+        transform: translateX(100%) translateZ(0);
+        right: 0;
+    }
+
+    // Top
+    .k-rpanel-top {
+        position: static;
+        max-height: 0;
+    }
+    .k-rpanel-top.k-rpanel-expanded {
+        max-height: 568px;
+        // sass-lint:disable no-important
+        overflow: visible !important;
+        // sass-lint:enable no-important
+    }
+
+    // Toggle button
+    .k-rpanel-toggle {
+        touch-action: manipulation;
+    }
+
+}

package/scss/responsivepanel/_theme.scss

@@ -0,0 +1,5 @@
+@mixin kendo-responsivepanel--theme() {
+
+    .k-rpanel {}
+
+}

package/scss/responsivepanel/_variables.scss

@@ -0,0 +1 @@
+// Responsive panel

package/scss/responsivepanel/index.scss

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

package/scss/ripple/_layout.scss

@@ -0,0 +1,53 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-ripple--layout() {
+
+    .k-ripple-target {
+        position: relative;
+    }
+
+    .k-ripple {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        overflow: hidden;
+        pointer-events: none;
+    }
+
+    .k-ripple-blob {
+        pointer-events: none;
+        position: absolute;
+        border-radius: 50%;
+        padding: 0;
+        transform: translate(-50%, -50%) scale(0);
+        transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
+        opacity: .1;
+        background-color: currentColor;
+
+        .k-primary & {
+            opacity: .2;
+        }
+    }
+
+    .k-ripple-focus::after {
+        visibility: visible;
+        animation: ripple 600ms ease-out;
+    }
+
+    @keyframes ripple {
+        0% {
+            transform: scale(0);
+        }
+        20% {
+            transform: scale(1);
+        }
+        100% {
+            opacity: 0;
+            transform: scale(1);
+        }
+    }
+
+}

package/scss/ripple/_theme.scss

@@ -0,0 +1,5 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-ripple--theme() {
+    .k-ripple { }
+}

package/scss/ripple/_variables.scss

@@ -0,0 +1 @@
+// Ripple variables

package/scss/ripple/index.scss

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